<template>
  <a-modal class="customs_dialog" :open="dialogVisible" :cancel="handleClose" title="小水库问题批量导入">
    <div class="upload_div">
      <a-upload-dragger
        :multiple="false"
        :action="actionUrl"
        :file-list="fileList"
        @change="handleSuccess"
        ref="upload"
        class="upload-demo">
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">
          将模板文件拖到此处，或<em>点击选取模板文件</em>
        </p>
      </a-upload-dragger>
      <a-button type="primary" @click="submitUpload" :loading="uploadLoading">点击上传</a-button>
    </div>
    <div ref="messageDiv" id="messageDiv" style="width: 100%;margin-top: 10px">
      <!-- 验证数据的弹出框 -->
      <shuiKuWentiPlVer
        v-if="showShuiKuTianBaoPlVer"
        @closePlVerDialog="closePlVerDialog"
        :tableData="tableData"
        :cacheId="cacheId"></shuiKuWentiPlVer>
      <a type="primary" @click="openPlVerDialog" href="javascript:void(0)" v-show="showButton">点击弹框</a>
    </div>
  </a-modal>
</template>

<script>
import request from '../../utils/gw_ajax_request.js';
import shuiKuWentiPlVer from './shuiKuWenti_piliang_verify';
export default {
  props: ['showShuiKuTianBaoPl'],
  components: {
    shuiKuWentiPlVer: shuiKuWentiPlVer,
  },
  data() {
    return {
      dialogVisible: true,
      fileList: [],
      uuid: 1,
      actionUrl: '',
      socket: null,
      showShuiKuTianBaoPlVer: false,
      filePath: '',
      tableData: [],
      showButton: false,
      uploadLoading: false,
      uploadZipLoading: false,
      extXls: 'xls',
      extZip: 'zip',
      extAll: 'all',
      cacheId: '',
    };
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
  },
  created() {},
  methods: {
    handleClose(done) {
      this.$emit('closePlDialog');
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
      );
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${ file.name }？`);
    },
    beforeAvatarUpload(file) {
      const ext = file.name.split('.');
      if (ext[1] === 'xls' || ext[1] == 'zip') {
        return file;
      } else {
        this.$message.error('请上传问题模板文件和zip压缩包!');
        return false;
      }
    },
    beforeAvatarUploadZip(file) {
      const Xls = file.name.split('.');
      if (Xls[1] === 'zip') {
        return file;
      } else {
        this.$message.error('请上传Zip文件!');
        return false;
      }
    },
    handleSuccess(res, file, fileList) {
      const Xls = file.name.split('.');
      if (Xls[1] == 'xls') {
        const filePath = res.data.key;
        this.filePath = filePath;
        // 调用解析的接口
        request
          .get(`/dc/imp/skpblm/parse?filePath=${this.filePath}`)
          .then((res) => {
            this.tableData = res.data.listParse;
            this.cacheId = res.data.cacheId;
            console.log('table:' + this.tableData);

            if (this.tableData.length > 0) {
              this.showButton = true;
              this.showShuiKuTianBaoPlVer = true;
            } else {
              this.$alert('可填报数据条数为0，请确认！', '提示', {
                confirmButtonText: '确定',
                type: 'warning',
                callback: (action) => {},
              });
            }
            this.uploadLoading = false;
          });
      }
      this.uploadLoading = false;
    },
    handleSuccessZip(res, file, fileList) {
      const message = res.data.key;
      this.uploadZipLoading = false;
      if (message != undefined && message != '') {
        this.$alert('上传成功！', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          callback: (action) => {},
        });
      } else {
        this.$alert('上传失败！', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          callback: (action) => {},
        });
      }
    },
    submitUpload() {
      // this.uploadLoading = true;

      // 获取uuid
      const p1 = new Promise((resolve) => {
        resolve(
          request({
            url: `/socket/uuid`,
            method: 'get',
          }),
        );
      });

      Promise.all([p1])
        .then((result) => {
          this.actionUrl = `/modular-source/6ace62b8e2bb467d98286d260aebcef2/pdcApi/dc/imp/skpblm/upload`;
        })
        .then(() => {
          this.$refs.messageDiv.innerHTML = '';
          this.$refs.upload.submit();
        });
    },
    submitUploadZip() {
      this.uploadZipLoading = true;

      // 获取uuid
      const p1 = new Promise((resolve) => {
        resolve(
          request({
            url: `/socket/uuid`,
            method: 'get',
          }),
        );
      });

      Promise.all([p1])
        .then((result) => {
          this.actionUrl = `/modular-source/6ace62b8e2bb467d98286d260aebcef2/pdcApi/dc/imp/skpblm/upload`;
        })
        .then(() => {
          this.$refs.messageDiv.innerHTML = '';
          this.$refs.uploadZip.submit();
        });
    },
    closePlVerDialog() {
      this.showShuiKuTianBaoPlVer = false;
    },
    openPlVerDialog() {
      this.showShuiKuTianBaoPlVer = true;
    },
  },
};
</script>

<style lang='less' scoped>

</style>
