<template>
  <el-container style="padding:0px;" :style="{height:currentHeight-65+'px'}">
    <el-header style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;'>
      <span class="title-bold title-left-color">发卡查询</span>
      <el-popover placement="bottom" width="150">
        <el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools"
          style='float:right;transform:translateY(6px)'> 筛选</el-button>
        <el-checkbox-group v-model="checkList">
          <el-col :span="24">
            <el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index">
              {{item.label}}
            </el-checkbox>
          </el-col>
        </el-checkbox-group>
      </el-popover>
    </el-header>
    <el-main class="box_main">
      <el-card>
        <div class="tableCard">
          <el-form ref="form" :inline="true" :model="dataForm" size="mini">
            <el-form-item label="">
              <el-input v-model="dataForm.name" placeholder="请输入姓名、卡序列号" clearable></el-input>
            </el-form-item>
            <!-- <el-form-item label="卡序列号:">
                <el-input v-model="dataForm.serialNumber" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="工号:">
                <el-input v-model="dataForm.jobNumber " placeholder="请输入内容"></el-input>
              </el-form-item> -->
            <el-button @click="getDataList()" type="primary" size="mini" icon="el-icon-search">查询</el-button>
            <el-button @click="resetClick()" type="primary" size="mini" icon="el-icon-refresh-right">重置</el-button>
            <el-button v-if="isAuth('access:card:export')" type="primary" @click="exportData()"
              v-loading.fullscreen.lock="fullscreenLoading" size="mini" icon="el-icon-download">导出excel</el-button>
            <el-button v-if="isAuth('access:card:synchronization')" type="primary" @click="syncClick()"
              style="float:right" size="mini">发卡同步</el-button>
            <!-- <el-button type="primary" @click="sortClick(1)" style="float:right" size="mini">按姓名排序</el-button>
              <el-button type="primary" @click="sortClick(2)" style="float:right" size="mini">按部门排序</el-button> -->
          </el-form>

          <drag-table :data="dataList" :header="checkList" :option="tableOption" @getDataList="getDataList"
            v-loading="dataListLoading" :operationNum="1" :isShowOperate="false">
            <el-table-column slot="fixed" fixed prop="" label="序号" width="80" header-align="center" align="center">
              <template slot-scope="scope">
                {{scope.$index+(pageIndex - 1) * pageSize + 1}}
              </template>
            </el-table-column>
          </drag-table>

          <!-- <el-table :data="dataList" v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#EEF8FF',color:'#333333'}" style="width: 100%;">
              <el-table-column type="index" header-align="center" align="center" width='80' label="序号">
                <template scope="scope"><span>{{scope.$index+(pageIndex - 1) * pageSize + 1}} </span></template>
              </el-table-column>
              <el-table-column prop="name" header-align="center" align="center" label="姓名"></el-table-column>
              <el-table-column prop="jobNumber" header-align="center" align="center" label="工号"></el-table-column>
              <el-table-column prop="serialNumber" header-align="center" align="center" label="卡序列号"></el-table-column>
              <el-table-column prop="createTime" header-align="center" align="center" label="创建时间"></el-table-column>
              <el-table-column prop="activation" header-align="center" align="center" label="起始有效时间"></el-table-column>
              <el-table-column prop="expiration" header-align="center" align="center" label="结束有效时间"></el-table-column>
               </el-table> -->
          <!-- <el-table-column prop="department" header-align="center" align="center" label="所在部门"></el-table-column>
              <el-table-column prop="post" header-align="center" align="center" label="岗位"></el-table-column>
              <el-table-column prop="group" header-align="center" align="center" label="班组"></el-table-column>
              <el-table-column prop="phoneNumber" header-align="center" align="center" label="手机"></el-table-column>
              <el-table-column header-align="center" align="center" label="状态">
                <template slot-scope="scope">
                  <div v-if='scope.row.status==0'><el-badge is-dot class="item"></el-badge>请假</div>
                  <div v-if='scope.row.status==1'>&nbsp&nbsp&nbsp&nbsp在岗</div>
                  <div v-if='scope.row.status==2'><el-badge is-dot class="item1"></el-badge>出差</div>
                </template>
              </el-table-column> -->

        </div>
      </el-card>
    </el-main>
    <el-footer class="box_footer">
      <el-pagination @size-change="sizeChangeHandle" background @current-change="currentChangeHandle"
        :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </el-footer>
  </el-container>

</template>

