<template>
    <el-dialog title="选择试剂" @close="onCancel" :visible.sync="visible" append-to-body>
        <SelectTable :columns="columns"  
            :selectedId="selectedId"
            :searchForm="searchForm"
            :listApi="listApi"
            @radioSelect="handleSelect"/>
        <template slot="footer" class="dialog-footer">
            <el-button @click="onCancel">取消</el-button>
            <el-button :disabled="!selectedId" type="primary" @click="onSubmit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
import SelectTable from '@/components/Template/SelectTable.vue';
import { getReagentList } from '@/api/template';

export default {
    components: {
        SelectTable,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            listApi: getReagentList,
            searchForm: {
                name: {
                    label:"试剂名称",
                },
                code: {
                    label:"试剂编号",
                },
                vol: {
                    label:"所属试验",
                },
            },
            columns: [
                {
                    prop: 'name',
                    label: '试剂名称',
                },
                {
                    prop: 'code',
                    label: '试剂编号',
                },
                {
                    prop: 'vol',
                    label: '试剂浓度',
                },
                {
                    prop: 'unit',
                    label: '浓度单位',
                },
                {
                    prop: 'expireDate',
                    label: '失效日',
                },
                {
                    prop: 'ss',
                    label: '所属试验',
                },
            ],
            selectedId: "",
        }
    },
    methods: {
        onCancel() {
            this.$emit('cancel');
        },
        onSubmit() {
            this.$emit('submit', this.selectedId);
        },
        handleSelect(code,row) {
            this.selectedId = code;
        },
    }
}
</script>

<style lang="scss" scoped></style>