<template>
  <div class="contact-info">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <cy-info-title>企业联系人信息</cy-info-title>
      <el-form-item label="联系人名字" prop="contactPerson">
        <el-input
          v-model="ruleForm.contactPerson"
          :disabled="disabled"
          placeholder="请输入联系人名字"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人手机号码" prop="contactPhone">
        <el-input
          v-model="ruleForm.contactPhone"
          :disabled="disabled || verifyEmailStatus"
          placeholder="请输入手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="$route.query.type !== 'see'" label="验证码" class="form-required">
        <el-input
          v-model="ruleForm.phoneCode"
          placeholder="请输入验证码"
          type="text"
          tabindex="1"
          auto-complete="on"
        >
          <template #append>
            <div style="display: flex;">
              <verification-code
                :code="ruleForm.contactPhone"
                module="other"
                type="phone"
                placeholder="手机号码"
                @startCall="verifyCodeStartCall"
                @endCall="verifyCodeEndCall"
              />
              <el-button v-if="showVerifyPhoneBtn" @click="handleVerifyPhone">验证</el-button>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="联系人邮箱地址" prop="contactEmail">
        <el-input
          v-model="ruleForm.contactEmail"
          :disabled="disabled || verifyEmailStatus"
          placeholder="请输入邮箱地址"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="$route.query.type !== 'see'" label="验证码" class="form-required">
        <el-input
          v-model="ruleForm.emailCode"
          placeholder="请输入验证码"
          type="text"
          tabindex="1"
          auto-complete="on"
        >
          <template #append>
            <div style="display: flex;">
              <verification-code
                :code="ruleForm.contactEmail"
                module="other"
                type="email"
                placeholder="邮箱地址"
                @startCall="verifyCodeStartCallEmail"
                @endCall="verifyCodeEndCallEmail"
              />
              <el-button v-if="showVerifyEmailBtn" @click="handleVerifyEmail">验证</el-button>
            </div>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { verifyCode } from '@/api/common'

export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    verificationCode: () => import('@/components/VerificationCode/index.vue')
  },
  data() {
    return {
      ruleForm: {
        contactPerson: '',
        contactPhone: '',
        phoneCode: '',
        contactEmail: '',
        emailCode: ''
      },
      rules: {
        contactPerson: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        contactPhone: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
        contactEmail: [{ required: true, message: '请输入联系人邮箱', trigger: 'blur' }]
      },
      showVerifyPhoneBtn: false,
      showVerifyEmailBtn: false,
      verifyPhoneStatus: false,
      verifyEmailStatus: false
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        if (Object.keys(val).length) {
          const { contactPerson, contactPhone, contactEmail } = val
          this.ruleForm = {
            contactPerson,
            contactPhone,
            contactEmail
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    getParams(type) {
      return new Promise((resolve) => {
        if (type === 'temp') {
          resolve(this.ruleForm)
        } else {
          if (!this.ruleForm.phoneCode) {
            this.$message.warning('请输入手机验证码')
            return
          }
          if (!this.ruleForm.emailCode) {
            this.$message.warning('请输入邮箱验证码')
            return
          }
          this.$refs.ruleFormRef.validate((valid) => {
            if (valid) {
              resolve(this.ruleForm)
            }
          })
        }
      })
    },
    async handleVerifyPhone() {
      const params = {
        phoneNumber: this.ruleForm.contactPhone,
        code: this.ruleForm.phoneCode
      }

      try {
        const res = await verifyCode(params)

        if (res.success) {
          this.verifyPhoneStatus = true
        }
      } catch (error) {
        console.log('error----', error)
        this.verifyPhoneStatus = false
      }
    },
    verifyCodeStartCall(status) {
      this.showVerifyPhoneBtn = status
    },
    verifyCodeEndCall(status) {
      this.showVerifyPhoneBtn = status
    },
    async handleVerifyEmail() {
      const params = {
        phoneNumber: this.ruleForm.contactEmail,
        code: this.ruleForm.emailCode
      }

      try {
        const res = await verifyCode(params)

        if (res.success) {
          this.verifyEmailStatus = true
        }
      } catch (error) {
        console.log('error----', error)
        this.verifyEmailStatus = false
      }
    },
    verifyCodeStartCallEmail(status) {
      this.showVerifyEmailBtn = status
    },
    verifyCodeEndCallEmail(status) {
      this.showVerifyEmailBtn = status
    }
  }
}
</script>

<style lang="scss" scoped></style>
