<template>
  <div id="jobfair-detail">
    <detail-layout>
      <template #title>
        <back-bar to="/jobs/jobfair/index" :title="`申请招聘会信息`"></back-bar>
      </template>
      <template #main>
        <el-row class="Name">
          <el-form class="form_content" ref="form" :model="info" label-width="7.5rem" label-position="left" :rules="rules">
            <el-form-item label="招聘简章" prop="info">
              <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-form-item>
            <el-form-item label="申请说明" prop="apply_desc">
              <el-input v-model="info.apply_desc" placeholder="请填写申请说明"></el-input>
            </el-form-item>
            <el-form-item label="" align="right">
              <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-form-item>
            <el-form-item label="招聘需求">
              <!-- 最后需要将id拿出来整合进数据中: jobs字段:array -->
              <el-table :data="jobList" border style="width: 100%" size="small">
                <el-table-column prop="job_name" label="岗位名称" width="180" align="center"> </el-table-column>
                <el-table-column prop="zy_req" label="需求专业" width="150" align="center"> </el-table-column>
                <el-table-column prop="xl_req" label="学历要求" width="120" align="center"> </el-table-column>
                <el-table-column prop="salary" label="薪资待遇" width="120" align="center"> </el-table-column>
                <el-table-column prop="job_number" label="招聘人数" width="100" align="center"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template v-slot="scoped">
                    <el-button type="text" @click="delJobs(scoped.$index, scoped.row)" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item label="" align="right">
              <el-button icon="el-icon-plus" type="success" @click="perDialog = true">新增人员</el-button>
            </el-form-item>
            <el-form-item label="参会人员">
              <!-- 最后需要拿出来整合进数据中: attendee:array -->
              <el-table :data="attend_list" border style="width: 100%">
                <el-table-column prop="name" label="姓名" type="text" align="center"> </el-table-column>
                <el-table-column prop="gender" label="性别" type="select" align="center"> </el-table-column>
                <el-table-column prop="nation" label="民族" align="center"> </el-table-column>
                <el-table-column prop="position" label="职务职称" align="center"> </el-table-column>
                <el-table-column prop="mobile" label="手机号码" align="center"> </el-table-column>
                <el-table-column prop="email" label="邮箱" align="center"> </el-table-column>

                <el-table-column label="操作">
                  <template v-slot="scoped">
                    <el-button type="text" @click="delAttend(scoped.$index, scoped.row)" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>

            <!-- <el-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">最大可上传文件大小：100kb，支持上传 .doc、 .docx 文件</div>
              </el-upload>
            </el-form-item> -->
            <el-row type="flex" justify="center">
              <el-col :span="6">
                <el-button type="success" style="width:60%" @click="toSubmit()">
                  <span v-if="$route.query.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-item>
                <el-input placeholder="请输入职位名称" v-model="jobsForm.keyword" class="input-with-select">
                  <el-select v-model="jobsForm.type" slot="prepend" placeholder="请选择">
                    <el-option v-for="item in type_list" :key="item.type_value" :label="item.type_label" :value="item.type_value"> </el-option>
                  </el-select>
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </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="职位名称" align="left"> </el-table-column>
              <el-table-column align="center" prop="is_practice" label="工作性质" sortable>
                <template v-slot="scoped">
                  {{ `${scoped.row.is_practice}` === `0` ? '全职' : '实习' }}
                </template>
              </el-table-column>
              <el-table-column 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-dialog>

          <el-dialog title="新增职位" width="70%" :visible.sync="dialogAddVisible">
            <job :isDialog="true" @jobSubmit="jobSubmit"></job>
          </el-dialog>

          <el-dialog title="参会人员信息" :visible.sync="perDialog" center>
            <el-form :model="perForm" label-position="left" label-width="auto" :rules="perRules" ref="preForm">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="perForm.name" placeholder="请填写姓名,必填"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-select v-model="perForm.gender" placeholder="请选择性别" style="width:100%;">
                  <el-option v-for="(item, index) in selectXb" :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="民族" prop="nation">
                <el-select v-model="perForm.nation" placeholder="请选择民族(可搜索)" filterable style="width:100%">
                  <el-option v-for="item in nation_list" :key="item.nation_name" :label="item.name" :value="item.name"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="职务职称" prop="position">
                <el-input v-model="perForm.position" placeholder="请填写职务职称"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile">
                <el-input :maxlength="11" v-model="perForm.mobile" placeholder="请填写手机号码,必填"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="perForm.email" placeholder="请填写邮箱"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <el-button @click="closeAttend()">取 消</el-button>
              <el-button type="primary" @click="proAttend">确 定</el-button>
            </template>
          </el-dialog>
        </el-row>
      </template>
    </detail-layout>
  </div>
