<template>
  <a-modal class="verify_dialog" width="80%" :title="title" :open="dialogVisible" @cancel="handleClose">
    <div class="verify_div">
      <a-table
        :data-source="tableData"
        :columns="columns"
        :locale="{ emptyText: '上传数据已全部验证通过！' }"
        style="width: 100%;overflow: auto;height:460px;"
        :scroll="{ x: true, y: 400 }"
        :row-class-name="tableRowClassName">
        <template slot="index" slot-scope="text, record, index">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ getIndex(index) }}</span>
            </template>
            <span class="ellipsis90">{{ getIndex(index) }}</span>
          </a-tooltip>
        </template>
        <template slot="groupName" slot-scope="text">
          <a-tooltip placement="top">
            <template slot="title">
              <span :style="{ color: text.groupName.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
                {{ text.groupName.replace('$E$', '') }}
              </span>
            </template>
            <span class="ellipsis150" :style="{ color: text.groupName.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
              {{ text.groupName.replace('$E$', '') }}</span>
          </a-tooltip>
        </template>
        <template slot="rsCode" slot-scope="text">
          <a-tooltip placement="top">
            <template slot="title">
              <span :style="{ color: text.rsCode.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
                {{ text.rsCode.replace('$E$', '') }}
              </span>
            </template>
            <span class="ellipsis150" :style="{ color: text.rsCode.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
              {{ text.rsCode.replace('$E$', '') }}</span>
          </a-tooltip>
        </template>
        <template slot="rsCode" slot-scope="text">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ text.rsCode }}</span>
            </template>
            <span class="ellipsis150">{{ text.rsCode }}</span>
          </a-tooltip>
        </template>
        <template slot="inspPblmCode" slot-scope="text">
          <a-tooltip placement="top">
            <template slot="title">
              <span :style="{ color: text.inspPblmCode.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
                {{ text.inspPblmCode.replace('$E$', '') }}
              </span>
            </template>
            <span class="ellipsis150" :style="{ color: text.inspPblmCode.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
              {{ text.inspPblmCode.replace('$E$', '') }}</span>
          </a-tooltip>
        </template>
        <template slot="inspPblmDesc" slot-scope="text">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ text.inspPblmDesc }}</span>
            </template>
            <span class="ellipsis150">{{ text.inspPblmDesc }}</span>
          </a-tooltip>
        </template>
        <template slot="inspPblmCate" slot-scope="text">
          <a-tooltip placement="top">
            <template slot="title">
              <span :style="{ color: text.inspPblmCate.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
                {{ text.inspPblmCate.replace('$E$', '') }}
              </span>
            </template>
            <span class="ellipsis150" :style="{ color: text.inspPblmCate.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
              {{ text.inspPblmCate.replace('$E$', '') }}</span>
          </a-tooltip>
        </template>
        <template slot="ifCasePblm" slot-scope="text">
          <a-tooltip placement="top">
            <template slot="title">
              <span :style="{ color: text.ifCasePblm.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
                {{ text.ifCasePblm.replace('$E$', '') }}
              </span>
            </template>
            <span class="ellipsis150" :style="{ color: text.ifCasePblm.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
              {{ text.ifCasePblm.replace('$E$', '') }}</span>
          </a-tooltip>
        </template>
        <template slot="path" slot-scope="text">
          <a-tooltip placement="top">
            <template slot="title">
              <span :style="{ color: text.path.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
                {{ text.path.replace('$E$', '') }}
              </span>
            </template>
            <span class="ellipsis150" :style="{ color: text.path.indexOf('$E$') > 0 ? '#ED3F14' : '' }">
              {{ text.path.replace('$E$', '') }}</span>
          </a-tooltip>
        </template>
      </a-table>
      <template>
        <lable v-show="confirmUploadState">
          <a-radio-group v-model:value="updateState">
            <a-radio :value="1">
              新增
            </a-radio>
            <a-radio :value="0">
              覆盖
            </a-radio>
          </a-radio-group>
        </lable>
      </template>

      <a-button type="danger" v-show="reUploadState" @click="handleClose">重新上传</a-button>
      <a-button
        type="primary"
        v-show="confirmUploadState"
        @click="confirmUpload"
        :loading="uploadLoading"
        :disabled="buttonState">确定填报</a-button>
    </div>
  </a-modal>
