<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="listType">
                <el-select
                    v-model.trim="listQuery.listType"
                    placeholder="请选择目录类型"
                    clearable
                >
                    <el-option
                        v-for="item in cata"
                        :key="item.id"
                        :label="item.listType"
                        :value="item.listType"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="是否基药" prop="essdrugType">
                <el-select
                    v-model="listQuery.essdrugType"
                    placeholder="请选择是否基药"
                    clearable
                >
                    <el-option
                        v-for="item in essdrug"
                        :key="item.value"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                </el-select>
            </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="listLoading"
            element-loading-text="加载中"
            :data="list"
            fit
            stripe
            border
        >
            <template slot="empty">
                <img src="@/assets/nopage.png" alt />
                <p>暂无数据</p>
            </template>
            <el-table-column fixed type="index" label="序号" width="60"/>
            <el-table-column label="药品信息" prop="drugName,dosformName,essdrugType,prodentpName,specName,convrat,prepunt,pacUnt" width="300">
                <template slot-scope="scope">
                    <div class="drug-name">
                        <el-tag>{{ scope.row.drugName }}</el-tag>{{ "【" + scope.row.dosformName + "】" }} 
                        <el-tag>{{ scope.row.essdrugType }}</el-tag><br />
                        {{ "生产厂家 【" + scope.row.prodentpName + "】" }}<br />
                        {{ '药品规格 【'+scope.row.specName +'*' +scope.row.convrat +scope.row.prepunt +'/' +scope.row.pacUnt +'】' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="药品编码" prop="drugId" />
            <el-table-column label="挂网序号" prop="pubonlnSn" />
            <el-table-column label="基药类型" prop="essdrugType" />
            <el-table-column label="挂网类型" prop="pubonlnType" />
            <el-table-column label="目录类型" prop="listType" />
            <el-table-column label="批准文号" prop="aprvNo" />
            <el-table-column label="投标企业" prop="dclaEntpName" />
            <el-table-column label="限价/参考价" prop="lmtPric" />
        </el-table>
        <!--分页-->
        <yl-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getData"
        />
    </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import { getTpsDrugList,getListType } from "@/api/drugCataManage/index";
    export default {
        components: {
            ylPagination
        },
        data() {
            return {
                listQuery:{
                    current: 1,
                    size: 10,
                    drugInfo: "",
                    listType: "",
                    essdrugType: "",
                },
                listLoading: false,
                list: [],
                total: 0,
                cata: [],
                essdrug: [
                    {value: '0', name: "非基药"},
                    {value: '1', name: "基药"}
                ]
            }
        },
        methods: {
            getData(type) {
                if (type == "search") {
                    this.listQuery.current = 1;
                }
                this.listLoading = true;
                getTpsDrugList(this.listQuery).then((res) => {
                    this.list = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch((err) => {
                    this.listLoading = false;
                });
                // 查询目录类型
                getListType({ listType: "" }).then((res) => {
                    this.cata = res.data;
                })
            },
            reset(){
                this.$refs.queryForm.resetFields();
                this.getData();
            },
        },
        mounted () {
            this.getData();
        },
    }
</script>

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