<template>
  <div class="heat-param-see">
    <navigation-name :msg="msg"/>
    <br/>
    <jg-tab :tabs="tabs" active-tab="first" @onTabChange="onTabChange">
      <div style="display: flex;align-items: center">
        <div style="margin-right: 8px">当地常用大气压(MPa)</div>
        <div>
          <el-input :value="standardPressure" size="medium"/>
        </div>
        <div style="margin: 0 8px 0 24px">标准温度 (℃)</div>
        <div>
          <el-input :value="standardTemperature" size="medium"/>
        </div>
      </div>
    </jg-tab>
    <el-table
      :data="tableData"
      :header-cell-style="{
        background: '#BFBFBF',
        boxShadow: 'inset grey 0px -1px',
        color: '#333333',
        borderColor: '#eaeaea',
        fontSize: '20px',
      }"
      :cell-style="{
        background: '#f6f5f5',
        color: '#333333',
        borderColor: '#eaeaea',
        fontSize: '18px',
      }"
      row-key="id"
      border
      stripe
      style="width: 100%">
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :class-name="index === 0 ? 'flow-params-see' : ''"
        align="center"
      />
    </el-table>
    <div v-if="currentTab === 'second'" style="display: flex;justify-content: space-between;margin-top: 16px">
      <div style="display: flex;align-items: center">
        <div style="margin-right: 8px;font-weight: bolder;">修改时间</div>
        <div>
          <el-input :value="updateTime" size="medium"/>
        </div>
      </div>
      <div>
        <el-button style="width: 150px;font-weight: bolder;">上个记录</el-button>
        <el-button style="width: 150px;font-weight: bolder;margin-left: 100px">下个记录</el-button>
      </div>
      <div>
        <el-button style="width: 100px;font-weight: bolder;">确认</el-button>
        <el-button style="width: 100px;font-weight: bolder;margin-left: 80px">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavigationName from '@/components/NavigationName'
import JgTab from '@/components/JgTab'

