<template>
  <div class="manage-container">
    <div class="manage-wrap" style="height: 40px">
      <div class="manage-input">
        <el-form ref="form" :model="queryForm" label-width="80px">
          <vab-query-form>
            <el-form-item width="100" prop="month" label="时间选择">
              <el-date-picker
                v-model="date"
                size="small"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="standardToTime"
              ></el-date-picker>
            </el-form-item>
          </vab-query-form>
        </el-form>
      </div>
      <div>
        <el-button type="primary" size="small" @click="init">查询</el-button>
      </div>
    </div>
    <div style="padding: 10px; border: 1px solid #ebeef5; margin: 10px 0">
      <div style="float: left; margin-right: 10px">配置显示项:</div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in deviceList" :label="item.deviceId">
          {{ item.deviceName }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button type="primary" @click="add">新增</el-button>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%; margin: 10px 0"
    >
      <el-table-column align="center" label="基础项">
        <el-table-column label="日期" width="120">
          <template #default="{ row }">
            {{ row.basic['date'] }}
          </template>
        </el-table-column>

        <el-table-column label="进水COD" width="100">
          <template #default="{ row }">
            {{ row.basic['inCod'] }}
          </template>
        </el-table-column>
        <el-table-column label="进水氨氮" width="100">
          <template #default="{ row }">
            {{ row.basic['inAn'] }}
          </template>
        </el-table-column>
        <el-table-column label="进水TN" width="100">
          <template #default="{ row }">
            {{ row.basic['inTn'] }}
          </template>
        </el-table-column>
        <el-table-column label="进水TP" width="100">
          <template #default="{ row }">
            {{ row.basic['inTp'] }}
          </template>
        </el-table-column>
      </el-table-column>
      <template v-for="item in deviceList">
        <el-table-column
          align="center"
          v-if="checkList.includes(item.deviceId)"
          :label="item.deviceName"
        >
          <el-table-column
            :label="val.value"
            v-for="val in item.configuration"
            :key="val"
          >
            <template #default="{ row }">
              {{ row[item.deviceId][val.name] }}
            </template>
          </el-table-column>
        </el-table-column>
      </template>

      <el-table-column fixed="right" width="120" label="操作" align="center">
        <template #default="{ row }">
          <el-button type="text" @click="handleClick(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.page"
      :layout="layout"
      :page-size="queryForm.size"
      :total="total"
      style="text-align: right"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <el-dialog
      v-model="dialogFormVisible"
      :title="title"
      width="90%"
      @close="close"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-divider content-position="left">基础项</el-divider>
            <el-form-item label="日期" prop="date">
              <el-date-picker
                v-model="form['basic']['date']"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>

            <el-row>
              <el-col style="display: flex">
                <el-form-item class="" label="进水COD" prop="inCod">
                  <el-input
                    v-model.trim="form['basic']['inCod']"
                    autocomplete="off"
                    class="inputWith"
                  ></el-input>
                </el-form-item>
                <el-form-item label="进水氨氮" prop="inAn">
                  <el-input
                    v-model.trim="form['basic']['inAn']"
                    autocomplete="off"
                    class="inputWith"
                  ></el-input>
                </el-form-item>
                <el-form-item label="进水TN" prop="inTn">
                  <el-input
                    v-model.trim="form['basic']['inTn']"
                    autocomplete="off"
                    class="inputWith"
                  ></el-input>
                </el-form-item>
                <el-form-item label="进水TP" prop="inTp">
                  <el-input
                    v-model.trim="form['basic']['inTp']"
                    autocomplete="off"
                    class="inputWith"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-row v-for="item in deviceList">
            <el-divider content-position="left">
              {{ item.deviceName }}
            </el-divider>
            <el-form-item :label="val.value" v-for="val in item.configuration">
              <el-input
                autocomplete="off"
                v-model.trim="form[item.deviceId][val.name]"
                class="inputWith"
              ></el-input>
            </el-form-item>
          </el-row>
        </el-row>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" size="small" @click="save">保 存</el-button>
        <el-button size="small" @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  haianList,
  saveHian,
  addHian,
  delHian,
  HianDevice,
} from '@/api/analysis';
export default {
  name: 'Manage',
  components: {},
  data() {
    return {
      roleData: [],
      checkList: [],
      deviceList: [],
      tableData: [],
      rules: [],
      dialogFormVisible: false,

      form: {},
      date: [],
      title: '',
      lazy: true,
      activeName: 'first',
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      background: true,
      listLoading: false,
      elementLoadingText: '正在加载...',
      queryForm: {
        page: 1,
        size: 20,
        date: '',
      },
    };
  },
  mounted() {
    this.initData();
  },

  computed: {
    height() {
      return 500;
    },
    getLabel(val) {
      return 'fasdfd';
    },
  },
  methods: {
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.init();
    },
    //将时间格式化
    formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      const hours = ('0' + date.getHours()).slice(-2);
      const minutes = ('0' + date.getMinutes()).slice(-2);
      const seconds = ('0' + date.getSeconds()).slice(-2);
      return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hours)
        .replace('mm', minutes)
        .replace('ss', seconds);
    },

    standardToTime(val) {
      if (val) {
        this.queryForm.startTime = this.formatDate(val[0], 'YYYY-MM-DD');
        this.queryForm.endTime = this.formatDate(val[1], 'YYYY-MM-DD');
      } else {
        this.queryForm.startTime = null;
        this.queryForm.endTime = null;
      }
      this.init();
    },
    init() {
      haianList(this.queryForm).then(res => {
        console.log(res.data);
        this.tableData = res.data.items;
        this.total = res.data.total;
      });
    },

    initData() {
      HianDevice().then(res => {
        this.deviceList = res.data;
        this.checkList = this.deviceList.map(item => item.deviceId);
        this.init();
      });
      const configuration = [
        { name: 'treatmentWater', value: '处理水量' },
        { name: 'aerationTime', value: '曝气时间' },
        { name: 'elec', value: '电量' },
        { name: 'outCod', value: '出水COD' },
        { name: 'outAn', value: '出水氨氮' },
        { name: 'outTn', value: '出水TN' },
        { name: 'outTp', value: '出水TP' },
      ];

      // this.deviceList = [
      //   {
      //     deviceId: '3934',
      //     deviceName: '一体化AAO',
      //     configuration: [...configuration],
      //   },
      //   {
      //     deviceId: '3935',
      //     deviceName: 'SMC净化槽',
      //     configuration: [...configuration],
      //   },
      //   {
      //     deviceId: '3936',
      //     deviceName: '简化版净化槽',
      //     configuration: [...configuration],
      //   },
      //   {
      //     deviceId: '3937',
      //     deviceName: '1号户用机',
      //     configuration: [...configuration],
      //   },
      //   {
      //     deviceId: '3938',
      //     deviceName: '2号户用机',
      //     configuration: [...configuration],
      //   },
      //   {
      //     deviceId: '3939',
      //     deviceName: '3号户用机',
      //     configuration: [...configuration],
      //   },
      //   {
      //     deviceId: '3940',
      //     deviceName: '4号户用机',
      //     configuration: [...configuration],
      //   },
      //   {
      //     deviceId: '3941',
      //     deviceName: '集热测试户用机',
      //     configuration: [
      //       ...configuration,
      //       ...[
      //         { name: 'weatherTemp', value: '外界气温' },
      //         { name: 'waterTempUp', value: '最高水温' },
      //         { name: 'waterTempLow', value: '最低水温' },
      //       ],
      //     ],
      //   },
      // ];
      // console.log(JSON.stringify(this.deviceList));
    },
    add() {
      this.reSetForm();
      this.title = '新增';
      this.dialogFormVisible = true;
    },

    reSetForm() {
      let that = this;
      this.form = {
        basic: {
          date: null,
          inCod: null,
          inAn: null,
          inTn: null,
          inTp: null,
        },
      };
      this.deviceList.forEach(item => {
        this.form[item.deviceId] = {};
        item.configuration.forEach(val => {
          this.form[item.deviceId][val.name] = null;
        });
      });
      console.log(this.form);
    },
    save() {
      console.log(this.form);

      if (
        !(
          this.form.basic.date != null &&
          this.form.basic.inCod != null &&
          this.form.basic.inAn != null &&
          this.form.basic.inTn != null &&
          this.form.basic.inTp != null
        )
      ) {
        this.$message.error('基础数据必填');
        return;
      }

      if (this.form.basic?.id) {
        saveHian(this.form).then(res => {
          this.init();
          this.$message.success('保存成功');
          this.dialogFormVisible = false;
        });
      } else {
        addHian(this.form).then(res => {
          this.init();
          this.$message.success('新增成功');
          this.dialogFormVisible = false;
        });
      }
    },
    handleDelete(row) {
      // let that = this
      if (row.basic.id) {
        this.$confirm('你确定要删除当前项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            delHian(row.basic.id).then(res => {
              this.init();
              this.$message({
                type: 'success',
                message: '删除成功',
              });
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            });
          });
      }
    },
    handleClick(val) {
      this.reSetForm();
      this.title = '修改';
      this.form = JSON.parse(JSON.stringify(val));
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-container {
  width: 100%;

  .vab-query-form {
    margin-bottom: 30px;

    .el-input {
      width: 180px;
      margin-right: 20px;
    }
  }
}
.inputWith {
  width: 80px;
}
.manage-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .el-input {
    width: 200px !important;
  }
  .el-select {
    width: 200px !important;
  }
  .manage-button {
    padding-left: 12px;
  }
}
</style>

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