<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="选择日期"
            ></el-date-picker>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-button type="primary">导出</el-button>
          </vab-query-form-right-panel>
        </vab-query-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            fixed
            prop="date"
            label="项目/月份"
            width="150"
            align="center"
          ></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="Sept"
            label=" 九月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Sept"></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
            fixed="right"
            prop="Total"
            label="合计"
            align="center"
            width="130"
          >
            <template #default="{ row }">
              <el-input v-model="row.Total"></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="选择日期"
            ></el-date-picker>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-button type="primary">导出</el-button>
          </vab-query-form-right-panel>
        </vab-query-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            fixed
            prop="date"
            label="项目/月份"
            width="150"
            align="center"
          ></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="Sept"
            label=" 九月 "
            width=" 100 "
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Sept"></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
            fixed="right"
            prop="Total"
            label="合计"
            align="center"
            width="130"
          >
            <template #default="{ row }">
              <el-input v-model="row.Total"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'second',
      tableData: [
        {
          date: '运转时间（d）',
          Jan: '31',
          Feb: '28',
          Mar: '31',
          Apr: '30',
          May: '31',
          Jun: '30',
          Jul: '31',
          Aug: '31',
          Sept: '30',
          Oct: '31',
          Nov: '30',
          Dec: '31',
          Total: '365',
        },
        {
          date: '运转率（%）',
          Jan: ' 100 ',
          Feb: ' 100 ',
          Mar: ' 100 ',
          Apr: ' 100 ',
          May: ' 100 ',
          Jun: ' 100 ',
          Jul: ' 100 ',
          Aug: ' 100 ',
          Sept: ' 100 ',
          Oct: ' 100 ',
          Nov: ' 100 ',
          Dec: ' 100 ',
          Total: ' 100 ',
        },
        {
          date: '污水处理总量（m³）',
          Jan: '50829.13',
          Feb: '60254.5',
          Mar: '62623.3',
          Apr: '66087.5',
          May: '60807',
          Jun: '64541',
          Jul: '50829.13',
          Aug: '50829.13',
          Sept: '50829.13',
          Oct: '50829.13',
          Nov: '50829.13',
          Dec: '50829.13',
          Total: '740350.65',
        },
        {
          date: '污水处理总量（m³）',
          Jan: '50829.13',
          Feb: '60254.5',
          Mar: '62623.3',
          Apr: '66087.5',
          May: '60807',
          Jun: '64541',
          Jul: '50829.13',
          Aug: '50829.13',
          Sept: '50829.13',
          Oct: '50829.13',
          Nov: '50829.13',
          Dec: '50829.13',
          Total: '740350.65',
        },
        {
          date: '污水处理总量（m³）',
          Jan: '50829.13',
          Feb: '60254.5',
          Mar: '62623.3',
          Apr: '66087.5',
          May: '60807',
          Jun: '64541',
          Jul: '50829.13',
          Aug: '50829.13',
          Sept: '50829.13',
          Oct: '50829.13',
          Nov: '50829.13',
          Dec: '50829.13',
          Total: '740350.65',
        },
        {
          date: '污水处理总量（m³）',
          Jan: '50829.13',
          Feb: '60254.5',
          Mar: '62623.3',
          Apr: '66087.5',
          May: '60807',
          Jun: '64541',
          Jul: '50829.13',
          Aug: '50829.13',
          Sept: '50829.13',
          Oct: '50829.13',
          Nov: '50829.13',
          Dec: '50829.13',
          Total: '740350.65',
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
    },
  },
};
</script>

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