<template>
    <main class='homepage'>
        <section class='homepage-cards-content'>
            <div  v-for='(arr , index) in cardsList' :key='index' class="items-container">
                <section v-for="(item ,index) in arr" :key="index" class='cards-item'  >
                    <section class="card-item-title">
                        <div>
                            <img class="title-img" :src="imgSrc(item.smsxt)" />
                            <h4>{{item.smsxtname}}</h4>
                        </div>
                        <img class="warning-img" :style='itemStyle(item)' src="../../assets/images/icons/warning.png" />
                    </section>
                    <section class='equipment-list-container'>
                         <div class="more" @click.stop.capture="expandRestItems(item, index)" v-if="item.hasArrow" :style="{transform: item.expand ? 'rotate(0)' : 'rotate(180deg)'}">
                            <img v-if="item.showColor" src="../../assets/images/icons/arrow.png">
                            <img v-else src="../../assets/images/icons/grey.png">
                        </div>
                        <div class='equipment-list' v-if='item.assetTypeList'>
                            <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.assetTypeList' :key="index">
                                <div class='equip-name' >
                                    <h5>{{equip.category_name}}</h5>
                                    <div class='exception-number' v-if="equip.is_exception_num">{{equip.is_exception_num}}</div>
                                </div>
                                <section  >
                                    <div class='equip-statis'>
                                        <span class='equip-number'>{{equip.asset_num}}</span>
                                        <span class='equip-unit'>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span>
                                    </div>
                                    <!-- <div>
                                        <em v-if='false'>维保中</em>
                                    </div> -->
                                </section>
                            </div>
                        </div>
                        <div class='equipment-list' v-if='item.restAssetTypeList.length && item.expand' style="padding-top:0;">
                            <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.restAssetTypeList' :key="index">
                                <div class='equip-name' >
                                    <h5>{{equip.category_name}}</h5>
                                    <div class='exception-number' v-if="equip.is_exception_num">{{equip.is_exception_num}}</div>
                                </div>
                                <section>
                                    <div class='equip-statis'>
                                        <span class='equip-number'>{{equip.asset_num}}</span>
                                        <span class='equip-unit'>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span>
                                    </div>
                                    <!-- <div>
                                        <em v-if='false'>维保中</em>
                                    </div> -->
                                </section>
                            </div>
                        </div>
                    </section>
                    <!-- <div v-else class="empty-content"   style="border-top:none; height:8rem;line-height:8rem;">暂无数据</div> -->
                    <div  class="alert-list-container" v-if="item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length" >
                        <div class="alert-list" @click="navToGanttPage(item)">
                            <div class="alert-item"  v-for="(option , index) in  item.rptGlsmsStatisticsList" :key="index" >
                                <div  class="content" v-if="option.total">
                                    <div class="number">
                                        <div class="left">
                                            <img   :src="srcList[option.type][option.level]" > 
                                            <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' :  '第三方检测' }}</span>
                                        </div>
                                        <p class="line">
                                            <span>
                                                <em :style="{color:item.level == 1? '#646C73':'#C13830'}">{{option.due_num}}</em>/<em>{{option.unfinished}}</em>/<em >{{option.total}}</em>
                                            </span>
                                        </p>
                                    </div>
                                    <p class='desc'>
                                        {{option.type ===1 ? '即将逾期/未完成/当月总任务' : '即将逾期/未完成/本年总任务'  }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else class='empty-content'>暂无数据</div>
                </section>
            </div>
        </section>
        <section class='homepage-nav-list'>
            <div class='main-title'>
                <span>说明书更新记录</span>
                <a class="more-records" @click='navToIntroduce'>更多</a>
            </div>
            <nav>
                <div class='table'>
                    <div class='row table-header'>
                        <article>日期 </article>
                        <article>事项类型 </article>
                        <article>更新内容 </article>
                    </div>
                    <div class='table-body'>
                        <div class='row' v-for='(item , index) in changeList' :key='index'>
                            <article>{{item.changedate}}</article>
                            <article>{{item.type}}</article>
                            <article :title="item.content">{{item.content || '--'}}</article>
                        </div>
                    </div>
                </div>
            </nav>
        </section>
    </main>
</template>

<script>
import { getCardList, getQueryList, getChangeList } from '@/api/homePage'
import {sortBy} from 'lodash'
import moment from 'moment'
export default {
    data() {
        return {
            cardsList: [
                [],
                []
            ],
            itemsList: [],
            changeList: [],
            plazaId:'',
            srcList: {
                0: {
                    1: require('../../assets/images/icons/edit_blue_b.png'), //1.正常（蓝色） 2.警告（黄色） 3.严重（红色）
                    2: require('../../assets/images/icons/edit_yellow_b.png'),
                    3: require('../../assets/images/icons/edit_red_b.png')
                },
                1: {
                    1: require('../../assets/images/icons/fix_blue_b.png'),
                    2: require('../../assets/images/icons/fix_yellow_b.png'),
                    3: require('../../assets/images/icons/fix_red_b.png')
                },
                2: {
                    1: require('../../assets/images/icons/search_blue_b.png'),
                    2: require('../../assets/images/icons/search_yellow_b.png'),
                    3: require('../../assets/images/icons/search_red_b.png')
                }
            },
            
        }
    },
    created () {
        let plazaId = localStorage.getItem('PLAZAID')  
        if (plazaId) {
            this.plazaId = plazaId
        }
    },
    mounted() {
        this.testAjax()
        this.getItemsQuery()
        this.getInstructionList()
    },

    methods: {
        imgSrc(code) {
            return require('../../assets/images/icons/' + code + '.png')
        },
        expandRestItems (item, index) {
            this.cardsList.forEach(each => {
                each.forEach(eq=>{
                    if (eq.smsxt !== item.smsxt) {
                        eq.expand = false
                    }
                    eq.selected = false
                })
            })
            item.expand = !item.expand
        },
          /**
         *  点击跳转进入综合事项管理页面
         */
        navToFocusItem () {
            this.$router.push({path:"./other", query:{module:'comprehensive'}})
        },
        /**
         *  点击跳转进入 分析|报表 说明书更新记录页面
         */
        navToIntroduce () {
            this.$router.push({path:"./analysis", query:{module:'specification'}})
        },
        itemStyle (option) {
            let num = 0
            if (option.assetTypeList) {
                option.assetTypeList.forEach(item=>{
                    if (typeof item.is_exception_num === "number") {
                        num +=  item.is_exception_num
                    }
                })
            }
            if (option.rptGlsmsStatisticsList) {
                option.rptGlsmsStatisticsList.forEach(option => {
                    if (typeof option.due_num === "number") {
                        num +=  option.due_num
                    }
                })
            }
            if (num > 0) {
                return {
                    display:"block"
                }
            } else {
                return {
                    display:"none"
                }
            }
        },
        navToInnerPage (item, equip) {
            this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, equipId: equip.category_code, module:'core'}})
        },
         
        /**
         * 跳转到甘特图详情页
         */
        navToGanttPage (item) {
            this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, module:'gantt'}})
        },
  
        testAjax() {
            let params = {
                getParams: {
                    plazaId: this.plazaId
                }
            }
            getCardList(params).then(res => {
                if (res.result == 'success') {
                    let result = res.data
                    if (result && Array.isArray(result)) {
                        result.forEach((item, index) => {
                            item.expand = false
                            if (item.assetTypeList) {
                                let list = item.assetTypeList
                                let len = list.length
                                if (len > 3) {
                                    item.hasArrow = true
                                    item.assetTypeList = list.splice(0, 3)
                                    item.restAssetTypeList = list
                                    item.showColor = list.some(item => {return item.is_exception_num > 0})
                                }else {
                                    item.hasArrow = false
                                    item.restAssetTypeList = []
                                }
                            }
                            if (index % 2 === 0) {
                                this.cardsList[0].push(item)
                            } else {
                                this.cardsList[1].push(item)
                            }
                        })
                        this.cardsList.forEach(item=>{
                            item.forEach(eq=>{
                                if (eq.rptGlsmsStatisticsList) {
                                    eq.rptGlsmsStatisticsList.forEach(each => {
                                        if (each.type === 1) {
                                            each.sort = 0
                                        } else if (each.type === 2) {
                                            each.sort = 1
                                        } else {
                                            each.sort = 2
                                        }
                                    })
                                    console.log(eq.rptGlsmsStatisticsList)
                                    eq.rptGlsmsStatisticsList = sortBy(eq.rptGlsmsStatisticsList, (item) => {return item.sort})
                                }
                            })
                        })
                    }
                }
            })
        },
        /**
         * 获取说明书变更记录
         */
        getInstructionList() {
            let params = {
                getParams: {
                    plazaId: this.plazaId,
                    page: 1,
                    size: 13
                }
            }
            getChangeList(params).then(res => {
                if (res.result == 'success' && res.data) {
                    let result = res.data
                    result.forEach(item => {
                        item.changedate = moment.unix(item.changedate / 1000).format('YYYY.MM.DD')
                        if (item.objtype === 0) {
                            item.type = '专维'
                        } else if (item.objtype === 1) {
                            item.type = '重要维保'
                        } else if (item.objtype === 2) {
                            item.type = '第三方检测'
                        } else if (item.objtype === 3) {
                            item.type = '综合事项'
                        } else if (item.objtype === 4) {
                            item.type = '重要维修'
                        } else {
                            item.type = '其他事项'
                        }
                    })

                    if (result && Array.isArray(result)) {
                        this.changeList = result
                    }
                }
            })
        },
        getItemsQuery() {
            let params = {
                getParams: {
                    // department=部门 //部门
                    // startDate: '20200208000000', //开始时间
                    // endDate: '20200608000000', //结束时间
                    plazaId: this.plazaId, //广场id 必填
                    page: 1, //页数
                    size: 10 //条数
              
                }
            }
            getQueryList(params).then(res => {
                moment().format('YYYY.MM.DD HH:mm')
                if (res.result == 'success') {
                    if (res.data && Array.isArray(res.data)) {
                        res.data.forEach(item => {
                            item.createdate = moment.unix(item.createdate / 1000).format('YYYY.MM.DD')
                        })
                        this.itemsList = res.data
                    }
                }
            })
        }
    }
}
</script>

