<template>
  <div class="supplier-enterprise">
    <cy-info-title> 基础信息 </cy-info-title>
    <enterprise-inspection ref="enterpriseInspection" :enterprise-inspection="enterpriseInspection" />
    <el-form
      ref="ruleFormOneRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <el-form-item
        label="本次合作品类是否为建工行业"
        prop="constructionIndustry"
        class="industry"
      >
        <el-radio-group v-model="ruleForm.constructionIndustry" :disabled="disabled">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
      style="margin-top: 20px"
    >
      <cy-info-title>联系人信息</cy-info-title>
      <el-form-item label="企业联系人姓名" prop="contactName" style="width: 100%">
        <el-input v-model="ruleForm.contactName" placeholder="请输入企业联系人姓名" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="企业联系人电话" prop="mobile" class="one-form-item">
        <el-input v-model="ruleForm.mobile" placeholder="请输入企业联系人电话" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="企业联系人邮箱" prop="email" class="one-form-item">
        <el-input v-model="ruleForm.email" placeholder="请输入企业联系人邮箱" :disabled="disabled" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {
    EnterpriseInspection: () => import('../components/EnterpriseInspection.vue')
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    deatailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        constructionIndustry: '',
        contactName: '',
        mobile: '',
        email: '',
        SMSCode: '',
        mailCode: ''
      },
      rules: {
        constructionIndustry: [
          { required: true, message: '请选择本次合作品类是否为建工行业', trigger: 'change' }
        ],
        contactName: [
          { required: true, message: '请输入企业联系人姓名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入企业联系人电话', trigger: 'blur' }
        ],
        SMSCode: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入企业联系人邮箱', trigger: 'blur' }
        ],
        mailCode: [
          { required: true, message: '请输入邮箱验证码', trigger: 'blur' }
        ]
      },
      enterpriseInspection: {}
    }
  },
  watch: {
    deatailsInfo: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const { enterprise, constructionIndustry, supplierContact } = JSON.parse(JSON.stringify(newV))
          this.enterpriseInspection = {
            corporateName: enterprise.corporateName,
            socialCreditCode: enterprise.socialCreditCode,
            legalRepresentative: enterprise.legalRepresentative,
            startSate: enterprise.startSate,
            registeredCapital: enterprise.registeredCapital,
            address: enterprise.address
          }
          this.ruleForm = {
            constructionIndustry,
            contactName: supplierContact.contactName,
            mobile: supplierContact.mobile,
            email: supplierContact.email
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormOneRef.validate((valid) => {
          console.log(valid)
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>

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

<style lang="scss">
.supplier-enterprise {
  .rule-form {
    .industry {
      width: 100%;
      .el-form-item__label {
        line-height: 22px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: left;
      }
    }
  }
  .next-step {
    margin-top: 60px;
    text-align: center;
  }
}
</style>
