<template>
  <div>
    <Spin
      v-if="loading"
      fix
    >
      <div class="loader">
        <svg
          class="circular"
          viewBox="25 25 50 50"
        >
          <circle
            class="path"
            cx="50"
            cy="50"
            r="20"
            fill="none"
            stroke-width="5"
            stroke-miterlimit="10"
          />
        </svg>
      </div>
      <div>拼多多模板下载中，请稍后...</div>
    </Spin>
    <div
      v-else
      v-html="message"
    />
    <businessButton :btn-config="btnConfig" />
  </div>
</template>

<script lang="js">
  import businessButton from 'professionalComponents/businessButton';

  export default {
    name: 'DownLoadPDDTemplate',
    components: {
      businessButton
    },
    props: {
      idArray: { // 获取ID用于多选
        type: Array,
        default: () => []
      },
      itemId: {// 获取当前子表表名
        type: String,
        default: () => ''
      },
      selectRowData: { // 获取选择行的数据
        type: Array,
        default: () => []
      }
    },
    async created() {
      try {
        try {
          const { data } = await this.service.interfacePlatform.downLoadPDDTemplate({});
          console.log('接口返回::', data);
          if (data.code == 0) {
            let resData = data.data;
            this.message = `<span style="display: inline-block;margin-bottom: 12px;">成功获取${resData.length}个物流模板，内容如下（如获取的模板中没有您需要的模板，请检查【拼多多物流公司编码】或物流公司中的【快递模板URL】配置）。</span><br/>`;
            resData.forEach((item, index) => {
              this.message = `${`${this.message + (index + 1)} ${item}`}<br/>`;
            });
          } else {
            this.message = data.Message || '下载更新拼多多快递模板地址失败';
          }
        } catch (e) {
          if (e.response) {
            if (e.response.status == 500) {
              this.$emit('closeActionDialog', false);
            }
          }
        }
      } finally {
        this.loading = false;
      }
    },
    data() {
      return {
        loading: true,
        message: '',
        btnConfig: {
          typeAll: 'error', // 按钮统一风格样式
          btnsite: 'right', // 按钮位置 (right , center , left)
          buttons: [
            {
              type: '', // 按钮类型
              text: '确定', // 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.closeDialog();
              }, // 按钮点击事件
            }
          ]
        }
      };
    },
    methods: {
      closeDialog() {
        this.$emit('closeActionDialog', false);
      }
    }
  };
</script>
