<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>
            <!-- filterable
            remote -->
            <!-- <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.value"
                    ></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="handleAddOrEdit(0, null, 'create')"
            >新增目录
            </el-button>
        </div>
        <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="enabFlag" >
                <template #default="{ row }">
                    <span v-if="row.enabFlag == '0'">启用</span>
                    <span v-if="row.enabFlag == '1'">停用</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="限价/参考价" prop="lmtPric" /> -->
            <!-- <el-table-column label="集团价格" prop="purcPric" /> -->
            <el-table-column label="药品编码" prop="drugListId" />
            <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="crteUsrName" />
            <el-table-column label="创建时间" prop="crteTime" />
            <el-table-column label="状态" prop="stas" >
                <template #default="{ row }">
                    <span v-if="row.stas == '0' || row.stas == 'B'">待审核</span>
                    <span v-if="row.stas == 'Y'">通过</span>
                    <span v-if="row.stas == 'R'">驳回</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="110">
                <template slot-scope="scope">
                    <div v-if="scope.row.stas == '0' || scope.row.stas == 'B'">

                    </div>
                    <div v-if="scope.row.stas == 'Y'">
                        <el-button
                            type="text"
                            @click="handleDisposition(scope.row)"
                            >配置</el-button
                        >
                        <el-button
                            class="cyan"
                            type="text"
                            @click="handleAddOrEdit(scope.$index, scope.row, 'update')"
                            >编辑</el-button
                        >
                    </div>
                    <div v-if="scope.row.stas == 'R'">
                        <el-button
                            class="cyan"
                            type="text"
                            @click="handleAddOrEdit(scope.$index, scope.row, 'update')"
                            >编辑</el-button
                        >
                        <el-button
                            class="red"
                            type="text"
                            @click="handleDelete(scope.row)"
                            :disabled="del"
                            >删除</el-button
                        >
                    </div>
                </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="dialogTitle"
            :visible.sync="dialogForm"
            width="63%">
            <el-form :model="addForm" ref="addform" :inline="true" class="addClass" :rules="addRules">
                <el-form-item label="药品名称" prop="drugName">
                    <el-input v-model="addForm.drugName" placeholder="请输入药品名称" maxlength="128" :readonly="isEdit"></el-input>
                </el-form-item>
                <!-- <el-form-item label="通用名" prop="genName">
                    <el-input v-model="addForm.genName" placeholder="请输入通用名" maxlength="128"></el-input>
                </el-form-item> -->
                <el-form-item label="剂型" prop="dosformName">
                    <el-input v-model="addForm.dosformName" placeholder="请选择剂型" maxlength="128" :readonly="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="规格" prop="specName">
                    <el-input v-model="addForm.specName" placeholder="请输入规格信息" maxlength="128" :readonly="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="转换比" prop="convrat">
                    <el-input v-model="addForm.convrat" placeholder="请输入转换比" maxlength="128" :readonly="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="制剂单位" prop="prepunt">
                    <el-input v-model="addForm.prepunt" placeholder="请选择制剂单位" maxlength="128" :readonly="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="包装单位" prop="pacUnt">
                    <el-input v-model="addForm.pacUnt" placeholder="请选择包装单位" maxlength="128" :readonly="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="基药类型" prop="essdrugType">
                    <el-select
                        v-model="addForm.essdrugType"
                        placeholder="请选择基药类型"
                        clearable
                        :disabled="isEdit"
                    >
                        <el-option
                            v-for="item in essdrug"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="生产企业" prop="prodentpName">
                    <el-input v-model="addForm.prodentpName" placeholder="请输入生产企业" maxlength="128" :readonly="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="批准文号" prop="aprvNo">
                    <el-input v-model="addForm.aprvNo" placeholder="请输入批准文号" maxlength="128" :readonly="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="目录状态" prop="enabFlag">
                    <el-select
                        v-model="addForm.enabFlag"
                        placeholder="请选择目录状态"
                        clearable
                    >
                        <el-option
                            v-for="item in invdFlagData"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogForm = false">取消</el-button>
                <el-button type="primary" @click="handleConfirm" :loading="ccLoad">提交</el-button>
            </span>
        </el-dialog>
        <!-- 配置 -->
        <el-dialog
            title="配置"
            :visible.sync="dialogTable"
            width="50%">
            <div class="font">{{ concat }}</div>
            <el-form :model="tableData" ref="tableDataRef">
            <el-table
                v-loading="tableLoading"
                element-loading-text="加载中"
                :data="tableData"
                ref="tabledata"
                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 align="left" label="配送企业" prop="splerName" width="260">
                    <template slot-scope="scope">
                        <div class="moren" v-if="scope.row.defFlg=='1'">
                            <img src="../../../../assets/ti.png" alt="" style="width:30px;height:30px;">
                            <div style="color:#fff;transform:rotate(45deg);position:absolute;top:0;right:0;font-size:10px !important;">默认</div>
                        </div>
                        <span>{{ scope.row.splerName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="配送权限" prop="choFlg">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.choFlg" @change="handleCheckbox(scope.row)">
                        </el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="价格" prop="pric" width="180">
                    <template slot-scope="scope">
                        <el-form-item
                            label-width="0"
                            class="item"
                            :prop="scope.$index + '.pric'"
                            :rules="[
                            {
                                required: true,
                                pattern: /^([1-9]\d*(\.\d{1,4})?|([0](\.([0][1-9]|[0][0][1-9]|[0][0][0][1-9]|[1-9]\d{0,3}))))$/,
                                message: '请输入数字，最多四位小数',
                                trigger: 'blur',
                            },
                            ]"
                            v-if="scope.row.choFlg == true"
                        >
                            <!-- <el-input-number v-model="scope.row.pric" placeholder="请输入" controls-position="right"
                            @change="handleInput" :min="1"></el-input-number> -->
                            <el-input placeholder="请输入" v-model="scope.row.pric" @change="handleInput"></el-input>
                        </el-form-item>
                        <el-form-item
                            label-width="0"
                            class="item"
                            :prop="scope.$index + '.pric'"
                            v-else
                        >
                            <!-- <el-input-number v-model="scope.row.pric" placeholder="请输入" controls-position="right" disabled></el-input-number> -->
                            <el-input placeholder="请输入" v-model="scope.row.pric" @change="handleInput" readonly></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-popconfirm
                            title="是否取消默认配送商？"
                            @confirm="cancelDefault(scope.row)"
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                            icon="el-icon-info"
                            icon-color="red"
                            v-if="scope.row.defFlg=='1'"
                        >
                            <el-button
                                style="color: rgb(189, 49, 36);"
                                type="text"
                                slot="reference"
                                :disabled="flg"
                                >取消默认配送商</el-button
                            >
                        </el-popconfirm>
                        <el-popconfirm
                            title="是否设置默认配送商？"
                            @confirm="handleDefault(scope.row,scope.$index)"
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                            icon="el-icon-info"
                            icon-color="red"
                            v-else
                        >
                            <el-button
                                style="color: rgb(63, 104, 217);"
                                type="text"
                                slot="reference"
                                :disabled="flg"
                                >设置默认配送商</el-button
                            >
                        </el-popconfirm>
                        <!-- <el-button
                            v-if="scope.row.defFlg=='1'"
                            style="color: rgb(189, 49, 36);"
                            type="text"
                            @click="cancelDefault(scope.row)"
                            :disabled="flg"
                            >取消默认配送商</el-button
                        >
                        <el-button
                            v-else
                            style="color: rgb(63, 104, 217);"
                            type="text"
                            @click="handleDefault(scope.row,scope.$index)"
                            :disabled="flg"
                            >设置默认配送商</el-button
                        > -->
                    </template>
                </el-table-column>
            </el-table>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTable = false">取消</el-button>
                <el-button type="primary" @click="handleConfirmD" :loading="ddLoad">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import { getGrpDrugList,getListType,saveGrpDrug,getDrugSplerRlts,
changeDrugDefSplerFlg,saveDrugSplerRltsBatch,deleteGrpDrug } from "@/api/drugCataManage/index";
    export default {
        components: {
            ylPagination
        },
        data() {
            return {
                listQuery:{
                    current: 1,
                    size: 10,
                    drugInfo: "",
                    // listType: "",
                    essdrugType: "",
                },
                listLoading: false,
                list: [],
                total: 0,
                del: false,
                cata: [],
                essdrug: [
                    {value: "0", name: "非基药"},
                    {value: "1", name: "基药"}
                ],
                essdrugOptions: ["非基药","基药"],
                invdFlagData: [
                    {value: "0", name: "启用"},
                    {value: "1", name: "停用"}
                ],
                dialogForm: false,
                dialogTitle: "",
                ccLoad: false,
                addForm:{
                    drugName: "",
                    // genName: "",
                    dosformName: "",
                    specName: "",
                    convrat: "",
                    prepunt: "",
                    pacUnt: "",
                    essdrugType: "",
                    prodentpName: "",
                    aprvNo: "",
                    enabFlag: "",
                },
                addRules:{
                    drugName: [{
                        required: true,
                        message: "药品名称不能为空",
                        trigger: "blur"
                    }],
                    genName: [{
                        required: true,
                        message: "通用名不能为空",
                        trigger: "blur"
                    }],
                    dosformName: [{
                        required: true,
                        message: "请选择剂型",
                        trigger: "change"
                    }],
                    specName: [{
                        required: true,
                        message: "规格不能为空",
                        trigger: "blur"
                    }],
                    convrat: [{
                        required: true,
                        message: "转换比不能为空",
                        trigger: "blur"
                    }],
                    prepunt: [{
                        required: true,
                        message: "制剂单位不能为空",
                        trigger: "blur"
                    }],
                    pacUnt: [{
                        required: true,
                        message: "包装单位不能为空",
                        trigger: "blur"
                    }],
                    essdrugType: [{
                        required: true,
                        message: "请选择基药类型",
                        trigger: "change"
                    }],
                    prodentpName: [{
                        required: true,
                        message: "生产企业不能为空",
                        trigger: "blur"
                    }],
                    aprvNo: [{
                        required: true,
                        message: "批准文号不能为空",
                        trigger: "blur"
                    }],
                    enabFlag: [{
                        required: true,
                        message: "请选择目录状态",
                        trigger: "change"
                    }],
                },
                dialogTable: false,
                ddLoad: false,
                tableLoading: false,
                tableData: [],
                concat: "",
                flg: false,
                peiId: "",
                permission: [],
                isEdit: false
            }
        },
        methods: {
            getData(type) {
                if (type == "search") {
                    this.listQuery.current = 1;
                }
                this.listLoading = true;
                getGrpDrugList(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;
                });
                // 查询目录类型
                getListType({ listType: "" }).then((res) => {
                    this.cata = res.data;
                })
            },
            reset(){
                this.$refs.queryForm.resetFields();
                this.getData();
            },
            // 删除
            handleDelete(row){
                this.$confirm("确认删除", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.del = true;
                    deleteGrpDrug({id: row.id}).then((res) => {
                        this.del = false;
                        this.getData();
                    })
                    .catch((err) => {
                        this.del = false;
                    });
                })
            },
            // 配送权限不勾选后价格清空
            handleCheckbox(row){
                if(row.choFlg == false){
                    row.pric = ""
                }
            },
            // 打开新增/编辑对话框
            handleAddOrEdit(index, row, type) {
                this.dialogForm = true;
                if(type == 'update'){
                    this.dialogTitle = '编辑'
                    if(row.stas == 'Y'){
                        this.isEdit = true;
                    }else{
                        this.isEdit = false;
                    }
                    this.addForm = {
                        id: row.id,
                        drugListId: row.drugListId,
                        drugName: row.drugName,
                        // genName: row.genName,
                        dosformName: row.dosformName,
                        specName: row.specName,
                        convrat: row.convrat,
                        prepunt: row.prepunt,
                        pacUnt: row.pacUnt,
                        essdrugType: row.essdrugType,
                        prodentpName: row.prodentpName,
                        aprvNo: row.aprvNo,
                        enabFlag: row.enabFlag,
                        drugId: row.drugId,
                    }
                }else{
                    this.dialogTitle = '新增目录'
                    this.isEdit = false;
                    this.$nextTick(()=>{
                        this.addForm = {
                            drugName: "",
                            // genName: "",
                            dosformName: "",
                            specName: "",
                            convrat: "",
                            prepunt: "",
                            pacUnt: "",
                            essdrugType: "",
                            prodentpName: "",
                            aprvNo: "",
                            enabFlag: "",
                        }
                        this.$refs.addform.resetFields();
                    })
                }
            },
            // 新增/编辑 保存
            handleConfirm(){
                this.$refs["addform"].validate((valid) => {
                    if(valid){
                        if(this.addForm.essdrugType == '基药'){
                            this.addForm.essdrugType = '1'
                        }else if(this.addForm.essdrugType == '非基药'){
                            this.addForm.essdrugType = '0'
                        }
                        console.log(this.addForm,'addForm');
                        this.ccLoad = true;
                        saveGrpDrug(this.addForm).then((res) => {
                            this.ccLoad = false;
                            this.getData();
                            this.dialogForm = false;
                        })
                        .catch((err) => {
                            this.ccLoad = false;
                        });
                    }
                })
            },
            // 获取配置信息
            getPei(id){
                getDrugSplerRlts({drugListId: id}).then((res) => {
                    this.tableData = res.data.records;
                    this.tableData.forEach(row => {
                        if (row.choFlg=='0') {
                            row.choFlg = true;
                        }else if (row.choFlg=='1') {
                            row.choFlg = false;
                        }
                    })
                    this.permission = this.tableData.map((i)=>{
                        return i.choFlg
                    })
                })
            },
            // 配置
            handleDisposition(row){
                this.dialogTable = true;
                this.peiId = row.drugListId;
                // 药品名称 规格*转换比 制剂单位每包装单位 生产企业
                this.concat = row.drugName+' / '+row.specName +'*' +row.convrat +row.prepunt +'每' +row.pacUnt+' / '+row.prodentpName
                this.getPei(row.drugListId);
            },
            // 配置 保存
            handleConfirmD(){
                this.tableData.forEach((e)=>{
                    if(e.choFlg == true && !e.pric){
                        this.$message({
                            message: "勾选配送权限后请输入价格",
                            type: "warning",
                        });
                        throw new Error("勾选配送权限后请输入价格");
                    }
                })
                this.$refs.tableDataRef.validate((valid)=>{
                    if(valid){
                    }else{
                        throw new Error("表单验证不通过");
                    }
                })
                this.tableData.forEach((i)=>{
                    if(i.choFlg == true){
                        i.choFlg = '0'
                    }else if(i.choFlg == false || i.choFlg == null || i.choFlg == ""){
                        i.choFlg = '1'
                    }
                    this.$set(i, 'drugListId', this.peiId);
                })
                this.ddLoad = true;
                saveDrugSplerRltsBatch(this.tableData).then((res) => {
                    this.ddLoad = false;
                    this.dialogTable = false;
                    this.getData();
                })
                .catch((err) => {
                    this.ddLoad = false;
                });
            },
            // 设置默认配送商
            handleDefault(row,index){
                let aa = (row.choFlg && this.permission[index])
                if(aa == true){
                    this.flg = true;
                    let data = {
                        id: row.id,
                        defFlg: '1'
                    }
                    changeDrugDefSplerFlg(data).then((res) => {
                        this.cata = res.data;
                        this.flg = false;
                        this.getPei(this.peiId);
                    }).catch(()=>{
                        this.flg = false;
                    })
                }else{
                    this.$message({
                        message: '请先设置配送权限',
                        type: 'warning'
                    });
                }
            },
            // 取消默认配送商
            cancelDefault(row){
                this.flg = true;
                let data = {
                    id: row.id,
                    defFlg: '0'
                }
                changeDrugDefSplerFlg(data).then((res) => {
                    this.cata = res.data;
                    this.flg = false;
                    this.getPei(this.peiId);
                }).catch(()=>{
                    this.flg = false;
                })
            }
        },
        mounted () {
            this.getData();
        },
    }
</script>

<style lang="scss" scoped>
.addClass .el-form-item{
    margin-right:10px;
}
.addClass .el-form-item .el-input{
    width: 187px;
}
.addClass ::v-deep .el-form-item .el-form-item__label{
    width: 100px;
}
::v-deep .el-dialog__footer{
    text-align: center;
}
.moren{
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
}
.font{
    position: absolute;
    top: 26px;
    left: 70px;
    font-size: 12px;
    color: rgb(63, 104, 217);
}
::v-deep .long .el-form-item__content{
    width: 220px;
}
</style>