<template>
  <a-spin :spinning="spinningAdd">
    <div>
      <a-page-header
        style="background-color: #FFFFFF;"
        title="关停号码工单导入"
        sub-title="1、先选择关停号码工单，进行导入前预览。2、信息无误后再确认导入"
        @back="goBack"
      >
        <a-descriptions :title="task.taskName" size="small" :column="3">
          <a-descriptions-item label="状态"><a-tag :color="task.taskStateColor">{{task.taskStateText}}</a-tag></a-descriptions-item>
          <a-descriptions-item label="开始时间">{{task.taskStartTime}}</a-descriptions-item>
          <a-descriptions-item label="结束时间">{{task.taskEndTime}}</a-descriptions-item>
          <a-descriptions-item label="描述"><span v-html="task.description"></span></a-descriptions-item>
          <!--{{task.description}}-->
        </a-descriptions>
        <a-divider style="margin: 6px;"/>
      </a-page-header>

      <a-card :bordered="false" style="margin-top: -22px;">
        <!-- 操作按钮区域 start -->
        <div class="table-operator">
          <a-upload name="file"
                    :showUploadList="false"
                    :multiple="false"
                    :headers="tokenHeader"
                    :action="url.importExcel"
                    @change="uploadChange">
            <a-button type="primary" icon="upload">关停资料选择</a-button>
          </a-upload>
          <a-button type="primary" icon="import"
                    @click="importInfo">确定导入</a-button>
        </div>
        <!-- 操作按钮区域 end -->

        <!-- table区域 begin -->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            :scroll="{x:true}"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange">

          </a-table>
        </div>
        <!-- table区域 end -->

      </a-card>

    </div>
  </a-spin>


</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction, httpAction } from '@api/manage'

  export default {
    name: 'TaskImport',
    mixins:[JeecgListMixin],
    data () {
      return {
        //加载属性
        spinningAdd:false,
        description: '导入页面',
        autoSearch: false,
        dataSource: [],
        errorCount: 0,
        task: {},
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'日期',
            align:"center",
            dataIndex: 'date'
          },
          {
            title:'客户ID',
            align:"center",
            dataIndex: 'customerId'
          },
          {
            title:'客户名称',
            align:"center",
            dataIndex: 'customerName'
          },
          {
            title:'用户ID',
            align:"center",
            dataIndex: 'userId'
          },
          {
            title:'号码',
            align:"center",
            dataIndex: 'number'
          },
          {
            title:'入网时间',
            align:"center",
            dataIndex: 'networkAccessTime'
          },
          {
            title:'发展部门',
            align:"center",
            dataIndex: 'staffDeptLevelName'
          },
          {
            title:'发展人',
            align:"center",
            dataIndex: 'staffInfo'
          },
          {
            title:'工号',
            align:"center",
            dataIndex: 'staffNo'
          },
          {
            title:'号码来源',
            align:"center",
            dataIndex: 'numberSource'
          },
          {
            title:'是否存在多次关停复开记录',
            align:"center",
            dataIndex: 'reopeningLog'
          },
          {
            title:'最后一次关停原因',
            align:"center",
            dataIndex: 'shutdownReasonLast'
          },
          {
            title:'最后一次关停时间',
            align:"center",
            dataIndex: 'shutdownReasonDate'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'notes'
          },
        ],
        url: {
          importExcel: window._CONFIG['domainURL'] + "/asCheck/customerInfo/importCustomerExcel",
          importData: "/asCheck/customerInfo/taskId/importCustomerData",
          queryTask: "/smsCheck/task/queryById",
        },
      }
    },
    created() {
      this.task.id = this.$route.query.id;
      this.queryInfoById(this.task.id);
    },
    methods: {
      // 返回上一级
      goBack() {
        this.$router.go(-1);
        this.closeCurrent();
      },
      /**
       * 上传事件回调
       *
       * @param result 回调值
       */
      uploadChange(result) {
        let file = result.file;
        let event = result.event;
        if (event === undefined && file.status === 'uploading') {
          this.$message.info('开始上传');
        }
        if (event && file.status === 'uploading') {
          this.$message.info('上传中，请稍等……');
        }
        if (file.response) {
          let success = file.response.success;
          let message = file.response.message;
          if (!success) {
            this.$message.error(message);
          }
          if (file.status === 'done') {
            this.dataSource = file.response.result.data;
            this.errorCount = file.response.result.errorCount;
            if (this.errorCount > 0) {
              this.$message.error('导入含有错误项，请检查内容')
            } else {
              this.$message.info('上传完成');
            }
          }
        }

      },
      /**
       * 导入信息
       */
      importInfo() {
        if (this.dataSource.length === 0) {
          this.$message.error('暂无导入数据，请上传导入文件！');
          return;
        }
        if (this.errorCount !== 0) {
          this.$message.error('包含非法数据，无法导入！');
          return;
        }

        this.$message.info('开始导入，请稍等……');
        this.spinningAdd = true;
        let httpUrl = this.url.importData.replaceAll("taskId", this.task.id);
        let params = this.dataSource;
        let method = 'POST';
        let that = this;
        // 发送请求
        httpAction(httpUrl, params, method)
          .then((res) => {
            if(res.success){
              that.$message.success("导入成功");
              that.$emit('ok');
              that.visible = false;
            }else{
              that.$message.warning(res.message);
            }
            this.spinningAdd = false;
          }).finally(() => {
          that.confirmLoading = false;
          this.spinningAdd = false;
        })

      },
      getTaskState(taskState) {
        if (taskState === 0) {
          this.task.taskStateColor = '#fadb14';
          this.task.taskStateText = '未开始';
        } else if (taskState === 1) {
          this.task.taskStateColor = '#1890ff';
          this.task.taskStateText = '稽核中';
        } else if (taskState === 2) {
          this.task.taskStateColor = '#52c41a';
          this.task.taskStateText = '稽核完成';
        }
      },
      queryInfoById (id) {
        let url = this.url.queryTask;
        let params = {
          id: id
        }
        let that = this;
        getAction(url, params).then(res => {
          if (res.success) {
            that.task = res.result;
            that.getTaskState(that.task.taskState);
          }
        }).finally(() => {

        })
      },
    }
  }
</script>

<style scoped>

</style>