<template>
  <div class="key-dm-stats-wrapper">
    <Tabs v-model="activeTab" @on-click="handleTabChange">
      <TabPane label="办公用品使用统计" name="usage">
        <div class="search-div">
          <Row type="flex" :gutter="16" align="middle">
            <Col :span="8">
              <span>时间段：</span>
              <DatePicker v-model="usageRange" type="daterange" style="width:70%" />
            </Col>
            <Col :span="8">
              <span>物料：</span>
              <Input v-model="usageMaterial" placeholder="物料名称或编码" style="width:70%" />
            </Col>
            <Col :span="8" 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" border>
          <TableColumn type="index" title="序号" width="60" align="center" />
          <TableColumn prop="department_name" title="部门" align="center" />
          <TableColumn prop="material_name" title="物料" align="center" />
          <TableColumn prop="total_quantity" title="领用数量" align="center" />
          <TableColumn title="操作" width="100" align="center">
            <template slot-scope="{ row }">
              <Button size="small" @click="openUsageDetail(row)">详细</Button>
            </template>
          </TableColumn>
        </Table>
      </TabPane>

      <TabPane label="工作量统计" name="workload">
        <div class="search-div">
          <Row type="flex" :gutter="16" align="middle">
            <Col :span="10">
              <span>时间段：</span>
              <DatePicker v-model="workRange" type="daterange" style="width:70%" />
            </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" border>
          <TableColumn type="index" title="序号" width="60" align="center" />
          <TableColumn prop="user_name" title="人员" align="center" />
          <TableColumn prop="leave_applications" title="请假申请次数" align="center" />
          <TableColumn prop="leave_approvals" title="请假审批次数" align="center" />
          <TableColumn prop="borrow_applications" title="用品申请次数" align="center" />
          <TableColumn prop="inbound_count" title="入库次数" align="center" />
          <TableColumn prop="leave_duration" title="请假时长(天)" align="center" />
          <TableColumn title="操作" width="160" align="center">
            <template slot-scope="{ row }">
              <Button size="small" @click="openWorkloadDetail(row,'leave')">请假明细</Button>
              <Button size="small" class="ml5" @click="openWorkloadDetail(row,'inventory')">用品明细</Button>
            </template>
          </TableColumn>
        </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',
      usageRange: [],
      usageMaterial: '',
      workRange: [],
      tables: { usage: [], workload: [] },
      loading: { usage: false, workload: false },
      detailModal: { visible: false, rows: [], columns: [] }
    }
  },
  methods: {
    handleTabChange (name) {
      this.activeTab = name
    },
    loadUsage () {
      this.loading.usage = true
      const params = { start: this.usageRange[0], end: this.usageRange[1], 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.usageRange = []; 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.usageRange[0], end: this.usageRange[1], 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.workRange[0], end: this.workRange[1] }
      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.workRange = []; 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.workRange[0], end: this.workRange[1], 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.workRange[0], end: this.workRange[1], 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; }
.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>
