<template>
    <div class="content-main fumigationRecordPage">
        <div class="fieldset">
            <el-form ref="form" inline :model="form" label-width="80px">
                <el-form-item label="统计时间" prop="time">
                    <el-date-picker v-model="form.time" class="dateInputCompatible" style="width:100%" range-separator="至"
                        type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-button type="primary" size="small" class="iconfont iconchaxun" @click="submitForm()">查询</el-button>
                    <el-button type="primary" size="small" class="iconfont iconzhongzhi"
                        @click="resetForm('form')">重置</el-button>
                    <el-button type="primary" size="small" class="iconfont icondaochu11" @click="educe">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="widget-grid">
            <div class="title-box">
                {{ title }}
            </div>
            <table id="summaryData" cellspacing="1" border="1">
                <thead>
                    <tr>
                        <th>药剂种类</th>
                        <th>药剂名称</th>
                        <th>单位</th>
                        <th>期初库存</th>
                        <th>收入总量</th>
                        <th>支出总量</th>
                        <th>期末库存</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in tableData" :key="item.id">
                        <td :rowspan="item.drugKindCount" :style="{ display: item.drugKindCount == 0 ? 'none' : '' }">{{
                            dictionary[item.drugkind] }}</td>
                        <td :rowspan="item.drugNameCount">{{
                            dictionary[item.drugname] }}</td>
                        <td>{{ dictionary[item.drugspecificationunit] }}</td>
                        <td>{{ item.startAmount }}</td>
                        <td>{{ item.rucount }}</td>
                        <td>{{ item.chucount }}</td>
                        <td>{{ item.endAmount }}</td>
                    </tr>
                </tbody>
            </table>
            <div style="text-align: center;margin: 10px">
                <el-button type="primary" @click="returnFun" class="iconfont iconfanhui">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import XLSX from "xlsx"
import FileSaver from "file-saver"
import { pageStatementDetail, dictionary } from '@/api/grainReserves/zygl/index'
export default {
    data() {
        return {
            form: {
				time:[this.getNowYear(), this.getNowDate()],
                // time: ["2023-01-01", "2023-12-31"],
            },
            dictionary: {},
            title: "",
            tableData: [],
            value1: "",
            total: "",
            pageSum: ""

        }
    },
    created() {
        this.title = this.$route.query.name
        this.getTable({startDate: this.form.time[0], endDate: this.form.time[1], orgId: this.$route.query.id })
    },
    methods: {
        getTable(data) {
            pageStatementDetail(data).then(res => {
                if (res.retCode == 200) {
                    this.$nextTick(() => {
                        this.tableData = res.data
                    })
                }
            })
            dictionary().then(res => {
                this.dictionary = res.enumMap
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.getTable({ endDate: this.form.time[1], startDate: this.form.time[0], orgId: this.$route.query.id })
        },
        // 提交搜索
        submitForm() {
            this.getTable({
                endDate: this.form.time[1],
                startDate: this.form.time[0],
                orgId: this.$route.query.id
            })
        },
        // 返回
        returnFun() {
            this.$router.go(-1)
        },
        educe() {
            let dom = document.getElementById("summaryData")
            console.log(dom)
            let vb = XLSX.utils.table_to_book(dom)
            // console.log(vb);
            let vbout = XLSX.write(vb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            })
            try {
                FileSaver.saveAs(
                    new Blob([vbout], { type: "application/octet-stream" }),
                    `药剂报表-库详情.xlsx`
                )
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, vbout)
            }
            console.log(vbout)
            return vbout
        },
		// 获取当天
		getNowDate() {
		  let nowdays = new Date();
		  let year = nowdays.getFullYear();
		  let month = nowdays.getMonth() + 1;
		  let date = nowdays.getDate();
		  return year + "-" + month + "-" + date; //今天
		},
		// 获取当年一月一号
		getNowYear() {
		  let nowdays = new Date();
		  let year = nowdays.getFullYear();
		  return year + "-01-01"; //今天
		},
    }
}
</script>

<style lang="scss" scoped>
.title-box {
    text-align: left;
}

.fieldset {
    padding: 10px;
}

table {
    text-align: center;

    tr {
        height: 30px;
    }

    thead {
        tr {
            background: #ccccccd7;
        }
    }

    th {
        text-align: center;
    }
}
</style>