<template>
  <div id="auth">
    <el-row>
      <el-form :model="identitys" :rules="rules" ref="form">
        <form-item label="所属行业" type="select" prop="industry">
          <el-select v-model="identity.industry" placeholder="请选择所属行业">
            <el-option v-for="(item, index) in selectList1" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </form-item>
        <form-item label="单位性质" prop="nature">
          <el-select v-model="identity.nature" placeholder="请选择单位性质">
            <el-option v-for="(item, index) in selectList2" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </form-item>
        <form-item label="注册资金" prop="reg_capital">
          <el-select v-model="identity.reg_capital" placeholder="请输入注册资金">
            <el-option v-for="(item, index) in selectList3" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </form-item>
        <form-item label="信用代码" prop="org_code">
          <el-input v-model="identity.org_code" placeholder="统一社会信用代码（或组织机构代码)" :disabled="false"> </el-input>
        </form-item>
        <form-item label="单位标签(选填)" prop="tags">
          <el-select v-model="identity.tags" placeholder="请选择单位标签" multiple>
            <el-option v-for="(item, index) in selectList4" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </form-item>
        <form-item label="企业LOGO">
          <el-row>
            <el-col :span="24">
              <span class="tip">最大支持100k </span>
            </el-col>
            <el-col :span="24">
              <upload ref="logo" :data="imgs.logo_url" :limit="1" :url="`/files/corp/identity/upload`" type="logo_url" @upload="uploadSuccess"></upload>
            </el-col>
          </el-row>
        </form-item>
        <form-item label="企业资料">
          <el-row>
            <el-col :span="24">
              <span class="tip">1、每张最大支持2M</span>
            </el-col>
            <el-col :span="24">
              <span class="tip">2、组织机构代码证，必填：三证合一，请在此上传，如果是老证，请上传组织机构代码证</span>
            </el-col>
            <el-col :span="24">
              <span class="tip">3、请务必上传带彩色公章的企业资料（扫描彩色件或原件）图片</span>
            </el-col>
            <el-col :span="24">
              营业执照
            </el-col>
            <el-col :span="24">
              <upload type="yyzz" :data="imgs.yyzz" :limit="1" :url="`/files/corp/identity/upload`" @upload="uploadSuccess"></upload>
            </el-col>
            <el-col :span="24">
              组织机构代码
            </el-col>
            <el-col :span="24">
              <upload type="zzjgdm" :data="imgs.zzjgdm" :limit="1" :url="`/files/corp/identity/upload`" @upload="uploadSuccess"></upload>
            </el-col>
          </el-row>
        </form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button type="success" style="width:60%" @click="onSubmits">保&nbsp;&nbsp;&nbsp;&nbsp;存</el-button>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
import formItem from '@/components/form-item.vue';
import { mapActions, mapState } from 'vuex';
import { filter } from 'minimatch';
export default {
  name: 'auth',
  props: {
    original: { type: Object, default: () => {} },
    identitys: { type: Object, default: () => {} },
  },
  components: {
    formItem,
    upload,
  },
  data: () => ({
    identity: {
      tags: [],
    },
    imgs: {},
    corp2: {},
    selectList1: [],
    selectList2: [],
    selectList3: [],
    selectList4: [],
    rules: {
      value1: [{ required: true, message: '选择测试', trigger: 'change' }],
      // value3: [{ required: true, message: '输入测试', trigger: 'blur' }],
    },
  }),
  created() {
    this.otherList();
  },
  watch: {
    identitys: {
      handler(val) {
        if (val.ident_pics.length > 0) {
          val.ident_pics.map(item => {
            // let url = item.name.replace('/files', 'http://smart.cc-lotus.info/files');
            // console.log(url);
            this.imgs[item.title] = item.name;
          });
        }
        this.$set(this, `identity`, val);
        if (val.logo_url) {
          this.imgs['logo_url'] = val.logo_url;
        }
      },
    },
  },
  mounted() {},
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['dicOperation']),
    async otherList() {
      let result = await this.dicOperation('hylb');
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `selectList1`, 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, `selectList2`, 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, `selectList3`, 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, `selectList4`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    onSubmits() {
      let keys = Object.keys(this.imgs);
      let arr = [];
      keys.map(key => {
        if (key === 'logo_url') {
          this.identity.logo_url = this.imgs[key];
        } else {
          arr.push({ name: this.imgs[key], title: key });
        }
      });
      this.identity.ident_pics = arr;
      console.log(this.identity);
      this.$emit(`onSubmit`, { data: this.identity, type: 'identity' });
    },
    uploadSuccess({ type, data }) {
      // if (type === 'logo_url') {
      //   console.log(data);
      //   this.$set(this.identity, type, data.uri);
      // } else {
      this.imgs[type] = data.uri;
      //}
    },
  },
};
</script>

<style lang="less" scoped>
.tip {
  color: #999999;
}
.el-select {
  width: 100%;
}
</style>
