<template>
  <div id="basic">
    <el-row>
      <el-col :span="24" class="mainLeftInfo">
        <h4 class="form-title">注册信息<span class="text-red">*</span></h4>
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="入驻学校">
            <el-select v-model="form.sch" filterable placeholder="入驻学校" value-key="code">
              <el-option v-for="item in schnameList" :key="item.code" :label="item.name" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input v-model="form.corpname" placeholder="请输入企业全称（与组织机构代码证上一致）"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="form.hr" placeholder="请输入您的真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系手机">
            <el-input v-model="form.mobile" placeholder="请输入手机（同时可用于账号登录）"></el-input>
          </el-form-item>
          <el-form-item label="登录密码">
            <el-input v-model="form.passwd" type="password" placeholder="请输入登录密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="图形验证码">
            <el-row>
              <el-col :span="6">
                <el-input v-model="verifyForm.code" placeholder="图形验证码"></el-input>
              </el-col>
              <el-col :span="8">
                <verify v-model="verifyForm.code_id" ref="verifyPic"></verify>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="手机验证码">
            <el-row>
              <el-col :span="6">
                <el-input v-model="verifyForm.mobile_code" placeholder="请输入手机验证码"></el-input>
              </el-col>
              <el-col :span="10">
                <verify-message :mobile="form.mobile"></verify-message>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <h4 class="form-title">基本资料<span class="text-red">*</span></h4>
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="所在省份">
            <el-select v-model="form.info.province" placeholder="选择省份" @change="getCityList">
              <el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.name"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在城市">
            <el-select v-model="form.info.city" placeholder="选择城市">
              <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.name"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业主页">
            <el-input v-model="form.info.url" placeholder="请输入企业主页"></el-input>
          </el-form-item>
          <el-form-item label="企业地址">
            <el-input v-model="form.info.address" placeholder="必填，请输入企业地址"></el-input>
          </el-form-item>
          <el-form-item label="企业规模">
            <el-select v-model="form.info.scale" placeholder="必填，请输入企业规模">
              <el-option v-for="(item, index) in scaleList" :key="index" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="固定电话">
            <el-input v-model="form.info.tel" placeholder="必填，如：0755-88888888"></el-input>
          </el-form-item>
          <el-form-item label="企业邮箱">
            <el-input v-model="form.info.email" placeholder="必填，须企业官方邮箱 如：yunyan@bibibi.net"></el-input>
          </el-form-item>
          <el-form-item label="招聘邮箱">
            <el-input v-model="form.info.job_email" placeholder="必填，如：zhaopin@bibibi.net"></el-input>
          </el-form-item>
          <el-form-item label="招聘电话">
            <el-input v-model="form.info.job_tel" placeholder="必填，11位手机号"></el-input>
          </el-form-item>
          <el-form-item label="企业介绍">
            <el-input type="textarea" v-model="form.info.intro" placeholder="字数不超过400，请输入公司介绍"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-col :span="24" style="text-align:center;">
      <el-button style="margin-top: 12px;" type="success" @click="next">下一步</el-button>
    </el-col>
  </div>
</template>

<script>
import verify from '@publics/src/components/verify.vue'; //@commom/src/components/verify.vue
import verifyMessage from '@publics/src/components/verify-message.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'basic',
  props: {},
  components: {
    verify,
    verifyMessage,
  },
  data: () => ({
    form: {
      info: {},
    },
    url: require('@/assets/imgcode.png'),
    value: '',
    provinceList: [],
    cityList: [],
    scaleList: [],
    schnameList: [],
    verifyForm: {},
  }),
  created() {
    this.otherList();
  },
  computed: {},
  methods: {
    ...mapActions(['dicOperation']),
    next() {
      this.$emit('next', JSON.parse(JSON.stringify({ ...this.form, verifyForm: this.verifyForm })));
    },
    async otherList() {
      let result = await this.dicOperation('dwgm');
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `scaleList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation({ level: 1 });
      if (`${result.errcode}` === '0') {
        this.$set(this, `provinceList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation('yx');
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `schnameList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    async getCityList(name) {
      let arr = await this.provinceList.filter(item => item.name === name && this.filterCity(name));
      if (arr.length > 0) {
        this.$set(this.form.info, `city`, '');
        let pro = arr[0];
        let result = await this.dicOperation({ level: 2, parent: pro.code });
        if (`${result.errcode}` === '0') {
          this.$set(this, `cityList`, result.data);
        }
      } else {
        this.$set(this.form.info, `city`, name);
        this.$set(this, `cityList`, [{ name: '无选项', code: 0, disabled: true }]);
      }
    },
    filterCity(name) {
      if (name.includes('特别行政区') || name.includes('北京市') || name.includes('天津市') || name.includes('上海市') || name.includes('重庆市')) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mainLeftInfo {
  padding: 20px 30px;
}
/deep/.el-form-item__label {
  text-align: left;
}
/deep/.el-checkbox {
  margin-right: 22px;
}
/deep/.el-textarea__inner {
  min-height: 146px !important;
}
.zj_tip {
  color: #8a6d3b;
  background-color: #fcf8e3;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #faebcc;
  border-radius: 4px;
}
.label-desc {
  color: #ccc;
  font-size: 12px;
}
.form-title {
  border-bottom: 1px solid #ddd;
  margin: 0 0 15px;
  padding: 15px 0;
  font-size: 15px;
  color: #333;
}
.text-red {
  color: red;
}
</style>
