<template>
  <div id="talk-detail">
    <detail-layout>
      <template #title>
        <back-bar to="/jobs/talk/index" title="宣讲会信息管理"></back-bar>
      </template>
      <template #main>
        <el-form class="form_content" ref="form" :model="info" label-width="0" label-position="left">
          <form-item label="宣讲学校">
            <el-select v-model="query.schid" placeholder="请选择学校" style="width:72%" @change="selectSch">
              <el-option v-for="item in schList" :key="item.schid" :label="item.schname" :value="item.schid"> </el-option>
            </el-select>
            没有学校可选？点击<el-link @click="push('/jobs/school/index')" type="success">入驻学校</el-link>
          </form-item>
          <form-item label="招聘简章">
            <el-col :span="24">
              <el-select v-model="info.profile_id" placeholder="请输入招聘简章" style="width:100%" @change="getProfile">
                <el-option v-for="(item, index) in profileList" :key="index" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-col>
          </form-item>
          <!-- bff处理时，删除 -->
          <!-- <form-item label="招聘简章内容">
            <el-input v-model="info.content" placeholder="招聘简章内容"></el-input>
          </form-item> -->
          <form-item label="宣讲会标题(选填)">
            <el-col :span="24">
              <el-input v-model="info.title" placeholder="宣讲会标题默认为公司名，如无特殊情况请勿改动"></el-input>
            </el-col>
          </form-item>
          <el-row style="text-align:right;padding:0 50px;">
            <el-button icon="el-icon-zoom-in" type="success" @click="dialogSearchVisible = true">选择职位</el-button>
            <el-button icon="el-icon-plus" type="success" @click="dialogAddVisible = true">新增职位</el-button>
          </el-row>
          <form-item label="招聘需求">
            <el-table :data="jobList" border style="width: 100%" size="small">
              <el-table-column prop="job_name" label="岗位名称" align="center"> </el-table-column>
              <el-table-column prop="zy_req" label="需求专业" align="center"> </el-table-column>
              <el-table-column prop="xl_req" label="学历要求" align="center"> </el-table-column>
              <el-table-column prop="salary" label="薪资待遇" align="center"> </el-table-column>
              <el-table-column prop="job_number" label="招聘人数" align="center"> </el-table-column>
              <el-table-column fixed="right" label="操作">
                <template v-slot="scoped">
                  <el-button type="text" @click="delJobs(scoped.$index, scoped.row)" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </form-item>
          <form-item label="预定时间">
            <el-date-picker v-model="info.date" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
            <el-date-picker v-model="info.time" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
            </el-date-picker>
          </form-item>
          <form-item label="申请说明">
            <el-input
              v-model="info.apply_desc"
              placeholder="宣讲会时间（请写明具体日期与时间段，另外添加2个时间做备选）、宣讲教室要求（教室大小，多媒体需求等）"
            ></el-input>
          </form-item>
          <form-item label="来访人数">
            <el-input v-model="info.team_size" placeholder="请填写来访人数"></el-input>
          </form-item>
          <form-item label="带队领导">
            <el-input v-model="info.team_leader" placeholder="请填写带队领导"></el-input>
          </form-item>
          <form-item label="带队领导职务">
            <el-input v-model="info.leader_position" placeholder="请填写带队领导职务"></el-input>
          </form-item>
          <form-item label="招聘对接联系人">
            <el-input v-model="info.contact_person" placeholder="请填写招聘对接联系人"></el-input>
          </form-item>
          <form-item label="对接联系人电话">
            <el-input v-model="info.contact_mobile" maxlength="11" placeholder="请填写对接联系人电话"></el-input>
          </form-item>
          <form-item label="地址">
            <el-input v-model="info.address" placeholder="请填写地址"></el-input>
          </form-item>
          <form-item label="招聘公函模板">
            <el-link href="http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/yxqqnn0100000011/setting/1521077641-1574.doc" type="success">
              关于赴高校开展招聘及相关工作函
            </el-link>
          </form-item>
          <form-item label="招聘公函">
            <!-- <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload> -->
            <upload-file
              :url="`/files/jobs/talk_official/upload`"
              desc="点击上传公函,公函不能超过2MB"
              :limit="1"
              @upload="uploadSuccess"
              @changeName="changeName"
              @toRemove="toRemove"
              type="official_letter"
              :data="uploads.official_letter"
            ></upload-file>
          </form-item>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-button type="success" style="width:60%" @click="toSubmit()">
                <span v-if="info.id">保&nbsp;&nbsp;&nbsp;&nbsp;存</span>
                <span v-else>申&nbsp;&nbsp;&nbsp;&nbsp;请</span>
              </el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-dialog title="选择职位" :visible.sync="dialogSearchVisible">
          <el-form :model="jobsForm">
            <el-form-item>
              <el-table :data="jobChooseList" border style="width: 100%" max-height="300">
                <el-table-column type="index" label="序号" width="80" align="center"> </el-table-column>
                <el-table-column prop="job_name" label="职位名称" width="400" align="left"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template v-slot="scoped">
                    <el-button type="text" @click="jobsSel(scoped.$index, scoped.row)" size="small">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog title="新增职位" width="70%" :visible.sync="dialogAddVisible">
          <label style="color:red;">请如实填写职位信息，如填写的内容与实际不符，而被学生投诉，将会影响贵单位的企业信用，以及来校的招聘业务。</label>
          <job :isDialog="true"></job>
        </el-dialog>
      </template>
    </detail-layout>
  </div>
