<gsb-pcpage>
<div style="padding:10px 20px;">
  <div style="height: auto; max-width: 1500px;">
    <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: 420px;">
            <span style="color:2F2F2F;font-size: 14px; float:left;" >创建日期： </span>
            <el-date-picker
              v-model="search.createBegin"
              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.createEnd"
              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: auto;">
          <span style="color:2F2F2F;font-size: 14px;" >订单编号： </span>
          <el-input v-model="search.out_trade_no"  maxlength="30" clearable style="width:160px;height: 36px;" ></el-input>
        </div>
      </div>
      <div style="width:100%;line-height: 40px;clear:both;padding-top: 15px;">
        <div style="float:left;width: auto;">
          <span style="color:2F2F2F;font-size: 14px;" >发薪总额： </span>
          <el-input v-model="search.amtBegin" maxlength="30" clearable style="width:136px;height: 36px;" ></el-input>
          <el-input v-model="search.amtEnd" maxlength="30" clearable style="width:136px;height: 36px;margin-left: 10px;" ></el-input>
        </div>
        <div style="float:left;padding-top:5px;margin-left: 35px;">
          <el-button @click="opSearch" style="float:left;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;margin-right: 10px;" >搜索</el-button>
          <el-button @click="resetSearch" style="float:left;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;" >重置</el-button>
        </div>
      </div>
    </el-card>

    <el-card style="background-color: #FFFFFF;padding:0px 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="create_time" label="创建时间" :formatter="onColFormater" align="center" ></el-table-column>
            <el-table-column prop="out_trade_no" label="订单编号" :formatter="onColFormater" align="center"  ></el-table-column>
            <el-table-column prop="itemCount" label="发薪人数" :formatter="onColFormater" align="center" ></el-table-column>
            <el-table-column prop="open_bank" label="开户行" :formatter="onColFormater" align="center"  ></el-table-column>
            <el-table-column prop="bank_no" label="银行帐号" :formatter="onColFormater" align="center" ></el-table-column>
            <el-table-column prop="amt" label="发薪总额(元)" :formatter="onColFormater" align="center" ></el-table-column>
            <el-table-column prop="trade_status_name" label="交易状态" :formatter="onColFormater" align="center"></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>

    <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;">
                公司名称：
              </span>
              <span style="float:left;text-align:left;padding-left: 10px;font-size: 12px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">
                {{settleDetail.company_name}}
              </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;">
                {{settleDetail.create_time}}
              </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;">
                {{settleDetail.out_trade_no || "---"}}
              </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;">
                {{settleDetail.open_bank || "---"}}
              </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;">
                {{settleDetail.bank_no || "---"}}
              </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;">
                {{settleDetail.pay_complete_time || "---"}}
              </span>
            </div>

          </div>
        </div>
      </el-dialog>
  </div>
</gsb-pcpage>