<template>
  <Dialog
    :flag="abnormalBaggageDialogFlag"
    width="400px"
  >
    <div
      id="dialogAbnormalBaggage"
      ref="dialog"
      tabindex="0"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      @keyup.self.esc="dialogHide"
    >
      <div class="title">
        <span>不正常行李信息-{{ bagSN }}</span>
        <i
          class="el-icon-close"
          @click="dialogHide"
        />
      </div>
      <div class="content">
        <el-form
          :model="formData"
          class="abnormal-form"
          label-position="right"
          label-width="80px"
        >
          <el-form-item
            v-for="item in formItems"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
          >
            <el-input
              v-model="formData[item.prop]"
              size="small"
              placeholder=""
              disabled
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </Dialog>
</template>

<script>
import Dialog from '@/layout/components/Dialog'
import { mapGetters } from 'vuex'
import { Query } from '@/api/dataIntegration'

export default {
  name: 'AbnormalBaggageDialog',
  components: { Dialog },
  computed: {
    ...mapGetters(['abnormalBaggageDialogFlag', 'abnormalBaggageQueryParams']),
  },
  data() {
    return {
      loading: false,
      formData: {
        fileNumber: '',
        compensationType: '',
        currencyCode: '',
        compensationMoney: '',
        compensationTime: '',
      },
      formItems: [
        {
          label: '卷宗号',
          prop: 'fileNumber',
        },
        {
          label: '赔偿类型',
          prop: 'compensationType',
        },
        {
          label: '货币代码',
          prop: 'currencyCode',
        },
        {
          label: '赔偿金额',
          prop: 'compensationMoney',
        },
        {
          label: '赔偿时间',
          prop: 'compensationTime',
        },
      ],
      bagSN: ''
    }
  },
  watch: {
    abnormalBaggageDialogFlag(val) {
      if (val) {
        const { bagSN, fileNumber } = this.abnormalBaggageQueryParams
        this.bagSN = bagSN
        this.formData.fileNumber = fileNumber
        this.getFormData()
        this.$nextTick(() => {
          this.$refs['dialog']?.focus()
        })
      }
    },
  },
  methods: {
    dialogHide() {
      this.$refs['baggageForm']?.resetFields()
      this.$store.dispatch('app/toggleAbnormalBaggageDialogFlag', false)
    },
    async getFormData() {
      this.loading = true
      try {
        const { flightNO, flightDate, bagSN, fileNumber } = this.abnormalBaggageQueryParams
        const {
          code,
          returnData: { listValues },
        } = await Query({
          id: DATACONTENT_ID.abnormalBaggageInfo,
          dataContent: [flightNO, flightDate, bagSN, fileNumber],
        })
        if (Number(code) === 0) {
          if (listValues.length) {
            const { costType, currencycode, amount, dataEntered } = listValues[0]
            this.formData.compensationType = costType
            this.formData.currencyCode = currencycode
            this.formData.compensationMoney = amount
            this.formData.compensationTime = dataEntered?.replace('T', ' ')
          } else {
            this.$message.info('未查询到对应数据')
          }
        } else {
          this.$message.error('失败')
        }
      } catch (error) {
        this.$message.error(error.message)
      }
      this.loading = false
    },
  },
}
</script>

<style lang="scss">
#dialogAbnormalBaggage {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    .el-icon-close {
      margin-right: 16px;
      cursor: pointer;
    }
  }
  .content {
    margin: 0;
    .el-form {
      padding: 20px 24px 6px 20px;
    }
  }
}
</style>