<style lang='less'>
.homepage {
    display: flex;
    justify-content: space-between;
    height: calc(100vh - 48px);
    padding: 15px;
    background: rgba(242, 245, 247, 1);
    overflow: auto;
    .homepage-cards-content {
        display: flex;
        width: 70%;
        overflow: auto;
        .items-container{
            width: 50%;
            .cards-item {
                width: calc(100% - 5px);
                height: auto;
                padding-bottom: 0;
                margin-bottom: 1rem;
                transition: 0.5s;
                background: #fff;
                border-radius: 4px;
                box-shadow: 0 2px 10px 0 rgba(31, 36, 41, 0.06);
                .card-item-title{
                    height: 42px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-left: 12px;
                    padding-right: 12px;
                    border-radius: 4px;
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                    h4 {
                        color: white;
                        padding: 1rem;
                        font-size: 1.6rem;
                        line-height: 1;
                        font-weight: bold;
                    }
                    img.title-img{
                        width: 2.4rem;
                        height: 2.4rem; 
                    }
                    img.warning-img{
                        width: 1.8rem;
                        height: 1.8rem; 
                    }
                    >div{
                        display: flex;
                        align-items: center;
                    }
                }
                .equipment-list-container{
                    position: relative;
                    .equipment-list {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        padding: 1rem ;
                        padding-bottom: 0.4rem;
                        .equipment-item {
                            width: 31%;
                            box-sizing: border-box;
                            border-radius: 2px;
                            padding: 1rem;
                            margin-right: 0.4rem;
                            background: #EFF0F1;
                            cursor: pointer;
                            .equip-name {
                                position: relative;
                                display: inline-block;
                                h5 {
                                    position: relative;
                                    color: #1f2429;
                                    font-size: 1.4rem;
                                    font-weight: bold;
                                    em {
                                        margin-left: 1rem;
                                        color: #e19e51;
                                        font-size: 1.2rem;
                                    }
                                }
                                .exception-number {
                                    position: absolute;
                                    right: -20%;
                                    top: -5px;
                                    height: 1.6rem;
                                    border-radius: 8rem;
                                    padding: 0.2rem 0.4rem;
                                    line-height: 1.2rem;
                                    text-align: center;
                                    font-size: 1.2rem;
                                    color: #f54e45;
                                    background: #ffe0df;
                                }
                            }
                            section {
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                .equip-statis {
                                    .equip-number {
                                        font-size: 1.8rem;
                                        font-weight: bold;
                                        color: rgba(31, 36, 41, 1);
                                    }
                                    .equip-unit {
                                        color: #ccc;
                                        font-size: 1.2rem;
                                    }
                                }
                            }
                        }
                        .equipment-item:hover {
                            background: #f5f6f7;
                        }
                    }
                    .more{
                        position: absolute;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 14px;
                        height: 14px;
                        right: 8px; 
                        top: 40%;
                        border-radius: 7px;
                        cursor: pointer;
                        transform: rotate(0);
                        transform-origin: center;
                        z-index: 10000;
                        img{
                            width:14px;
                            height: 14px;
                        }
                    }
                }
                .alert-list-container{
                    padding:0 1rem 1rem 1rem;
                    .alert-list {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        height: auto;
                        padding: 1rem 0;
                        padding-left: 1rem;
                        border-radius: 4px;
                        background: #F5F6F7;
                        cursor: pointer;
                        &:hover {
                            background: #f5f6f7;
                        }
                        .alert-item {
                            display: flex;
                            width: 33.33%;
                            align-items: center;
                            img {
                                width: 2.4rem;
                                height: 2.4rem;
                                margin-right: 0.6rem;
                            }
                            .content {
                                .number {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    .left{
                                        span {
                                            margin-right: 1rem;
                                            font-size: 1.2rem;
                                            color: #1f2429;
                                            font-weight: bold;
                                            white-space: nowrap;
                                        }
                                    }
                                    .line {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        line-height: 1;
                                        em {
                                            font-weight: normal;
                                        }
                                        em:first-child {
                                            font-size: 1.6rem;
                                            font-weight: bold;
                                        }
                                    }
                                }
                                .desc {
                                    padding-top: 0.6rem;
                                    color: #8d9399;
                                    font-size: 1.2rem;
                                    text-align: right;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                }
                .empty-content {
                    height: 8rem;
                    line-height: 8rem;
                    border-top: 1px solid #f5f6f7;
                    text-align: center;
                    color: #8d9399;
                }
            }
        }
        div:first-child.items-container{
            section:nth-of-type(1).cards-item{
                section.card-item-title{
                    background: linear-gradient(to left, #3E64CB, #6C8BE3);
                }
                .equip-number{
                    color: #3E64CB!important;
                }
            }
            section:nth-of-type(2).cards-item{
                section.card-item-title{
                    background: linear-gradient(to left, #2BAD88, #54D6B2);
                }
                .equip-number{
                    color: #2BAD88!important;;
                }
            }
            section:nth-of-type(3).cards-item{
                section.card-item-title{
                    background: linear-gradient(to left, #3998DB, #70BBF0);
                }
                .equip-number{
                    color: #3998DB!important;;
                }
            }
            section:nth-of-type(4).cards-item{
                section.card-item-title{
                    background: linear-gradient(to left, #3E64CB, #6C8BE3);
                }
                .equip-number{
                    color: #3E64CB!important;;
                }
            }
        }
        div:last-child.items-container{
            section:nth-of-type(1).cards-item{
                section.card-item-title{
                    background: linear-gradient(to left, #3998DB, #70BBF0);
                }
                .equip-number{
                    color: #3998DB!important;;
                }
            }
            section:nth-of-type(2).cards-item{
                section.card-item-title{
                    background: linear-gradient(to left, #3E64CB, #6C8BE3);
                }
                .equip-number{
                    color: #3E64CB!important;;
                }
            }
            section:nth-of-type(3).cards-item{
                section.card-item-title{
                    background: linear-gradient(to left, #3998DB, #70BBF0);
                }
                .equip-number{
                    color: #3998DB!important;;
                }
            }
            section:nth-of-type(4).cards-item{
                section.card-item-title{
                    background: linear-gradient(to left, #2BAD88, #54D6B2);
                }
                .equip-number{
                    color: #2BAD88!important;;
                }
            }
        }
    }
    .homepage-nav-list {
        width: calc(30% - 10px);
        height: 97%;
        background: white;
        .main-title {
            display: flex;
            justify-content: space-between;
            padding: 6px 12px;
            margin-bottom: 12px;
            background:#8D9399;
            span:first-child {
                color: #ffffff;
                font-weight: bold;
                font-size: 1.6rem;
            }
            a{
                color: white;
                line-height: 1;
            }
        }
        nav {
            height: 94%;
            padding: 14px 16px;
            overflow: auto;
            .table {
                .row {
                    display: flex;
                    align-items: center;
                    padding: 6px;
                    border-bottom: 1px solid #e4e6e7;
                    font-size: 1.4rem;                   
                    article {
                        margin-right: 10px;
                    }
                    article:nth-of-type(1) {
                        width: 20%;
                    }
                    article:nth-of-type(2) {
                        width: 20%;
                        padding-left: 1.2rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    article:nth-of-type(3) {
                        width: calc(60% - 30px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                }
                .table-header {
                    height: 3.2rem;
                    padding: 6px;
                    line-height: 3.2rem;
                    color: #646a73;
                    font-weight: 600;
                    border-bottom: none;
                    background: #f8f9fa;
                }
                .table-body {
                    overflow: auto;
                }
            }
        }
        nav:first-child {
            height: 96%;
            .table-body {
                height: 75vh;
                overflow-y: auto;
            }
        }
       
    }
}
</style>