<template>
    <div class="relationship" v-loading="loading">
        <template v-for="item in content">
            <p class="title">架构从属关系</p>
            <section v-for="(child,childIndex) in item.childGraphicTypeList" :key="childIndex">
                <p class="ship-title">{{ child.graphTypeName }}
                    <i class="iconfont icon-xiangmuguanli"></i>
                </p>
                <el-row :gutter="20">
                    <el-col :span="8" v-for="(relation,relIndex) in child.relationTypeProjectList" :key="relIndex"
                            class="card">
                        <el-card shadow="hover">
                            <article class="ship-card-title">
                                <el-tooltip
                                    :content="relation.relationTypeName"
                                    placement="top">
                                    <span>{{ relation.relationTypeName }}</span>
                                </el-tooltip>
                                <el-tooltip
                                    :content="relation.relationTypeCode"
                                    placement="top">
                                    <span>{{ relation.relationTypeCode }}</span>
                                </el-tooltip>
                            </article>
                            <el-row class="ship-card-content">
                                <el-col :span="12">
                                    <article class="ship-card-object">
                                        <p>主要连接对象</p>
                                        <el-tooltip
                                            :content="relation.conneObject"
                                            placement="top"
                                        >
                                            <p>{{ relation.conneObject }}</p>
                                        </el-tooltip>
                                    </article>
                                </el-col>
                                <el-col :span="1">
                                    <div class="border"></div>
                                </el-col>
                                <el-col :span="11" class="ship-card-object">
                                    <article>
                                        <p>连接数量</p>
                                        <p>{{ relation.count }}</p>
                                    </article>
                                </el-col>
                            </el-row>
                            <article class="ship-card-time">
                                <span v-if="relation.computationalState === 3">关系计算中...</span>
                                <span v-else-if="relation.computationalState === 5">计算失败</span>
                                <span v-else-if="relation.computationalState !== 3  && relation.computingTime">最后一次计算时间 {{ relation.computingTime }}</span>
                                <span v-else-if="relation.times">最后一次计算时间 {{ relation.times }}</span>
                                <span style="float: right">

<!--  todo  启动计算  :disabled="relation.manual === 1" 解决演示使用 -->
                                <el-tooltip
                                    content="启动计算"
                                    placement="top">
                                    <el-badge
                                        style="margin-bottom: 4px;"
                                        :is-dot="relation.computationalState === 2 || relation.computationalState === 5">
                                        <el-button
                                            :disabled="relation.manual === 1"
                                            @click="computed(relation)"
                                            circle
                                            type=""
                                            plain
                                            icon="iconfont icon-yizhixingjianchagongju"
                                            class="sm-button">
                                        </el-button>
                                    </el-badge>
                                </el-tooltip>
                                <el-tooltip
                                    content="手动编辑"
                                    placement="top">
                                    <el-button
                                        :disabled="relation.manual === 1"
                                        :style="{ 'border': ( relation.manual=== 1? '1px solid #DCDFE6' :'') } "
                                        @click="manual(relation)"
                                        circle
                                        class="sm-button"
                                        type=""
                                        plain
                                        icon="iconfont icon-bianji">
                                    </el-button>
                                </el-tooltip>
                                </span>
                            </article>
                        </el-card>
                    </el-col>
                </el-row>
            </section>
        </template>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { relationCalc, relationshipCount, relationshipOverview, updateCalcTime } from "@/api/datacenter"
import moment from "moment";
@Component({
    name: "relationShip"
})
export default class extends Vue {
    loading = false
    content = []


    created() {
        this.init()
    }

    init() {
        this.loading = true
        let promise = new Promise(resolve => {
            relationshipOverview({}).then(res => {
                resolve(res)
            })
        })
        let promise1 = new Promise(resolve => {
            relationshipCount({}).then(res => {
                resolve(res)
            })
        })
        Promise.all([promise, promise1]).then(res => {
            this.loading = false;
            let content = []
            content = res[0].content
            this.transform(content, res[1].content);
            this.content = content;
        })
    }

    transform(list1, list2) {
        let countInfo = {}; // { graphTypeName: { Id: count } }
        list2.forEach(item => {
            countInfo[item.graphTypeName] = countInfo[item.graphTypeName] || {};
            let rList = item.relationTypeProjectList;
            rList.forEach(r => {
                countInfo[item.graphTypeName][r.id] = r.count;
            });
        });
        let changeList = [];
        list1.forEach(item => {
            // 这里保存的是引用
            if (item.childGraphicTypeList) {
                changeList.push(...item.childGraphicTypeList);
            }
        });
        changeList.length > 0 &&
        changeList.forEach(item => {
            let name = item.graphTypeName;
            let rList = item.relationTypeProjectList;
            rList && rList.forEach(r => {
                r.count = countInfo[name][r.id];
            });
        });
    }

    computed(relation: object) {
        this.$set(relation, 'times', moment(Date.now()).format("YYYY-MM-DD HH:mm:ss"))
        if (relation.enableCalc == 0) { // 0 不可计算
            let param = {
                graphCode: relation.graphicType,
                relType: relation.relationType,
                computingTime: moment(Date.now()).format("YYYY-MM-DD HH:mm:ss")
            }
            updateCalcTime(param).then(res => {
                this.init()
            })
        } else {
            let param = {
                relType: relation.relationType,
                objectTypes: relation.zoneType,
                requestUrl: relation.requestUrl,
                graphCode: relation.graphicType
            }
            relationCalc(param).then(res => {
            })
            this.init()
        }
    }

    manual(relation) {
        console.log(relation.relationTypeName)
        this.$router.push({ path: 'relation', query: relation })
    }
}
</script>

<style scoped lang="scss">
.relationship {
    height: 100%;
    overflow: auto;

    .title {
        text-indent: 10px;
        color: #646C73;
        margin: 12px 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #E1E7EA;
    }

    section {
        margin: 12px;

        .card {
            margin: 10px 0;
        }

        .ship-title {
            border-left: 7px solid #555555;
            margin-bottom: 10px;
            text-indent: 10px;
            font-weight: 500;
            color: #646C73;

            i {
                margin-left: 10px;
            }
        }

        .ship-card-title {
            span {
                font-size: 18px;
                color: #1F2429;
                font-weight: 600;
            }

            span:last-child {
                float: right;
                color: #8D9399;
                font-size: 14px;
            }

        }
    }


    .ship-card-content {
        margin: 35px 0;

        .ship-card-object {
            p {
                color: #C3C7CB;
                margin-bottom: 7px;

                &:last-child {
                    color: #1F2429;
                    font-size: 16px;
                    font-weight: 600;
                }
            }
        ;
        }

        .border {
            width: 1px;
            height: 45px;
            background: #D8D8D8;
        }

    }

    .ship-card-time {
        overflow: hidden;

        span {
            font-size: 12px;
            color: #C3C7CB;
            line-height: 3;
        }

        .sm-button {
            margin-right: 5px;
        }

        i {
            float: right;
            color: #8D9399;
            font-size: 14px;
            margin: 0 5px;
            cursor: pointer;
        }

    }
}
</style>
