<template>
    <div style="display: flex;">
        <el-card style="width:18%;margin-right:18px;border-radius:6px;">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="按分类" name="first"></el-tab-pane>
                <el-tab-pane label="按机构" name="second"></el-tab-pane>
            </el-tabs>
            <!-- <el-input v-model="filterText" placeholder="请输入部门或科室">
                <i slot="suffix" class="el-icon-search"></i>
            </el-input> -->
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all="true"
            node-key="id"
            highlight-current="true" :filter-node-method="filterNode" ref="tree"></el-tree>
        </el-card>
        <div class="common-box" style="width:82%;">
            <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="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>
            <div class="right-button">
                <el-button
                    class="lake-Blue"
                    type="primary"
                    icon="el-icon-plus"
                    @click="handleAdd"
                >新增目录
                </el-button>
            </div>
            <el-table
                v-loading="listLoading"
                element-loading-text="加载中"
                :data="list"
                fit
                stripe
                border
            >
            <!-- :header-cell-style="{'text-align':'center'}" -->
                <template slot="empty">
                    <img src="@/assets/nopage.png" alt />
                    <p>暂无数据</p>
                </template>
                <el-table-column fixed type="index" label="序号" width="60"/>
                <el-table-column align="left" label="药品名称" prop="a,b,c,d,e" 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="lmtPric" /> -->
                <!-- <el-table-column label="集团价格" prop="lmtPric" /> -->
                <el-table-column label="药品编码" prop="drugListId" />
                <el-table-column label="基药类型" prop="essdrugType" />
                <!-- <el-table-column label="挂网类型" prop="e" /> -->
                <!-- <el-table-column label="目录类型" prop="" /> -->
                <el-table-column label="批准文号" prop="aprvNo" />
                <el-table-column label="创建人" prop="crteUsrName" />
                <el-table-column label="创建时间" prop="crteTime" />
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                            class="red"
                            type="text"
                            @click="handleDelete(scope.$index,scope.row)"
                            :disabled="del"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <yl-pagination
                v-show="total > 0"
                :total="total"
                :page.sync="listQuery.current"
                :limit.sync="listQuery.size"
                @pagination="getData"
            />
            <!-- 新增目录 -->
            <el-dialog
                :title="jigouName+' '+'选择药品'"
                :visible.sync="dialogTable"
                width="60%">
                <el-form :model="tableForm" ref="tableform" :inline="true">
                    <el-form-item label="药品信息" prop="drugInfo" class="long">
                        <el-input v-model="tableForm.drugInfo" placeholder="请输入药品名称/编码/生产企业"></el-input>
                    </el-form-item>
                    <el-form-item label="药品编码" prop="drugListId">
                        <el-input v-model="tableForm.drugListId" placeholder="请输入药品编码"></el-input>
                    </el-form-item>
                    <el-form-item label="目录类型" prop="listType">
                        <el-select
                            v-model.trim="tableForm.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>
                        <el-button type="primary" @click="getTableData('search')">查询 </el-button>
                        <el-button @click="tableReset">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    v-loading="tableLoading"
                    element-loading-text="加载中"
                    :data="tableData"
                    ref="se"
                    fit
                    stripe
                    border
                    @selection-change="handleSelectionChange"
                    row-key="drugListId"
                >
                    <template slot="empty">
                        <img src="@/assets/nopage.png" alt />
                        <p>暂无数据</p>
                    </template>
                    <el-table-column type="selection" width="60" :selectable="selectable" reserve-selection="true"/>
                    <el-table-column 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="drugListId" />
                    <el-table-column label="基药类型" prop="essdrugType" />
                    <!-- <el-table-column label="目录大类" prop="" /> -->
                    <!-- <el-table-column label="挂网类型" prop="" /> -->
                    <!-- <el-table-column label="目录类型" prop="" /> -->
                    <el-table-column label="批准文号" prop="aprvNo" />
                    <el-table-column label="生产企业" prop="prodentpName" />
                    <!-- <el-table-column label="限价/参考价" prop="" /> -->
                </el-table>
                <!--分页-->
                <yl-pagination
                    v-show="tableTotal > 0"
                    :total="tableTotal"
                    :page.sync="tableForm.current"
                    :limit.sync="tableForm.size"
                    @pagination="getTableData"
                />
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogTable = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirm" :loading="ccLoad">确认</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import { getHospList,getListType,saveHospListBatch,getGrpDrugList,
getALLOrgTree,getChildByOrgId,deleteHospList,getGrpDrugListWithOrg } from "@/api/drugCataManage/index";
    export default {
        components: {
            ylPagination
        },
        data() {
            return {
                activeName: 'first',
                filterText: "",
                data: [],
                defaultProps: {
                    children: 'child',
                    label: 'orgName'
                },
                jigou: "",
                jigouName: "",
                listQuery:{
                    current: 1,
                    size: 10,
                    drugInfo: "",
                    // listType: "",
                    essdrugType: "",
                    orgId: "",
                },
                listLoading: false,
                list:[],
                total: 0,
                dialogTable: false,
                tableLoading: false,
                tableData: [],
                ccLoad: false,
                selectData: [],
                del: false,
                tableForm:{
                    current: 1,
                    size: 10,
                    drugInfo: "",
                    drugListId: "",
                    listType: "",
                    orgId: "",
                },
                tableTotal: 0,
                cata: [],
                essdrug: [
                    {value: '0', name: "非基药"},
                    {value: '1', name: "基药"}
                ],
                essdrugOptions: ["非基药","基药"],
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            handleClick(tab){
                console.log(tab.label,'111')
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.orgName.indexOf(value) !== -1;
            },
            handleNodeClick(data) {
                this.jigou = data.orgId
                this.jigouName = data.orgName
                this.getData();
            },
            getData(type) {
                if (type == "search") {
                    this.listQuery.current = 1;
                }
                this.listLoading = true;
                this.listQuery.orgId = this.jigou;
                getHospList(this.listQuery).then((res) => {
                    this.list = res.data.records;
                    this.list.forEach((i)=>{
                        i.essdrugType = this.essdrugOptions[i.essdrugType*1]
                    })
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch((err) => {
                    this.listLoading = false;
                });
            },
            getData2(){
                // 查询目录类型
                getListType({ listType: "" }).then((res) => {
                    this.cata = res.data;
                })
                // 下级机构树查询
                getChildByOrgId({orgId: this.$store.getters.orgId}).then((res) => {
                    this.data = res.data;
                    console.log(this.data,'data')
                })
            },
            reset(){
                this.$refs.queryForm.resetFields();
                this.getData();
            },
            // 获取药品信息
            getTableData(type){
                if (type == "search") {
                    this.tableForm.current = 1;
                }
                this.tableLoading = true;
                this.tableForm.orgId = this.jigou;
                getGrpDrugListWithOrg(this.tableForm).then((res) => {
                    this.tableData = res.data.records;
                    this.tableData.forEach((i)=>{
                        i.essdrugType = this.essdrugOptions[i.essdrugType*1]
                    })
                    this.tableTotal = res.data.total;
                    this.tableLoading = false;
                    if(this.tableData.length!=0){
                        this.$refs.se.clearSelection();
                    }

                    // this.$nextTick(()=>{
                    //     this.tableData.forEach((row) => {
                    //         this.list.forEach((i)=>{
                    //             if (row.id == i.drugListId) {
                    //                 this.$refs.se.toggleRowSelection(row);
                    //             }
                    //         })
                    //     })
                    // })
                })
                .catch((err) => {
                    this.tableLoading = false;
                });
            },
            selectable(row){
                // if (this.list.some((el) => {return el.drugListId === row.drugListId;})) {
                //     return false;
                // } else {
                //     return true;
                // }
                if (row.hospFlg == '1') {
                    return false;
                } else {
                    return true;
                }
            },
            // 新增目录 重置
            tableReset(){
                this.$refs.tableform.resetFields();
                this.getTableData();
            },
            // 新增目录
            handleAdd(){
                if(this.jigou){
                    this.dialogTable = true;
                    this.getTableData();
                }else{
                    this.$message({
                        message: '请选择部门或科室',
                        type: 'warning'
                    });
                }
            },
            // 新增目录 多选
            handleSelectionChange(e){
                this.selectData = e;
            },
            // 新增目录 确认
            handleConfirm(){
                if(this.selectData.length==0){
                    this.$message({
                        message: '请选择药品',
                        type: 'warning'
                    });
                }else{
                    this.ccLoad = true;
                    let data = this.selectData.map((i)=>{
                        return {'drugListId':i.drugListId}
                    })
                    data.forEach((i)=>{
                        this.$set(i,'orgId',this.jigou)
                    })
                    console.log(data,'data111')
                    saveHospListBatch(data).then((res) => {
                        this.dialogTable = false;
                        this.getData();
                        this.ccLoad = false;
                    })
                    .catch((err) => {
                        this.ccLoad = false;
                    });
                }
            },
            // 删除
            handleDelete(index,row){
                this.$confirm("确认删除", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.del = true;
                    deleteHospList({id: row.id}).then((res) => {
                        this.del = false;
                        this.getData();
                    })
                    .catch((err) => {
                        this.del = false;
                    });
                })
            },
        },
        mounted () {
            this.getData();
            this.getData2();
        },
    }
</script>

<style lang="scss" scoped>
::v-deep .el-card__body{
    padding: 6px;
}
::v-deep .el-dialog__footer{
    text-align: center;
}
::v-deep .el-tree-node__content{
    height: 35px;
}
::v-deep .el-input__suffix{
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
}
::v-deep .long .el-form-item__content{
    width: 220px;
}
::v-deep .el-tabs__nav{
    width: 100%;
}
::v-deep .el-tabs__item{
    width: 50%;
}
</style>