<template>
    <el-dialog :title="$t(title)" @close="onCancel" :visible.sync="visible" append-to-body width="80%">
        <!-- 麻醉/精神药品配制/领取申请单 -->
         <div  v-if="type === 'MJYLQSQD'" class="header-row">
            <el-radio-group v-model="radio">
                <el-radio :label="1">试验</el-radio>
                <el-radio :label="2">
                    部门 
                </el-radio>
            </el-radio-group>
              <el-select v-model="depart" filterable :placeholder="$t('form.placeholderSelect')">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
         </div>
     
        <SelectTable v-if = "isShowTable" ref="selectSjRef" :columns="columns"  
            :selectedId="selectedId"
            :searchForm="searchForm"
            :listApi="listApi"
            :selectedCode="selectedCode"
            @radioSelect="handleSelect"/>
        <template slot="footer" class="dialog-footer">
            <el-button @click="onCancel">{{$t('form.cancel')}}</el-button>
            <el-button :disabled="isDisabled" type="primary" @click="onSubmit">{{$t('form.saveConfirm')}}</el-button>
        </template>
    </el-dialog>
</template>

<script>
import SelectTable from '@/components/Template/SelectTable.vue';
import { public_sjList } from '@/api/business/public/public';

export default {
    components: {
        SelectTable,
    },
    props: {
        type: {
            type: String,
            default: "",
        },
        title: {
            type: String,
            default: "page.business.resource.sj.xzsj",
        },
        selectedCode: {
            type: String,
            default: "bh",
        },
        listApi: {
            type: Function,
            default: public_sjList,
        },
        searchForm: {
            type: Object,
            default: () => {
                return {
                        mc: {
                            label:'page.business.resource.sj.sjmc',
                        },
                        bh: {
                            label:'page.business.resource.sj.sjbh',
                        },
                        studyName: {
                            label:'page.business.resource.sj.sssy',
                        },
                    }
            },
        },
        columns: {
            type: Array,
            default: () => [
                {
                    prop: 'mc',
                    label: 'page.business.resource.sj.sjmc',
                },
                {
                    prop: 'bh',
                    label: 'page.business.resource.sj.sjbh',
                },
                {
                    prop: 'nd',
                    label: 'page.business.resource.sj.sjnd',
                },
                {
                    prop: 'nddw',
                    label: 'page.business.resource.gsp.nddw',
                },
                {
                    prop: 'sxr',
                    label: 'page.business.resource.sj.sxr',
                },
                {
                    prop: 'studyName',
                    label: 'page.business.resource.sj.sssy',
                },
            ],
        },
    },
    data() {
        return {
            visible:false,
            selectedId: "",
            currentRow: {},
            radio:1,
            depart:"",
            options:[
                {
                    value:1,
                    label:"部门1",
                },
                {
                    value:2,
                    label:"部门",
                },
            ]   
        }
    },
    computed: {
        isShowTable() {
            if(this.type === 'MJYLQSQD') {
                return this.radio === 1;
            }
            return true;    
        },
        isDisabled() {
            if(this.type === 'MJYLQSQD') {
                if(this.radio === 1) {//选择试验的时候必须要选中一项才能点击确定
                    return !this.selectedId;
                }else{
                    return !this.depart;
                }
            }
            return !this.selectedId;
        }
    },
    methods: {
        show(){
            this.visible = true
            this.showTableData()
        },
        showTableData(){
            if(this.$refs.selectSjRef){
                this.$refs.selectSjRef.show()
            }else{
                setTimeout(() => {
                    this.showTableData()
                }, 100);
            }
        },
        onCancel() {
            this.visible = false
            this.$emit('cancel');
        },
        onSubmit() {
            let row = this.currentRow;
            if(this.type === 'MJYLQSQD') {
               if(this.radio === 1) {
                    row = row;
               }else{
                    const o = this.options.find(item => item.value === this.depart);
                    row = {syNo:o.label,SD:o.value};
               }
            }
            this.$emit('submit', this.selectedId,row);
        },
        handleSelect(code,row) {
            this.selectedId = code;
            this.currentRow = row;
        },
    }
}
</script>

<style lang="scss" scoped>
    .header-row{
        display: flex;
        align-items: center;
        padding: 20px 0;
    }
</style>