<template>
    <div>
        <el-dialog title="查询核心编码" :visible.sync="dialogVisible" width="75%">
             <div slot="title" class="header-title">
                <div style="color: #000000;font-weight: 600;" class="big_title">查询核心编码</div>
            </div>
            <el-form ref="form" :model="form" label-width="80px" :inline="true">
            <div class="search">
                        <el-form-item label="项目名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="项目编码">
                            <el-input v-model="form.bm"></el-input>
                        </el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
            </div>
        </el-form>
            <el-table :header-cell-style="{ background: '#EEF5FD', color: '#18518B' }"  v-loading="loading" element-loading-text="拼命加载中" ref="multipleTable"  class="eltable" :data="list"  style="width: 100%">

                <el-table-column align="center" property="gbxmbm" label="国标项目编码" width="260"></el-table-column>
                <el-table-column align="center" property="ylxmbm" label="医疗项目编码" width="260"></el-table-column>
                <el-table-column align="center" property="ylxmbzmc" label="项目名称"></el-table-column>
                <el-table-column align="center" property="scqy" label="生产厂家"  width="260"></el-table-column>
                <el-table-column align="center" property="ypbz" label="药品标志" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.ypbz == '0'">诊疗</span>
                        <span v-else-if="scope.row.ypbz == '1'">药品</span>
                        <span v-else>一次性材料</span>
                    </template>
                </el-table-column>
               <!-- <el-table-column align="center" property="gg" label="规格" sortable ></el-table-column>
                <el-table-column align="center" property="zxgg" label="最小规格" ></el-table-column> -->
                <el-table-column align="center" property="status_text" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="selectone(scope.row)">选中</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <pagination :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList" v-if="total > 0"/>
        </el-dialog>
    </div>
</template>

<script>
import { getGbxmbm ,updatestatus} from '@/api/drug'
export default {
    name: 'Balanceprocessing',
    props: {
        visible: Boolean,
        name: String,
        bmid: String,
        sbj: String,
        current_id: Number,
    },
    data() {
        return {
            form: {
                name:'',
                bm:''
            },
            xmbm: '',
            ordervisible: false,
            // 遮罩层
            loading: false,
            // 表格数据
            list: [],
            // 总条数
            total: 0,
            // 分页参数
            pageInfo: {
                page: 1,
                limit: 10,
            },
            // 查询参数
            queryParams: {
                ylxmbzmc: this.name,
                yyxmbm: this.bmid,
                sbj:this.sbj
            },
        }
    },
    watch: {
        bmid: {
            immediate: true,
            handler(val, old) {
                this.form.name = this.name
                this.form.bm = this.bmid
                this.getList()
            },
        },
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible
            },
            set(val) {
                this.$emit('update:visible', val)
            },
        },
    },
    methods: {
        onSubmit(){

            this.queryParams.ylxmbzmc = this.form.name
            this.queryParams.yyxmbm = this.form.bm
            this.queryParams.sbj = this.sbj
             this.getList()
        },
        //更新数据库中的对应状态和对应国标码
        selectone(row) {
            const params = {
                sbj:this.sbj,
                project_id:this.current_id,
                gbxmbm:row.ylxmbm,
                center_id:row.id
            }
            updatestatus(params)
                .then(response => {
                })
                .finally(() => {
                    //this.loading = false
                })


            this.xmbm = row.ylxmbm
            this.$emit('xmbm', this.xmbm)
        },
        //查询列表
        getList() {
            this.loading = true
            const qyparams = {
                ...this.pageInfo,
                ...this.queryParams,
                //...this.formatQueryParams(this.queryParams)
            }
            getGbxmbm(qyparams)
                .then(response => {

                    this.list = response.data
                    this.total = response.meta.total
                })
                .finally(() => {
                    this.loading = false
                })
        },
        toggleDialog(key, visible) {
            this[key] = visible
        },
        handleOk() {},
    },
}
</script>

<style>
.big_title {
    font-size: 18px;
    font-weight: bold;
    padding-left: 10px;
    position: relative;
}
.big_title::after {
    content: '';
    width: 4px;
    height: 18px;
    position: absolute;
    border-radius: 20px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: #60a0ff;
}
.bblue {
    background: #1890ff;
    border-color: #1890ff;
    color: white;
}
.bred {
    background: red;
    border-color: red;
}
</style>
