<template>
  <div>
    <basic-container>
      <el-radio-group v-model="search.status" size="small" @change="radioGroup">
        <el-radio-button
          v-for="(item,key,index) in missionTypes"
          :key="index"
          :label="item.value"
        >{{item.label}}</el-radio-button>
      </el-radio-group>
    </basic-container>

    <basic-container >
      <div class="taskTip">
        <p class="title">{{search.status | searchStatus}}</p>
        <div style="height: 30px;"></div>
        <div v-if="search.status === 1" style="display: flex;flex-wrap: wrap;">
          <span class="name">零工岗位总数&nbsp;&nbsp;&nbsp;{{taskGather.totalCount}}</span>
          <span class="name" style="margin-left: 30px;">
            任务阶段
            <span class="smallTitle">招聘中</span>{{taskGather.recruitCount}}
            <span class="smallTitle">任务中</span>{{taskGather.startCount}}
            <span class="smallTitle">已完成</span>{{taskGather.completCount}}
            <span class="smallTitle">已失效</span>{{taskGather.invalidCount}}
            <span class="smallTitle">审核未通过</span>{{taskGather.rejectCount}}
          </span>
        </div>

        <div v-if="search.status === 2" style="display: flex;flex-wrap: wrap;">
          <span class="name" style="margin-right: 40px;">岗位总数&nbsp;&nbsp;&nbsp;{{taskDetail.totalCount}}</span>
          <span class="name">
            人员情况
            <span class="smallTitle">招聘总人数</span>{{taskDetail.enListCount}}
            <span class="smallTitle">申请总人数</span>{{taskDetail.applyCount}}
            <span class="smallTitle">录用总人数</span>{{taskDetail.employedCount}}
          </span>
        </div>
      </div>
    </basic-container>

    <basic-container>
      <!-- 搜索栏 -->
      <el-form
        size="small"
        label-position="right"
        :inline="true"
      >
        <el-row :span="24" v-if="search.status === 1">

          <el-form-item label="机构名称:">
            <el-input v-model="search.companyName" placeholder="机构名称"></el-input>
          </el-form-item>

          <el-form-item label="联系电话:">
            <el-input v-model="search.callTel" placeholder="联系电话"></el-input>
          </el-form-item>

<!--          <el-form-item label="距离最后发任务时间:">-->
<!--            <el-radio-group v-model="search.status" size="small" @change="radioGroup">-->
<!--              <el-radio-button-->
<!--                v-for="(item,key,index) in missionTypes"-->
<!--                :key="index"-->
<!--                :label="item.value"-->
<!--              >{{item.label}}</el-radio-button>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->

          <div class="searchBtn">
            <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜 索</el-button>
            <el-button size="small" icon="el-icon-delete" @click="handleClear">清 空</el-button>
          </div>
        </el-row>
        <el-row :span="24" v-if="search.status === 2">

          <el-form-item label="机构名称:">
            <el-input v-model="search.companyName" placeholder="机构名称"></el-input>
          </el-form-item>

          <el-form-item label="岗位编号:">
            <el-input v-model="search.missionNo" placeholder="岗位编号" ></el-input>
          </el-form-item>

          <el-form-item label="岗位名称:">
            <el-input v-model="search.missionTitle" placeholder="岗位名称" ></el-input>
          </el-form-item>
          <br>
          <el-form-item>
            <el-select v-model="search.reviewState" placeholder="请选择搜索时间类型" style="width:100%">
              <el-option
                v-for="(item,key,index) in timeStatus"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
            :disabled="search.reviewState === ''"
              v-model="search.taskTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="完成时间"
              format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="dateChangeSubTime">
            </el-date-picker>
          </el-form-item>

          <tool-tip></tool-tip>

          <el-form-item label="岗位状态:">
            <el-select v-model="search.jobStatus" placeholder="岗位状态" style="width:100%">
              <el-option
                v-for="(item,key,index) in jobStatus"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <div class="searchBtn">
            <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜 索</el-button>
            <el-button size="small" icon="el-icon-delete" @click="handleClear">清 空</el-button>
            <el-button size="small" icon="el-icon-delete" @click="taskOut">导 出</el-button>
          </div>
        </el-row>

      </el-form>
      <!-- table -->
      <gather v-if="search.status === 1" ref="gather" @searchCompanyName="searchCompanyName"></gather>
      <detail v-if="search.status === 2" ref="detail"></detail>
    </basic-container>
  </div>
