<template>
  <basic-container>
    <!--搜索栏-->
    <el-form size="small" label-position="right" :inline="true" style="padding-left: 10px;padding-right: 10px;">
      <el-row :span="24">
        <!--        <el-form-item label="任务名称:">-->
        <!--          <el-input v-model="search.missionTitle" placeholder="任务名称" clearable></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="机构名称:">
          <el-input
            v-model="search.companyName"
            placeholder="机构名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位编码:">
          <el-input
            v-model="search.missionNo"
            placeholder="岗位编码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input
            v-model="search.address"
            placeholder="北京-北京市-崇文区"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位名称:">
          <el-input
            v-model="search.missionTitle"
            placeholder="岗位名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="零工工种:">
          <el-input
            v-model="search.worktypeNames"
            placeholder="零工工种"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="审核状态：">
          <el-select v-model="search.reviewState">
            <el-option
              v-for="(item, index) in recruitStatus"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历：">
          <el-select v-model="search.education">
            <el-option
              v-for="(item, index) in educationState"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="任务状态:">
          <el-select v-model="search.status" placeholder="任务状态" style="width:100%">
              <el-option
                v-for="(item,key,index) in missionTypes"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="search.state" placeholder="请选择搜索时间类型" style="width: 100%" @change="date">
            <el-option
              v-for="(item, key, index) in timeScreenTerm"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            :disabled="!search.state"
            v-model="timeValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="dateChange">
          </el-date-picker>
        </el-form-item>
        <tool-tip ></tool-tip> -->

        <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-form>
    <!--/搜索栏-->
    <waiting-mission ref="waiting" v-if="search.status === 1" @refresh="handleClear"></waiting-mission>
    <ongoing-mission ref="onging" v-if="search.status === 2" @refresh="handleClear"></ongoing-mission>
    <finished-mission ref="finished" v-if="search.status === 3" @refresh="handleClear"></finished-mission>
    <expired-mission ref="expired" v-if="search.status === 4" @refresh="handleClear"></expired-mission>
  </basic-container>
</template>

<script>
import WaitingMission from './Table/WaitingMission'
import OngoingMission from './Table/OngoingMission'
import FinishedMission from './Table/FinishedMission'
import ExpiredMission from './Table/ExpiredMission'
import {companyMissionState, educationState, recruitStatus} from '@/common/dic'

export default {
  comments: {},
  name: "tenant_mission",
  data() {
    return {
      recruitStatus,
      educationState,
      missionTypes: companyMissionState,
      timeValue: "",
      endDateRange: "",//报名截止日期筛选
      beginTimeValue: "",//开始时间筛选
      successTimeValue: "",//完成时间筛选
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
      },
      search: {
        status: 1
      },
      timeScreenTerm: [{
        value: 2,
        label: '开始日期',
      },
        {
          value: 3,
          label: '结束日期',
        }, {
          value: 1,
          label: '报名截止日期',
        }],
    }
  },
  components: {
    WaitingMission,
    OngoingMission,
    FinishedMission,
    ExpiredMission
  },
  computed: {},
  watch: {},
  methods: {
    handleSearch() {
      if (this.search.status === 1) {
        this.$refs.waiting.onLoad(this.page, this.search);
      } else if (this.search.status === 2) {
        this.$refs.onging.onLoad(this.page, this.search);
      } else if (this.search.status === 3) {
        this.$refs.finished.onLoad(this.page, this.search);
      } else if (this.search.status === 4) {
        this.$refs.expired.onLoad(this.page, this.search);
      }
    },
    date() {
      this.dateChange(this.timeValue)
    },
    dateChange(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 = '';
      // }
      switch (this.search.state) {
        case 1:
          return this.endDateChange(val)
        case 2:
          return this.beginDateChange(val);
        case 3:
          return this.successDateChange(val);
      }

    },
    handleClear() {
      let curStatus = this.search.status;
      this.search = {
        status: curStatus,
        missionNo: '',
        missionTitle: '',
        stime: '',
        etime: '',
        etimePubBeginTime: '',
        etimePubEndTime: '',
        stimeBeginTime: '',
        stimeEndTime: '',
        etimeBeninTime: '',
        etimeEndTime: '',

      }
      this.timeValue = '';
      this.endDateRange = '';
      this.beginTimeValue = "";
      this.successTimeValue = "";
      this.handleSearch()
    },
    // 开始时间
    beginDateChange(val) {
      if (val) {
        this.clearDateTime()
        this.search.stimeBeginTime = val[0] + " 00:00:00";
        this.search.stimeEndTime = val[1] + " 23:59:59";
      } else {
        this.search.stimeBeginTime = '';
        this.search.stimeEndTime = '';
      }
    },
    // 完成时间
    successDateChange(val) {
      if (val) {
        this.clearDateTime()
        this.search.etimeBeninTime = val[0] + " 00:00:00";
        this.search.etimeEndTime = val[1] + " 23:59:59";
      } else {
        this.search.etimeBeninTime = '';
        this.search.etimeEndTime = '';
      }
    },
    // 报名截止时间
    endDateChange(val) {
      if (val) {
        this.clearDateTime()
        this.search.etimePubBeginTime = val[0] + " 00:00:00";
        this.search.etimePubEndTime = val[1] + " 23:59:59";
      } else {
        this.search.etimePubBeginTime = '';
        this.search.etimePubEndTime = '';
      }
    },
    // 清楚多余时间参数
    clearDateTime() {
      this.search.etimePubBeginTime = '';
      this.search.etimePubEndTime = '';
      this.search.etimeBeninTime = '';
      this.search.etimeEndTime = '';
      this.search.stimeBeginTime = '';
      this.search.stimeEndTime = '';
    }
  }
};
</script>
<style scoped>
.el-form-item {
  margin-bottom: 18px !important;
  margin-right: 10px !important;
  padding: 0 10px;
}

.searchBtn {
  display: inline-block;
  margin-bottom: 18px;
}
</style>
