<template>
  <div class="main">
    <a-layout>
      <a-layout-header>
        <div class="block">
          <span>批次名称：</span>
          <div style="flex: 1;">
            <a-select
              v-model:value="batchName"
              @change="searchExecl"
              show-search
              :filter-option="filterOption"
              placeholder="请选择"
              style="width: 200px;">
              <a-select-option v-for="item in batchList" :key="item" :value="item">{{ item }}</a-select-option>
            </a-select>
          </div>
          <a-button type="primary"  style="margin:0 5px" @click="exportExecl">导出</a-button>
          <a-button type="primary"  style="margin:0 5px" @click="searchExecl">查询</a-button>
        </div>
      </a-layout-header>
      <a-layout-content>
        <a-table
          :columns="tableColumn"
          :data-source="tableData"
          row-key="id"
          style="width: 100%;"
          :style="{ height: tableHeight + 'px' }"
          :scroll="{ x: true, y: tableHeight - 60 }"
          :pagination="false"
          bordered>
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'index'">
              <span>{{ index + 1 }}</span>
            </template>
            <template v-else-if="column.dataIndex === 'groupLeader'">
              <editable-cell :text="record.groupLeader" @change="onCellChange(record, 'groupLeader', $event, index)" />
            </template>
            <template v-else-if="column.dataIndex === 'planDcTm'">
              <editable-date :text="record.planDcTm" @change="onCellChange(record, 'planDcTm', $event, index)" />
            </template>
            <template v-else-if="column.dataIndex === 'dcCompletion'">
              <editable-cell :text="record.dcCompletion" @change="onCellChange(record, 'dcCompletion', $event, index)" />
            </template>
            <template v-else-if="column.dataIndex === 'dcStart'">
              <editable-cell :text="record.dcStart" @change="onCellChange(record, 'dcStart', $event, index)" />
            </template>
            <template v-else-if="column.dataIndex === 'problemStatus'">
              <editable-cell :text="record.problemStatus" @change="onCellChange(record, 'problemStatus', $event, index)" />
            </template>
            <template v-else-if="column.dataIndex === 'statuaName'">
              <editable-cell :text="record.statuaName" @change="onCellChange(record, 'statuaName', $event, index)" />
            </template>
            <template v-else-if="column.dataIndex === 'remarks'">
              <editable-cell :text="record.remarks" @change="onCellChange(record, 'remarks', $event, index)" />
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button size="small" type="link" @click="handleEdit(index, record)">更新</a-button>
            </template>
          </template>
        </a-table>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import moment from 'moment';
import {
  BisInspStatisAnalupdate,
  getBatchStatisticalAnalysis,
  updateBisInspStatisAnal,
} from '../../api/duChaPlan';
import request from '../../utils/gw_ajax_request.js';
import { exportModel } from '../../utils/gw_exportModel';
import EditableCell from './editableCell.vue';
import EditableDate from './editableDate.vue';

export default {
  components: {
    EditableCell,
    EditableDate,
  },
  data() {
    return {
      batchName: '',
      batchList: [],
      tableHeight: window.innerHeight - 200,
      loading: false,
      tableData: [],
      tableColumn: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          align: 'center',
        },
        {
          title: '督查组',
          dataIndex: 'pnm',
          width: 120,
          align: 'center',
        },
        {
          title: '组长',
          dataIndex: 'groupLeader',
          width: 120,
          align: 'center',
        },
        {
          title: '计划督查时间',
          dataIndex: 'planDcTm',
          width: 150,
          align: 'center',
        },
        {
          title: '现场督查完成情况',
          dataIndex: 'dcCompletion',
          width: 130,
          align: 'center',
          customCell: (record, rowIndex) => {
            return {
              style: {
                color: record.dcCColour,
              },
            };
          },
        },
        {
          title: '督查起止时间',
          dataIndex: 'dcStart',
          width: 150,
          align: 'center',
        },
        {
          title: '督查组问题提交',
          dataIndex: 'problemStatus',
          width: 130,
          align: 'center',
          customCell: (record, rowIndex) => {
            return {
              style: {
                color: record.dcPColour,
              },
            };
          },
        },
        {
          title: '当前状态',
          dataIndex: 'statuaName',
          width: 180,
          align: 'center',
          customCell: (record, rowIndex) => {
            return {
              style: {
                color: record.dcSColour,
              },
            };
          },
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          width: 280,
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 150,
          align: 'center',
          fixed: 'right',
        },
      ],
      readOnlyRole: localStorage.getItem('readOnlyRole'),
    };
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
  },
  created() {
    if (this.readOnlyRole == 'hide') {
      this.batchList = [];
    } else {
      this.getBatchList();
    }
  },
  methods: {
    getBatchList() {
      this.batchList = [];
      this.batchName = '';
      request.get('/bis/insp/BisInspStatisAnal/getBatchList').then((res) => {
        if (res.data && res.data.length > 0) {
          this.batchList = res.data;
          this.batchName = res.data[0];
          this.searchExecl();
        }
      });
    },
    // 获取Excel数据
    searchExecl() {
      if (this.readOnlyRole == 'hide') {
        return (this.tableData = []);
      }
      this.tableData = [];
      this.loading = true;
      getBatchStatisticalAnalysis(this.batchName).then((res) => {
        if (res.data) {
          const { data } = res;
          data.forEach((item, index) => {
            item.index = index + 1;
          });
          this.tableData = data;
          this.loading = false;
        }
      });
    },
    exportExecl() {
      const url =
        '/modular-source/6ace62b8e2bb467d98286d260aebcef2/pdcApi/bis/insp/BisInspStatisAnal/export?batch=' +
        this.batchName;
      const type = 'get';
      const exportName = '综合督查情况统计报表.xls';
      exportModel(type, url, exportName);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    onCellChange(row, text, e, index) {
      row[text] = e;
      BisInspStatisAnalupdate(row)
        .then((res) => {
          res.data.index = index + 1;
          this.$set(this.tableData, index, res.data);
        })
        .catch((err) => this.$message.error('请求错误' + err.message));
    },
    handleEdit(index, row) {
      updateBisInspStatisAnal(row.id)
        .then((res) => {
          res.data.index = index + 1;
          this.$set(this.tableData, index, res.data);
          // this.$forceUpdate()
        })
        .catch((err) => this.$message.error('请求错误' + err.message));
    },
  },
};
</script>

<style lang="less" scoped>
@import url('../../assets/style/tableScroll.less');
.main{
   width: 100%;
   height:100%;
   margin: 0;
   padding: 0;
}
/deep/ .ant-layout-sider,
/deep/ .ant-layout-header,
/deep/ .ant-layout-content {
  background: #fff;
}
.block {
  display: flex;
  align-items: center;
}

</style>
