<template>
  <el-dialog title="上传客户" :visible.sync="visible" width="560px" append-to-body>
    <section class="status-wrap">
      <el-result v-if="statusType === 'success'" icon="success">
        <div slot="extra" class="common-tips">
          <p class="status-tips common-style">上传成功</p>
        </div>
      </el-result>
      <el-result v-if="statusType === 'error'" icon="error">
        <div slot="extra" class="common-tips">
          <p class="status-tips common-style">上传失败</p>
          <section class="error-tips">
            <p class="common-style">失败原因可能有: 无导入（某个客户）的权限、</p>
            <p class="common-style">格式不正确，请返回检查后重试</p>
          </section>
        </div>
      </el-result>
      <el-result v-if="statusType === 'warning'" icon="warning">
        <div slot="extra" class="common-tips">
          <p class="status-tips common-style">上传成功</p>
          <section class="warning-tips">
            <p class="common-style">上传成功的客户: 请前往地址审核页查看。</p>
            <p class="common-style">
              上传失败的客户: 请 <el-link type="primary" @click="onPreview">弹窗查看</el-link>。（失败的原因可能有:
              无导入（某个客户）的权限、格式不正确，请返回检查后重试）
            </p>
          </section>
        </div>
      </el-result>
    </section>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="['success', 'error'].includes(statusType)" @click="onClose">确定</el-button>
      <el-button type="primary" v-if="['warning'].includes(statusType)" @click="downloadFlie" :loading="btnLoading">下载失败数据</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { exportFailQy, exportFailGr } from '@/api/grid/anchor.js'
import { downloadFiles } from '@/utils'
import { custTypeMap } from './../constant-info'

export default {
  props: {
    statusType: {
      type: String,
      required: true
    },
    custType: {
      type: String,
      default: ''
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    visible(val) {
      val && this.getInitData()
    }
  },
  data() {
    return {
      visible: false,
      btnLoading: false
    }
  },
  methods: {
    getInitData() {},
    onClose() {
      this.visible = false
    },
    onPreview() {
      this.$emit('onPreview')
    },
    onOpen() {
      this.visible = true
    },
    onOk() {},
    downloadFlie() {
      this.btnLoading = true
      const apiUrl = ['2', '1'].includes(this.custType) ? exportFailQy : exportFailGr
      apiUrl(this.tableData)
        .then((res) => {
          downloadFiles(res, `${custTypeMap[this.custType]}失败客户.xlsx`)
        })
        .catch((err) => {
          console.error(err)
        })
        .finally(() => {
          this.btnLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.status-tips {
  margin-bottom: 24px;
  margin-top: 4px;
}
.el-link--primary {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.common-style {
  line-height: 22px;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
::v-deep .el-result__extra {
  margin-top: 0;
}
.warning-tips {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  p {
    width: 492px;
    text-align: left;
  }
}
</style>