<style>
.addControl>el-row {
    margin-bottom: 8px;
}

.addControl>el-row:last-child {
    margin-bottom: 8px;
}

.addControl>el-col {
    border-radius: 4px;
    margin-bottom: 4px;
}

.addControl {
    margin-left: 30px;
    margin-bottom: 4px;
}

.addControl>el-select {
    margin-bottom: 4px;
}
</style>
<template>
    <el-dialog :title='$t("reportDesigner.patientAddControl")' v-model="visible" destroy-on-close width="40%" @closed="$emit('closed')">
        <el-form class="addControl" :model="form" label-position="center">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-divider>{{$t("reportDesigner.patientInfo")}}</el-divider>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6" v-for="item in humanList" :key="item.key">
                    <el-checkbox v-model="item.value" size="default" @change="chkChange(item.key, item.value)">{{ $t(item.label) }}</el-checkbox>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-divider>{{$t("reportDesigner.PetInfo")}}</el-divider>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6" v-for="item in animalList" :key="item.key">
                    <el-checkbox v-model="item.value" size="default" @change="chkChange(item.key, item.value)">{{ $t(item.label) }}</el-checkbox>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-divider>{{$t("reportDesigner.patientExamineInfo")}}</el-divider>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6" v-for="item in itemList" :key="item.key">
                    <el-checkbox v-model="item.value" size="default" @change="chkChange(item.key, item.value)">{{ $t(item.label) }}</el-checkbox>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-divider>{{$t("reportDesigner.OtherOperate")}}</el-divider>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24" style="display:flex; justify-content: space-between;padding-right: 20px;">
                    <el-select v-model="form.selectSortType">
                        <el-option v-for="item in form.sortType.options" :key="item.key" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary" size="default" @click="confirm()">{{$t("dialogBox.saveButtonText")}}</el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>
</template>

<script>
import tool from '@/utils/tool';

export default {
    data() {
        return {
            form: {
                sortType: {
                    options: [
                        {
                            key: "1col",
                            label: this.$t("reportDesigner.OneColumnPerLine"),
                            value: 1
                        },
                        {
                            key: "2col",
                            label: this.$t("reportDesigner.TwoColumnPerLine"),
                            value: 2
                        },
                        {
                            key: "3col",
                            label: this.$t("reportDesigner.ThreeColumnPerLine"),
                            value: 3
                        },
                        {
                            key: "4col",
                            label: this.$t("reportDesigner.FourColumnPerLine"),
                            value: 4
                        },
                    ]
                },
                selectSortType : 3,
                activeModuleList: []
            },
            visible: false,
            outModuleList: [],
            selectedItemList: [],
            currentActiveModduleInfo: {},
            humanList: [],
            itemList: [],
            animalList: [],
        }
    },
    methods: {
        //赋值--初始化
        open(dataSource) {
            var tempList = tool.objCopy(dataSource.patientModuleList);
            if (dataSource && dataSource.result && dataSource.result.selectedItems && dataSource.result.selectedItems.length > 0) {
                tempList.forEach(c => {
                    if (dataSource.result.selectedItems.some(d => d.key === c.key)) {
                        c.value = true;
                        this.selectedItemList.push(c.key);
                    }
                });
            }
            this.form.activeModuleList = tempList;
            this.humanList = this.form.activeModuleList.filter(c => c.group === 'human');
            this.itemList = this.form.activeModuleList.filter(c => c.group === 'item');
            this.animalList = this.form.activeModuleList.filter(c => c.group === 'animal');
            this.currentActiveModduleInfo = dataSource;
            this.form.selectSortType = dataSource.result.base.columnCountPerRow;
            this.visible = true;
        },
        //checkbox 选中事件
        chkChange(keyItem, valueItem) {
            if (this.selectedItemList.some(c => c === keyItem)) {
                if (valueItem === false) {
                    //表示无效，移除
                    this.selectedItemList.splice(this.selectedItemList.indexOf(keyItem), 1);
                }
                //有效，不管
            }
            else {
                if (valueItem === true) {
                    //列表中没有，新增
                    this.selectedItemList.push(keyItem);
                }
            }
        },
        confirm() {
            this.outModuleList = this.form.activeModuleList.filter(c => c.value === true);
            if (this.outModuleList.length <= 0) {
                alert(this.$t("reportDesigner.choosePatientEmptyValidate"));
                return;
            }
            this.$emit("success", this.currentActiveModduleInfo.id, this.outModuleList, parseInt(this.form.selectSortType));
            this.visible = false;
        }
    }
}
</script>