<template>
  <div id="business">
    <el-row>
      <el-col :span="24" class="mainLeftInfo">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="所属行业">
            <el-select v-model="form.identity.industry" placeholder="必填，请选择" style="width:100%">
              <el-option v-for="item in hylbList" :key="item.value" :label="item.name" :value="item.name"> </el-option>
            </el-select>
            <span class="label-desc">影响到招聘信息的精准推送，学生邀约精准匹配</span>
          </el-form-item>
          <el-form-item label="单位性质">
            <el-select v-model="form.identity.nature" placeholder="必填，请选择" style="width:100%">
              <el-option v-for="item in dwxzList" :key="item.value" :label="item.name" :value="item.name"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册资金">
            <el-select v-model="form.identity.reg_capital" placeholder="必填，请选择" style="width:100%">
              <el-option v-for="item in zczjList" :key="item.value" :label="item.name" :value="item.name"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位标签（非必填）" type="info">
            <el-checkbox-group v-model="form.identity.tags">
              <el-checkbox v-for="(item, index) in dwbqList" :key="index" :label="item.name"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="统一社会信用代码">
            <el-input v-model="form.identity.org_code" placeholder="必填，18位统一社会信用代码 / 9位组织机构代码"></el-input>
          </el-form-item>
          <div class="zj_tip">提示：若三证合一的单位，请在【营业执照】和【组织机构代码证】处<b>同时</b>上传完整的三证合一的营业执照。</div>
          <el-form-item label="营业执照（最大支持2M）" class="zhizhao">
            <el-upload
              action="/files/corp/identity/yyzz/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="onSuccess"
              :limit="1"
              :on-exceed="outLimit"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="组织机构代码证（最大支持2M）" class="zhizhao">
            <el-upload
              action="/files/corp/identity/zzjgdm/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="onSuccess"
              :limit="1"
              :on-exceed="outLimit"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="企业LOGO 最大支持100KB）" class="zhizhao">
            <el-upload
              action="/files/corp/identity/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="logoUpload"
              :limit="1"
              :on-exceed="outLimit"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-dialog :visible="dialogVisible">
      <img :src="dialogImageUrl" />
    </el-dialog>
    <el-col :span="12" style="text-align:center;">
      <el-button style="margin-top: 12px;" @click="toBack">返回上一页</el-button>
    </el-col>
    <el-col :span="12" style="text-align:center;">
      <el-button style="margin-top: 12px;" type="success" @click="onSubmit">提交</el-button>
    </el-col>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  name: 'business',
  props: {},
  components: {},
  data: () => ({
    form: {
      identity: { tags: [] },
    },
    // imgs:[],
    checkList: [],
    dialogImageUrl: '',
    dialogVisible: false,
    value: '',
    nature: [],
    industry: [],
    capital: [],
    hylbList: [],
    dwxzList: [],
    zczjList: [],
    dwbqList: [],
  }),
  created() {
    this.otherList();
  },
  computed: {},
  methods: {
    ...mapActions(['dicOperation']),
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onSubmit() {
      this.$emit(`onSubmit`, this.form);
    },
    onSuccess(response, type) {
      if (this.form.identity.ident_pics) {
        this.form.identity.ident_pics.push({ title: response.uri, name: response.name });
      } else {
        let data = [];
        let object = { title: response.uri, name: response.name };
        data.push(object);
        this.$set(this.form.identity, `ident_pics`, data);
      }
    },
    logoUpload(response) {
      this.$set(this.form.identity, `logo_url`, response.uri);
    },
    outLimit() {
      this.$message.error('只允许上传1个文件');
    },
    toBack() {
      this.$emit('back');
    },
    async otherList() {
      let result = await this.dicOperation('hylb');
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `hylbList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation('dwxz');
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `dwxzList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation('zczj');
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `zczjList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation('dwbq');
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `dwbqList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mainLeftInfo {
  padding: 20px 30px;
}
/deep/.el-tabs__active-bar {
  background-color: transparent;
}
/deep/.el-tabs__item.is-active {
  border: 2px solid #67c23a;
  text-align: center;
  color: #67c23a;
}
/deep/.el-tabs__item {
  width: 110px;
  padding: 0;
  text-align: center;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
/deep/.el-tabs__item:hover {
  color: #67c23a;
}
/deep/.zhizhao .el-form-item__label {
  text-align: center;
  line-height: 25px;
  padding: 48px 0;
}
.zj_tip {
  color: #8a6d3b;
  background-color: #fcf8e3;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #faebcc;
  border-radius: 4px;
}
</style>
