<template>
    <div class="modelListPanel">
        <div class="addBtn" @click="addOne">
            <span>新增</span>
            <i class="el-icon-plus"></i>
        </div>
        <div class="listPanel">
            <div class="inputPanel">
                <el-input
                    placeholder="请输入内容"
                    v-model="searchName"
                    maxlength="60"
                    class="input-with-select"
                    clearable
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="searchOne"
                    ></el-button>
                </el-input>
            </div>

            <div class="titleLabel">公有</div>
            <div class="autoScrollBox">
                <div class="boxPanel" v-bind:class="{ isActive: vtdPub }">
                    <div class="titlePanel">
                        <i
                            class="el-icon el-icon-caret-right"
                            @click="handleChange('vtdPub')"
                        ></i>
                        <span class="title" @click="handleChange('vtdPub')"
                            >VTD</span
                        >
                    </div>
                    <ul class="list listPub">
                        <li v-for="item in listVtdPub" :key="item.id">
                            <span
                                @click="showInfo(item.id)"
                                v-bind:class="{
                                    isCur:
                                        curOne.share === '1' &&
                                        curOne.id === item.id,
                                }"
                            >
                                {{ item[showName] }}
                            </span>
                            <i
                                v-if="(roleCode === '0' || roleCode === '1')"
                                class="el-icon-delete"
                                @click="delOne(item.id)"
                            ></i>
                        </li>
                    </ul>
                </div>

                <div class="boxPanel" v-bind:class="{ isActive: carsimPub }">
                    <div class="titlePanel">
                        <i
                            class="el-icon el-icon-caret-right"
                            @click="handleChange('carsimPub')"
                        ></i>
                        <span class="title" @click="handleChange('carsimPub')"
                            >Carsim</span
                        >
                    </div>
                    <ul class="list listPub">
                        <li v-for="item in listCarsimPub" :key="item.id">
                            <span
                                @click="showInfo(item.id)"
                                v-bind:class="{
                                    isCur:
                                        curOne.share === '1' &&
                                        curOne.id === item.id,
                                }"
                            >
                                {{ item[showName] }}
                            </span>
                            <i
                                v-if="(roleCode === '0' || roleCode === '1')"
                                class="el-icon-delete"
                                @click="delOne(item.id)"
                            ></i>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="titleLabel">私有</div>
            <div class="autoScrollBox">
                <div class="boxPanel" v-bind:class="{ isActive: vtdPri }">
                    <div class="titlePanel">
                        <i
                            class="el-icon el-icon-caret-right"
                            @click="handleChange('vtdPri')"
                        ></i>
                        <span class="title" @click="handleChange('vtdPri')"
                            >VTD</span
                        >
                    </div>
                    <ul class="list listPri">
                        <li v-for="item in listVtdPri" :key="item.id">
                            <span
                                @click="showInfo(item.id)"
                                v-bind:class="{
                                    isCur:
                                        curOne.share === '0' &&
                                        curOne.id === item.id,
                                }"
                            >
                                {{ item[showName] }}
                            </span>
                            <i
                                class="el-icon-delete"
                                @click="delOne(item.id)"
                            ></i>
                        </li>
                    </ul>
                </div>

                <div class="boxPanel" v-bind:class="{ isActive: carsimPri }">
                    <div class="titlePanel">
                        <i
                            class="el-icon el-icon-caret-right"
                            @click="handleChange('carsimPri')"
                        ></i>
                        <span class="title" @click="handleChange('carsimPri')"
                            >Carsim</span
                        >
                    </div>
                    <ul class="list listPri">
                        <li v-for="item in listCarsimPri" :key="item.id">
                            <span
                                @click="showInfo(item.id)"
                                v-bind:class="{
                                    isCur:
                                        curOne.share === '0' &&
                                        curOne.id === item.id,
                                }"
                            >
                                {{ item[showName] }}
                            </span>
                            <i
                                class="el-icon-delete"
                                @click="delOne(item.id)"
                            ></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "modelTypeList", // 模型列表-带分类
    components: {},
    data() {
        return {
            searchName: "",
            listVtdPub: [], // 公有vtd列表
            listCarsimPub: [], // 公有carsim列表
            listVtdPri: [], // 私有vtd列表
            listCarsimPri: [], // 私有carsim列表
            isShowed: false, // 判断是否进行过初次展示，只执行一次
            vtdPub: false,
            carsimPub: false,
            vtdPri: false,
            carsimPri: false,
        };
    },

    props: {
        getListApi: {
            type: String,
            default: "",
        },
        showName: {
            type: String,
            default: "",
        },
        curOne: {
            default: function () {
                return {
                    share: "",
                    id: "",
                };
            },
            type: Object,
        },
    },

    computed: { ...mapState(["roleCode"])},

    methods: {
        getList() {
            if (!this.getListApi) return;

            let data = {};
            data[this.showName] = this.searchName;

            this.$axios({
                method: "post",
                url: this.getListApi,
                data,
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.listVtdPub = res.info.filter(
                        (i) => i.share === "1" && i.parameterType === "1"
                    );
                    this.listCarsimPub = res.info.filter(
                        (i) => i.share === "1" && i.parameterType === "2"
                    );
                    this.listVtdPri = res.info.filter(
                        (i) => i.share === "0" && i.parameterType === "1"
                    );
                    this.listCarsimPri = res.info.filter(
                        (i) => i.share === "0" && i.parameterType === "2"
                    );

                    if (!this.isShowed) {
                        this.isShowed = true;
                        if (this.listVtdPub[0] && this.listVtdPub[0].id) {
                            this.showInfo(this.listVtdPub[0].id);
                            this.handleChange("vtdPub");
                        }
                    }
                } else {
                    this.$message.error(res.message || "获取失败");
                }
            });
        },
        showInfo(id) {
            this.$emit("showInfo", id);
        },
        addOne() {
            this.$emit("addOne");
        },
        delOne(id) {
            this.$confirm("确认是否删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$emit("delOne", id);
            });
        },
        searchOne() {
            this.getList();
        },
        handleChange(name) {
            if (this[name]) {
                this[name] = false;
            } else {
                this[name] = true;
            }
        },
    },

    mounted() {
        this.getList();
    },
};
</script>

