<template>
    <div class="set-params collapse scroll">
        <div class="set-top">
            <img src="../assets/image/set-icon.png" alt="">设定值参数
        </div>
        <div class="set-tips">
            <div @click="toHome($store.state.equipmentIndex)">
                {{ $store.state.equipmentList[$store.state.equipmentIndex - 1].deviceTypeName }}状态显示</div>
        </div>
        <el-collapse v-model="$store.state.activeNames">
            <template v-for="item, index in routerList">
                <el-collapse-item :class="routerNow == item.router ? 'active' : ''" :name="index + 1" :key="index"
                    v-if="!item.isRouter">
                    <template slot="title" class="collapse-title">
                        <span class="name">{{ item.name }}</span>
                    </template>
                    <!--  -->
                    <ul class="table-ul">
                        <li @click="toRouter(item1)"
                            :class="routerNow == item1.router && routerIndex == index1 + 1 ? 'active' : ''" class="table-li"
                            v-for="item1, index1 in item.list" :key="index1">{{
                                item1.name }} <div class="status" :class="item1.status == 0 ? 'outline' : 'online'"
                                v-if="item1.status >= 0">{{ item1.status
                                    == 0
                                    ? '离线' : '在线' }}</div>
                        </li>
                    </ul>
                </el-collapse-item>
                <div @click="toRouter(item)" :class="routerNow == item.router ? 'active' : ''" class="no-list" v-else>{{
                    item.name
                }}</div>
            </template>
        </el-collapse>
    </div>
</template>
<script>
export default {
    data() {
        return {
            routerList: [
                { name: '施肥机配方设置', list: [], router: 'formula' },
                {
                    name: '灌溉组配置', router: 'irrigateSet', list: [
                        { name: '1#灌溉组配置', status: -1, router: 'irrigateSet', index: 1 },
                        { name: '2#灌溉组配置', status: -1, router: 'irrigateSet', index: 2 },
                        { name: '3#灌溉组配置', status: -1, router: 'irrigateSet', index: 3 },
                        { name: '4#灌溉组配置', status: -1, router: 'irrigateSet', index: 4 },
                        { name: '5#灌溉组配置', status: -1, router: 'irrigateSet', index: 5 },
                        { name: '6#灌溉组配置', status: -1, router: 'irrigateSet', index: 6 },
                        { name: '7#灌溉组配置', status: -1, router: 'irrigateSet', index: 7 },
                        { name: '8#灌溉组配置', status: -1, router: 'irrigateSet', index: 8 },
                        { name: '9#灌溉组配置', status: -1, router: 'irrigateSet', index: 9 },
                        { name: '10#灌溉组配置', status: -1, router: 'irrigateSet', index: 10 },
                        { name: '11#灌溉组配置', status: -1, router: 'irrigateSet', index: 11 },
                        { name: '12#灌溉组配置', status: -1, router: 'irrigateSet', index: 12 },
                        { name: '13#灌溉组配置', status: -1, router: 'irrigateSet', index: 13 },
                        { name: '14#灌溉组配置', status: -1, router: 'irrigateSet', index: 14 },
                        { name: '15#灌溉组配置', status: -1, router: 'irrigateSet', index: 15 },
                        { name: '16#灌溉组配置', status: -1, router: 'irrigateSet', index: 16 }]
                },
                { name: '厂家内部PID配置', list: [], router: 'PIDSet', isRouter: true, },
                { name: '系统参数配置', list: [], router: 'systemSet', isRouter: true, },
                { name: '传感器通道配置', list: [], router: 'sensorSet', isRouter: true, },
                { name: '数据上传', list: [], router: 'upload', isRouter: true, },],
            routerNow: 'formula',
            routerIndex: 1,

        }
    },
    watch: {
        "$route"(newName, oldName) {
            this.gerRouter();
        },
    },
    mounted() {
        this.gerRouter();
        this.dataInit()
    },
    methods: {
          //获取设备名称/配方名称
          getByid() {
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.getByid(data).then((res) => {
                if (res.data.code == 200) {
                    store.equipmentName = res.data.data
                    this.getList()
                } else {
                    this.$message.error(res.data.msg);
                }
                this.loading = false
            });
        },
        dataInit() {
            var store = this.$store.state
            if(!store.equipmentName){
                this.getByid()
            }else{
                this.getList()
            }
           

        },
        getList(){
            var store = this.$store.state
            store.nameList.forEach((el, index) => {
                if (index < 8) {
                    if (store.equipmentName['fertilization' + store.nameList[index]]) {
                        // store.equipmentName['fertilization'+store.nameList[index]]
                        this.routerList[0].list[index]={
                            name: store.equipmentName['fertilization' + store.nameList[index]],
                            status: -1,
                            index: index + 1,
                            router: 'formula'
                        }
                    }
                }
                if (store.equipmentName['solenoid' + store.nameList[index]]) {
                        // store.equipmentName['fertilization'+store.nameList[index]]
                        this.routerList[1].list[index]={
                            name: store.equipmentName['solenoid' + store.nameList[index]],
                            status: -1,
                            index: index + 1,
                            router: 'irrigateSet'
                        }
                    }
            })
            this.$forceUpdate()
        },
        //去首页
        toHome(index) {
            this.$router.push({ path: `/status?eqbyIndex=` + index })
        },
        gerRouter() {
            this.routerNow = this.$route.name;
            this.routerIndex = this.$route.query.id ? this.$route.query.id : 1
        },
        toRouter(item) {
            if (item.router) {
                if (item.http) {
                    window.location.href = item.http;
                } else if (item.router == 'irrigateSet' && this.$route.query.id != item.index) {
                    this.$router.push({ path: `/irrigateSet?id=${item.index}` })
                } else if (item.router == 'formula' && this.$route.query.id != item.index) {
                    this.$router.push({ path: `/formula?id=${item.index}` })
                } else if (item.router != this.routerNow && !item.http) {

                    this.$router.push({ name: item.router })

                }
            }
        },
    },

}
</script>
<style lang="scss" scoped>
.set-params {
    width: 230px;
    height: 100%;
    background: rgba(0, 92, 178, 0.15);
    border: 2px solid rgba(0, 186, 255, 0.20);

    .set-top {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        width: 100%;
        padding-left: 20px;
        display: flex;
        align-items: center;
        padding-top: 20px;

        img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
    }



    .el-collapse-item {
        &.active {}
    }

    .no-list {
        color: #A8B6C8;

        &.active {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
        }
    }

    .set-tips {
        width: 100%;
        border-bottom: 1px solid rgba(168, 182, 200, 0.2);
        margin-top: 17px;
        padding-bottom: 17px;
        padding-left: 10px;
        cursor: pointer;

        >div {
            width: 100%;
            height: 40px;
            // background: rgba(255, 255, 255, 0.1);
            // border: 1px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;

            padding-left: 10px;
        }
    }
}
</style>
  