<template>
    <div>
        <span>分类：</span>
        <a-tree-select
                v-model="breedId"
                show-search
                style="width: 200px"
                :tree-data="medicalTypeList"
                :replaceFields="replaceFields"
                treeNodeFilterProp="title"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="选择分类"
                allow-clear
                :disabled="disabled"
                @change="medicalTypeChange"
                @click="getMedicalType"
        ></a-tree-select>
        <span style="margin-left: 20px">品种名称：</span>
        <a-select style="width: 200px" placeholder="选择品种名称" @change="medicalNameChange" v-model="medicalId"  :disabled="disabled">
            <a-select-option v-for="item in medicalNameList"
                             :key="item.id"
                             :dropdownMatchSelectWidth="false"
            >
                {{ item.medicineName }}
            </a-select-option>
        </a-select>
        <span style="margin-left: 20px" v-if="enableBatch">生产批次：</span>
        <a-select style="width: 200px" v-if="enableBatch" placeholder="选择生产批次" v-model="batchId"  :disabled="disabled">
            <a-select-option v-for="item in medicalBatchList" :key="item.id">
                {{ item.batchNumber }}
            </a-select-option>
        </a-select>
    </div>
</template>

<script>
    import {toTree} from "../../utils/common";


    export default {
        name: "medicalAllSelect",
        props: {
            enableBatch: false,
        },
        data() {
            return {
                breedId: null,
                medicalId: undefined,
                batchId: undefined,
                medicalTypeList: [],
                medicalNameList: [],
                medicalBatchList: [],
                replaceFields: {
                    title: 'typeName',
                    key: 'id',
                    value: 'id',
                    children: 'children',
                },
                disabled: false
            }
        },
        created() {
            this.getMedicalType();
        },
        methods: {
            getMedicalType() {
                let params = {};
                this.$api.common.fetchMedicalType(params).then(({code, data}) => {
                    this.medicalTypeList = toTree(data, '0', 'parentId', 'id');
                });
            },
            medicalTypeChange(breedId) {
                if (this.$api.utils.isBlank(breedId)) {
                    return;
                }
                this.$api.stockManage.fetchMedicineByType({breedId: breedId}).then(({data = []}) => {
                    this.medicalNameList = data;
                    this.medicalId = null;
                    this.batchId = null;
                })
            },
            medicalNameChange(medicalId) {
                if (!this.enableBatch) {
                    return;
                }
                this.$api.stockManage.fetchBatchByTypeAName({medicalId: medicalId}).then(({data = []}) => {
                    this.medicalBatchList = data;
                    this.batchId = null;
                });
            },
            getValue() {
                let content = [this.breedId, this.medicalId, this.batchId];
                return content;
            },
            setValue(values, isDisabled = false) {
                this.disabled = isDisabled;
                this.breedId = values[0];
                this.medicalId = values[1];
                this.batchId = values[2];
            },
        },
    }

</script>

<style scoped>

</style>