<template>
  <div>
    <Spin fix v-if="loading">
      <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"></circle>
        </svg>
      </div>
      <div>正在同步退回物流单号，请稍后...</div>
    </Spin>
    <div v-else-if="showMessage">{{ message }}</div>
    <Table v-else height="400" :columns="table.columns" :data="table.data"></Table>
    <businessButton :btn-config="btnConfig" />
  </div>
</template>

<script lang="js">
  import businessButton from 'professionalComponents/businessButton';
  import { refundOrder } from '@yunque/service/index';

  export default {
    name: 'SyncReturnLogisticNO',
    components: {
      businessButton
    },
    props: {
      idArray: { // 获取ID用于多选
        type: Array,
        default: () => []
      }
    },
    async created() {
      try {
        const rsp = await refundOrder.syncReturnLogisticNO(this.idArray);
        if (!rsp) {
          this.message = '请求数据异常或没有任何返回值';
        } else if (rsp.code !== 0) {
          this.message = rsp.message;
        } else {
          this.table.data = rsp.data;
          this.processedSuccessfully = true;
        }
      } catch (e) {
        this.message = `${e.name} 请求数据异常，${e.message}`;
      } finally {
        this.loading = false;
      }
    },
    data() {
      return {
        loading: true,
        message: '',
        processedSuccessfully: false, // 是否处理成功
        table: {
          columns: [
            {
              title: '编号',
              key: 'refundOrderId'
            },
            {
              title: '信息',
              key: 'message'
            }
          ],
          data: []
        },
        btnConfig: {
          typeAll: 'error', // 按钮统一风格样式
          btnsite: 'center', // 按钮位置 (right , center , left)
          buttons: [
            {
              type: '', // 按钮类型
              text: '关闭列表', // 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.closeDialog();
              }, // 按钮点击事件
            }
          ]
        }
      };
    },
    computed: {
      showMessage() {
        if (this.message) {
          this.btnConfig.btnsite = 'right';
          let btnClose = this.btnConfig.buttons[0];
          btnClose.text = '确定';

          return true;
        }
        return false;
      }
    },
    methods: {
      closeDialog() {
        this.$emit('closeActionDialog', this.processedSuccessfully);
      }
    }
  };
</script>