<style lang='less' scoped>
.modelListPanel {
    position: relative;
    width: 322px;
    margin-right: 10px;

    .addBtn {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        width: 320px;
        padding: 12px 24px;
        margin: 0 auto;
        border-radius: 3px;
        color: #ffffff;
        background: @themeColor;
        cursor: pointer;
    }

    .listPanel {
        padding-top: 18px;
        border: 1px solid @grayLine;
        border-radius: 4px;
        box-shadow: 3px 0 6px @grayLine, 0 3px 6px @grayLine, 0 0px transparent,
            -3px 0 6px @grayLine;
        overflow: hidden;

        .titleLabel {
            border-left: 6px solid @themeColor;
            padding-left: 20px;
            margin-bottom: 4px;
            color: @themeColor;
            font-size: 16px;
            font-weight: bold;
        }

        .titlePanel {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin: 0 10px 20px 0;

            .title {
                flex: 1;
                padding-left: 10px;
                font-weight: bold;
            }
        }

        .el-icon-caret-right {
            transform: rotate(0);
            transition: all 0.3s;
        }

        // .list1 {
        //     margin: 0 10px 40px 26px;
        //     border-top: 1px solid @grayLine;

        //     li {
        //         margin-top: 10px;
        //         word-break: break-all;
        //         align-items: center;

        //         span,
        //         i {
        //             cursor: pointer;
        //         }

        //         .isCur {
        //             color: @themeColor;
        //         }
        //     }
        // }

        .list {
            height: 0;
            overflow: hidden;
            transition: all 0.3s;

            li {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 0 10px 15px 24px;
                transition: all 0.3s;
                word-break: break-all;

                &:last-child {
                    margin-bottom: 20px;
                }

                span,
                i {
                    cursor: pointer;
                }

                span {
                    margin-right: 10px;
                }

                .isCur {
                    color: @themeColor;
                }
            }
        }

        .autoScrollBox {
            height: calc(50% - 91px);
            margin: 0 10px 40px 26px;
            padding-top: 10px;
            border-top: 1px solid @grayLine;
            overflow-y: auto;
        }

        .listPub li, .listPri li {
            i {
                font-size: 16px;
                color: @themeColor;
            }
        }
    }

    .isActive {
        .el-icon-caret-right {
            transform: rotate(90deg);
            transition: all 0.3s;
        }

        .list {
            height: auto;
            transition: all 0.3s;
        }

        .titlePanel {
            margin-bottom: 20px;
        }
    }

    .inputPanel {
        margin: 0 10px 20px;

        .el-input {
            width: 300px;
        }

        /deep/ .el-input-group__append {
            background-color: #fff;
            border-color: #e5e5e5;
            padding: 0;
            overflow: hidden;
        }
    }

    .el-icon {
        color: @themeColor;
        font-size: 18px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }

    /deep/ .el-input-group__append button.el-button,
    /deep/ .el-input-group__append div.el-select .el-input__inner,
    /deep/ .el-input-group__append div.el-select:hover .el-input__inner,
    /deep/ .el-input-group__prepend button.el-button,
    /deep/ .el-input-group__prepend div.el-select .el-input__inner,
    /deep/ .el-input-group__prepend div.el-select:hover .el-input__inner {
        border-color: transparent;
        background-color: transparent;
        color: inherit;
        border-top: 0;
        border-bottom: 0;
    }
}
</style>