<template>
    <div class="scenePacketDetailPanel">
        <el-form ref="form" :model="form" :rules="rules" label-width="108px">
            <el-form-item label="场景包名称:" prop="packageName">
                <el-input
                    placeholder="请输入"
                    maxlength="50"
                    v-autoTrim="{ obj: form, key: 'packageName' }"
                    v-model="form.packageName"
                >
                </el-input>
            </el-form-item>

            <el-form-item label="场景包描述:" prop="sceneDescribe">
                <el-input
                    placeholder="请输入"
                    maxlength="300"
                    v-autoTrim="{ obj: form, key: 'sceneDescribe' }"
                    v-model="form.sceneDescribe"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                >
                </el-input>
            </el-form-item>
        </el-form>

        <div class="flexBox summaryBox">
            <div class="num">
                场景总数:
                {{
                    form.jtSceneNames.length +
                    form.zrSceneNames.length +
                    form.bzSceneNames.length +
                    form.fhSceneNames.length
                }}
            </div>
            <div class="numA">交通事故场景: {{ form.jtSceneNames.length }}</div>
            <div class="numA">自然驾驶场景: {{ form.zrSceneNames.length }}</div>
            <div class="numA">标准法规场景: {{ form.bzSceneNames.length }}</div>
            <div class="num">泛化场景模板: {{ form.fhSceneNames.length }}</div>
        </div>

        <div class="myTabsBox myTabsBoxThreeTabs">
            <el-tabs v-model="activeName" type="card" @tab-click="pageControl">
                <el-tab-pane label="交通事故场景" name="1"></el-tab-pane>
                <el-tab-pane label="自然驾驶场景" name="2"></el-tab-pane>
                <el-tab-pane label="标准法规场景" name="3"></el-tab-pane>
                <el-tab-pane label="泛化场景模板" name="4"></el-tab-pane>
            </el-tabs>
        </div>

        <div class="listBox">
            <traffic-accident-simulation-list
                v-show="activeName === '1'"
                ref="listA"
                :sceneType="types[0]"
                nameType="1"
                @selectedData="selectedData"
                :selfDrivingList="selfDrivingList"
                :targetDrivingList="targetDrivingList"
                :selfReactionList="selfReactionList"
                :conflictBehaviorList="conflictBehaviorList"
                :conflictTypeList="conflictTypeList"
            ></traffic-accident-simulation-list>
            <natural-driving-list
                v-show="activeName === '2'"
                ref="listB"
                :sceneType="types[1]"
                nameType="2"
                @selectedData="selectedData"
                :roadList="roadList"
                :infrastructureList="infrastructureList"
                :trafficConditionList="trafficConditionList"
                :selfBehaviorList="selfBehaviorList"
                :targetBehaviorList="targetBehaviorList"
                :naturalEnvironmentList="naturalEnvironmentList"
                :temporaryOperationList="temporaryOperationList"
            ></natural-driving-list>
            <standard-regulation-simulation-list
                v-show="activeName === '3'"
                ref="listC"
                :sceneType="types[2]"
                @selectedData="selectedData"
                :regulationTypeList="regulationTypeList"
            ></standard-regulation-simulation-list>
            <generalization-list
                v-show="activeName === '4'"
                ref="listD"
                :sceneType="types[3]"
                @selectedData="selectedData"
                :scenarioWeatherList="scenarioWeatherList"
                :scenarioRoadTypeList="scenarioRoadTypeList"
            ></generalization-list>
        </div>

        <div class="btns">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" plain @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script>
import trafficAccidentSimulationList from "./trafficAccidentSimulationList";
import naturalDrivingList from "./naturalDrivingList";
import standardRegulationSimulationList from "./standardRegulationSimulationList";
import generalizationList from "./generalizationList";

