<template>
  <div class="key-dm-stats-wrapper">
    <Tabs v-model="activeTab" @on-click="handleTabChange" class="tabsCls">
      <TabPane label="办公用品使用统计" name="usage">
        <div class="search-div">
          <Row type="flex" :gutter="16" align="middle">
            <Col :span="20">
              <span>开始：</span>
              <DatePicker v-model="usageStart" type="date" style="min-width:110px;margin-right:20px" />
              <span>结束：</span>
              <DatePicker v-model="usageEnd" type="date" style="min-width:110px;margin-right:20px" />
              <span>物料：</span>
              <Input v-model="usageMaterial" placeholder="物料名称或编码" style="width: 150px" />
            </Col>
            <Col :span="4" class="text-right">
              <Button type="primary" class="mr10" @click="loadUsage">统计</Button>
              <Button @click="resetUsage">重置</Button>
            </Col>
          </Row>
        </div>
        <Table :data="tables.usage" :loading="loading.usage" :columns="usageColumns" border>
          <template slot="action" slot-scope="{ row }">
            <Button size="small" @click="openUsageDetail(row)">详细</Button>
          </template>
        </Table>
      </TabPane>

      <TabPane label="工作量统计" name="workload">
        <div class="search-div">
          <Row type="flex" :gutter="16" align="middle">
            <Col :span="18">
              <span>开始：</span>
              <DatePicker v-model="workStart" type="date" style="min-width:110px;margin-right:20px" />
              <span>结束：</span>
              <DatePicker v-model="workEnd" type="date" style="min-width:110px;margin-right:20px" />
            </Col>
            <Col :span="6" class="text-right">
              <Button type="primary" class="mr10" @click="loadWorkload">统计</Button>
              <Button @click="resetWorkload">重置</Button>
            </Col>
          </Row>
        </div>
        <Table :data="tables.workload" :loading="loading.workload" :columns="workloadColumns" border>
          <template slot="action" slot-scope="{ row }">
            <Button size="small" @click="openWorkloadDetail(row,'leave')">请假明细</Button>
            <Button size="small" class="ml5" @click="openWorkloadDetail(row,'inventory')">用品明细</Button>
          </template>
        </Table>
      </TabPane>
    </Tabs>

    <!-- 使用明细弹窗 -->
    <Modal v-model="detailModal.visible" title="明细" width="800">
      <Table :data="detailModal.rows" size="small" border>
        <TableColumn v-for="col in detailModal.columns" :key="col.key" :prop="col.key" :title="col.title" />
      </Table>
      <div slot="footer"><Button type="primary" @click="detailModal.visible=false">关闭</Button></div>
    </Modal>
  </div>
</template>

<script>
import { getUsageStats, getUsageDetails, getWorkloadStats, getWorkloadDetails } from '@/api/key-dm-stats'

export default {
  name: 'key-dm-stats-index',
  data () {
    return {
      activeTab: 'usage',
      usageStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
      usageEnd: new Date(),
      usageMaterial: '',
      workStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
      workEnd: new Date(),
      tables: { usage: [], workload: [] },
      loading: { usage: false, workload: false },
      usageColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        { title: '部门', key: 'department_name', align: 'center' },
        { title: '物料', key: 'material_name', align: 'center' },
        { title: '领用数量', key: 'total_quantity', align: 'center' },
        { title: '操作', slot: 'action', width: 100, align: 'center' }
      ],
      workloadColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        { title: '人员', key: 'user_name', align: 'center' },
        { title: '请假申请次数', key: 'leave_applications', align: 'center' },
        { title: '请假审批次数', key: 'leave_approvals', align: 'center' },
        { title: '用品申请次数', key: 'borrow_applications', align: 'center' },
        { title: '入库次数', key: 'inbound_count', align: 'center' },
        { title: '请假时长(天)', key: 'leave_duration', align: 'center' },
        { title: '操作', slot: 'action', width: 160, align: 'center' }
      ],
      detailModal: { visible: false, rows: [], columns: [] }
    }
  },
  methods: {
    handleTabChange (name) {
      this.activeTab = name
    },
    loadUsage () {
      this.loading.usage = true
      const params = { start: this.usageStart, end: this.usageEnd, material: this.usageMaterial }
      getUsageStats({ params }).then(ret => {
        if (ret.data && ret.data.errcode === 0) this.tables.usage = ret.data.data || []
        else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.loading.usage = false })
    },
    resetUsage () { this.usageStart = null; this.usageEnd = null; this.usageMaterial = ''; this.tables.usage = [] },
    openUsageDetail (row) {
      this.detailModal.columns = [{ key: 'user_name', title: '人员' }, { key: 'quantity', title: '数量' }, { key: 'material_name', title: '物料' }, { key: 'department_name', title: '部门' }]
      this.detailModal.visible = true
      getUsageDetails({ params: { start: this.usageStart, end: this.usageEnd, material: this.usageMaterial, department: row.department_id } }).then(ret => {
        if (ret.data && ret.data.errcode === 0) this.detailModal.rows = ret.data.data || []
        else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
      })
    },
    loadWorkload () {
      this.loading.workload = true
      const params = { start: this.workStart, end: this.workEnd }
      getWorkloadStats({ params }).then(ret => {
        if (ret.data && ret.data.errcode === 0) this.tables.workload = ret.data.data || []
        else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.loading.workload = false })
    },
    resetWorkload () { this.workStart = null; this.workEnd = null; this.tables.workload = [] },
    openWorkloadDetail (row, type) {
      if (type === 'leave') {
        this.detailModal.columns = [{ key: 'user_name', title: '人员' }, { key: 'start_time', title: '开始' }, { key: 'end_time', title: '结束' }, { key: 'duration', title: '时长' }]
        getWorkloadDetails({ params: { user_id: row.user_id, start: this.workStart, end: this.workEnd, type: 'leave' } }).then(ret => {
          if (ret.data && ret.data.errcode === 0) { this.detailModal.rows = ret.data.data || []; this.detailModal.visible = true } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
        })
      } else {
        this.detailModal.columns = [{ key: 'application_no', title: '申请单号' }, { key: 'material_name', title: '物料' }, { key: 'apply_quantity', title: '数量' }]
        getWorkloadDetails({ params: { user_id: row.user_id, start: this.workStart, end: this.workEnd, type: 'inventory' } }).then(ret => {
          if (ret.data && ret.data.errcode === 0) { this.detailModal.rows = ret.data.data || []; this.detailModal.visible = true } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
        })
      }
    }
  }
}
</script>

<style scoped>
.key-dm-stats-wrapper { padding: 10px; min-height: 380px;}
.tabsCls { min-height: 380px;}
.search-div { border: 1px solid #dce1e7; padding: 12px; margin-bottom: 12px; background-color: #f8fbff; }
.mr10 { margin-right: 10px; }
.text-right { text-align: right; }
.page_style { margin-top: 12px; text-align: right; }
.mt8 { margin-top: 8px; }
</style>
