<template>
  <CommonModal
    v-model="show"
    class="verify-modal"
    title="提示"
    width="450"
    closable
    :on-confirm="onConfirm"
    @change="onVisibleChange"
  >
    <div class="modal-content">
      <Form
        ref="form"
        :model="formData"
        :label-width="135"
        :rules="rules"
        @submit.native.prevent
      >
        <FormItem
          :label="label"
          prop="value"
          label-position="top"
        />
        <Input
          ref="input"
          v-model="formData.value"
          :placeholder="placeholder"
          @on-enter="onConfirm"
        /></Input>
      </Form>
    </div>
  </CommonModal>
</template>

<script>
  import CommonModal from '@yunque/component/modal/commonModal/index.vue';

  export default {
    name: 'VerifyModal',

    components: {
      CommonModal,
    },

    props: {
      isScanLogistics: {
        type: Boolean,
        default: false,
      },
      visible: {
        type: Boolean,
      },
      // 订单号
      orderId: {
        type: [String, Number],
      },
      // 物流号
      logisticsId: {
        type: [String, Number],
      },
      clearCallback: {
        type: Function
      },
      playError: {
        type: Function
      }
    },

    model: {
      prop: 'visible',
      event: 'change',
    },

    computed: {
      label() {
        return this.isScanLogistics ? '请核对订单编号' : '请核对物流单号';
      },

      placeholder() {
        return this.isScanLogistics ? '请输入订单编号' : '请输入物流单号';
      }
    },

    data() {
      const validatePass = (rule, value, callback) => {
        const val = (value || '').trim();
        if (this.isScanLogistics) {
          // 扫的是物流，则匹配订单
          if (value === this.orderId.toString()) {
            this.isPass = true;
            callback();
          } else {
            this.isPass = false;
            this.playError();
            callback(new Error('订单编号与物流单号不符，不能出库！'));
          }
        } else {
          // 扫的是订单，则匹配物流
          if (value === this.logisticsId) {
            this.isPass = true;
            callback();
          } else {
            this.isPass = false;
            this.playError();
            callback(new Error('订单编号与物流单号不符，不能出库！'));
          }
        }
      };
      return {
        formData: {
          value: ''
        },
        show: this.visible,
        rules: {
          value: [
            { validator: validatePass, trigger: 'blur' }
          ]
        },
        isPass: false
      };
    },

    watch: {
      visible(val) {
        this.show = val;
        if (!val) {
          this.clearCache();
        } else {
          setTimeout(() => {
            const dom = this.$refs.input;
            if (dom) {
              dom.focus();
            }
          }, 200);
        }
      }
    },

    mounted() {

    },

    methods: {
      clearCache() {
        console.log('清除');
        this.formData = {
          value: ''
        };
      },

      onConfirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$emit('change', false);
            this.$emit('on-confirm', this.formData);
          }
        });
      },

      // 处理modal关闭
      onVisibleChange(val) {
        if (!val) {
          if (!this.isPass) {
            this.clearCallback();
          }
          this.$emit('change', false);
        }
      },
    },
  };
</script>

<style lang="less" scoped>
</style>
<style lang="less">
.verify-modal {
  .ark-form-item {
    margin-bottom: 8px;
  }
  .ark-form .ark-form-item-label {
    text-align: left;
  }
  .ark-form-item-error-tip {
    top: 66px;
    left: -133px;
  }
}
</style>
