<template>
  <div id="buyer_info_add">
    <div style="text-align:center;margin-bottom:20px">
      <el-radio-group v-model="customerForm.customerType">
        <el-radio-button v-for="item in customerTypes" :key="item.value" :label="item.value">{{
            item.label
          }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <el-form :model="customerForm" :rules="customerFormRules" ref="customerForm" label-width="120px">
      <el-form-item label="购方名称" prop="customerName">
        <el-input v-model="customerForm.customerName"></el-input>
      </el-form-item>
      <div style="text-align:right"></div>
      <el-form-item label="税号" prop="customerEntTaxId" v-if="customerTypeIsEnt">
        <el-input v-model="customerForm.customerEntTaxId"></el-input>
      </el-form-item>
      <el-row :gutter="20" v-if="customerTypeIsEnt">
        <el-col :span="8">
          <el-form-item label="电话号码">
            <el-input v-model="customerForm.contactPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="公司地址">
            <el-input v-model="customerForm.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="customerTypeIsEnt">
        <el-col :span="8">
          <el-form-item label="开户银行">
            <el-input v-model="customerForm.bankName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="开户银行账号" v-if="customerTypeIsEnt">
            <el-input v-model="customerForm.bankAccountNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="手机号码" prop="customerMobile">
            <el-input v-model="customerForm.customerMobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="customerForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import { yttCompanySearch } from '@/api/user_config'

// 企业客户为默认客户类型
const customerTypeDefault = 2

// 客户类型列表
const customerTypes = [
  {
    value: 2,
    label: '企业客户'
  },
  {
    value: 1,
    label: '个人及政府事业单位'
  }
]

// 客户表单的默认值
const customerFormDefault = {
  customerId: '',
  customerType: customerTypeDefault,
  customerName: '',
  customerEntTaxId: '',
  address: '',
  contactPhone: '',
  bankName: '',
  bankAccountNumber: '',
  customerMobile: '',
  email: ''
}

export default {
  name: 'CustomerForm',
  props: {
    // 1.输入已经存在的客户信息，用于编辑客户信息
    // 2.用于覆盖已有数据
    inputCustomerInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      // customerTypeText: '企业客户', // 默认企业客户
      customerTypes: customerTypes,
      customerForm: { ...customerFormDefault },
      customerFormRules: {
        customerName: [
          { required: true, message: '请输入购方名称', trigger: 'blur' }
        ],
        customerEntTaxId: [
          { required: true, message: '请输入税号', trigger: 'blur' }
        ]
        // customerMobile: [
        //     { required: true, message: '请输入手机号码', trigger: 'blur' }
        // ],
        // email: [
        //     { required: true, message: '请输入邮箱', trigger: 'blur' }
        // ]
      },
      yttSearchEnt: {
        dialogVisible: false,
        search: {
          entName: '', // 查询企业名称
          resultList: [] // 查询结果列表
        }
      }
    }
  },
  watch: {
    inputCustomerInfo(val) {
      this.updateCustomerForm(val)
    }
  },
  computed: {
    customerTypeIsEnt() {
      console.log(this.customerForm.customerType)
      return this.customerForm.customerType == customerTypeDefault
    }
  },
  methods: {
    updateCustomerForm(val) {
      if (val == null || (JSON.stringify(val) == '{}')) {
        this.customerForm = { ...customerFormDefault }
      } else {
        this.customerForm = { ...val }
      }
    },
    // showYTTSearchEntDialog() {
    //   this.yttSearchEnt.dialogVisible = true
    // },
    handleYTTSearchEnt() {
      yttCompanySearch(this.yttSearchEnt.search.entName)
          .then(val => {
            this.yttSearchEnt.search.resultList = val.data
          }).catch(error => {
        this.$message.error(error)
      })
    },
    handleYTTSelecteEnt(row) {
      console.log('企业云抬头查询中选中企业 数据：')
      console.log(row)
      this.yttSearchEnt.dialogVisible = false
      this.customerForm.customerName = row.entName
      this.customerForm.customerEntTaxId = row.entTaxId
      this.customerForm.address = row.address
      this.customerForm.contactPhone = row.entPhone
      this.customerForm.bankName = row.bankName
      this.customerForm.bankAccountNumber = row.bankAccountNumber
    },
    /**
     * 对外暴露获取数据的方法，内部进行表单的校验，父组件中通过refs调用
     */
    getCustomerInfo() {
      return new Promise((resolve, reject) => {
        this.$refs['customerForm'].validate((valid) => {
          if (valid) {
            resolve({ ...this.customerForm })
          } else {
            reject('输入信息不合法，请检查您的输入信息！')
          }
        })
      })
    },
    /**
     * 对外暴露取消表单验证提示的方法
     */
    resetFormFields() {
      // 取消验证提示
      this.$refs['customerForm'].resetFields()
    }
  },
  mounted() {
    this.updateCustomerForm(this.inputCustomerInfo)
  }
}
</script>

<style lang='stylus' scoped></style>