</template>

<script>
import detailLayout from '@/layout/detail-layout.vue';
import backBar from '@/components/back-bar.vue';
import job from '@/views/manager/jobs/detail.vue';
import formItem from '@/components/form-item.vue';
import uploadFile from '@/components/upload-file.vue';
import { mapActions, mapState } from 'vuex';
import _ from 'lodash';
export default {
  name: 'talk-detail',
  props: {
    original: { type: Object, default: () => {} },
  },
  components: {
    formItem,
    job,
    backBar,
    detailLayout,
    uploadFile,
  },
  data: () => ({
    info: {},
    loading: true,
    uploadUrl: `/files/jobs/talk_official/upload`,
    uploads: {},
    query: {},
    schoolId: '',
    schoolName: '',
    profileList: [],
    jobChooseList: [],
    OrJobList: [],
    schList: [],
    recommend_web_list: [{ recommend_web: '1', recommend_web_name: '智联招聘' }, { recommend_web: '2', recommend_web_name: '51Job' }],
    jobList: [],
    career_time_list: [
      { career_time: '08:30-10:00' },
      { career_time: '10:30-12:00' },
      { career_time: '13:00-14:30' },
      { career_time: '15:00-16:30' },
      { career_time: '18:00-20:30' },
    ],
    dialogSearchVisible: false,
    dialogAddVisible: false,
    jobsForm: {},
    type_list: [{ type_value: '0', type_label: '校招' }, { type_value: '1', type_label: '实习' }, { type_value: '2', type_label: '社招' }],
  }),
  created() {
    this.search();
    this.otherList();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['profilesOperation', 'postTalksInfo', 'postOperation', 'corpSchInfo']),
    async search() {
      //宣讲会标题默认企业名称
      this.$set(this.info, `title`, JSON.parse(JSON.stringify(this.user.corpname)));
      // this.info.title = JSON.parse(JSON.stringify(this.user.corpname));
      if (this.$route.query.id) {
        let result = await this.postTalksInfo({ type: 'search', data: { id: this.$route.query.id } });
        this.$set(this, `info`, result.data);
        this.$set(this.query, `schid`, this.info.schid);
        this.$set(this.query, `schname`, this.info.schname);
        this.$set(this.uploads, `official_letter`, this.info.official_letter);
        this.$set(this, `jobList`, result.data.jobs);
      }
    },
    async toSubmit() {
      let result;
      let jobs = this.jobList.map(item => item.id);
      let info = JSON.parse(JSON.stringify(this.info));
      let letter = JSON.parse(JSON.stringify(this.uploads));
      info.jobs = jobs;
      info.official_letter = letter.official_letter;
      if (info.id) {
        result = await this.postTalksInfo({ type: 'update', data: { info: info, id: this.$route.query.id } });
      } else {
        result = await this.postTalksInfo({
          type: 'add',
          data: { info: info, corpid: this.user.corpid, corpname: this.user.corpname, ...this.query },
        });
      }
      if (`${result.errcode}` === '0') {
        this.$message.success('操作成功');
        this.$router.push('/jobs/talk/index');
      } else {
        this.$message.error(result.errmsg);
      }
    },
    // 选择职位
    jobsSel(index, val) {
      let res = this.jobList.filter(item => item.id === val.id);
      if (res.length <= 0) {
        this.jobList.push(val);
      }
      this.resetJobList();
      this.dialogSearchVisible = false;
    },
    delJobs(index, val) {
      this.jobList.splice(index, 1);
      this.resetJobList();
    },
    selectSch(select) {
      let res = this.schList.filter(item => {
        return `${item.name}` === `${select}`;
      });
      if (res.length > 0) {
        this.$set(this.query, `schname`, res[0].schname);
      }
    },
    async getProfile(select) {
      let result = await this.profilesOperation({ type: 'search', data: { id: select } });
      if (`${result.errcode}` === `0`) {
        this.$set(this.info, `content`, result.data.content);
      }
    },
    async otherList() {
      let result = await this.postOperation({ type: 'list', data: { corpid: this.user.corpid } });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `jobChooseList`, result.data);
        this.$set(this, `OrJobList`, result.data);
        this.resetJobList();
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.profilesOperation({ type: 'list', data: { corpid: this.user.corpid } });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `profileList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await await this.corpSchInfo({ type: 'list', data: { corpid: this.user.corpid } });
      if (`${result.errcode}` === '0') {
        console.log(result.data);
        this.$set(this, `schList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    //重置职位列表
    async resetJobList() {
      let data = JSON.parse(JSON.stringify(this.OrJobList));
      let selectList = [];
      let chooseList = [];
      if (this.jobList.length > 0) {
        this.jobList.map(item => {
          let val = typeof item === 'object' ? item.id : item;
          let selected = _.find(data, select => select.id === val);
          selectList.push(selected);
        });
        // chooseList = _.differenceBy(data, selectList, 'id');
        chooseList = _.differenceWith(data, selectList, (item, value) => {
          return item.id === value.id;
        });
      } else {
        chooseList = data;
      }
      this.$set(this, `jobList`, selectList);
      this.$set(this, `jobChooseList`, chooseList);
    },
    uploadSuccess({ type, data }) {
      if (type !== 'avatar_url') {
        let arr = _.get(this.uploads, type);
        if (arr !== undefined) {
          if (type === 'official_letter') {
            this.$set(this.uploads, `${type}`, { name: data.name, uri: data.uri });
            // this.uploads[type] = { name: data.name, uri: data.uri };
          } else {
            this.uploads[type].push({ name: data.name, uri: data.uri });
          }
        } else {
          if (type === 'official_letter') {
            // this.uploads[type] = { name: data.name, uri: data.uri };
            this.$set(this.uploads, `${type}`, { name: data.name, uri: data.uri });
          } else {
            let newArr = [{ name: data.name, uri: data.uri }];
            this.$set(this.uploads, `${type}`, newArr);
          }
        }
      } else {
        this.$set(this.info, `${type}`, data.uri);
      }
    },
    changeName({ type, data }) {
      let newObject = { name: data.name, uri: `${data.url}` };
      this.$set(this.uploads, `official_letter`, newObject);
    },
    toRemove({ type, data }) {
      if (type !== 'avatar_url') {
        let arr = _.get(this.uploads, type);
        if (arr !== undefined && typeof arr === 'object' && arr.length > 0) {
          let newArr = arr.filter(item => item.uri !== data.url);
          this.$set(this.uploads, `${type}`, newArr);
        }
        if (this.info.id) {
          this.toSubmit();
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
li {
  list-style: none;
}
p {
  margin: 0;
  padding: 0;
}
.form_content {
  padding: 20px 0;
}
.tit h4 {
  color: #333;
  font-size: 15px;
}
.search {
  width: 100%;
  float: left;
  height: 33px;
  margin-bottom: 10px;
  color: #333;
  font-size: 15px;
  margin-bottom: 10px;
}
/deep/.searchInput .el-input__inner {
  height: 33px;
  line-height: 33px;
  border: 1px solid #ccc;
  border-radius: 0px;
}
/deep/.searchBtn .el-button {
  width: 35px;
  height: 33px;
  border: 1px solid #ccc;
  border-radius: 0px;
  padding: 6px 7px;
  color: #555555;
  font-weight: bold;
  font-size: 15px;
  background-color: #eeeeee;
}

.talkli {
  float: left;
}
.row_pagination {
  margin-top: 1rem;
}
.CagegoryBox {
  position: absolute;
  width: 94%;
  height: 340px;
  padding: 20px;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #85bee5;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 99999;
}
.CagegoryListBox li {
  display: inline-block;
  text-align: left;
  width: 100px;
  padding: 6px 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
#majors {
  margin-top: 25px;
  border: 1px solid #ddd;
}
#majors .category {
  min-width: 70px;
  max-width: 180px;
  padding: 0 10px;
  background-color: #eee;
  float: left;
}
#majors .list {
  padding: 10px 20px 0;
  overflow: auto;
  height: 100%;
  width: 70%;
  float: left;
}
</style>