<script>
import dragTable from '../../components/tab'
export default {
  data() {
    return {
       checkList: [], //筛选数据
       tableHeader: [
        { label: '姓名', prop: 'name' },
        { label: '卡序列号', prop: 'serialNumber' },
        { label: '创建时间', prop: 'createTime' },
        { label: '起始有效时间', prop: 'activation' },
        { label: '结束有效时间', prop: 'expiration' }
      ],
      tableOption: {
        border: false, //是否边框
        maxHeight: 500 //高度
      },
      queryDetailVisible: true,
      dataForm: {
        stationId: localStorage.getItem('stationId'),
        subCode: '01',
        sort: 'department',
        name: ''
      },
      dialogDataForm: {
        operation: '1'
      },
      fullscreenLoading: false,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      state1: '',
      restaurants: []
    }
  },
  components: {
      dragTable
  },
  // computed(){
  //   dowHref: function () {
  //     return ''
  //   }
  // },
  computed: {
    currentHeight() {
      return this.$store.state.d2admin.currentHeight.height
    }
  },
  watch: {
    totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex) {
          this.pageIndex = pages || 1
          this.getDataList()//获取表格数据的方法
      }
    }
  },
  created() {
    this.pageIndex = 1
    this.getDataList()
    this.checkList = [...this.tableHeader]
  },
  methods: {
    resetClick() {
      this.dataForm = {
        stationId: localStorage.getItem('stationId'),
        subCode: '01',
        sort: 'department',
        name: ''
      }
      this.getDataList()
    },
    tabRowClick(res) {
      this.$refs.queryDetail.init(JSON.parse(JSON.stringify(res)))
    },
    handleSelect() {

    },
    //发卡同步
    syncClick() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrlEq('/accessCard/sync'),
        method: 'post',
        data: {
        }
      }).then(data => {
        //console.log('data', data)
        this.dataListLoading = false
        if (data && data.code === 0) {
          this.$message.success('发卡同步成功')
          this.pageIndex = 1
          this.getDataList()
        } else {
          this.$message.success(data.msg)
        }
      })
    },
    sortClick(now) {
      if (now == 1) {
        this.dataForm.sort = 'name'
      } else {
        this.dataForm.sort = 'department'
      }
      this.getDataList()
    },
    // 获取数据列表
    getDataList(sort, order) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrlEq('/accessCard/list'),
        method: 'post',
        data: {
          stationId: this.dataForm.stationId,
          page: this.pageIndex,
          rows: this.pageSize,
          name: this.dataForm.name,
          sort,
          order
        }
      }).then(data => {
        //console.log('data', data)
        if (data && data.code === 0) {
          this.dataList = data.page.rows
          this.totalPage = data.page.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    exportData() {
      this.fullscreenLoading = true
      this.$http({
        url: this.$http.adornUrlEq('/accessCard/export'),
        method: 'get',
        responseType: 'arraybuffer',
        params: {
          stationId: this.dataForm.stationId,
          name: this.dataForm.name,
          serialNumber: this.dataForm.serialNumber,
          jobNumber: this.dataForm.jobNumber,
          sort: this.dataForm.sort
        }
      }).then(data => {
        console.log(data)
        let dd = localStorage.getItem('headers')
        let headers = JSON.parse(dd)

        let type = headers['content-type'].trim().split(';')[0]
        let filename = decodeURI(headers['content-disposition'].trim().split(';')[1].split('=')[1])
        const blob = new Blob([data], { type: type })
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename)
        } else {
            const link = document.createElement('a')
            link.download = filename
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
        }
        this.fullscreenLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    dialogFormVisible() {

    },
    //转化时间
    formatTime(date, format) {
        if (date) {
          date = new Date(date)
          var o = {
              'M+': date.getMonth() + 1, //月份
              'd+': date.getDate(), //日
              'h+': date.getHours(), //小时
              'm+': date.getMinutes(), //分
              's+': date.getSeconds(), //秒
              'q+': Math.floor((date.getMonth() + 3) / 3), //季度
              'S': date.getMilliseconds() //毫秒
          }
          var fmt = format || 'yyyy-MM-dd hh:mm'
          if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
          for (var k in o) {
 if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
}
          return fmt
        } else {
          return ''
        }
    }
  }
}
</script>
<style lang='scss'>
.inputWidth {
  width: 130px;
}
.instuctions_header{
  height: 42px;
  background:#EDEEF1;
  border:1px solid rgba(195, 195, 195, 1);
  h1{
    font-size:16px;
    line-height: 42px;
    height: 42px;
    margin: 0;
    font-family:Adobe Heiti Std;
    font-weight:bold;
    color:rgba(51,51,51,1);
    float: left;
  }
  span{
    width:5px;
    height:16px;
    background:rgba(33,172,252,1);
    float: left;
    margin: 13px 10px 0 20px;
  };
}
.instuctions_content{
  padding: 20px;
  background: #fff;
  table{
    th{
      background: #eef8ff !important;
      color: #333333 !important;
    }
  }
  .item {
    margin-top: 10px;
    margin-right: 5px;
    .el-badge__content.is-dot{
      background-color: #FF3823 !important;
    }
  }
  .item1{
    margin-top: 10px;
    margin-right: 5px;
    .el-badge__content.is-dot{
      background-color: #E2A80C !important;
    }
  }

}
</style>