<!--
  @description: 公司基本信息
  @author: change by sunxinman
  @routerPath: /systemManagement/addOrganization/companyProfile
  @date:  2019/11/16-23:33
-->
<template>
  <div>
    <el-form ref="form" :model="formData" :rules="rules" label-width="160px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item ref="area" label="地区" prop="area">
            <el-radio-group v-model="formData.area" :disabled="naturalPersonIsDisabled">
              <el-radio v-for="(item,index) in areaList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item ref="registerType" label="注册类型" prop="registerType">
            <el-radio-group v-model="formData.registerType" :disabled="isAddOrEdit ? true : false">
              <el-radio v-for="(item,index) in registerTypeList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
            <el-popover
              placement="top-start"
              popper-class="hint"
              offset="5"
              trigger="hover"
              content="如果是以个人名义参与项目报名投标，注册类型请选择自然人"
            >
              <el-button slot="reference" type="info" class="prompt">
                <i class="iconfont icon-qm" />
              </el-button>
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
      <!------Ⅰ 基本信息  -------------->
      <!--机构-->
      <template v-if="isRegisterType === '00'">
        <el-row>
          <el-col :span="24">
            <div class="page-title">
              Ⅰ 基本信息
            </div>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上级机构" prop="departname">
              <el-input
                v-model="formData.departname"
                placeholder="请选择"
                style="width: calc(100% - 160px)"
                disabled
              />
              <el-button type="primary" class="ml10" @click="handleDepartParent">
                选择
              </el-button>
              <el-button @click="handleDepartParent('clear')">
                清空
              </el-button>
            </el-form-item>
            <el-form-item ref="departName" label="机构名称" prop="departName">
              <el-input v-model="formData.departName" placeholder="请输入机构名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易主体类型" prop="departRoleName">
              <el-checkbox-group v-model="formData.departRoleName">
                <el-checkbox v-for="item in departRoleNameList" :key="item.typecode" :label="item.typecode">
                  {{ item.typename }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item ref="orgType" label="机构类型" prop="orgType">
              <el-radio-group v-model="formData.orgType">
                <el-radio v-for="(item,index) in orgTypeList" :key="index" :label="item.typecode">
                  {{ item.typename }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="formData.area === '01'"
              ref="orgCountry"
              label="国家/地区"
              prop="orgCountry"
            >
              <el-input v-model="formData.orgCountry" placeholder="请输入国家/地区" />
            </el-form-item>
            <el-form-item ref="corporation" label="法定人代表" prop="corporation">
              <el-input v-model="formData.corporation" placeholder="请输入公司法定代表人" />
            </el-form-item>
            <el-form-item
              v-if="formData.area === '00'"
              ref="belongindustry"
              label="所属行业"
              prop="belongindustry"
            >
              <el-input
                v-model="formData.belongindustry"
                placeholder="请输入"
                style="width: calc(100% - 160px)"
                disabled
              />
              <el-button type="primary" class="ml10 choose" @click="dialogTableVisible=true">
                选择
              </el-button>
              <el-button @click="empty">
                清空
              </el-button>
            </el-form-item>
            <el-form-item
              v-if="formData.area === '01'"
              ref="unitScape"
              label="企业人数"
              prop="unitScape"
            >
              <el-input v-model="formData.unitScape" placeholder="请输入企业人数" />
            </el-form-item>
            <el-form-item ref="qualevelValue" label="资质等级" prop="qualevelValue">
              <el-select v-model="formData.qualevelValue" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in qualevelValueOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="formData.area === '00'"
              ref="entCategory"
              label="企业类别"
              prop="entCategory"
            >
              <el-select v-model="formData.entCategory" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in entCategoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item ref="entPrpt" label="企业性质" prop="entPrpt">
              <el-select v-model="formData.entPrpt" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in entPrptOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="formData.area === '00'" label="区域" prop="areaValue">
              <!--地区组件-->
              <cascader
                :region-text="formData.areaValue"
                style="width:100%;"
                @regionData="regionData"
              />
            </el-form-item>
            <el-form-item ref="useStatus" label="是否可用" prop="useStatus">
              <el-radio-group v-model="formData.useStatus">
                <el-radio v-for="(item,index) in useStatusList" :key="index" :label="item.typecode">
                  {{ item.typename }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="formData.area === '01'"
              ref="areaAdministration"
              label="行政区域"
              prop="areaAdministration"
            >
              <el-input v-model="formData.areaAdministration" placeholder="请输入行政区域" />
            </el-form-item>

            <el-form-item
              v-if="formData.area === '01'"
              ref="belongindustry"
              label="所属行业"
              prop="belongindustry"
            >
              <el-input
                v-model="formData.belongindustry"
                placeholder="请输入"
                style="width: calc(100% - 160px)"
                disabled
              />
              <el-button type="primary" class="ml10 choose" @click="dialogTableVisible=true">
                选择
              </el-button>
              <el-button @click="empty">
                清空
              </el-button>
            </el-form-item>
            <el-form-item
              v-if="formData.area === '00'"
              ref="unitScape"
              label="企业人数"
              prop="unitScape"
            >
              <el-input v-model="formData.unitScape" placeholder="请输入企业人数" />
            </el-form-item>
            <el-form-item ref="foundingTime" label="成立时间" prop="foundingTime">
              <el-date-picker
                v-model="formData.foundingTime"
                type="date"
                style="width:100%"
                placeholder="选择日期时间"
                @change="docSaleEndTimeFormat"
              />
            </el-form-item>
            <el-form-item
              v-if="formData.area === '01'"
              ref="entCategory"
              label="企业类别"
              prop="entCategory"
            >
              <el-select v-model="formData.entCategory" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in entCategoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item ref="descr" label="公司简介" prop="descr">
              <el-input v-model="formData.descr" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-------------Ⅱ 机构资质 ---------------- -->
        <div v-if="formData.area === '01'">
          <el-row>
            <el-col :span="24">
              <div class="page-title">
                Ⅱ 机构资质
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件类型">
                <span>境外经营活动证明</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="核发机关机构" red="issuingOrg" prop="issuingOrg">
                <el-input v-model="formData.issuingOrg" placeholder="请输入境外经营活动证明核发机关机构" />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item ref="busyScope" label="经营范围" prop="busyScope">
                <el-input
                  v-model="formData.busyScope"
                  type="textarea"
                  placeholder="请按照营业执照上标注的经营范围准确填写"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="境外活动证明号" prop="overseasNo">
                <el-input v-model="formData.overseasNo" placeholder="请输入境外活动证明号" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="境外活动证件扫描件" prop="overseasAttr">
                <upload
                  ref="upload"
                  :title="``"
                  :data="overseasUpLoadData"
                  :auto-upload="true"
                  :limit="1"
                  :action="upLoadFileUrl"
                  :auto-delete="true"
                  file-ref="fileRefThree"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-------------Ⅱ 机构资质 ---------------- -->
        <div v-else-if="formData.area === '00'">
          <div class="page-title">
            Ⅱ 机构资质
          </div>
          <div>
            <el-row>
              <el-col :span="12">
                <el-form-item ref="businesslicence" label="营业执照号" prop="businesslicence">
                  <el-input v-model="formData.businesslicence" placeholder="请输入营业执照号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item ref="issuingOrg" label="核发机关机构" prop="issuingOrg">
                  <el-input v-model="formData.issuingOrg" placeholder="请输入营业执照核发机关机构" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item ref="busyScope" label="经营范围" prop="busyScope">
                  <el-input
                    v-model="formData.busyScope"
                    type="textarea"
                    placeholder="请按照营业执照上标注的经营范围准确填写"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="营业执照扫描件" prop="businesslicenceAttr">
                  <upload
                    ref="upload"
                    :title="``"
                    :data="businessUpLoadData"
                    :auto-upload="true"
                    :limit="1"
                    :action="upLoadFileUrl"
                    :auto-delete="true"
                    file-ref="fileRefTwo"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </template>
    </el-form>
    <!--自然人-->
    <naturalPerson v-if="isRegisterType === '01'" ref="naturalPerson" :form-data="formData" :id-up-load-id-data="idUpLoadIdData" />
    <!--保存按钮-->
    <div v-if="!naturalPersonIsDisabled" class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button type="primary" @click="saveForm('form')">
            保存
          </el-button>
          <el-button
            v-if="formData.registerType === '01'"
            type="primary"
            @click="submitForm('form')"
          >
            提交
          </el-button>
          <el-button v-if="formData.registerType === '00'" @click="nextStep('form')">
            下一步
          </el-button>
        </div>
      </div>
    </div>
    <!--行业分类-->
    <el-dialog
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      title="行业分类"
      width="920px"
    >
      <el-tag
        v-for="tag in entCategorytags"
        :key="tag.name"
        :disable-transitions="false"
        :type="tag.bidCa"
        closable
        @close="handleClose(tag)"
      >
        {{ tag.name }}
      </el-tag>

      <div class="entCategoryTitle">
        行业类型（可多选）
      </div>
      <ul class="entCategoryWrap clearfix">
        <li
          v-for="(item,index) in entCategoryArr"
          :key="index"
          :class="item.state?'entCategoryValue_active':'entCategoryValue'"
          class="fl entCategoryValue"
          @click="checkboxType(index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureBtn">
          确 定
        </el-button>
        <el-button @click="dialogTableVisible = false">
          取 消
        </el-button>
      </div>
    </el-dialog>
    <!-- 选择上级单位弹框 -->
    <organizationDialog ref="organization" @selectedIndustry="selectedIndustry" />
  </div>
</template>
<script>
import { upLoadFileUrl } from '@/api/common/uploadCenter'
import { getDepartInfo, saveDepartInfo } from '@/api/rolemanagment/organization'
import { characters1_50, checkRate } from '@/assets/js/validate'
import { randomData } from '@/assets/js/utils/index'
/* 混入方法*/
import { organizationCommonMixin } from '../mixins/organizationCommonMixin'
import { organizationGroupMixin } from '../mixins/organizationGroupMixin'
// 组件
import cascader from '@comp/common/cascader'// 地区三级联动
import upload from '@comp/common/updownload/upload'
import organizationDialog from './organization-dialog'
import naturalPerson from './naturalPerson'

export default {
  components: {
    upload, // 上传组件
    cascader, // 地区组件
    organizationDialog, // 上级机构
    naturalPerson // 自然人
  },
  mixins: [organizationCommonMixin, organizationGroupMixin],
  data() {
    const checkBusinessLicence = (rule, value, callback) => {
      const reg = /^[0-9a-zA-Z]*$/
      if (!reg.test(value)) {
        return callback(new Error('请输入数字和字母的组合'))
      }
      callback()
    }
    return {
      dialogTableVisible: false, // 行业分类
      rules: {
        area: [{ required: true, message: '请选择', trigger: 'change' }],
        registerType: [{ required: true, message: '请选择', trigger: 'change' }],
        belongindustry: [{ required: true, validator: characters1_50, trigger: 'blur' }],
        departName: [{ required: true, validator: characters1_50, trigger: 'blur' }],
        departRoleName: [{ required: true, message: '请选择', trigger: 'change' }],
        entPrpt: [{ required: true, message: '请选择', trigger: 'change' }],
        orgType: [{ required: true }],
        corporation: [{ required: true, validator: characters1_50, trigger: 'blur' }],
        orgCountry: [{ required: true, message: '不能为空', trigger: 'blur' }],
        areaAdministration: [{ required: true, message: '不能为空', trigger: 'blur' }],
        foundingTime: [{ required: true, message: '请选择', trigger: 'change' }],
        businesslicenceAttr: [{ required: false, message: '营业执照扫描件不能为空', trigger: 'change' }],
        overseasNo: [{ required: true, message: '境外活动证明号不能为空', trigger: 'blur' }],
        overseasAttr: [{ required: true, message: '境外活动证明扫描件不能为空' }],
        areaValue: [{ required: true, message: '请选择', trigger: 'blur' }],
        businesslicence: [{ required: true, message: '不能为空', trigger: 'blur' }, { validator: checkBusinessLicence, trigger: 'blur' }],
        busyScope: [{ required: true, validator: characters1_50, trigger: 'blur' }],
        issuingOrg: [{ required: true, validator: characters1_50, trigger: 'blur' }],
        unitScape: [{ required: false }, { validator: checkRate, trigger: 'blur' }],
        descr: [{ required: true, validator: characters1_50, trigger: 'blur' }]
      },
      entCategorytags: [],
      upLoadFileUrl: upLoadFileUrl,
      departId: '',
      naturalPersonIsDisabled: false, // 查看的时候控制自然人是否可以点击
      isAddOrEdit: ''// 查看 编辑
    }
  },
  created() {
    this.isAddOrEdit = this.$route.query.isAddOrEdit ? this.$route.query.isAddOrEdit : ''
    if (this.isAddOrEdit === '03') {
      this.naturalPersonIsDisabled = true
    }
    const departId = this.$route.query.departId ? this.$route.query.departId : ''
    if (departId) {
      this.departId = departId
      this.formData.departId = departId
      this.businessUpLoadData.bizId = departId // 营业执照扫描件
      this.overseasUpLoadData.bizId = departId // 境外扫描件
      this.idUpLoadIdData.bizId = departId // 身份证扫描件
      this.getDepartInfoDetail()
    } else {
      this.departId = randomData() // 业务id
      this.formData.departId = this.departId
      this.businessUpLoadData.bizId = this.departId // 营业执照扫描件
      this.overseasUpLoadData.bizId = this.departId // 境外扫描件
      this.idUpLoadIdData.bizId = this.departId // 身份证扫描件
    }
  },
  methods: {
    // 初始化页面接口
    getDepartInfoDetail() {
      getDepartInfo({ departId: this.departId }).then(response => {
        const { data: { info, departParent, depart, linkerlist, finance }} = response
        this.isRegisterType = info.registerType
        this.formData.id = info.id
        // registerType 00:机构,01:自然人
        if (info.registerType === '00') {
          depart.departName = depart.departname
          delete depart.departname
          this.formData = Object.assign(this.formData, info, departParent, depart)
          // 交易主体类型
          if (info.departRoleName) {
            this.formData.departRoleName = info.departRoleName.split(',')
          }
          if (!this.formData.linker) {
            this.formData.linker = {
              createBy: '',
              address: '', // 联系地址
              email: '', // 电子邮箱
              linkPostCode: '', // 邮政编码
              linkerID: '', // 身份证
              linkname: '', // 联系人姓名
              linktel: '', // 联系电话
              createDate: '',
              createName: '',
              departId: '',
              departName: '',
              id: ''
            }
          }
          if (!this.formData.finance) {
            this.formData.finance = {
              bankaccount: '', // 基本账户账号
              bankname: '', // 开户银行
              currencies: '', // 注册资金币种
              currenciesUnit: '', // 注册资金单位
              regcapital: '', // 注册资金
              id: '',
              createBy: '',
              createDate: '',
              createName: '',
              departId: '',
              departInfoId: '',
              departName: '',
              status: '' // (00:保存,01:提交)
            }
          }
        } else {
          this.formData.area = info.area
          if (linkerlist.length > 0) this.formData.linker = linkerlist[0]
          this.formData.finance = finance
          this.formData.id = info.id
          this.formData.registerType = info.registerType
        }
      }).catch(() => {})
    },
    // 所在区域三级联动组件使用
    regionData(regionName) {
      this.formData.areaValue = regionName
    },
    // 成立时间
    docSaleEndTimeFormat(t) {
      this.formData.foundingTime = this.$Moment(t).format(this.momentDate)
    },
    // ------------------行业分类------------------//
    // 行业分类
    handleClose(tag) {
      this.entCategorytags.splice(this.entCategorytags.indexOf(tag), 1)
      for (const i in this.entCategoryArr) {
        if (this.entCategoryArr[i].name === tag.name) {
          this.entCategoryArr[i].state = false
        }
      }
    },
    // 行业类型选择框
    checkboxType(index) {
      this.entCategoryArr[index].state = true
      if (
        this.entCategoryArr[index].state &&
        this.entCategorytags.indexOf(this.entCategoryArr[index]) === -1
      ) {
        this.entCategorytags.push(this.entCategoryArr[index])
      }
    },
    // 行业分类保存
    sureBtn() {
      this.dialogTableVisible = false
      const arr = []
      for (const i in this.entCategorytags) {
        arr.push(this.entCategorytags[i].name)
      }
      this.formData.belongindustry = arr.join(',')
    },
    // 行业清空
    empty() {
      this.entCategorytags = []
      this.formData.belongindustry = ''
      for (const i in this.entCategoryArr) {
        this.entCategoryArr[i].state = false
      }
    },
    // ----------------------------上级机构------------------------//
    // 已选选择上级机构
    selectedIndustry(organization) {
      this.formData.parentdepartid = organization.id
      this.formData.departname = organization.departname
    },
    // 上级机构选择/清空
    handleDepartParent(type) {
      if (type === 'clear') {
        this.formData.departname = ''
      } else {
        // 选择上级机构
        this.$refs.organization.loadData()
      }
    },
    // --------------保存、提交------------------------------//
    // 机构-保存
    saveForm() {
      this.$confirm('确认保存？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.assemblyData('00')
      }).catch(() => {})
    },
    //  机构-下一步
    nextStep(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.assemblyData('00', 'stepPage')
        }
      })
    },
    // 自然人--提交
    submitForm() {
      this.$confirm('确认提交？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        const validate = this.$refs['naturalPerson'].vaildate()
        Promise.all([validate]).then(() => {
          this.assemblyData('01')
        })
      }).catch(() => {})
    },
    // 保存方法
    assemblyData(status, stepPage) {
      const data = {
        ...this.formData,
        status: status
      }
      // 交易主体类型 将数组转成字符串
      data.departRoleName = this.formData.departRoleName.join(',')
      saveDepartInfo(data).then(response => {
        this.formData.departId = response.data
        // 下一步
        if (stepPage === 'stepPage') {
          this.$emit('stepPage', 1, { departId: this.formData.departId })
        } else {
          this.$message.success(response.header.msg)
          // 保存或者提交
          this.$router.push({ path: '/systemManagement/organization' })
        }
      }).catch(() => {})
    }
  }
}
</script>
<style lang='less' scoped>
  @import url("~@/assets/style/common/public.less");
.el-tag {
  width: 109px;
  height: 32px;
  line-height: 32px;
  background: rgba(247, 249, 252, 1);
  border-radius: 4px;
  border: 0;
  font-size: 14px;
  text-align: center;
  margin-right: 25px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(102, 135, 237, 1);

  &.el-icon-close {
    font-size: 14px;
    color: #909399;
  }
}

.entCategoryTitle {
  margin: 24px 0 22px;
  font-weight: 400;
}

ul.entCategoryWrap {
  & li.entCategoryValue {
    cursor: pointer;
    width: 100px;
    height: 32px;
    line-height: 32px;
    background: rgba(239, 239, 239, 1);
    border: 1px solid rgba(220, 223, 230, 1);
    border-radius: 4px;
    text-align: center;
    margin: 0 5px 10px 5px;
  }

  & li.entCategoryValue_active {
    background: #fff url("~@assets/img/procurement/procurementEvaluation/select.svg") no-repeat right
      bottom/20%;
    border: 1px solid #ff6030;
  }
}
</style>
