<template>
  <a-row class="a-left">
    <a-row>
      <p class="a-title">今日考勤状况</p>
      <a-row type="flex" justify="space-around">
        <a-col :span="4" class="block">
          <h3>出勤状况总览</h3>
          {{ cntAll.cnt }}/
          <span style="color: #F0FF00">{{ cntAll.exceptionCount }}</span>
        </a-col>
        <a-col :span="4" class="block">
          <h3>管理人员出勤状况</h3>
          {{ cntLeader.cnt }}/
          <span style="color: #F0FF00">{{ cntLeader.exceptionCount }}</span>
        </a-col>
        <a-col :span="4" class="block">
          <h3>施工人员出勤状况</h3>
          {{ cntSpecial.cnt }}/
          <span style="color: #F0FF00">{{ cntSpecial.exceptionCount }}</span>
        </a-col>
        <a-col :span="4" class="block">
          <h3>特种设备人员出勤状况</h3>
          {{ cntEmployee.cnt }}/
          <span style="color: #F0FF00">{{ cntEmployee.exceptionCount }}</span>
        </a-col>
      </a-row>
    </a-row>
    <a-row class="a-mt-20">
      <h3 class="a-title">考勤记录查询</h3>
    </a-row>
    <!--查询条件-->
    <a-form :form="form" layout="inline">
      <a-form-item label="姓名">
        <a-input class="a-input" v-model="queryParam.name" placeholder="请输入姓名" :disabled="loading" />
      </a-form-item>
      <a-form-item label="日期">
        <y-date-picker :start.sync="queryParam.startDate1" :end.sync="queryParam.endDate1" :disabled="loading" />
      </a-form-item>
      <a-form-item>
        <a-button :disabled="loading" class="a-ml-10 a-btn" icon="search" @click="searchData">查询</a-button>
        <a-button :disabled="loading" class="a-btn a-ml-10" icon="reload" @click="reset">刷新</a-button>
      </a-form-item>
    </a-form>
    <!--查询结果-->
    <a-row class="a-pt-20 a-pt-10">
      <a-col :span="6">
        <p class="a-title">查询结果</p>
      </a-col>
      <a-col :span="6" :offset="12" class="a-right">
        <a-button :disabled="loading" class="a-ml-10 a-btn" icon="file-pdf" @click="exportData">导出</a-button>
      </a-col>
      <a-table
        class="ant-table"
        :row-key="uuid"
        :columns="columns"
        :data-source="RenYuanKaoQin.data"
        :loading="loading"
        :pagination="{
          position: 'bottom',
          total: Number(RenYuanKaoQin.total),
          current: Number(queryParam.pageNumber),
          pageSize: Number(queryParam.pageSize),
          showSizeChanger: true,
          pageSizeOptions: ['7', '14', '21'],
          showTotal: total => `总共有${total}条`
        }"
        :scroll="{x:1300, y: 'calc(100vh - 600px)' }"
        :locale="{ emptyText: '暂未找到符合条件的结果' }"
        @change="tableChange"
      >
        <!--操作-->
        <template slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="intoDetail(record)">详情</a>
        </template>
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        //处理超长生成...,并加上提示文字代码
        <div :style="{maxWidth: '180px',whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden', wordWrap: 'break-word', wordBreak: 'break-all' }" slot="groupName" slot-scope="text, record">
          <a-tooltip placement="left">
            <template slot="title">
              <span>{{record.groupName}}</span>
            </template>
            {{record.groupName}}
          </a-tooltip>
        </div>
      </a-table>
    </a-row>
  </a-row>
</template>

<script>
import { YDatePicker } from '@/components/Form'
import { mapGetters, mapActions } from 'vuex'
import { clone, get, now } from 'lodash'

export default {
  name: 'RenYuan-KaoQin',
  components: { YDatePicker },
  metaInfo: {
    title: '考勤记录'
  },
  data() {
    return {
      loading: false,
      form: this.$form.createForm(this),
      initQueryParam: {},
      queryParam: {
        pageNumber: 1,
        pageSize: 7,
        name: '',
        startDate1: '',
        endDate1: ''
      },
      columns: [
        { title: '序号', align: 'center', width: 80, scopedSlots: { customRender: 'serial' } },
        { title: '姓名', align: 'center', width: 150, dataIndex: 'memberName' },
        { title: '签到时间', align: 'center', width: 250, dataIndex: 'inTimeNew' },
        { title: '签退时间', align: 'center', width: 250, dataIndex: 'outTimeNew' },
        { title: '出勤时间', align: 'center', width: 150, dataIndex: 'jgHour' },
        { title: '所属劳动组织', align: 'center', width: 200, scopedSlots: { customRender: 'groupName' } },//这里groupName指向 div中slot="groupName"
        { title: '专业分工', align: 'center', width: 150, dataIndex: 'workTypeNew' },
        { title: '人员类别', align: 'center', dataIndex: 'personnelTypeStr' }
      ]
    }
  },
  computed: {
    ...mapGetters(['RenYuanKaoQin']),
    cntAll() {
      return { cnt: get(this.RenYuanKaoQin, 'count.cntAll[0].cnt'), exceptionCount: get(this.RenYuanKaoQin, 'count.cntAll[0].exceptionCount') }
    },
    cntSpecial() {
      return {
        cnt: get(this.RenYuanKaoQin, 'count.cntSpecial[0].cnt'),
        exceptionCount: get(this.RenYuanKaoQin, 'count.cntSpecial[0].exceptionCount')
      }
    },
    cntLeader() {
      return { cnt: get(this.RenYuanKaoQin, 'count.cntLeader[0].cnt'), exceptionCount: get(this.RenYuanKaoQin, 'count.cntLeader[0].exceptionCount') }
    },
    cntEmployee() {
      return {
        cnt: get(this.RenYuanKaoQin, 'count.cntEmployee[0].cnt'),
        exceptionCount: get(this.RenYuanKaoQin, 'count.cntEmployee[0].exceptionCount')
      }
    }
  },
  beforeRouteUpdate(to, from, next) {
    next()
    this.getData()
  },
  beforeRouteEnter(to, from, next) {
    next(async vm => {
      vm.initQueryParam = clone(vm.queryParam) // 初始表单
      vm.getRenYuanKaoQinCount({ xmbh: vm.$store.state.route.params.xmbh })
      vm.getData()
    })
  },
  methods: {
    ...mapActions(['getRenYuanKaoQin', 'getRenYuanKaoQinCount']),
    uuid() {
      return now() + Math.random()
    },
    /** 清空查询条件 */
    reset() {
      this.queryParam = clone(this.initQueryParam)
      this.form.resetFields()
      this.getData()
    },
    /** 获取表格数据 */
    async getData() {
      this.loading = true
      await this.getRenYuanKaoQin({
        xmbh: this.$store.state.route.params.xmbh,
        ...this.queryParam
      })
      this.loading = false
    },
    /** 表格数据变化 */
    tableChange(pagination) {
      this.queryParam.pageSize = pagination.pageSize
      this.queryParam.pageNumber = pagination.current
      this.getData()
    },
    searchData() {
      this.queryParam.pageNumber = 1
      this.getData()
    }
  }
}
</script>
<style lang="stylus" scoped>
.block {
  height: 86px;
  padding: 10px 0;
  box-sizing: border-box;
  background: url('../../../assets/home/bg.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-size: 20px;

  h3 {
    text-align: center;
    font-size: 18px;
  }

  span {
    font-size: 20px;
  }
}
</style>