<template>
  <el-form ref="baseInfoForm" :model="baseInfo" :rules="baseRules" size="medium" label-width="100px">
    <el-row style="margin-top: 20px">
      <el-col :span="6">
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="baseInfo.name" placeholder="请输入企业名称" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="企业类型" prop="companyType">
          <el-select v-model="baseInfo.companyType" placeholder="请选择企业类型" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in companyTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="企业性质" prop="companyNature">
          <el-select v-model="baseInfo.companyNature" placeholder="请选择企业性质" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in companyNatureOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="所在区域" prop="area">
          <el-select v-model="baseInfo.area" placeholder="请选择所在区域" clearable :style="{ width: '100%' }" @change="changeCompanyArea">
            <el-option
              v-for="item in areaOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="16">
        <el-form-item label="详细地址" prop="companyAddress">
          <el-select v-show="baseInfo.area == 1" ref="provSelect" v-model="province" placeholder="省/自治区/直辖市" clearable @change="getAreaCityByProv">
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.areaName"
              :value="item.id"
            />
          </el-select>

          <el-select v-show="baseInfo.area == 1" ref="citySelect" v-model="city" placeholder="市" clearable @change="getAreaCountyByCity">
            <el-option
              v-for="item in citiesList"
              :key="item.id"
              :label="item.areaName"
              :value="item.id"
            />
          </el-select>

          <el-select v-show="baseInfo.area == 1" ref="countySelect" v-model="county" placeholder="县/区" clearable>
            <el-option
              v-for="item in countiesList"
              :key="item.id"
              :label="item.areaName"
              :value="item.id"
            />
          </el-select>

          <el-input v-model="baseInfo.companyAddress" placeholder="请输入详细地址" clearable style="width: 40%" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getDictByCode } from '@/api/system/dict'
import { getAreaList } from '@/api/system/area'

export default {
  name: 'BaseInfo',
  data() {
    const addressValidator = (rule, value, callback) => {
      const provCode = this.$refs.provSelect.selected.value
      const cityCode = this.$refs.citySelect.selected.value
      const countyCode = this.$refs.countySelect.selected.value
      if (value === '') {
        callback(new Error('请输入详细地址'))
      }
      if (countyCode === '') {
        callback(new Error('请选择县/区'))
      }
      if (cityCode === '') {
        callback(new Error('请选择市/地区'))
      }
      if (provCode === '') {
        callback(new Error('请选择省/市/自治区'))
      } else {
        callback()
      }
    }
    return {
      baseInfo: {
        name: '',
        area: '',
        companyNature: '',
        companyType: '',
        companyProvince: '',
        companyCity: '',
        companyArea: '',
        companyAddress: ''
      },
      province: '',
      city: '',
      county: '',
      companyTypeOptions: [],
      companyNatureOptions: [],
      areaOptions: [],
      provinceList: [],
      citiesList: [],
      countiesList: [],
      baseRules: {
        name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        area: [{ required: true, message: '请选择所在区域', trigger: 'change' }],
        companyNature: [{ required: true, message: '请选择单位性质', trigger: 'change' }],
        companyType: [{ required: true, message: '请选择企业类型', trigger: 'change' }],
        companyAddress: [{ required: true, validator: addressValidator, trigger: 'blur' }]
      },
      baseInfoValid: false
    }
  },
  watch: {
    province: function(val, oldval) {
      const selected = this.provinceList.filter(item => item.id === val)
      if (selected.length > 0) {
        this.baseInfo.companyProvince = selected[0].areaName
      }
    },
    city: function(val, oldVal) {
      const selected = this.citiesList.filter(item => item.id === val)
      if (selected.length > 0) {
        this.baseInfo.companyCity = selected[0].areaName
      }
    },
    county: function(val, oldVal) {
      const selected = this.countiesList.filter(item => item.id === val)
      if (selected.length > 0) {
        this.baseInfo.companyArea = selected[0].areaName
      }
    }
  },
  mounted() {
    this.getAreaOptions()
    this.getCompanyType()
    this.getCompanyNature()
    this.getAreaProvince()
  },
  methods: {
    getAreaOptions: function() {
      getDictByCode('companyRegion').then(response => {
        if (response.code === 200) {
          this.areaOptions = response.data

          this.baseInfo.area = this.areaOptions[0].value
        }
      })
    },
    getCompanyType: function() {
      getDictByCode('companyType').then(response => {
        if (response.code === 200) {
          this.companyTypeOptions = response.data
        }
      })
    },
    getCompanyNature: function() {
      getDictByCode('companyNature').then(response => {
        if (response.code === 200) {
          this.companyNatureOptions = response.data
        }
      })
    },
    getAreaProvince: function() {
      getAreaList('0').then(response => {
        if (response.code === 200) {
          this.provinceList = response.data
        }
      })
    },
    getAreaCityByProv: function() {
      getAreaList(this.province).then(response => {
        if (response.code === 200) {
          this.baseInfo.companyCity = []
          this.baseInfo.companyArea = []
          this.citiesList = response.data
        }
      })
    },
    getAreaCountyByCity: function() {
      getAreaList(this.city).then(response => {
        if (response.code === 200) {
          this.baseInfo.companyArea = []
          this.countiesList = response.data
        }
      })
    },
    changeCompanyArea: function() {
      if (this.baseInfo.area === '2') {
        this.baseInfo.companyProvince = '0'
        this.baseInfo.companyCity = '0'
        this.baseInfo.companyArea = '0'
      }
    },
    validateForm: function() {
      this.$refs.baseInfoForm.validate(valid => {
        this.baseInfoValid = valid
      })
    }
  }
}
</script>

<style scoped>

</style>