<template>
  <div class="manage-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="各项费用支出明细年费总表" name="first">
        <vab-query-form>
          <vab-query-form-left-panel>
            <el-date-picker
              v-model="value1"
              type="date"
              :placeholder="$t('defalult.xzrq')"
            ></el-date-picker>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
            <el-button>{{ $t('defalult.dc') }}</el-button>
          </vab-query-form-right-panel>
        </vab-query-form>
        <div class="device-base">
          <vab-query-form-left-panel class="device-left">
            <span>设施类别：</span>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel class="device-right">
            <span>单位（元）：</span>
          </vab-query-form-right-panel>
        </div>
        <el-table :data="tableData" border style="width: 100%" max-height="450">
          <el-table-column
            fixed="left"
            prop="mouth"
            label="项目/月份"
            width="180"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.mouth"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Jan"
            label=" 一月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Jan"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Feb"
            label=" 二月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Feb"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Mar"
            label=" 三月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Mar"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Apr"
            label=" 四月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Apr"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="May"
            label=" 五月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.May"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Jun"
            label=" 六月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Jun"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop=" Jul "
            label="七月"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Jul"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop=" Aug "
            label="八月"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Aug"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop=" Sep "
            label="九月"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Sep"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Oct"
            label=" 十月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Oct"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Nov"
            label=" 十一月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Nov"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Dec"
            label="十二月"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Dec"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="tick"
            label="累计"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.tick"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="note"
            :label="$t('alarm.bz')"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.note"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="电、药单耗年汇总表" name="second">
        <vab-query-form>
          <vab-query-form-left-panel>
            <el-date-picker
              v-model="value1"
              type="date"
              :placeholder="$t('defalult.xzrq')"
            ></el-date-picker>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
            <el-button>{{ $t('defalult.dc') }}</el-button>
          </vab-query-form-right-panel>
        </vab-query-form>
        <div class="device-base">
          <vab-query-form-left-panel class="device-left">
            <span>厂名：南京江北公用资产有限公司</span>
          </vab-query-form-left-panel>
        </div>
        <el-table :data="tableData2" border style="width: 100%">
          <el-table-column
            fixed="left"
            prop="mouth"
            label="电耗及药耗/月份"
            width="200"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.No01"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Jan"
            label=" 一月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Jan"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Feb"
            label=" 二月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Feb"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Mar"
            label=" 三月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Mar"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Apr"
            label=" 四月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Apr"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="May"
            label=" 五月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.May"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Jun"
            label=" 六月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Jun"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop=" Jul "
            label="七月"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Jul"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop=" Aug "
            label="八月"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Aug"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop=" Sep "
            label="九月"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Sep"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Oct"
            label=" 十月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Oct"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Nov"
            label=" 十一月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Nov"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Dec"
            label="十二月"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Dec"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="first"
            label="最小值"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.first"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="second"
            label="最大值"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.second"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="third"
            label="平均值"
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.third"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary">保存</el-button>
      </el-tab-pane>
      <el-tab-pane label="月度单位耗电一览总表" name="third">
        <vab-query-form>
          <vab-query-form-left-panel>
            <el-date-picker
              v-model="value1"
              type="date"
              :placeholder="$t('defalult.xzrq')"
            ></el-date-picker>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
            <el-button>{{ $t('defalult.dc') }}</el-button>
          </vab-query-form-right-panel>
        </vab-query-form>
        <el-table :data="tableData3" border style="width: 100%">
          <el-table-column
            prop="mouth"
            label=" 日期 "
            width="350"
            align=" center "
          >
            <template #default="{ row }">
              <el-input v-model="row.mouth"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="first"
            label="总电量（kW·h）"
            width="350"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.first"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="second"
            label="处理水量（m³）"
            width="350"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.second"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="third"
            label="处理能耗（kW·h/m³）"
            width="350"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.third"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      activeName: 'first',
      tableData: [
        {
          mouth: '电费',
          Jan: '',
          Feb: '',
          Mar: '',
          Apr: '',
          May: '',
          Jun: '',
          Jul: '',
          Agu: '',
          Sep: '',
          Oct: '',
          Nov: '',
          Dec: '',
          tick: '',
          note: '',
        },
        {
          mouth: '药剂费',
          Jan: '',
          Feb: '',
          Mar: '',
          Apr: '',
          May: '',
          Jun: '',
          Jul: '',
          Agu: '',
          Sep: '',
          Oct: '',
          Nov: '',
          Dec: '',
          tick: '',
          note: '',
        },
        {
          mouth: '外加碳源',
          Jan: '',
          Feb: '',
          Mar: '',
          Apr: '',
          May: '',
          Jun: '',
          Jul: '',
          Agu: '',
          Sep: '',
          Oct: '',
          Nov: '',
          Dec: '',
          tick: '',
          note: '',
        },
        {
          mouth: '消毒药剂',
          Jan: '',
          Feb: '',
          Mar: '',
          Apr: '',
          May: '',
          Jun: '',
          Jul: '',
          Agu: '',
          Sep: '',
          Oct: '',
          Nov: '',
          Dec: '',
          tick: '',
          note: '',
        },
      ],
      tableData2: [
        {
          mouth: '总电单耗（kW·h/m³）',
          Jan: '',
          Feb: '',
          Mar: '',
          Apr: '',
          May: '',
          Jun: '',
          Jul: '',
          Agu: '',
          Sep: '',
          Oct: '',
          Nov: '',
          Dec: '',
          first: '',
          second: '',
          third: '',
        },
        {
          mouth: '外加碳源（g/m³）',
          Jan: '',
          Feb: '',
          Mar: '',
          Apr: '',
          May: '',
          Jun: '',
          Jul: '',
          Agu: '',
          Sep: '',
          Oct: '',
          Nov: '',
          Dec: '',
          first: '',
          second: '',
          third: '',
        },
        {
          mouth: '消毒药剂（g/m³）',
          Jan: '',
          Feb: '',
          Mar: '',
          Apr: '',
          May: '',
          Jun: '',
          Jul: '',
          Agu: '',
          Sep: '',
          Oct: '',
          Nov: '',
          Dec: '',
          first: '',
          second: '',
          third: '',
        },
      ],
      tableData3: [
        {
          mouth: '1',
          first: '',
          second: '',
          third: '',
        },
        {
          mouth: '2',
          first: '',
          second: '',
          third: '',
        },
        {
          mouth: '3',
          first: '',
          second: '',
          third: '',
        },
        {
          mouth: '4',
          first: '',
          second: '',
          third: '',
        },
        {
          mouth: '5',
          first: '',
          second: '',
          third: '',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.device-base {
  width: 100%;
  background: #f5f7fa;
  line-height: 40px;
  height: 40px;
  border: 1px solid #ebeef5;
  border-bottom: none;
  .device-left {
    width: 50%;
    background: #f5f7fa;
    text-align: center;
  }
  .device-right {
    width: 50%;
    background: #f5f7fa;
    text-align: center;
  }
}
</style>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
</style>
