<gsb-pcpage>
<div style="padding:10px 20px;">
  <div style="height: auto; max-width: 1500px;">
    <div style="margin-top: 10px;">
      <el-radio-group v-model="statustab" size="medium" @change="statusChange" text-color="#FFFFFF" fill ="#59C1A6">
        <el-radio-button label="1">平台零工</el-radio-button>
        <el-radio-button label="2">导入名单</el-radio-button>
      </el-radio-group>
    </div>
    <div v-if="statustab != 2">
      <el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
        <div style="width:100%;line-height: 40px;">
          <div style="float:left;width: auto;">
            <span style="color:2F2F2F;font-size: 14px;" >零工姓名： </span>
            <el-input v-model="search.userName"  maxlength="20" clearable style="width:160px;height: 36px;" ></el-input>
          </div>
          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >年龄： </span>
            <el-input v-model="search.age" type="number"  maxlength="5" clearable style="width:160px;height: 36px;" ></el-input>
          </div>
          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >身份： </span>
            <el-select v-model="search.identityType" style="width:110px;height: 36px;" clearable>
              <el-option
                v-for="item in identityTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="clear:both;height:20px;"></div>
        <div style="width:100%;line-height: 40px;">
          <div style="float:left;width: auto;">
            <span style="color:2F2F2F;font-size: 14px;" >联系电话： </span>
            <el-input v-model="search.mobile"  maxlength="20" clearable style="width:160px;height: 36px;" ></el-input>
          </div>
          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >身高： </span>
            <el-input v-model="search.height" type="number" maxlength="5" clearable style="width:160px;height: 36px;" ></el-input>
          </div>
          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >学历： </span>
            <el-select v-model="search.edu" style="width:110px;height: 36px;" clearable>
              <el-option
                v-for="item in eduTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="float:left;margin-top:5px;margin-left: 40px;">
            <el-button @click="resetSearch" style="float:right;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:12px;" >重置</el-button>
            <el-button @click="opSearch" style="float:right;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:10px;margin-right: 12px;" >搜索</el-button>
          </div>
        </div>
      </el-card>

      <el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
        <div style="margin-top: -15px;">
          <div style="line-height: 36px;padding-bottom: 20px;">
              <span style="float:left;color:#2F2F2F;font-size: 14px;">共{{search.total}}条记录</span>
          </div>
          <div style="margin-top: 15px;">
            <el-table 
            stripe
            fix="true"
            :data="search.list"
            style="width: 100%;margin-top: 23px;min-height: 500px;"
            empty-text="暂无申请"
            tooltip-effect="light"
            header-cell-style="background-color: #F5F5F5;color: #2F2F2F;font-size: 14px;font-weight:400;"
            row-style="height:50px;" >
              <el-table-column prop="id" label="零工id" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="userName" label="零工姓名" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="sexName" label="性别" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="mobile" label="联系电话" :formatter="onColFormater" align="center"></el-table-column>
              <el-table-column prop="identityName" label="身份" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="age" label="年龄" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="height" label="身高" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="eduName" label="学历" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="email" label="邮箱" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="adv" label="优势" :formatter="onColFormater" align="center" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="jobNames" label="职位" :formatter="onColFormater" align="center" max-width="100px" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" align="center" >  
                <template slot-scope="scope">
                  <a @click="openDetail(scope.row)" 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>
    </div>

    <div v-if="statustab == 2">
      <el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
        <div style="width:100%;line-height: 40px;">
          <div style="float:left;width: auto;">
            <span style="color:2F2F2F;font-size: 14px;" >零工姓名： </span>
            <el-input v-model="search2.userName"  maxlength="20" clearable style="width:160px;height: 36px;" ></el-input>
          </div>
          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >联系电话： </span>
            <el-input v-model="search2.mobile"  maxlength="20" clearable style="width:160px;height: 36px;" ></el-input>
          </div>

          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >学历： </span>
            <el-select v-model="search2.edu" style="width:110px;height: 36px;" clearable>
              <el-option
                v-for="item in eduTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          
        </div>
        <div style="clear:both;height:20px;"></div>
        <div style="width:100%;line-height: 40px;">
          <div style="float:left;width: auto;">
            <span style="color:2F2F2F;font-size: 14px;" >身份证号： </span>
            <el-input v-model="search2.personsSign"  maxlength="20" clearable style="width:160px;height: 36px;" ></el-input>
          </div>
          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >银行卡号： </span>
            <el-input v-model="search2.bankno" type="number" maxlength="5" clearable style="width:160px;height: 36px;" ></el-input>
          </div>
          
          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >身份： </span>
            <el-select v-model="search2.identityType" style="width:110px;height: 36px;" clearable>
              <el-option
                v-for="item in identityTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div style="float:left;margin-top:5px;margin-left: 40px;">
            <el-button @click="resetSearch2" style="float:right;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:12px;" >重置</el-button>
            <el-button @click="opSearch2" style="float:right;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:10px;margin-right: 12px;" >搜索</el-button>
          </div>
        </div>
      </el-card>

      <el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
        <div style="margin-top: -15px;">
          <div style="line-height: 36px;padding-bottom: 20px;">
              <span style="float:left;color:#2F2F2F;font-size: 14px;">共{{search2.total}}条记录</span>
              <el-button @click="showImportDialog" style="float:right;width:100px;height:36px;color: #FFFFFF;font-weight: 400;border-radius: 4px;font-size: 14px;background-color: #59C1A6;">导入名单</el-button>
              <a href="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_27841557831534709201914185854709rostertemplate.xlsx" 
              style="float:right;width:100px;height:34px;text-align: center;text-decoration: none;color: #FFFFFF;font-weight: 400;border-radius: 4px;font-size: 14px;background-color: #59C1A6;cursor: pointer;margin-right: 10px;"
              target="_blank" 
              download="template.xlsx">下载模板</a>
          </div>
          <div style="margin-top: 15px;">
            <el-table 
            stripe
            fix="true"
            :data="search2.list"
            style="width: 100%;margin-top: 23px;min-height: 500px;"
            empty-text="暂无申请"
            tooltip-effect="light"
            header-cell-style="background-color: #F5F5F5;color: #2F2F2F;font-size: 14px;font-weight:400;"
            row-style="height:50px;" >
              <el-table-column prop="ecompany_name" label="公司名称" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="ejob_name" label="职位名称" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="userName" label="姓名" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="mobile" label="手机号码" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="personsSign" label="身份证" :formatter="onColFormater" align="center"></el-table-column>
              <el-table-column prop="bankno" label="银行卡号" :formatter="onColFormater" align="center" ></el-table-column>
          </el-table>
            <div style="width:100%;text-align: center;margin-top: 20px">
              <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="search2.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="search.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="search2.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <el-dialog width="500px" :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;">查看详情</span>
          <div style="width: 500px; height: 1px;background-color: #E3E3E3;margin: 17px 20px 0px -20px"></div>
        </div>
  
        <div style="padding-left:70px;padding-bottom:30px;margin-top: -15px;">
          <div style="line-height: 16px;">
            <div style="width:2px;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;">
            <div style="clear:both;padding-top: 15px;line-height: 22px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.id}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;line-height: 22px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.userName || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;line-height: 22px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.sexName || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;line-height: 22px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.mobile || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;line-height: 22px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.identityName || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;line-height: 22px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.age || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;line-height: 22px;">
              <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">身高(cm)：</span>
              <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{applyDetail.height || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;line-height: 22px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.eduName || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;line-height: 22px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.email || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.adv || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.jobNames || "---"}}</span>
            </div>
            <div style="clear:both;padding-top: 15px;">
              <span style="float:left;width:90px;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: 260px;">{{applyDetail.experience || "---"}}</span>
            </div>
          </div>
        </div>
      </el-dialog>


      <el-dialog width="900px" :visible.sync="showImport" >
        <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;">导入名单</span>
          <div style="width: 900px; height: 1px;background-color: #E3E3E3;margin: 17px 20px 0px -20px"></div>
        </div>

        <div style="margin-top:-15px;">
          <span style="float:left;padding-top:10px;">零工名单：</span>
          <div style="width:500px;float:left;">
            <gsb-upload3 v-model="uploadResult" @uploadsuccess="uploadsuccess" filetype="xlsx"></gsb-upload3>
          </div>
          <div style="clear: both;"></div>
        </div>
        
        <div style="margin-top:20px;">
          <div style="line-height: 36px;padding-bottom: 20px;">
            <span style="float:left;color:#2F2F2F;font-size: 14px;">共{{datalist.length}}条记录</span>
            <el-button @click="saveRoster" style="float:right;width:100px;height:36px;color: #FFFFFF;font-weight: 400;border-radius: 4px;font-size: 14px;background-color: #59C1A6;">保存名单</el-button>
          </div>

          <el-table 
            stripe
            fix="true"
            :data="datalist"
            style="width: 100%;margin-top: 23px;"
            empty-text="暂无"
            max-height="500"
            tooltip-effect="light"
            header-cell-style="background-color: #F5F5F5;color: #2F2F2F;font-size: 14px;font-weight:400;"
            row-style="height:50px;" >
              <el-table-column prop="ecompany_name" label="公司名称" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="ejob_name" label="职位名称" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="userName" label="姓名" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="mobile" label="手机号码" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="personsSign" label="身份证" :formatter="onColFormater" align="center"></el-table-column>
              <el-table-column prop="bankno" label="银行卡号" :formatter="onColFormater" align="center" ></el-table-column>
            </el-table>
        </div>
      </el-dialog>
  </div>
</gsb-pcpage>