</template>

<script>
import request from '../../utils/gw_ajax_request.js';
export default {
  props: ['tableData', 'cacheId'],
  data() {
    return {
      dialogVisible: true,
      reUploadState: false,
      confirmUploadState: true,
      rDisabled: false,
      cDisabled: false,
      title: '小水库问题批量导入验证页面(验证通过√)',
      uploadLoading: false,
      buttonState: false,
      updateState: '1',
      columns: [
        {
          title: '模板行号',
          dataIndex: 'index',
          width: 90,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '组别',
          dataIndex: 'groupName',
          width: 150,
          align: 'center',
        },
        {
          title: '水库编码',
          dataIndex: 'rsCode',
          width: 150,
          align: 'center',
        },
        {
          title: '水库名称',
          dataIndex: 'rsName',
          width: 150,
          align: 'center',
        },
        {
          title: '问题序号',
          dataIndex: 'inspPblmCode',
          width: 150,
          align: 'center',
        },
        {
          title: '问题详情',
          dataIndex: 'inspPblmDesc',
          width: 150,
          align: 'center',
        },
        {
          title: '问题严重程度',
          dataIndex: 'inspPblmCate',
          width: 150,
          align: 'center',
        },
        {
          title: '是否典型',
          dataIndex: 'ifCasePblm',
          width: 150,
          align: 'center',
        },
        {
          title: '路径',
          dataIndex: 'path',
          width: 150,
          align: 'center',
        },
      ],
    };
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
  },
  created() {},
  methods: {
    handleClose(done) {
      this.reUploadState = false;
      this.$emit('closePlVerDialog');
    },
    getIndex(index) {
      return index + 4;
    },
    tableRowClassName({ row, rowIndex }) {
      let values = '';
      for (const key in row) {
        values += row[key];
      }
      if (values.indexOf('$E$') > 0) {
        this.reUploadState = true;
        this.confirmUploadState = false;
        this.title = '小水库问题批量导入验证页面(验证未通过×)';
        return 'warning-row';
      }
      return '';
    },
    confirmUpload() {
      this.upload();
    },
    upload() {
      this.uploadLoading = true;
      this.buttonState = true;
      request
        .get(
          `/dc/imp/skpblm/insert?cacheId=${this.cacheId}&userId=${this.persId}&updateState=${this.updateState}`,
        )
        .then((res) => {
          console.log(res);
          if (res.data.key == true) {
            this.$alert('填报成功！', '提示', {
              confirmButtonText: '确定',
              type: 'success',
              callback: (action) => {
                this.uploadLoading = false;
                this.buttonState = true;
                this.handleClose();
              },
            });
          } else {
            this.$alert('填报失败！', '提示', {
              confirmButtonText: '确定',
              callback: (action) => {
                this.$message.info(`请不要重复提交!`);
              },
            });
            this.uploadLoading = false;
            this.buttonState = true;
          }
        });
    },
  },
  watch: {
    reUploadState(n, o) {
      if (n) {
        this.confirmUploadState = false;
      } else {
        this.confirmUploadState = true;
      }
    },
  },
};
</script>

<style lang='less' scoped>
.title {
  font-size: 16px;
}

.el-icon-edit {
  margin-right: 10px;
}

.verify_dialog .el-dialog {
  width: 80% !important;
}

.verify_dialog .el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  height: 500px;
  overflow: auto;
}

.verify_div {
  text-align: center;
}

.verify_div .el-table th>.cell {
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

.verify_div .el-table--border th,
.el-table__fixed-right-patch {
  background: rgba(240, 240, 240, 1);
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1),
    0px 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.verify_div .el-table td.is-hidden>*,
.nysgc .el-table th.is-hidden>*,
.el-table--hidden {
  visibility: visible;
}

.ant-table td {
  white-space: nowrap;
}

.ellipsis90 {
  display: block;
  width: 88px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ellipsis150 {
  display: block;
  width: 148px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/deep/ .ant-table-thead>tr>th,
/deep/ .ant-table-tbody>tr>td {
  padding: 0;
  height: 60px;
}

// 处理表格横向滚动条不生效
/deep/ .ant-table-scroll {
  position: relative;
  z-index: 1;
}

/deep/.ant-table-fixed-left,
/deep/ .ant-table-fixed-right {
  z-index: 2;
}
</style>
