<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="项目名称" prop="name">
          <el-select
              v-model="queryParams.name"
              placeholder="请选择"
              style="width: 240px"
          >
            <el-option
                v-for="item in projectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="招聘厂商" prop="manufacturer">
          <el-select
              v-model="queryParams.manufacturer"
              placeholder="请选择"
              style="width: 240px"
          >
            <el-option
                v-for="item in manufacturerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否已报备人员" prop="is_report">
          <el-select
              v-model="queryParams.is_report"
              placeholder="请选择"
              style="width: 240px"
          >
            <el-option label="是" value="true" />
            <el-option label="否" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目开始日期" prop="start_date">
          <el-date-picker
              v-model="queryParams.start_date"
              type="date"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="项目结束日期" prop="end_date">
          <el-date-picker
              v-model="queryParams.end_date"
              type="date"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select
              v-model="queryParams.state"
              placeholder="请选择"
              style="width: 240px"
          >
            <el-option label="已发布" value="release" />
            <el-option label="已关闭" value="closed" />
          </el-select>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-table v-loading="loading" :data="list">
        <el-table-column label="项目名称" align="left" prop="name" width="200">
          <template #default="{row}">
            <el-button link type="primary" @click="handleDetail(row)">{{row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="招聘厂商" align="left" prop="manufacturer" />
        <el-table-column label="招聘人数" align="left" prop="recruit_amount" />
        <el-table-column label="岗位" align="left" prop="post" />
        <el-table-column label="项目开始日期" align="center" prop="start_date" />
        <el-table-column label="项目结束日期" align="center" prop="end_date" />
        <el-table-column label="接站时间" align="left" prop="arrive_time" />
        <el-table-column label="联系电话" align="left" prop="contact_number" />
        <el-table-column label="联系人" align="left" prop="contacts" />
        <el-table-column label="可预支工资" align="center" prop="able_advance" >
          <template #default="{row}">
            {{row.able_advance=='1'?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="state" :formatter="stateFormat"/>
        <el-table-column label="出发二维码" align="center"  >
          <template #default="{ row }">
            <el-button link type="primary" @click="getQrCodeImg(row,'bycar')">查看</el-button>
          </template>
        </el-table-column>
  <!--      <el-table-column label="微信出发二维码" align="center" width="150" >-->
  <!--        <template #default="{ row }">-->
  <!--          <el-button link type="primary" @click="getWxQrCodeImg(row,'bycar')">查看</el-button>-->
  <!--        </template>-->
  <!--      </el-table-column>-->
  
        <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
          <template #default="{row}">
            <el-button link type="primary"  @click="handleReport(row)" icon="EditPen">报备</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.limit"
          @pagination="getList"
      />
  
      <!-- 项目二维码查看对话框 -->
      <el-dialog :title="title" v-model="open" width="390px"  append-to-body>
        <el-form :model="form" label-width="100px" >
          <div class="block">
            <img :src="src"  style="width: 350px; height: 350px" />
          </div>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="download()">下载</el-button>
          </div>
        </template>
      </el-dialog>
  
      <!-- 招聘政策选择对话框 -->
      <el-dialog title="招聘政策" v-model="policyOpen" width="390px"  append-to-body>
        <el-form ref="postRef" :model="form" :rules="rules" label-width="100px" >
          <el-input v-model="form.pricepolicy" type="hidden" />
          <el-form-item label="招聘政策" prop="pricepolicyid">
            <el-select
                v-model="form.pricepolicyid"
                placeholder="请选择"
                style="width: 300px"
                @change="handlePricePolicyChange"
            >
              <el-option
                  v-for="item in pricePolicyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">提 交</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
  
    </div>
  </template>
  
  <script setup>
  
  import {
    getQrCode,
    getWxQrCode, insertChannelProject,
    manufacturerSelect, pricePolicyListSelect,
    projectL,
    projectSelect,
    queryChannelProject
  } from "@/api/home/index";
  
  const { proxy } = getCurrentInstance();
  
  const list = ref([]);
  const open = ref(false);
  const policyOpen = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const total = ref(0);
  const title = ref("");
  
  const projectList = ref([]);
  const manufacturerList = ref([]);
  const pricePolicyList = ref([]);
  const src = ref("");
  const imageName = ref("");
  
  const data = reactive({
    form: {
      proid:''
    },
    queryParams: {
      page: 1,
      limit: 10,
    },
    rules: {
      pricepolicyid: [
        { required: true, message: "请选择招聘政策", trigger: "blur" },
      ],
    }
  });
  
  const { queryParams, form, rules } = toRefs(data);
  
  //查询所有项目
  projectSelect().then(res => {
    projectList.value  = [{
      value:'',
      label: '请选择'
    },...res.data.map(item => {
      return {
        value:item.id,
        label: item.name,
        id:item.id
      }
    })]
  })
  
  //查询所有招聘厂商
  manufacturerSelect().then(res => {
    manufacturerList.value  = [{
      value:'',
      label: '请选择'
    },...res.map(item => {
      item = JSON.parse(item);
      return {
        value:item.id,
        label: item.name,
        id:item.id
      }
    })]
  })
  
  /** 查询列表 */
  function getList() {
    loading.value = true;
    projectL(queryParams.value).then(response => {
      list.value = response.data;
      total.value = response.count;
      loading.value = false;
    });
  }
  
  /** 跳转详情 */
  function handleDetail(row) {
    proxy.$router.push('/channel_recruit_report/project_details?id='+row.id)
  }
  
  /** 查看二维码 */
  function getWxQrCodeImg(row,type){
    open.value = true;
  
    var qrDate={}
    qrDate.pro_id=row.id
    qrDate.type = type
  
    switch (type){
      case "bycar" :
        imageName.value = "出发二维码";
        break;
      case "arrived" :
        imageName.value = "接站二维码";
        break;
      case "interview" :
        imageName.value = "面试二维码";
        break;
    }
  
    getWxQrCode(qrDate).then(res => {
      src.value = 'data:application/octet-stream;base64,' + res.data;
    });
  
  }
  function getQrCodeImg(row,type){
    open.value = true;
    var qrDate={}
    qrDate.pro_id=row.id
    qrDate.type = type
  
    switch (type){
      case "bycar" :
        imageName.value = "出发二维码";
        break;
      case "arrived" :
        imageName.value = "接站二维码";
        break;
      case "interview" :
        imageName.value = "面试二维码";
        break;
    }
  
    getQrCode(qrDate).then(res => {
      src.value = 'data:application/octet-stream;base64,' + res.data;
    });
  
  }
  //下载二维码
  function download(){
    const a = document.createElement("a");
    a.href = src.value;
    a.setAttribute("download", imageName.value+".jpg");
    a.click();
  }
  
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.page = 1;
    queryParams.value.limit = 10;
    getList();
  }
  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  }
  
  function handlePricePolicyChange(value) {
    form.value.pricepolicy = pricePolicyList.value.find((item) => item.id === value).label;
  }
  
  /** 报备按钮操作 */
  function handleReport(row) {
    //查询这个项目是否是第一次操作雇员报备
    queryChannelProject({"proid":row.id}).then(response => {
      if(response.code=='stop'){
        if(proxy.$refs["postRef"]!==undefined){
          proxy.$refs["postRef"].resetFields(); // 清除表单已有校验
        }
  
        form.value.proid = row.id;
        //弹框选择所有招聘政策
        policyOpen.value = true;
        pricePolicyListSelect({"proid":row.id}).then(res => {
          pricePolicyList.value  = [{
            value:'',
            label: '请选择'
          },...res.data.map(item => {
            return {
              value:item.id,
              label: item.channel_policy,
              id:item.id
            }
          })]
        })
      }else {
        //跳转到报备页面
        proxy.$router.push('/channel_recruit_report/report?id='+row.id)
      }
    })
  }
  
  /** 取消按钮 */
  function cancel() {
    policyOpen.value = false;
  }
  
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["postRef"].validate(valid => {
      if (valid) {
        insertChannelProject(form.value).then(response => {
          proxy.$modal.msgSuccess(response.code);
          proxy.$router.push('/channel_recruit_report/report?id='+form.value.proid)
        });
      }
    });
  }
  
  getList();
  
  function stateFormat(row) {
    if (row.state === "new") {
      return "未发布"
    }else if (row.state === "release") {
      return "已发布"
    } else if (row.state === "finish") {
      return "已结束"
    } else if (row.state === "closed") {
      return "已关闭"
    }
  }
  </script>
  