export default {
  name: 'HeatParamSee',
  components: {
    JgTab,
    NavigationName
  },
  data () {
    return {
      msg: '流量参数查看',
      tabs: [
        {
          label: '成分设置',
          name: 'first'
        },
        {
          label: '修改记录',
          name: 'second'
        },
      ],
      tableColumns: [],
      tableData: [],
      currentTab: 'first',
      standardPressure: 0.101325,
      standardTemperature: 20,
      updateTime: '2023-01-17 16:09:09',
    }
  },
  watch: {
    currentTab: {
      handler(newVal) {
        switch (newVal) {
          case 'first':
            this.tableColumns = [
              {
                label: '计量站点',
                prop: 'meteringStation',
                chineseName: '计量站点'
              },
              {
                label: 'CH₄',
                prop: 'methane',
                chineseName: '甲烷'
              },
              {
                label: 'N₂',
                prop: 'nitrogen',
                chineseName: '氮气'
              },
              {
                label: 'CO₂',
                prop: 'carbonDioxide',
                chineseName: '二氧化碳'
              },
              {
                label: 'C₂H₆',
                prop: 'ethanol',
                chineseName: '乙醇'
              },
              {
                label: 'C₃H₈',
                prop: 'propane',
                chineseName: '丙烷'
              },
              {
                label: 'H₂O',
                prop: 'water',
                chineseName: '水'
              },
              {
                label: 'H₂S',
                prop: 'hydrogenSulfide',
                chineseName: '硫化氢'
              },
              {
                label: 'H₂',
                prop: 'hydrogen',
                chineseName: '氢气'
              },
              {
                label: 'CO',
                prop: 'carbonMonoxide',
                chineseName: '一氧化碳'
              },
              {
                label: 'O₂',
                prop: 'oxygen',
                chineseName: '氧气'
              },
              {
                label: 'i-C₄H₁₀',
                prop: 'alkaneSeries',
                chineseName: '烷烃系物'
              },
            ]
            this.tableData = [
              {
                id: 1,
                meteringStation: '中心计量站',
                methane: '鞍钢',
                nitrogen: '0.4399',
                ethanol: '5937',
                propane: '8.98675',
                water: '0.00000',
                hydrogenSulfide: '1.10420',
                hydrogen: '1.10420',
                carbonMonoxide: '1.10420',
                oxygen: '1.10420',
                alkaneSeries: '1.10420',
              },
              {
                id: 2,
                meteringStation: '中心计量站',
                methane: '鞍化肥',
                nitrogen: '0.4399',
                ethanol: '5937',
                propane: '8.98675',
                water: '0.00000',
                hydrogenSulfide: '1.10420',
                hydrogen: '1.10420',
                carbonMonoxide: '1.10420',
                oxygen: '1.10420',
                alkaneSeries: '1.10420',
              },
              {
                id: 3,
                meteringStation: '中心计量站',
                methane: '气站鼎盛',
                nitrogen: '0.4399',
                ethanol: '5937',
                propane: '8.98675',
                water: '0.00000',
                hydrogenSulfide: '1.10420',
                hydrogen: '1.10420',
                carbonMonoxide: '1.10420',
                oxygen: '1.10420',
                alkaneSeries: '1.10420',
              },
              {
                id: 4,
                meteringStation: '中心计量站',
                methane: '鞍化一',
                nitrogen: '0.4399',
                ethanol: '5937',
                propane: '8.98675',
                water: '0.00000',
                hydrogenSulfide: '1.10420',
                hydrogen: '1.10420',
                carbonMonoxide: '1.10420',
                oxygen: '1.10420',
                alkaneSeries: '1.10420',
              },
              {
                id: 5,
                meteringStation: '中心计量站',
                methane: '供鼎盛',
                nitrogen: '0.4399',
                ethanol: '5937',
                propane: '8.98675',
                water: '0.00000',
                hydrogenSulfide: '1.10420',
                hydrogen: '1.10420',
                carbonMonoxide: '1.10420',
                oxygen: '1.10420',
                alkaneSeries: '1.10420',
              },
              {
                id: 6,
                meteringStation: '中心计量站',
                methane: '鞍煤气',
                nitrogen: '0.4399',
                ethanol: '5937',
                propane: '8.98675',
                water: '0.00000',
                hydrogenSulfide: '1.10420',
                hydrogen: '1.10420',
                carbonMonoxide: '1.10420',
                oxygen: '1.10420',
                alkaneSeries: '1.10420',
              },
              {
                id: 7,
                meteringStation: '中心计量站',
                methane: '总进气',
                nitrogen: '0.4399',
                ethanol: '5937',
                propane: '8.98675',
                water: '0.00000',
                hydrogenSulfide: '1.10420',
                hydrogen: '1.10420',
                carbonMonoxide: '1.10420',
                oxygen: '1.10420',
                alkaneSeries: '1.10420',
              },
              {
                id: 8,
                meteringStation: '海南站',
                methane: '海南煤气',
                nitrogen: '6.6',
                carbonDioxide: '0.4399',
                ethanol: '5937',
                propane: '8.98675',
                water: '0.00000',
                hydrogenSulfide: '1.10420',
                hydrogen: '1.10420',
                carbonMonoxide: '1.10420',
                oxygen: '1.10420',
                alkaneSeries: '1.10420',
              },
              {
                id: 9,
                meteringStation: '海南站',
                methane: '海南总进气',
                nitrogen: '6.6',
                carbonDioxide: '0.4399',
                ethanol: '5937',
                propane: '8.98675',
                water: '0.00000',
                hydrogenSulfide: '1.10420',
                hydrogen: '1.10420',
                carbonMonoxide: '1.10420',
                oxygen: '1.10420',
                alkaneSeries: '1.10420',
              },
            ]
            break
          case 'second':
            this.tableColumns = [
              { label: '序号', prop: 'number', chineseName: '' },
              { label: '修改内容', prop: 'updateContent', chineseName: '' },
              { label: '修改前值', prop: 'beforeUpdate', chineseName: '' },
              { label: '修改后值', prop: 'afterUpdate', chineseName: '' },
            ]
            this.tableData = [
              { id: 1, number: '01', updateContent: '行业标准', beforeUpdate: '0', afterUpdate: 'sdhfdl' },
              { id: 2, number: '02', updateContent: '行业标准', beforeUpdate: '24.75', afterUpdate: 'sdhfdl' },
              { id: 3, number: '03', updateContent: '行业标准', beforeUpdate: '79.953', afterUpdate: '' },
              { id: 4, number: '04', updateContent: '行业标准', beforeUpdate: '79.953', afterUpdate: '' },
              { id: 5, number: '05', updateContent: '行业标准', beforeUpdate: '43.62', afterUpdate: '' },
              { id: 6, number: '06', updateContent: '行业标准', beforeUpdate: '52.25', afterUpdate: '' },
              { id: 7, number: '07', updateContent: '行业标准', beforeUpdate: '90.04', afterUpdate: '' },
              { id: 8, number: '08', updateContent: '行业标准', beforeUpdate: '18.64', afterUpdate: '' },
              { id: 9, number: '09', updateContent: '行业标准', beforeUpdate: '13.89', afterUpdate: '' },
              { id: 10, number: '10', updateContent: '行业标准', beforeUpdate: '72.4', afterUpdate: '' },
              { id: 11, number: '11', updateContent: '行业标准', beforeUpdate: '0.00', afterUpdate: '' },
            ]
            break
          default:
            break
        }
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    onTabChange (record) {
      this.currentTab = record.name
      // console.log('onTabChange =>', record)
    },
  },
}
</script>

<style lang="less" scoped>
  .heat-param-see {
    padding: 0 40px;
    font-size: 16px;
    display: flex;
    flex-direction: column;

    .el-table {
      box-shadow: 1px 1px 1px #BFBFBF, -1px -1px -1px #666666;
    }

    /deep/ .el-table .cell {
      white-space: pre-line;
    }

    .el-table--border, .el-table--group {
      border-radius: 10px;
    }

    /deep/ .el-table__row {
      .flow-params-see {
        background-color: #d9d9d9 !important;
        box-shadow: inset #BFBFBF -1px -1px;
      }
    }

    /deep/ .el-input__inner {
      background-color: #ebebeb;
      box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
      border: none;
      font-size: 16px;
      color: #333333;
    }

    .el-button {
      border: none;
      background-color: #EBEBEB;
      box-shadow: 0.05rem 0.1rem 0.1rem #AAA7A7, -0.05rem -0.1rem 0.1rem #FFFFFF;
    }

    .el-button:active {
      border: none;
      background-color: #A20D13;
      box-shadow: inset 0.1rem 0.1rem 0.2rem #6E090C, inset -0.1rem -0.1rem 0.2rem #c7494d;
    }

    .el-button:focus, .el-button:hover {
      color: #FFF;
      border-color: transparent;
      background-color: #A20D13;
    }
  }
</style>
