<template>
  <div id="info">
    <el-row>
      <el-form :model="info">
        <form-item label="认证状态">
          <!-- <span :style="`color:${info.state === 0 ? 'green' : 'red'}`">{{ info.state === 0 ? '已认证' : '认证失败' }}-->
          {{ corp.state }}
        </form-item>
        <form-item label="企业名称" :disabled="false" prop="company_name" placeholder="请输入企业名称">
          {{ corp.corpname }}
        </form-item>
        <form-item label="HR管理员">
          {{ corp.hr }}
        </form-item>
        <form-item label="企业主页" prop="url">
          <el-input v-model="info.url" placeholder="请输入企业主页链接"> {{ info.url }}</el-input>
        </form-item>
        <form-item label="所在省份" prop="province">
          <el-select v-model="info.province" filterable placeholder="请选择所在省份">
            <el-option v-for="(item, index) in provinceList" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </form-item>
        <form-item label="所在城市" prop="city">
          <el-select v-model="info.city" filterable placeholder="请选择所在城市">
            <el-option
              v-for="(item, index) in cityList"
              :key="index"
              :label="item.name"
              :value="item.name"
              :disabled="item.disabled ? true : false"
            ></el-option>
          </el-select>
        </form-item>
        <form-item label="单位地址" prop="company_name">
          <el-input v-model="info.address" placeholder="请输入单位地址"> {{ info.address }}</el-input>
        </form-item>
        <form-item label="单位规模" prop="scale">
          <el-select v-model="info.scale" filterable placeholder="单位规模">
            <el-option v-for="(item, index) in scaleList" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </form-item>
        <form-item label="固定电话" prop="company_name">
          <el-input v-model="info.tel" placeholder="请输入固定电话"> {{ info.tel }}</el-input>
        </form-item>
        <form-item label="招聘电话" prop="company_name">
          <el-input v-model="info.job_tel" placeholder="请输入招聘电话"> {{ info.job_tel }}</el-input>
        </form-item>
        <form-item label="招聘邮箱" prop="company_name">
          <el-input v-model="info.job_email" placeholder="请输入招聘邮箱"> {{ info.job_email }}</el-input>
        </form-item>
        <form-item label="企业邮箱" prop="company_name">
          <el-input v-model="info.email" placeholder="请输入企业邮箱"> {{ info.email }}</el-input>
        </form-item>
        <!-- <form-item v-model="info.company_email" label="企业愿景" :disabled="false" prop="company_name" placeholder="请输入企业愿景"></form-item>
        <form-item v-model="info.logo_url" label="网申网址" :disabled="false" prop="company_name" placeholder="请输入网申网址"></form-item>
        <form-item v-model="info.video_url" label="视频网址" :disabled="false" prop="video_url" placeholder="请输入视频网址"></form-item>
        <form-item v-model="info.h5_url" label="H5宣传页" :disabled="false" prop="company_name" placeholder="请输入H5宣传页"></form-item>
        <form-item label="企业相册" >
          <template >
            <upload ref="picUpload"></upload>
          </template>
        </form-item> -->
        <form-item label="企业介绍">
          <template>
            <el-row>
              <el-col :span="24">
                <span class="tip">(请输入企业介绍,400字以内)</span>
                <span class="danger">请勿输入薪资面议及其他外链</span>
              </el-col>
              <el-col :span="24">
                <el-input
                  v-model="info.intro"
                  type="textarea"
                  :autosize="{ minRows: 9, maxRows: 10 }"
                  :maxlength="400"
                  :show-word-limit="true"
                  placeholder="请勿输入薪资面议及其他外链"
                ></el-input>
              </el-col>
            </el-row>
          </template>
        </form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button type="success" style="width:60%" @click="onSubmit">保&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';
export default {
  name: 'info',
  props: {
    original: { type: Object, default: () => {} },
    base: { type: Object, default: () => {} },
  },
  components: {
    formItem,
    // upload,
  },
  data: () => ({
    info: {},
    corp: {},
    provinceList: [],
    cityList: [],
    scaleList: [],
  }),
  created() {
    this.otherList();
  },
  watch: {
    original: {
      handler(val) {
        this.$set(this, `info`, val);
      },
    },
    base: {
      handler(val) {
        this.$set(this, `corp`, val);
      },
    },
    'info.province': {
      handler(val) {
        if (val) {
          this.getCityList(val);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {},
  methods: {
    ...mapActions(['dicOperation']),
    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');
      }
    },
    uploadPic() {
      console.log(this.$refs.picUpload.$refs.upload);
    },
    onSubmit() {
      this.$emit(`onSubmit`, { data: this.info, type: 'info' });
    },
    async getCityList(name) {
      let arr = await this.provinceList.filter(item => item.name === name && this.filterCity(name));
      if (arr.length > 0) {
        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.info, `city`, '');
        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>
.tip {
  color: #999999;
}
.danger {
  color: #ff0000;
}
</style>