export default {
    name: "scenePacketDetail", // 场景包详情
    components: {
        trafficAccidentSimulationList,
        naturalDrivingList,
        standardRegulationSimulationList,
        generalizationList,
    },
    data() {
        return {
            activeName: "1",
            form: {
                id: "",
                packageName: "", // 场景包名称
                sceneDescribe: "", // 场景包描述
                jtSceneNames: [], // 交通事故自然场景ids
                zrSceneNames: [], // 自然场景ids
                bzSceneNames: [], // 标准法规场景ids
                fhSceneNames: [], // 泛化模板场景ids
            },
            rules: {
                packageName: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                sceneDescribe: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
            },
            types: ["sceneName", "naturalName", "sceneName", "sceneId"],
            selfDrivingList: [],
            targetDrivingList: [],
            selfReactionList: [],
            conflictBehaviorList: [],
            conflictTypeList: [],
            roadList: [],
            infrastructureList: [],
            trafficConditionList: [],
            selfBehaviorList: [],
            targetBehaviorList: [],
            naturalEnvironmentList: [],
            temporaryOperationList: [],
            regulationTypeList: [],
            fileNameList: [],
            scenarioWeatherList: [],
            scenarioRoadTypeList: [],
        };
    },

    methods: {
        pageControl() {},
        selectedData(sceneType, arr, nameType) {
            switch (sceneType) {
                case this.types[0]:
                    if (nameType === "1") {
                        this.form.jtSceneNames = arr;
                    } else {
                        this.form.bzSceneNames = arr;
                    }
                    break;
                case this.types[1]:
                    this.form.zrSceneNames = arr;
                    break;
                // case this.types[2]:
                //     this.form.bzSceneNames = arr;
                //     break;
                case this.types[3]:
                    this.form.fhSceneNames = arr;
                    break;
                default:
                    break;
            }
        },
        save() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (
                        this.form.jtSceneNames.length === 0 &&
                        this.form.zrSceneNames.length === 0 &&
                        this.form.bzSceneNames.length === 0 &&
                        this.form.fhSceneNames.length === 0
                    ) {
                        this.$message.error("请先选择场景");
                        return;
                    }

                    this.$axios({
                        method: "post",
                        url: this.$api.systemManagement.saveSystemScenePackage,
                        data: { ...this.form },
                    }).then((res) => {
                        if (res.code == 200) {
                            this.$message.success("保存成功");
                            this.cancel();
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        cancel() {
            this.$router.replace({ path: "/scenePacketListManagement" });
        },
    },

    async mounted() {
        await this.$dicsListsInit({
            selfDrivingList: "selfDriving",
            targetDrivingList: "targetDriving",
            selfReactionList: "selfReaction",
            conflictBehaviorList: "conflictBehavior",
            conflictTypeList: "conflictType",
            regulationTypeList: "regulationType",
            scenarioWeatherList: "scenarioWeather",
            scenarioRoadTypeList: "scenarioRoadType",
        });

        await this.$dicsTreesInit({
            roadList: "road",
            infrastructureList: "infrastructure",
            trafficConditionList: "trafficCondition",
            selfBehaviorList: "selfBehavior",
            targetBehaviorList: "targetBehavior",
            naturalEnvironmentList: "naturalEnvironment",
            temporaryOperationList: "temporaryOperation",
        });

        if (this.$route.query.id) {
            this.$axios({
                method: "post",
                url: this.$api.systemManagement.querySystemScenePackageById,
                data: { id: this.$route.query.id },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.form = res.info;
                    this.$refs.listA.checkedNames = res.info.jtSceneNames;
                    this.$refs.listB.checkedNames = res.info.zrSceneNames;
                    this.$refs.listC.checkedNames = res.info.bzSceneNames;
                    this.$refs.listD.checkedNames = res.info.fhSceneNames;

                    this.$refs.listA.loadedCallBack();
                    this.$refs.listB.loadedCallBack();
                    this.$refs.listC.loadedCallBack();
                    this.$refs.listD.loadedCallBack();
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        }
    },
};
</script>

<style lang='less' scoped>
.scenePacketDetailPanel {
    padding: 30px 30px 0;

    .el-form {
        .el-form-item {
            width: 60%;
        }

        .el-input {
            width: 100%;
        }
    }

    .summaryBox {
        padding: 20px 20px 30px 0;
        color: @themeColor;
        font-size: 18px;
        font-weight: bold;

        > div {
            margin-right: 30px;
        }

        .num {
            min-width: 120px;
        }

        .numA {
            min-width: 156px;
        }
    }

    .listBox {
        /deep/ .searchLayout .el-input,
        .el-select {
            width: 230px;
        }

        /deep/ .label {
            min-width: 90px;
        }

        /deep/ .isSelected {
            padding: 0 0 10px 10px;
        }
    }

    .myTabsBox {
        padding-top: 10px;
        /deep/ .el-tabs__nav-scroll {
            &:after {
                width: 100%;
            }
        }

        &.myTabsBoxThreeTabs {
            /deep/ .el-tabs {
                width: auto;
                margin: 0;
            }

            /deep/ .el-tabs__item {
                width: 120px;
            }
        }

        /deep/
            .el-tabs--top.el-tabs--card
            > .el-tabs__header
            .el-tabs__item:nth-child(2) {
            border-left-color: @gray;

            &.is-active {
                border-left-color: @themeColor;
            }
        }
    }

    .btns {
        padding-top: 30px;
        text-align: center;
    }
}
</style>