</template>

<script>
import backBar from '@/components/back-bar.vue';
import job from '@/views/manager/jobs/detail.vue';
import detailLayout from '@/layout/detail-layout.vue';
import _ from 'lodash';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'talk-detail',
  components: {
    detailLayout,
    job,
    backBar,
  },
  data: () => ({
    profileList: [],
    jobChooseList: [],
    jobList: [],
    OrJobList: [],
    info: {},
    query: {},
    perForm: {},
    attend_list: [],
    nation_list: [],
    perDialog: false,
    dialogSearchVisible: false,
    dialogAddVisible: false,
    jobsForm: {}, //查询职位,先留着
    rules: {
      apply_desc: [{ required: true, message: '请填写申请说明', trigger: 'change' }],
      profile_id: [{ required: true, message: '请选择招聘简章', trigger: 'change' }],
    },
    perRules: {
      name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
      mobile: [{ required: true, message: '请填写手机号', trigger: 'blur' }],
    },
    selectXb: [],
  }),
  created() {
    this.selectList();
    if (this.$route.query.id) {
      this.search();
    } else {
      this.searchJobfair();
    }
    this.otherList();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['profilesOperation', 'postOperation', 'jobfairOperation', 'dicOperation']),
    async search() {
      let result = await this.jobfairOperation({ type: 'searchApply', data: { id: this.$route.query.id } });
      this.$set(this, `info`, result.data);
      this.$set(this, `attend_list`, result.data.attendee);
      this.$set(this, `jobList`, result.data.jobs);
    },
    async selectList() {
      let result = await this.dicOperation('xb');
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        var arr = result.data.filter(item => item.name === '男' || item.name === '女');
        this.$set(this, `selectXb`, arr);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation('mz');
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `nation_list`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    async submit() {
      let jobs = this.jobList.map(item => item.id);
      let attendee = this.attend_list.map(item => item);
      let info = JSON.parse(JSON.stringify(this.info));
      info.jobs = jobs;
      info.attendee = attendee;
      let result;
      if (info.id) {
        result = await this.jobfairOperation({ type: 'applyUpdate', data: { id: this.$route.query.id, info: info } });
      } else {
        result = await this.jobfairOperation({
          type: 'apply',
          data: { ...this.query, info: info },
        });
      }
      if (`${result.errcode}` === '0') {
        this.$message.success('操作成功');
        this.$router.push({ path: '/jobs/jobfair/index' });
      } else {
        this.$message.error(result.errmsg || 'error');
      }
    },
    async searchJobfair() {
      let result = await this.jobfairOperation({ type: 'search', data: { id: this.$route.query.fair_id } });
      if (`${result.errcode}` === '0') {
        let { schid, schname, corpid, corpname } = result.data;
        let query = { schid: schid, schname: schname, fairid: this.$route.query.fair_id, corpid: this.user.corpid, corpname: this.user.corpname };
        this.$set(this, `query`, query);
      }
    },
    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);
      }
    },
    // 选择职位
    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) {
      this.jobList.splice(index, 1);
      this.resetJobList();
    },
    toAttend() {
      this.perDialog = true;
    },
    // 删除参会人员
    delAttend(index, val) {
      this.attend_list.splice(index, 1);
    },
    //处理参会人员
    proAttend() {
      this.$refs['preForm'].validate(valid => {
        if (valid) {
          this.attend_list.push(this.perForm);
          this.perForm = {};
          this.perDialog = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    closeAttend() {
      this.perForm = {};
      this.perDialog = false;
    },
    jobSubmit(value) {
      if (value) {
        this.$set(this, `dialogAddVisible`, false);
        this.otherList();
      }
    },
    toSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.submit();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    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');
      }
    },
    //重置职位列表
    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);
    },
    // 过滤性别
  },
};
</script>

<style lang="less" scoped>
.el-dialog__body {
  padding: 0;
}
li {
  list-style: none;
}
p {
  margin: 0;
  padding: 0;
}
.form_content {
  position: relative;
  padding: 30px 20px;
  background-color: #f4f5f9;
  border: 1px solid #e7e8ec;
}
.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;
}
.Name {
  float: left;
  width: 100%;
}
.row_pagination {
  text-align: right;
  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>
