<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"
    />
    <footer style="display: flex; justify-content: flex-end; margin-top: 16px">
      <template v-if="!confirm">
        <Button
          type="fcdefault"
          @click="closeDialog()"
        >
          确定
        </Button>
      </template>
      <template v-else>
        <Button
          type="fcdefault"
          @click="closeDialog()"
        >
          否
        </Button>
        <Button
          type="posdefault"
          style="margin-left: 8px;"
          @click="btnContinue()"
        >
          是
        </Button>
      </template>
    </footer>
  </div>
</template>

<script lang="js">
  import common from '@yunque/service/modules/common';

  export default {
    name: 'JitDeliveryBoxingComplete',
    props: {
      idArray: { // 获取ID用于多选
        type: Array,
        default: () => []
      },
      selectRowData: { // 获取选择行的数据
        type: Array,
        default: () => []
      }
    },
    async created() {
      try {
        // // 当前只允许选择一条数据
        // let selectRow = this.selectRowData[0];
        await this.firstPacking(this.idArray);
      } catch (e) {
        console.log(e);
        this.message = `系统出现异常，请联系管理员！<br />${e}`;
      } finally {
        this.loading = false;
      }
    },
    data() {
      return {
        loading: true,
        message: '',
        processedSuccessfully: false, // 是否处理成功
        confirm: false // 是否显示确定区域
      };
    },
    methods: {
      async firstPacking(idarray) {
        let data = {
          tableName: this.$route.params.tableName,
          ids: idarray,
          actionName: 'T_OMSJITDELIVERY_装箱完成_SP2',
        };
        const res = await common.exeAction(data);
        // this.setTitle('友情提示');
        if (res === null) {
          this.message = '调用接口出现异常，请联系管理员！';
        } else if (res.code == 10) {
          this.processedSuccessfully = true;
          this.message = res.message;
          this.confirm = true;
        } else if (res.code == 0) {
          this.processedSuccessfully = true;
          this.closeDialog();
          this.$Message.success('装箱成功');
        } else if (res.code == -1) {
          this.message = res.message;
        }
      },
      /**
       * 继续
       */
      async btnContinue() {
        try {
          // this.setTitle('JIT出仓单装箱');
          this.confirm = false;
          this.loading = true;
          await this.boxing();
        } catch (e) {
          console.log(e);
          this.message = `系统出现异常，请联系管理员！<br />${e}`;
        } finally {
          this.loading = false;
        }
      },
      /**
       * 装箱
       */
      async boxing() {
        const param = {
          ids: this.idArray,
          param: { SUBPARAM: '1' },
          tableName: this.$route.params.tableName,
          actionName: 'T_OMSJITDELIVERY_装箱完成_SP',
          isContainsParam: true
        };
        const res = await common.exeAction(param);
        // this.setTitle('友情提示');
        if (res === null) {
          this.message = '调用接口出现异常，请联系管理员！';
        } else if (res.code !== 0) {
          this.message = res.message;
        } else {
          this.processedSuccessfully = true;
          this.closeDialog();
          this.$Message.success('装箱成功');
        }
      },
      /**
       * 关闭窗口
       */
      closeDialog() {
        this.$emit('closeActionDialog', this.processedSuccessfully);
      },
      setTitle(title) {
        this.$emit('setTitle', title);
      }
    }
  };
</script>