</template>

<script>
  import { taskState, jobStatus, timeStatus } from '@/common/dic'
  import {gatherInfo, detailInfo} from '@/api/workstation/task'
  import gather from "./table/gather";
  import detail from "./table/detail";
  import {setStore, getStore} from '@/util/store'
export default {
  name: "index",
  components: {gather, detail},
  data() {
    return {
      disabled: true,
      missionTypes: taskState,
      jobStatus: jobStatus,
      timeStatus: timeStatus,
      activeName: 'first',
      taskTime: '',
      taskGather: {},
      taskDetail: {},
      search: {
        status: 1,
      },
    };
  },
  filters: {
    searchStatus (v) {
      switch (v) {
        case 1:
          return '零工岗位概况';
        case 2:
          return '零工岗位概况';
      }
    }
  },
  created() {
    const status = getStore({name: 'taskStatus'})
    if (status) {
      this.search.status = Number(status)
    }
  },
  mounted() {
    this.handleSearch()
  },
  methods: {
    searchCompanyName (companyName) {
      this.search.status = 2
      setStore({name: 'taskStatus', content: 2, type: 'session'})
      this.search.companyName = companyName
      this.handleSearch()
    },
    dateChangeSubTime(val){
      if(val){
        this.search.stime = val[0]+" 00:00:00";
        this.search.etime = val[1]+" 23:59:59";
      } else{
        this.search.stime = '';
        this.search.etime = '';
      }
    },
    gatherInfoInit () {
      gatherInfo().then(res => {
        this.taskGather = res.data.data
      })
    },
    detailInfoInit () {
      detailInfo().then(res => {
        this.taskDetail = res.data.data
      })
    },
    radioGroup(v) {
      setStore({name: 'taskStatus', content: v, type: 'session'})
      this.handleClear()
    },
    handleSearch () {
      if (this.search.status === 1) {
        this.gatherInfoInit()
        var gatherObj = {
          companyName: this.search.companyName,
          callTel: this.search.callTel
        }
        this.$refs.gather.init(gatherObj)
      } else if (this.search.status === 2) {
        this.detailInfoInit()
        var detailObj = {
          status: this.search.jobStatus ? this.search.jobStatus : '',
          companyName: this.search.companyName ? this.search.companyName : '',
          missionNo: this.search.missionNo ? this.search.missionNo : '',
          missionTitle: this.search.missionTitle ? this.search.missionTitle : '',
          reviewState: this.search.reviewState ? this.search.reviewState : 0,
          stime: this.search.stime ? this.search.stime : '',
          etime: this.search.etime ? this.search.etime : ''
        }
        this.$nextTick(() => {
          this.$refs.detail.init(detailObj)
        })
      }
    },
    handleClear(){
      this.search = {
        status: this.search.status,
        companyName: '',
        callTel: '',
        missionNo:'',
        missionTitle: '',
        reviewState: '',
        jobStatus: '',
      };
      this.handleSearch()
    },
    taskOut(){
      var detailObj = {
        status: this.search.jobStatus ? this.search.jobStatus : '',
        companyName: this.search.companyName ? this.search.companyName : '',
        missionNo: this.search.missionNo ? this.search.missionNo : '',
        missionTitle: this.search.missionTitle ? this.search.missionTitle : '',
        reviewState: this.search.reviewState ? this.search.reviewState : '',
        stime: this.search.stime ? this.search.stime : '',
        etime: this.search.etime ? this.search.etime : ''
      }
      this.$refs.detail.taskOut(detailObj)
    }
  }
}
</script>

<style scoped>
  p{
    margin: 0 !important;
  }
  .el-form-item {
    margin-right: 18px !important;
    /*margin-bottom: 0 !important;*/
  }
  .searchBtn {
    display: inline-block;
    margin-bottom: 18px;
  }
  .taskTip{
    border-radius: 0px 4px 5px 4px;
    /*padding: 14px;*/
  }
  .taskTip .name{
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    line-height: 25px;
  }
  .taskTip .smallTitle{
    width: 36px;
    height: 25px;
    font-size: 18px;
    font-weight: 400;
    color: #999999;
    line-height: 25px;
    margin-right: 15px;
    margin-left: 40px;
  }
  .taskTip .title{
    height: 30px;
    font-size: 22px;
    font-weight: 800;
    color: #333333;
    line-height: 30px;
  }
</style>
