<template>
  <div class="importer-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="税号（VAT Number）" prop="vatNo">
        <el-input v-model="ruleForm.vatNo" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="所属区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择" :disabled="disabled">
          <el-option
            v-for="item in constant.district_code"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.region === 'FOREIGN'"
        label="境外国家"
        prop="country"
        :rules="[{ required: ruleForm.region === 'FOREIGN', trigger: 'blur', message: '请选择境外国家' }]"
      >
        <el-select v-model="ruleForm.country" placeholder="请选择" :disabled="disabled">
          <el-option
            v-for="item in constant.countryList"
            :key="item.code"
            :label="item.code + ' ' + item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="经营地址（省 / 州 / 区）" prop="businessProvince">
        <el-input v-model="ruleForm.businessProvince" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="经营地址（市 / 区）" prop="businessCity">
        <el-input v-model="ruleForm.businessCity" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="经营地址（详细地址）" prop="businessAddress">
        <el-input v-model="ruleForm.businessAddress" placeholder="街道、门牌号，或P.O.Box" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="经营地址邮政编码" prop="businessPostCode">
        <el-input v-model="ruleForm.businessPostCode" placeholder="请输入" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="是否允许直接联系" prop="contactDirectInd">
        <el-select v-model="ruleForm.contactDirectInd" placeholder="请选择" :disabled="disabled">
          <el-option
            v-for="item in constant.sys_yes_no"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </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="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>

    <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 { mapGetters } from 'vuex'
import store from '@/store'
import { getImporterDetails, addImporter } from '@/api/businessManage/tradeRelations'
import { validMail } from '@/utils/validate'
export default {
  props: {
    source: {
      type: String,
      default: ''
    }
  },
  data() {
    // const validateMobile = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入联系电话'))
    //   } else if (!/^1[3456789]\d{9}$/.test(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 validContactPostCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入经营地址邮政编码'))
      } else if (!/^-?\d+(\.\d+)?$/.test(value)) {
        callback(new Error('格式有误'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        customerUserId: null,
        entityName: '',
        certNo: '',
        vatNo: '',
        region: '',
        country: '',
        businessProvince: '',
        businessCity: '',
        businessAddress: '',
        businessPostCode: '',
        contactDirectInd: '',
        contactName: '',
        contactMobile: '',
        contactEmail: ''
      },
      rules: {
        entityName: [{ required: true, trigger: 'blur', message: '请输入进口商名称' }],
        certNo: [{ required: true, trigger: 'blur', message: '请输入注册号' }],
        region: [{ required: true, trigger: 'blur', message: '请选择所属区域' }],
        businessProvince: [{ required: true, trigger: 'blur', message: '请输入经营地址（省 / 州 / 区）' }],
        businessCity: [{ required: true, trigger: 'blur', message: '请输入经营地址（市 / 区）' }],
        businessAddress: [{ required: true, trigger: 'blur', message: '请输入经营地址（详细地址）' }],
        businessPostCode: [{ required: true, validator: validContactPostCode, trigger: 'blur' }],
        contactDirectInd: [{ required: true, trigger: 'change', message: '请选择是否允许直接联系' }],
        contactName: [{ required: true, trigger: 'blur', message: '请输入企业联系人姓名' }],
        // contactMobile: [{ required: true, validator: validateMobile, trigger: 'blur' }],
        contactMobile: [{ required: true, trigger: 'blur', message: '请输入联系电话' }],
        contactEmail: [{ required: true, validator: validContactEmail, trigger: 'blur' }]
      },
      disabled: false,
      countryList: []

    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  created() {
    this.ruleForm.customerUserId = store.getters.userInfo.id
    this.$store.dispatch('getConstant', ['sys_yes_no', 'district_code', 'countryList'])
    if (this.source === 'view') {
      this.getDetailInfo()
      this.disabled = true
    }
  },
  methods: {
    getDetailInfo() {
      const { id } = this.$route.params
      getImporterDetails({ entityId: id }).then(res => {
        if (res.success) {
          const { data } = res
          this.ruleForm.businessNumber = data.businessNumber

          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') {
        params.submitStatus = 0
        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) {
      addImporter(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>
.importer-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>
