<template>
  <div class="mainContainer">

    <div class="recruitBlock">
      <h3 class="textCenter">代发兼职招聘</h3>
      <div class="recruitBlockTitle">基本信息</div>
      <!-- <el-tag type="info" class="recruitInfoItem">项目ID：{{info.id}}</el-tag>
      <el-tag type="info" class="recruitInfoItem">项目名称：{{info.title}}</el-tag>
      <el-tag type="info" class="recruitInfoItem">项目类型：{{info.type_name}}</el-tag>
      <el-tag type="info" class="recruitInfoItem">客户经理：{{info.manager_nickname}}（{{info.manager_uid}}）</el-tag>
      <el-tag type="info" class="recruitInfoItem">需求方：{{info.nickname}}（{{info.uid}}）</el-tag> -->
    <el-row class="mb-10">
      <el-col :span="12">
        项目ID：
        <span>{{info.id}}</span>
      </el-col>
      <el-col :span="12">
        需求方：
        <span>{{info.nickname}}（{{info.uid}}）</span>
      </el-col>
    </el-row>
    <el-row class="mb-10">
      <el-col :span="24">
        项目名称：
        <span>{{info.title}}</span>
      </el-col>
    </el-row>
    <el-row class="mb-10">
      <el-col :span="24">
        项目类型：
        <span>{{info.type_name}}</span>
      </el-col>
    </el-row>
    <el-row class="mb-10">
      <el-col :span="12">
        客户经理：
        <span>{{info.manager_nickname}}（{{info.manager_uid}}）</span>
      </el-col>

    </el-row>
    </div>

    <div class="recruitBlock">
      <div class="recruitBlockTitle">岗位信息</div>
      <el-form :model="recruitForm" :rules="rules" ref="recruitForm" label-width="100px">
        <el-form-item label="所属主体" prop="workForm">
          <el-radio-group v-model="recruitForm.workForm" @change="workFormChange">
            <el-radio :label="1">需求方</el-radio>
            <el-radio :label="2">客户经理</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="recruitForm.name"></el-input>
        </el-form-item>
        <el-form-item label="工作方式" prop="workType">
          <el-radio-group v-model="recruitForm.workType">
            <el-radio :label="1">兼职</el-radio>
            <el-radio :label="2">驻场</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作地点" v-show="recruitForm.workType != 1">
          <el-cascader
            v-model="recruitForm.provIdcity"
            :options="areas"
            @change="cityChange"></el-cascader>
        </el-form-item>
        <el-form-item label="职位类型" prop="positionType">
          <el-cascader
            v-model="recruitForm.positionType"
            :options="positionType"
            @change="positionChange"></el-cascader>
        </el-form-item>
        <el-form-item label="薪资范围" prop="minSalary">
          <el-row>
            <el-col :span="8">
              <el-select v-model="recruitForm.minSalary" placeholder="请选择">
                <el-option
                  v-for="item in minSalary"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2" :offset="2">
              至
            </el-col>
            <el-col :span="8" :offset="2">
              <el-select v-model="recruitForm.maxSalary" placeholder="请选择">
                <el-option
                  v-for="item in maxSalary"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="工作周期">
          <el-select v-model="recruitForm.month" placeholder="请选择">
            <el-option
              v-for="item in month"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="技能要求" prop="skills">
          <el-cascader
            v-model="recruitForm.skills"
            :options="skills_multiple_value"
            :props="skills_multiple_props"
            :show-all-levels="false"
            @change="get_skill_multiple_chanage"
            filterable
            clearable></el-cascader>
        </el-form-item>
        <el-form-item label="经验要求" prop="experience">
          <el-radio-group v-model="recruitForm.experience">
            <el-radio :label="0">不限</el-radio>
            <el-radio :label="1">3-5年</el-radio>
            <el-radio :label="2">5-10年</el-radio>
            <el-radio :label="3">10年以上</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作说明" prop="description">
          <el-input type="textarea" v-model="recruitForm.description" placeholder="请输入内容"
                    minlength="5"
                    maxlength="5000" rows="5"
                    show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="checkForm('recruitForm')" :loading="submitLoading" style="margin-left: 100px;">确认发布</el-button>
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        info: {
          id:'',
          title:'',
          uid:'',
          manager_uid:'',
          type_name:'',
          nickname:'',
          company_name:'',
          manager_nickname:'',
		      manager_company_name:'',
        },
        recruitForm: {
          origin_id: 0,
          origin_type: 0,
          workType: 1,
          minSalary:"面议",
          workForm:1,
          skills: [],
          description: '',
          experience:0,
          name: ''
        },
        skills_multiple_props: { multiple: true },
        loading: false,
        submitLoading: false,
        //配置
        options: [],
        skills_multiple_value:[],
        areas: [],    //工作地点
        positionType: [],   //职位类型
        skillsData: [],    //技能类型
        rules: {
          email: [
            {required: true, message: '请输入目标邮箱', trigger: 'blur'},
            {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号码', trigger: 'blur'},
          ],
          name: [
            {required: true, message: '请输入企业名称', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50  个字符', trigger: 'blur'}
          ],
          workType: [
            {required: true, message: '请选择工作方式', trigger: 'blur'}
          ],
          positionType: [
            {required: true, message: '请选择职位类型', trigger: 'blur'}
          ],
          minSalary: [
            {required: true, message: '请选择薪资范围', trigger: 'blur'}
          ],
          maxSalary: [
            {required: false, message: '请选择薪资范围', trigger: 'blur'}
          ],
          skills: [
            {required: false, message: '请选择技能要求', trigger: 'blur'}
          ],
          experience: [
            {required: true, message: '请选择经验要求', trigger: 'blur'}
          ],
          description: [
            {required: true, message: '请输入工作说明', trigger: 'blur'},
            {min: 5, max: 5000, message: '长度在 5 到 5000  个字符', trigger: 'blur'}
          ],
        },
        minSalary: [
          {
            value: '1',
            label: '1'
          }, {
            value: '2',
            label: '2'
          }, {
            value: '3',
            label: '3'
          }, {
            value: '4',
            label: '4'
          }, {
            value: '5',
            label: '5'
          }, {
            value: '6',
            label: '6'
          }, {
            value: '7',
            label: '7'
          }, {
            value: '8',
            label: '8'
          }, {
            value: '9',
            label: '9'
          }, {
            value: '10',
            label: '10'
          }, {
            value: '15',
            label: '15'
          }, {
            value: '20',
            label: '20'
          }, {
            value: '25',
            label: '25'
          }, {
            value: '30',
            label: '30'
          }, {
            value: '50',
            label: '50'
          }, {
            value: '100',
            label: '100'
          }, {
            value: '200',
            label: '200'
          }, {
            value: '-1',
            label: '面议'
          },
        ],
        maxSalary: [
          {
            value: '2',
            label: '2'
          }, {
            value: '3',
            label: '3'
          }, {
            value: '4',
            label: '4'
          }, {
            value: '5',
            label: '5'
          }, {
            value: '6',
            label: '6'
          }, {
            value: '7',
            label: '7'
          }, {
            value: '8',
            label: '8'
          }, {
            value: '9',
            label: '9'
          }, {
            value: '10',
            label: '10'
          }, {
            value: '15',
            label: '15'
          }, {
            value: '20',
            label: '20'
          }, {
            value: '25',
            label: '25'
          }, {
            value: '30',
            label: '30'
          }, {
            value: '50',
            label: '50'
          }, {
            value: '100',
            label: '100'
          }, {
            value: '200',
            label: '200'
          }, {
            value: '500',
            label: '500'
          },
        ],
        month: [
          {
            value: '1',
            label: '1'
          }, {
            value: '2',
            label: '2'
          }, {
            value: '3',
            label: '3'
          }, {
            value: '4',
            label: '4'
          }, {
            value: '5',
            label: '5'
          }, {
            value: '6',
            label: '6'
          }, {
            value: '7',
            label: '7'
          }, {
            value: '8',
            label: '8'
          }, {
            value: '9',
            label: '9'
          }, {
            value: '10',
            label: '10'
          }, {
            value: '11',
            label: '11'
          }, {
            value: '12',
            label: '12'
          },
        ],
      }
    },
    computed: {

    },
    mounted() {
      this.getData();
      this.getOptions();
      this.get_skill_multiple();
    },
    methods: {
      async getData() {
        let params = this.$route.query;
        this.recruitForm.origin_id = params.origin_id;
        this.recruitForm.origin_type = params.origin_type;

        let res = await this.$post("/api/admin/recruit/getWorkDetail", {
          origin_id: params.origin_id,
          origin_type: params.origin_type,
        });

        if (res && res.status === 1) {
          this.info = res.data;
          this.recruitForm.description = res.data.description;
          this.recruitForm.name = res.data.company_name;
        }
      },
      workFormChange(value) {
        if(value===2)
        {
          this.recruitForm.name = this.info.manager_company_name;
        }
        else
        {
          this.recruitForm.name = this.info.company_name;
        }
      },
      async getOptions() {
        let res = await this.$post("/api/recruit/getOptions");
        if (res && res.status === 1) {
          this.options = res.data || [];
          this.getAreas();
          this.getPositionType();
        }
      },
      async get_skill_multiple() {
        let res = await this.$post("/api/recruit/get_skill_multiple");
        this.skills_multiple_value = res.data.list || [];
      },
      get_skill_multiple_chanage(val)
      {
        /*var data=val.toString().split(",");
        var data_=[];
        for (var i = 0; i < data.length; i++) {
          if(i%2==1)
          {
            data_.push(data[i])
          }
        }
        this.skills=data_;*/
      },
      async getSkills(query) {
        let data = {
          keyword: query,
          limit: 20
        };
        let res = await this.$post("/api/simple_data/select_skill", data);
        if (res && res.status === 1) {
          this.skillsData = res.data || [];
        } else {
          this.skillsData = [];
        }
      },
      getAreas() {
        let provinces = this.options.provinces;
        let cities = this.options.cities;
        let data = [];
        let id, dd, c;
        for (let i = 0; i < provinces.length; i++) {
          id = provinces[i].id;
          let arr = {
            value: id,
            label: provinces[i].name,
            children: (function () {
              c = 0;
              dd = [];
              for (let j = 0; j < cities.length; j++) {
                if (cities[j].prov_id == id) {
                  let arr1 = {
                    value: cities[j].id,
                    label: cities[j].name
                  };
                  dd[c] = arr1;
                  c++;
                }
              }
              return dd;
            })()
          };
          data[i] = arr;
        }
        this.areas = data;
      },
      getPositionType() {
        let positionType = this.options.direction;
        let arr = [];
        for (let i = 0; i < positionType.length; i++) {
          let d = {
            value: positionType[i].occupation_id,
            label: positionType[i].occupation_name,
            children: (function () {
              if (positionType[i].children.length > 0) {
                let a = [];
                for (let j = 0; j < positionType[i].children.length; j++) {
                  a[j] = {
                    value: positionType[i].children[j].direction_id,
                    label: positionType[i].children[j].direction_name,
                  }
                }
                return a;
              }
            })()
          };
          arr[i] = d;
        }
        this.positionType = arr;
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.getSkills(query);
          }, 200);
        } else {
          this.skillsData = [];
        }
      },
      cityChange(value) {
        if (!value) return;
        this.recruitForm.provId = value[0];
        this.recruitForm.cityId = value[1];
      },
      positionChange(value) {
        if (!value) return;
        this.recruitForm.occupationId = value[0];
        this.recruitForm.directionId = value[1];
      },
      checkForm(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitForm();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      async submitForm() {
        let formData = this.recruitForm;
        var data=formData.skills.toString().split(",");
        var skills_val="";
        for (var i = 0; i < data.length; i++) {
          if(i%2==1)
          {
            if(skills_val)
            {
              skills_val+=","+data[i];
            }
            else
            {
              skills_val+=data[i];
            }
          }
        }
        formData.skills=skills_val;
        this.submitLoading = true;
        let res = await this.$post("/api/admin/recruit/addRecruit", formData);
        if (res && res.status === 1) {
          this.recruitForm = {
            origin_id: 0,
            origin_type: 0,
            workType: 2,
            skills: []
          };
          this.$message({
            type: "success",
            message: "添加成功!"
          });
          this.submitLoading = false;
        }
        else
        {
          this.$message({
            type: "error",
            message: res.info
          });
          this.submitLoading = false;
        }
      },

    }
  };
</script>

<style scoped>
  .recruitBlock{
    width: 800px;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .recruitBlockTitle{
    font-weight: 800;
    font-size: 17px;
    color: #333;
    margin-bottom: 20px;
  }
  .textCenter{
    text-align: center;
  }
  .recruitInfoItem{
    font-size: 14px;
    color: #606266;
    margin-right: 6px;
    margin-bottom: 10px;
  }
  .mb-10{
    margin-bottom: 10px;
  }
</style>
