<template>
  <div class="supplier-enterprise">
    <cy-info-title> 基础信息 </cy-info-title>
    <enterprise-inspection ref="enterpriseInspection" :details-info="enterpriseInfo" :disabled="disabled" />
    <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" disabled>否</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" :disabled="disabled" placeholder="请输入企业联系人姓名" />
      </el-form-item>
      <el-form-item label="企业联系人电话" prop="mobile" class="one-form-item">
        <el-input v-model="ruleForm.mobile" :disabled="disabled" placeholder="请输入企业联系人电话" />
      </el-form-item>
      <el-form-item v-if="!disabled" label="短信验证码" prop="SMSCode" class="one-form-item">
        <el-input v-model="ruleForm.SMSCode" placeholder="请输入短信验证码">
          <template #append>
            <verification-code :code="ruleForm.mobile" type="phone" placeholder="企业联系人电话" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="企业联系人邮箱" prop="email" class="one-form-item">
        <el-input v-model="ruleForm.email" :disabled="disabled" placeholder="请输入企业联系人邮箱" />
      </el-form-item>
      <el-form-item v-if="!disabled" label="邮箱验证码" prop="mailCode" class="one-form-item">
        <el-input v-model="ruleForm.mailCode" placeholder="请输入邮箱验证码">
          <template #append>
            <verification-code :code="ruleForm.email" type="mail" placeholder="企业联系人邮箱" />
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div v-if="!disabled" class="next-step">
      <el-button type="primary" style="width: 120px" @click="submit">下一步</el-button>
    </div>
  </div>
</template>

<script>
import { addSupplier, getDetailsInfo } from '@/api/myBusiness/supplierEnterprise'
export default {
  components: {
    EnterpriseInspection: () => import('../components/EnterpriseInspection.vue'),
    VerificationCode: () => import('@/components/VerificationCode/index.vue')
  },
  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' }
        ]
      },
      disabled: false,
      enterpriseInfo: {}
    }
  },
  created() {
    const { id } = this.$route.params
    if (id === 'see') {
      this.getDetails()
      this.disabled = true
    }
  },
  methods: {
    getDetails() {
      const { id } = this.$route.query
      getDetailsInfo({ id }).then(({ data }) => {
        const {
          supplierContact: { contactName, mobile, email },
          constructionIndustry,
          enterprise: {
            corporateName,
            socialCreditCode,
            legalRepresentative,
            startSate,
            address
          }
        } = data
        this.ruleForm = {
          ...this.ruleForm,
          constructionIndustry,
          contactName,
          mobile,
          email
        }
        this.enterpriseInfo = {
          corporateName,
          socialCreditCode,
          legalRepresentative,
          startSate,
          address
        }
      })
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormOneRef.validate((valid) => {
          console.log(valid)
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    async submit() {
      const enterprise = await this.$refs.enterpriseInspection.validate()
      await this.validate()
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          const supplierContact = {
            ...this.ruleForm
          }
          const { constructionIndustry } = this.ruleForm
          delete supplierContact.constructionIndustry
          addSupplier({ Loading: true, constructionIndustry, enterprise, supplierContact }).then(({ data: { status, id, errors }}) => {
            if (errors.length) {
              this.$message.warning(errors.join(','))
              return
            }
            const addProjectList = ['c_supplier_status_2 ', 'c_supplier_status_3', 'c_supplier_status_4', 'c_supplier_status_5', 'c_supplier_status_6', 'c_supplier_status_7', 'c_supplier_status_8']
            if (status === 'c_supplier_status_0' || status === 'c_supplier_status_1') {
              this.$router.push({
                name: 'MyBusinessError',
                params: {
                  id: 'child'
                },
                query: {
                  status: status
                }
              })
            } else if (status === 'c_supplier_status_2') {
              this.$router.push({
                name: 'MyBusinessSupplementaryInfo',
                params: {
                  id: 'child'
                },
                query: {
                  status: status,
                  id
                }
              })
            } else if (addProjectList.includes(status)) {
              this.$router.push({
                name: 'MyBusiness',
                // params: {
                //   id: 'child'
                // },
                query: {
                  status: status,
                  id
                }
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</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>
