<template>
  <div class="base-info">
    <cy-info-title>公司信息</cy-info-title>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <el-form-item
        label="营业执照"
        prop="desc"
        class="form-required"
      >
        <cy-upload
          ref="businessLicenseRef"
          :upload-params="{
            fileType: 'smb_business_license_file',
            mouldName: 'bocom'
          }"
          :limit="1"
          :file-data="ruleForm.businessLicense"
          :upload-from-orange-status="true"
          placeholder="请上传营业执照"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="资产总额" prop="registeredCapital">
        <el-input
          v-model="ruleForm.registeredCapital"
          :disabled="disabled"
          placeholder="请输入资产总额"
        />
      </el-form-item>
      <el-form-item label="基本存款账号" prop="bankAccount">
        <el-input
          v-model="ruleForm.bankAccount"
          :disabled="disabled"
          placeholder="请输入基本存款账号"
        />
      </el-form-item>
      <el-form-item label="基本账户开户行名称" prop="bank">
        <el-input
          v-model="ruleForm.bank"
          :disabled="disabled"
          placeholder="请输入基本账户开户行名称"
        />
      </el-form-item>
      <el-form-item label="营业收入（元）" prop="operatingRevenue">
        <cy-amount-input
          v-model="ruleForm.operatingRevenue"
          :disabled="disabled"
          placeholder="请输入营业收入"
        />
      </el-form-item>
      <el-form-item label="从业人数" prop="peopleEngaged">
        <el-input
          v-model="ruleForm.peopleEngaged"
          :disabled="disabled"
          placeholder="请输入从业人数"
        />
      </el-form-item>
      <el-form-item label="营业地址" prop="businessAddress">
        <el-input
          v-model="ruleForm.businessAddress"
          :disabled="disabled"
          placeholder="请输入营业地址"
        />
      </el-form-item>
      <el-form-item label="注册地址" class="two-form-item" prop="registeredAddressCodeList">
        <div class="address">
          <div>
            <el-cascader
              v-model="ruleForm.registeredAddressCodeList"
              style="width: 100%;"
              placeholder="请选择注册地址"
              :disabled="disabled"
              :options="constant.regionList"
              :props="{ value: 'value', label: 'name' }"
              @change="getBusinessAddress"
            />
          </div>
          <div v-if="!disabled">
            <el-input
              v-model="ruleForm.registeredAddress"
              style="width: 100%;"
              placeholder="请输入详细地址"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="行业类型" prop="industryType">
        <el-cascader
          v-model="ruleForm.industryType"
          :options="cascaderOptions"
          :props="{
            label: 'name',
            value: 'code',
            children: 'smbIndustries'
          }"
          :disabled="disabled"
          clearable
          style="width: 100%;"
          @change="handleChangeCascader"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getIndustryType } from '@/api/capitalFinancialManage/index'

export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        registeredCapital: '',
        bankAccount: '',
        bank: '',
        operatingRevenue: '',
        peopleEngaged: '',
        inputAddress: '',
        businessLicense: [],
        registeredAddress: '',
        industryType: [],
        industryTypeOne: '',
        industryTypeTwo: '',
        industryTypeThree: '',
        industryTypeFore: ''
      },
      allAdressNames: [],
      rules: {
        registeredCapital: [{ required: true, message: '请输入资产总额', trigger: 'blur' }],
        bankAccount: [{ required: true, message: '请输入基本存款账号', trigger: 'blur' }],
        bank: [{ required: true, message: '请输入基本账户开户行名称', trigger: 'blur' }],
        operatingRevenue: [{ required: true, message: '请输入营业收入', trigger: 'blur' }],
        peopleEngaged: [{ required: true, message: '请输入从业人数', trigger: 'blur' }],
        businessAddress: [{ required: true, message: '请输入营业地址', trigger: 'blur' }],
        registeredAddressCodeList: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
        industryType: [{ required: true, message: '请选择行业类型', trigger: 'blur' }]
      },
      cascaderOptions: []
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  watch: {
    detailsInfo: {
      handler(val) {
        console.log('company-info------------')
        console.log(val)
        if (val && Object.keys(val).length) {
          const {
            registeredCapital,
            businessLicense,
            bankAccount,
            bank,
            operatingRevenue,
            peopleEngaged,
            businessAddress,
            registeredAddress,
            industryTypeOne,
            industryTypeTwo,
            industryTypeThree,
            industryTypeFore
          } = val
          this.ruleForm = {
            registeredCapital,
            bankAccount,
            bank,
            operatingRevenue,
            peopleEngaged,
            businessAddress,
            industryTypeOne,
            industryTypeTwo,
            industryTypeThree,
            industryTypeFore
          }

          if (businessLicense) {
            const temp = []
            temp.push(businessLicense)
            this.ruleForm.businessLicense = temp
          }

          if (registeredAddress) {
            this.ruleForm.registeredAddressCodeList = registeredAddress.split(',')
            this.getBusinessAddress()
          }

          if (this.ruleForm.operatingRevenue === null) {
            this.ruleForm.operatingRevenue = ''
          }
          this.ruleForm.industryType = [industryTypeOne, industryTypeTwo, industryTypeThree, industryTypeFore]
        }
      },
      immediate: true
    }
  },
  created() {
    this.getIndustryList()
    this.$store.dispatch('getConstant', ['regionList'])
  },
  methods: {
    getBusinessAddress() {
      this.allAdressNames = []
      this.findFullAddress(this.constant.regionList, this.ruleForm.registeredAddressCodeList)
      this.ruleForm.registeredAddress = this.allAdressNames.join('')
      this.$set(this.ruleForm, 'registeredAddress', this.allAdressNames.join(''))
      this.$forceUpdate()
    },
    findFullAddress(allAddress, arrs) {
      if (allAddress.length && arrs.length) {
        const firstFind = allAddress.find((el) => el.value === arrs[0])
        if (firstFind) {
          this.allAdressNames.push(firstFind.name)
          if (firstFind.children) {
            this.findFullAddress(firstFind.children, arrs.slice(1))
          }
        }
      }
    },
    handleChangeCascader(val) {
      console.log('handleChangeCascader----')
      console.log(val)

      if (val && val.length) {
        this.ruleForm.industryTypeOne = val[0]
        this.ruleForm.industryTypeTwo = val[1]
        this.ruleForm.industryTypeThree = val[2]
        this.ruleForm.industryTypeFore = val[3]
      }
    },
    async getIndustryList() {
      const res = await getIndustryType()

      if (res.success) {
        this.cascaderOptions = res.data
      }
    },
    getParams(type) {
      return new Promise((reslove) => {
        const params = {
          ...this.ruleForm
        }
        // fileId
        const findFile = this.$refs.businessLicenseRef.getFileLists
        params.businessLicense = this.ruleForm.businessLicense[0]

        if (findFile.length) {
          params.fileId = findFile[0].id
        }

        if (type === 'temp') {
          reslove(params)
        } else {
          this.$refs.ruleFormRef.validate((valid) => {
            if (valid) {
              reslove(params)
            } else {
              this.$message.warning('请检查公司信息输入项')
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.address {
  width: 100%;
  display: flex;
  justify-content: space-between;
  & > div {
    width: 50%;
    margin-right: 20px;
    &:first-child {
      width: 50%;
      margin-right: 20px;
    }
    &:last-child {
      // width: 66.66%;
      margin-right: 0px;
    }
  }
}
.industry-type {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  .el-select {
    width: calc(33.33% - 12px);
  }
  .el-select:last-child {
    margin-top: 20px;
  }
}
</style>
