<template>
  <div class="supplier-edit">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >

      <cy-info-title style="margin: 0px -15px 10px;"> 基础信息 </cy-info-title>
      <el-form-item label="供应商名称" prop="entityName">
        <el-input v-model="ruleForm.entityName" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="certNo">
        <el-input v-model="ruleForm.certNo" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="联系人姓名" prop="contactName">
        <el-input v-model="ruleForm.contactName" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="联系人身份证号" prop="contactCertNo">
        <el-input v-model="ruleForm.contactCertNo" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="联系人电话" prop="contactMobile">
        <el-input v-model="ruleForm.contactMobile" placeholder="请输入有效的联系人手机号" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="联系人邮箱" prop="contactEmail">
        <el-input v-model="ruleForm.contactEmail" placeholder="请输入常用邮箱" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="经营地址" prop="businessAddress">
        <el-input v-model="ruleForm.businessAddress" placeholder="请输入省，市，区，详细地址" :disabled="disabled" />
      </el-form-item>

      <cy-info-title style="margin: 15px -15px 10px;"> 收款账户 </cy-info-title>
      <el-form-item label="收款账户名称" prop="acctName">
        <el-input v-model="ruleForm.acctName" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="银行账号" prop="acctNo">
        <el-input v-model="ruleForm.acctNo" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="开户行" prop="acctOpenBank">
        <el-input v-model="ruleForm.acctOpenBank" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
    </el-form>

    <div class="submit-btn">
      <el-button @click="closePage">关闭</el-button>
      <!-- <el-button type="primary" @click="validate('temp')">暂存</el-button> -->
      <el-button v-if="source !== 'view'" type="primary" @click="validate('submit')">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getSupplierDetails, addSupplier } from '@/api/businessManage/tradeRelations'
import { validIdcard, validMail, validNumber, validPhone } from '@/utils/validate'
import store from '@/store'
export default {
  props: {
    source: {
      type: String,
      default: ''
    }
  },
  data() {
    const validContactPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入'))
      } else if (!validPhone(value)) {
        callback(new Error('手机号格式有误'))
      } else {
        callback()
      }
    }
    const validContactEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入'))
      } else if (!validMail(value)) {
        callback(new Error('邮箱格式有误'))
      } else {
        callback()
      }
    }
    const validContactIdcard = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入'))
      } else if (!validIdcard(value)) {
        callback(new Error('身份证号格式有误'))
      } else {
        callback()
      }
    }
    const validAcctNo = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入'))
      } else if (!validNumber(value)) {
        callback(new Error('银行账号格式有误'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        customerUserId: null,
        entityName: '',
        certNo: '',
        contactName: '',
        contactCertNo: '',
        contactMobile: '',
        contactEmail: '',
        businessAddress: '',
        acctName: '',
        acctNo: '',
        acctOpenBank: ''
      },
      rules: {
        entityName: [{ required: true, trigger: 'blur', message: '请输入' }],
        certNo: [{ required: true, trigger: 'blur', message: '请输入' }],
        contactName: [{ required: true, trigger: 'blur', message: '请输入' }],
        contactCertNo: [{ required: true, trigger: 'blur', message: '请输入' }, { validator: validContactIdcard, trigger: 'blur' }],
        contactMobile: [{ required: true, trigger: 'blur', message: '请输入有效的联系人手机号' }, { validator: validContactPhone, trigger: 'blur' }],
        contactEmail: [{ required: true, trigger: 'blur', message: '请输入常用邮箱' }, { validator: validContactEmail, trigger: 'blur' }],
        businessAddress: [{ required: true, trigger: 'blur', message: '请输入' }],
        acctName: [{ required: true, trigger: 'blur', message: '请输入' }],
        acctNo: [{ required: true, trigger: 'blur', message: '请输入' }, { validator: validAcctNo, trigger: 'blur' }],
        acctOpenBank: [{ required: true, trigger: 'blur', message: '请输入' }]
      },
      disabled: false
    }
  },
  created() {
    this.ruleForm.customerUserId = store.getters.userInfo.id
    if (this.source === 'view') {
      this.getDetailInfo()
      this.disabled = true
    }
  },
  methods: {
    getDetailInfo() {
      const { id } = this.$route.params
      getSupplierDetails({ entityId: id }).then(res => {
        if (res.success) {
          const { data } = res
          for (const k in this.ruleForm) {
            if (data[k] !== '' && data[k] !== null && data[k] !== undefined) {
              this.ruleForm[k] = data[k]
            }
          }
        }
      })
    },

    validate(submitType) {
      var params = {
        Loading: true,
        ...this.ruleForm
      }

      if (submitType === 'temp') {
        this.submit(params, submitType)
      } else if (submitType === 'submit') {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            this.submit(params, submitType)
          } else {
            this.$message.warning('必填项不能为空')
          }
        })
      }
    },
    submit(data, submitType) {
      addSupplier(data).then((res) => {
        if (res.success) {
          if (submitType === 'submit') {
            this.$message.success('提交成功')
            this.closePage()
          } else {
            this.$message.success('暂存成功')
            this.closePage()
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },

    closePage() {
      this.$router.push({
        name: 'TradeRelations'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .supplier-edit {
    padding: 10px 30px;
    .statistics {
      color: #FF0000;
      margin-left: 20px;
      font-size: 14px;
    }
    .tips {
      color: #918c8c;
      font-size: 12px;
    }
    .required-item {
      .required-label:before {
        content: '*'!important;
        color: #F56C6C;
        margin-right: 4px;
      }

    }
    .table-tip-icon {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      line-height: 14px;
      text-align: center;
      border: 1px solid #ff0000;
      color: #ff0000;
      margin-right: 5px;
    }
  }
</style>
