<template>
    <div class="common-box">
        <el-form :model="listQuery" ref="queryForm" :inline="true">
            <el-form-item label="药品信息" prop="drugInfo" class="long">
                <el-input v-model="listQuery.drugInfo" placeholder="请输入药品名称/生产企业"></el-input>
            </el-form-item>
            <el-form-item label="医疗机构" prop="orgId">
                <el-cascader
                    v-model="listQuery.orgId"
                    :options="options"
                    :show-all-levels='false'
                    :props="{ expandTrigger: 'hover', value:'orgId',label:'orgName',children:'child',checkStrictly:true,emitPath:false }"
                    clearable
                    @change="handleChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="受理时间" prop="Time">
                <el-date-picker
                    v-model="listQuery.Time"
                    type="daterange"
                    range-separator="至"
                    :editable="false"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width: 230px"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData('search')">查询 </el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
            v-loading="tableLoading"
            element-loading-text="加载中"
            :data="tableData"
            fit
            stripe
            border
        >
            <template slot="empty">
                <img src="@/assets/nopage.png" alt />
                <p>暂无数据</p>
            </template>
            <el-table-column fixed type="index" label="序号" width="50"/>
            <el-table-column label="药品编码" prop="drugListId" width="160" />
            <el-table-column label="药品信息" prop="" width="260">
                <template slot-scope="scope">
                    <drug-info :info="scope.row"></drug-info>
                </template>
            </el-table-column>
            <el-table-column label="医疗机构" prop="orgName" />
            <el-table-column label="批号" prop="lotNum" />
            <el-table-column label="近效期" prop="prodExpy" />
            <el-table-column label="采购价" prop="purcPric" />
            <el-table-column label="采购金额" prop="purcAmt" />
            <el-table-column label="验收数量" prop="shppCnt" />
            <el-table-column label="退货数量" prop="retnCnt" />
            <el-table-column label="退货金额" prop="retnAmt" />
            <el-table-column label="退货原因" prop="retnRea" />
            <el-table-column label="申请时间" prop="retnDate" width="100" />
            <el-table-column label="受理时间" prop="acpTime" />
            <el-table-column label="受理人" prop="acpName" />
            <el-table-column label="受理状态" prop="rejtRea" />
            <el-table-column label="采购单编号" prop="purcOrdId" width="100"/>
        </el-table>
        <!--分页-->
        <yl-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getData"
        />
    </div>
</template>

<script>
import drugInfo from "@/views/components/drug-info";
import ylPagination from "@/components/yl-pagination";
import { getRetnOrdSplerPage,getALLOrgTree } from "@/api/orderManage-sup/index";
    export default {
        components: { drugInfo,ylPagination },
        data() {
            return {
                listQuery:{
                    current: 1,
                    size: 10,
                    drugInfo: "",
                    startDate: "",
                    endDate: "",
                    orgName:"",
                    Time: [],
                },
                tableLoading: false,
                tableData: [],
                total: 0,
                options: [],
            }
        },
        mounted () {
            this.getData();
        },
        methods: {
            getData(type) {
                if (type == "search") {
                    this.listQuery.current = 1;
                    this.listQuery.startDate = this.listQuery.Time[0]?this.listQuery.Time[0]:"";
                    this.listQuery.endDate = this.listQuery.Time[1]?this.listQuery.Time[1]:"";
                }
                this.tableLoading = true;
                
                getRetnOrdSplerPage(this.listQuery).then((response) => {
                    console.log(response)
                    this.tableData = response.data.records;
                    this.tableLoading = false;
                }).catch((err) => {
                    this.tableLoading = false;
                });
                getALLOrgTree().then(res =>{
                    this.options = res.data
                })
            },
            reset(){
                this.$refs.queryForm.resetFields();
                this.getData('search');
            },
        },
    }
</script>

<style lang="scss" scoped>
::v-deep .long .el-form-item__content{
    width: 220px;
}
</style>