<template>
  <span class="aos-phone-call" @click="handlePhoneCall" title="点击即可拨打电话">
    <slot></slot>
    <i v-if="showIcon" class="el-icon-phone-outline"></i>
  </span>
</template>

<script>
export default {
  name: "AosPhoneCall",
  props: {
    showIcon: {
      type: Boolean,
      default: true
    },
    // 系统标识，平台分配。乘用车:PV;商用车:CV;工程机械:CM
    sysCode: {
      type: String,
      required: true,
      validator: function (val) {
        return ['PV', 'CV', 'CM'].indexOf(val) > -1
      }
    },
    // 业务模块, 例: collection
    businessType: {
      type: String,
      required: true
    },
    // 手机号
    phoneNumber: {
      type: String,
      required: true
    },
    // 合同号
    contractNumber: {
      type: String,
      required: true
    },
    // 姓名
    name: {
      type: String,
      required: true
    },
    // 订单号，非必填
    orderNumber: {
      type: String
    },
    beforeCall: {
      type: Function
    }
  },
  computed: {
    mobileNum () {
      return this.phoneNumber
    },
    contractNo () {
      return this.contractNumber
    },
    orderNo () {
      return this.orderNumber
    }
  },
  data () {
    return {}
  },
  methods: {
    validateProps () {
      let flag = true;
      let message = ''
      if (!this.sysCode) {
        flag = flag && false
        message = '缺少系统标识字段'
        return {
          flag,
          message
        }
      }
      if (!this.businessType) {
        flag = flag && false
        message = '缺少业务模块字段'
        return {
          flag,
          message
        }
      }
      if (!this.contractNo) {
        flag = flag && false
        message = '缺少合同号字段'
        return {
          flag,
          message
        }
      }
      if (!this.name) {
        flag = flag && false
        message = '缺少名称字段'
        return {
          flag,
          message
        }
      }
      if (!this.phoneNumber) {
        flag = flag && false
        message = '缺少手机号字段'
        return {
          flag,
          message
        }
      }
      return {
        flag,
        message
      }
    },
    async handlePhoneCall () {
      const self = this;
      let flag = true;
      if (this.beforeCall && typeof this.beforeCall === 'function') {
        let promiseFunction = this.$_.cloneDeep(this.beforeCall)
        if (typeof this.beforeCall.then !== 'function') {
          promiseFunction = function () {
            return new Promise((resolve) => {
              resolve(self.beforeCall())
            })
          }
        }
        try {
          flag = await promiseFunction()
        } catch (error) {
          console.log(error)
          flag = true
        }
      }
      if (!flag) return
      const validateData = this.validateProps()
      if (!validateData.flag) {
        this.$message({
          type: 'error',
          message: validateData.message
        })
        return false
      }
      const confirmMessage = `确定给${this.name}：${this.mobileNum}拨打电话？`
      this.$confirm(confirmMessage, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let notifyMessage = '<span>拨打电话中<i class="el-icon-loading"></i></span>'
        const notify = this.$notify({
          title: '提示',
          type: 'info',
          dangerouslyUseHTMLString: true,
          message: notifyMessage,
          duration: 0
        });
        const data = {
          sysCode: this.sysCode,
          businessType: this.businessType,
          contractNo: this.contractNo,
          name: this.name,
          mobileNum: this.phoneNumber,
          orderNo: this.orderNo
        }
        this.$http({
          url: '/tx/api/call/outbound',
          method: 'post',
          data: data
        }).then(res => {
          if (res.data.status === '1') {
            notify.close()
            this.$notify({
              title: '提示',
              type: 'success',
              message: '拨打电话成功',
            });
            this.$emit('success', res.data)
          } else {
            notify.close()
            this.$notify({
              title: '提示',
              type: 'error',
              message: res.data.respMsg || '拨打电话出错'
            });
            this.$emit('fail', res.data)
          }
        }).catch((error) => {
          notify.close()
          this.$notify({
            title: '提示',
            type: 'error',
            message: error.title || '拨打电话出错'
          });
          this.$emit('fail', error)
        })
      })
    }
  }
}
</script>
