<gsb-pcpage>
<style>
  ::el-radio-button__inner {
    border-color: #D9D9D9;
  }
</style>
<div style="padding:20px;">
  <div style="height: auto;min-width: 1000px; max-width: 1500px;">
    <div style="">
      <el-radio-group v-model="statustab" size="medium" @change="statusChange" text-color="#FFFFFF" fill ="#59C1A6">
        <el-radio-button label="0">待审核 </el-radio-button>
        <el-radio-button label="1">已发布</el-radio-button>
        <el-radio-button label="2">已驳回</el-radio-button>
      </el-radio-group>
    </div>

    <el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
      <div style="width:100%;line-height: 40px;">
        <div v-if="statustab == 0"  style="float:left;width: 400px;">
            <span style="color:2F2F2F;font-size: 14px; float:left;" >申请日期： </span>
            <el-date-picker
              v-model="search.applyBegin"
              type="date"
              placeholder="开始时间"
              style="width:140px;height: 36px;float:left;"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              default-value="">
            </el-date-picker>
            <el-date-picker
              v-model="search.applyEnd"
              type="date"
              style="width:140px;height: 36px;margin-left: 16px;float:left;"
              placeholder="结束时间"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              default-value="">
            </el-date-picker>
        </div>
        <div v-if="statustab == 1" style="float:left;width: 400px;">
            <span style="color:2F2F2F;font-size: 14px; float:left;" >发布日期：</span>
            <el-date-picker
              v-model="search.publishBegin"
              type="date"
              placeholder="开始时间"
              style="width:140px;height: 36px;float:left;"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              default-value="">
            </el-date-picker>
            <el-date-picker
              v-model="search.publishEnd"
              type="date"
              style="width:140px;height: 36px;margin-left: 16px;float:left;"
              placeholder="结束时间"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              default-value="">
            </el-date-picker>
        </div>
        <div v-if="statustab == 2" style="float:left;width: 400px;">
            <span style="color:2F2F2F;font-size: 14px; float:left;" >驳回日期： </span>
            <el-date-picker
              v-model="search.rejectBegin"
              type="date"
              placeholder="开始时间"
              style="width:140px;height: 36px;float:left;"
              default-value="">
            </el-date-picker>
            <el-date-picker
              v-model="search.rejectEnd"
              type="date"
              style="width:140px;height: 36px;margin-left: 16px;float:left;"
              placeholder="结束时间"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              default-value="">
            </el-date-picker>
        </div>
        <div style="float:left;width: 300px;">
          <span style="color:2F2F2F;font-size: 14px;" >所需人数： </span>
          <el-input v-model="search.num" type="number" placeholder="请输入所需人数" maxlength="10" clearable style="max-width:200px;height: 36px;" ></el-input>
        </div>
        <div style="float:left;width: 300px;">
          <span style="color:2F2F2F;font-size: 14px;" >职位名称： </span>
          <el-input v-model="search.name"  placeholder="请输入职位名称" maxlength="30" clearable style="max-width:200px;height: 36px;" ></el-input>
        </div>
      </div>
      <div style="clear:both;height:20px;"></div>
      <div style="width:100%;line-height: 40px;">
          <div style="float:left;width: 400px;">
              <span style="color:2F2F2F;font-size: 14px; float:left;" >工作日期： </span>
              <el-date-picker
                v-model="search.workTimeBegin"
                type="date"
                placeholder="开始时间"
                style="width:140px;height: 36px;float:left;"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                default-value="">
              </el-date-picker>
              <el-date-picker
                v-model="search.workTimeEnd"
                type="date"
                style="width:140px;height: 36px;margin-left: 16px;float:left;"
                placeholder="结束时间"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                default-value="">
              </el-date-picker>
          </div>
          <div style="float:left;width: 300px;">
            <span style="color:2F2F2F;font-size: 14px;" >性别要求： </span> 
            <el-select v-model="search.sex" clearable placeholder="请选择" style="max-width:200px;height: 36px;">
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="float:left;width: 300px;">
            <span style="color:2F2F2F;font-size: 14px;" >计酬方式： </span> 
            <el-select v-model="search.settleType" clearable placeholder="请选择" style="max-width:200px;height: 36px;">
              <el-option
                v-for="item in settleTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="clear: both;padding-top:15px;">
            <el-button @click="opSearch" style="float:left;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:10px;margin-right: 10px;" >搜索</el-button>
            <el-button @click="resetSearch()" style="float:left;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:10px;" >重置</el-button>
          </div>
        </div>
    </el-card>
    <el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
      <div>
        <span style="color:#2F2F2F;font-size: 14px;">共{{search.total}}条记录</span>
        <div>
          <el-table 
          stripe
          fix="true"
          :data="search.list"
          tooltip-effect="light"
          style="min-width: 1000px;max-width: 1500px;margin-top: 23px;min-height: 500px;"
          empty-text="暂无需求"
          header-cell-style="background-color: #F5F5F5;color: #2F2F2F;font-size: 14px;font-weight:400;"
          row-style="height:50px; " >
            <el-table-column prop="id" label="序号" :formatter="onColFormater" align="center"></el-table-column>
            <el-table-column prop="name" label="职位名称" :formatter="onColFormater" align="center"></el-table-column>
            <el-table-column prop="num" label="所需人数" :formatter="onColFormater" align="center"></el-table-column>
            <el-table-column prop="sexName" label="性别要求" :formatter="onColFormater" key="sex" align="center"></el-table-column>
            <el-table-column prop="settleTypeName" label="计酬方式" :formatter="onColFormater" align="center"></el-table-column>
            <el-table-column prop="salaryShow" label="报酬金额" :formatter="onColFormater" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column label="工作日期" width="170" align="center">
              <template slot-scope="scope">
                <div v-for="jtime in scope.row.jobTimes">
                  <div style="width:170px;;text-align: center;">{{jtime.begin_at}}-{{jtime.end_at}}</div>
                  <div style="width:170px;text-align: center;">{{jtime.beginTimes}}-{{jtime.endTimes}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="addr" label="工作地点" :formatter="onColFormater" max-width="120px" align="center" show-overflow-tooltip ></el-table-column>
            <el-table-column v-if="statustab == 0" prop="created_at" label="申请日期" :formatter="onColFormater" key="statustab0" align="center" ></el-table-column>
            <el-table-column v-if="statustab == 1" prop="publish_at" label="发布日期" :formatter="onColFormater" key="statustab1" align="center" ></el-table-column>
            <el-table-column v-if="statustab == 2" prop="reject_at" label="驳回日期" :formatter="onColFormater" key="statustab2" align="center" ></el-table-column>
            <el-table-column prop="jobStatusName" label="状态" :formatter="onColFormater" align="center" ></el-table-column>
            <el-table-column label="操作" align="center">  
              <template slot-scope="scope">
                <a v-if="statustab == 0" @click="toaudit(scope.row.id)" href="javascript:;" style="text-decoration: none;color:#59C1A6;font-size: 14px;">去审核</a>  
                <a v-if="statustab == 1" @click="showApplys(scope.row)" href="javascript:;" style="text-decoration: none;color:#59C1A6;font-size: 14px;">详情</a>
                <a v-if="statustab == 2" @click="toDetail(scope.row.id)" href="javascript:;" style="text-decoration: none;color:#59C1A6;font-size: 14px;">详情</a>
              </template>
            </el-table-column>
          </el-table>
          <div style="width:100%;text-align: center;margin-top: 20px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="search.currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="search.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="search.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>

    <el-dialog width="600px" :visible.sync="showDetail">
      <div slot="title">
        <span style="margin-left:9px;margin-top:-3px;;width:72px; height:25px; font-size:18px; font-family:PingFangSC-Regular; font-weight:400; color:rgba(51,51,51,1); line-height:25px;">{{detailTitle}}</span>
        <div style="width: 600px; height: 1px;background-color: #E3E3E3;margin: 17px 20px 0px -20px"></div>
      </div>

      <div style="padding-left:70px;margin-top: -15px;">
        <div style="line-height: 16px;">
          <div style="width:3px;height:15px;float: left;background-color: #54C4A7">
          </div>
          <span style="font-size:15px;color: #333333;float: left;font-weight:bold;margin-left: 5px; ">零工信息</span>
        </div>

        <div style="clear:both;padding-left: 10px;padding-bottom:37px;">
          <div style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">零工ID：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 12px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.id}}</span>
          </div>
          <div style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">零工姓名：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.name}}</span>
          </div>
          <div style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">所需人数：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.num}}</span>
          </div>
          <div style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">已招人数：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{(jobDetail.num || 0) - (jobDetail.limitnum || 0)}}</span>
          </div>
          <div style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">结算方式：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.settleTypeName}}</span>
          </div>
          <div v-if="jobDetail.timeSalary > 0" style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">计时报酬：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.timeSalary}} {{jobDetail.timeTypeName}}</span>
          </div>
          <div v-if="jobDetail.pieceSalary > 0" style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">计件报酬：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.pieceSalary}} 元/件</span>
          </div>
          <div style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">月均收入：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.salaryAvg}} 元</span>
          </div>
          <div style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">工作时间：</span>
            <div style="float:left;text-align:left;padding-left: 10px;max-width: 388px;">
              <div v-for="jt in jobDetail.jobTimes" style="font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">
                {{jt.begin_at}}-{{jt.end_at}} {{jt.beginTimes}}-{{jt.endTimes}}
              </div>
            </div>
          </div>
          <div style="clear:both;padding-top: 15px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">工作地址：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.addr}}</span>
          </div>
          <div style="clear:both;padding-top: 15px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">工作描述：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.intro || "---"}}</span>
          </div>
          <div style="clear:both;padding-top: 15px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">零工要求：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.require || "---"}}</span>
          </div>
          <div style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">申请日期：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.created_at}}</span>
          </div>
          <div v-if="jobDetail.publish_at" style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">发布日期：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.publish_at}}</span>
          </div>
          <div v-if="statustab == 2" style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">驳回日期：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.reject_at || "---"}}</span>
          </div>
          <div v-if="statustab == 2" style="clear:both;padding-top: 15px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">驳回原因：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.auditRemark || "---"}}</span>
          </div>
          <div v-if="jobDetail.cancel_at" style="clear:both;padding-top: 15px;line-height: 22px;">
            <span style="float:left;width:70px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">撤销日期：</span>
            <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 388px;">{{jobDetail.cancel_at}}</span>
          </div>
        </div>

        <div v-if="isAudit" style="clear:both;">
          <div style="line-height: 16px;">
            <div style="width:3px;height:15px;float: left;background-color: #54C4A7">
            </div>
            <span style="font-size:15px;color: #333333;float: left;font-weight:bold;margin-left: 5px; ">审核结果</span>
          </div>
          <div style="padding-top: 40px;">
            <div style="clear:both;">
              <span style="float:left;margin-left: 37px;padding-top: 1px;font-weight:400;color: #333333;font-size: 14px;width:42px;">结果： </span>
              <el-radio style="margin-left:10px;" v-model="auditStatus" label="1">通过</el-radio>
            </div>
            <div style="clear:both;padding-top: 13px;">
              <span style="float:left;margin-left: 37px;padding-top: 1px;font-weight:400;color: #333333;font-size: 14px;width:42px;"> </span>
              <el-radio style="margin-left:10px;" v-model="auditStatus" label="2">驳回</el-radio>
            </div>
            <div style="clear:both;padding-top: 13px;height:100px;">
              <span style="float:left;margin-left: 37px;padding-top: 1px;font-weight:400;color: #333333;font-size: 14px;width:42px;"> </span>
              <el-input
                type="textarea"
                :rows="4"
                style="float:left;width:270px;margin-left:10px;"
                placeholder="驳回原因"
                v-model="auditRemark">
              </el-input>
            </div>
            <div style="clear:both;padding-top: 13px;margin-left: 87px;">
              <el-button @click="audit" :loading="auditLoading" style="background-color: #59C1A6;border: 0px;border-radius: 4px;width: 94px;height: 38px;color: #FFFFFF;" >确 定</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</gsb-pcpage>