<template>
  <basic-container>
    <!--搜索栏-->
    <el-form size="small" label-position="right" :inline="true" style="float: left;margin-left: 40px;">

      <el-form-item>
        <el-input v-model="query.realName" placeholder="请输入姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="query.telephone" placeholder="请输入手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="query.applyTime" type="date" placeholder="请输入申请时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="申请类型">
        <el-select v-model="query.applType" placeholder="全部">
          <el-option v-for="item in applyTypeList" :key="item.value" :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="searchChange">搜 索</el-button>
        <el-button size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
      </div>

    </el-form>
    <!--/搜索栏-->
    <el-table :data="tableData" border style="width:95%;margin:0 auto;" row-key="id" v-loading="loading">
      <el-table-column label="序号" type="index" width="50">
      </el-table-column>
      <el-table-column prop="realName" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="telephone" label="手机号码" width="180"> </el-table-column>
      <el-table-column  label="申请类型" prop="applType"> 
        <template slot-scope="{ row }">
          <span v-if="row.applType==1">法律维权帮扶</span>
          <span v-if="row.applType==2">困难救助</span>
          <span v-if="row.applType==3">劳动争议调解</span>
          <span v-if="row.applType==4">职业伤害保障</span>
        </template>
      </el-table-column>
      <el-table-column prop="applyTime" label="申请时间">
        <template slot-scope="{row}">
          <span>{{format(row.applyTime)}}</span>
      </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleView(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="union-page" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="page.currentPage" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    <apply-dialog ref="applyDialog"></apply-dialog>
  </basic-container>
</template>
<script>
  import applyDialog from './applyDialog'
  import { getApplyList } from '@/api/manage/union'
  import { dateFormat } from "@/util/date";
  export default {
    name:'manage_union_apply',
    components: {
      applyDialog
    },
    data() {
      return {
        loading:false,
        searchDate: '',
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 0,

        },
        query: {
          
        },
        applyTypeList: [
          {
            label: '法律维权帮扶',
            value: 1
          },
          {
            label: '困难救助',
            value: 2
          },
          {
            label: '劳动争议调解',
            value: 3
          },
          {
            label: '职业伤害保障',
            value: 4
          }
        ],
        tableData: [],
      };
    },
    mounted() {
      this.getList(this.page);
    },
    methods: {
      handleSizeChange(val) {
        this.page.pageSize=val;
        this.getList(this.page,this.query)
      },
      handleCurrentChange(val) {
        this.page.currentPage=val;
        this.getList(this.page,this.query)
      },
      getList(page,params={}){
        this.loading=true;
        getApplyList(page.currentPage,page.pageSize,params).then(res=>{
          const data=res.data.data;
          this.tableData=data.records;
          this.page.total=data.total;
          this.loading=false;
        }).catch(()=>{
          this.loading=false;
        })
      },
      handleView(row) {
        this.$refs.applyDialog.open(row)
      },
      searchChange() {
        this.getList(this.page,this.query)
      },
      searchReset() {
        this.query={}
        this.getList(this.page,this.query)
      },
      format(date) {
                if (date) {
                    return dateFormat(new Date(date), "yyyy-MM-dd hh:mm:ss");
                }
            }
    },
  };
</script>
<style>
  .searchBtn {
    display: inline;
  }

  .union-page {
    width: 300px;
    margin: 0 auto;
    margin-top: 50px;
  }
</style>