<template>
  <div id="detail">
    <detail-layout>
      <template #title>
        <back-bar to="/jobs/jobinfo/index" title="在线招聘信息管理"></back-bar>
      </template>
      <template #main>
        <el-row>
          <el-form :model="info" :rules="rules" ref="form" class="form_content" label-width="7.5rem" label-position="left">
            <el-form-item label="发布学校">
              <el-select v-model="query.schid" placeholder="请选择学校" style="width:100%" @change="selectSch">
                <el-option v-for="item in schList" :key="item.schid" :label="item.schname" :value="item.schid"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="招聘简章" prop="profile_id">
              <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>
            </el-form-item>
            <!-- 单选框需要加form,添加验证 -->
            <el-form-item label="招聘类型" prop="is_practice">
              <el-radio-group v-model="info.is_practice">
                <el-radio v-for="(item, index) in type_list" :key="index" :label="item.type_value" border>{{ item.type_label }}</el-radio>
              </el-radio-group>
            </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>
          <el-row type="flex" justify="center" class="detailBtn">
            <el-col :span="4">
              <el-button style="width:60%" @click="toSubmit(0)">保存为草稿</el-button>
            </el-col>
            <el-col :span="4">
              <el-button type="success" style="width:60%" @click="toSubmit(1)">提交</el-button>
            </el-col>
          </el-row>
        </el-row>
      </template>
    </detail-layout>
    <el-dialog title="新增职位" width="70%" :visible.sync="dialogAddVisible">
      <job :isDialog="true" @jobSubmit="jobSubmit"></job>
    </el-dialog>
    <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 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-dialog>
  </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 formItem from '@/components/form-item.vue';
import { mapActions, mapState } from 'vuex';
import _ from 'lodash';
export default {
  name: 'detail',
  props: {},
  components: {
    // formItem,
    job,
    detailLayout,
    backBar,
  },
  data: () => ({
    info: {},
    query: {},
    OrJobList: [],
    jobList: [],
    jobChooseList: [],
    schList: [],
    loading: true,
    dialogAdd: false,
    dialogSearchVisible: false,
    dialogAddVisible: false,
    profileList: [],
    radio: '1',
    type_list: [{ type_value: 0, type_label: '全职' }, { type_value: 1, type_label: '实习' }],
    rules: {
      profile_id: [{ required: true, message: '请输入内容', trigger: 'change' }],
      is_practice: [{ required: true, message: '请选择招聘类型', trigger: 'change' }],
    },
  }),
  created() {
    this.search();
    this.otherList();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['profilesOperation', 'jobinfoOperation', 'postOperation', 'corpSchInfo']),
    async search() {
      if (this.$route.query.id) {
        this.$set(this, `loading`, false);
        let result = await this.jobinfoOperation({ 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, `jobList`, result.data.jobs);
        this.$set(this, `loading`, true);
      }
    },
    toSubmit(state) {
      this.info.is_submit = state;
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submit();
        }
        return false;
      });
    },
    async submit() {
      let result;
      let jobs = this.jobList.map(item => item.id);
      let info = JSON.parse(JSON.stringify(this.info));
      info.jobs = jobs;
      if (info.id) {
        result = await this.jobinfoOperation({ type: 'update', data: { info: info, id: this.$route.query.id } });
      } else {
        this.query = { ...this.query, corpid: this.user.corpid, corpname: this.user.corpname };
        result = await this.jobinfoOperation({
          type: 'add',
          data: { info: info, ...this.query },
        });
      }
      if (`${result.errcode}` === '0') {
        this.$message.success('操作成功');
        this.$router.push('/jobs/jobinfo/index');
      } else {
        this.$message.error(result.errmsg);
      }
    },
    jobSubmit(value) {
      if (value) {
        this.$set(this, `dialogAdd`, false);
        this.otherList();
      }
    },
    selectSch(select) {
      let res = this.schList.filter(item => {
        return `${item.schid}` === `${select}`;
      });
      if (res.length > 0) {
        this.$set(this.query, `schname`, res[0].schname);
      }
    },
    // 选择职位
    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();
    },
    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);
        this.$set(this.info, `title`, result.data.title);
      }
    },
    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') {
        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);
    },
  },
};
</script>

<style lang="less" scoped>
.form_content {
  position: relative;
  padding: 30px 20px;
  background-color: #f4f5f9;
  border: 1px solid #e7e8ec;
}
.demand {
  float: left;
  width: 100%;
  padding: 0px 50px;
}
.demandTitBtn {
  float: right;
  width: 100%;
  text-align: right;
}
.demandTitBtn .el-button {
  padding: 9px 12px;
}
.profileLi {
  float: left;
  width: 100%;
  margin: 10px 0 0 0;
}
.detailBtn {
  float: left;
  width: 100%;
  margin: 20px 0px;
}
.detailBtn .el-button {
  padding: 12px 10px;
}
</style>
