<template>
    <div class='appealBoxContainer'>
        <div class='top'>
            <Head :headText='headText'></Head>
        </div>
        <div class='bottom'>
            <div class='appealBox'>
                <div class='appealBoxLeft'>
                    <div class='title'>
                        <span class='Micbold'>可申诉的未执行策略</span>
                        <span v-if='appealsArr.length>0'>{{appealsArr.length}}</span>
                    </div>
                    <div class='left' v-if='appealsArr1.length>0'>
                        <div style='margin-bottom:24px' v-for='(item2,index) in appealsArr1' :key='index'>
                            <div v-if='item2.date'>
                                <p class='date MicrYaHei' v-if='item2.date==today'>{{formatterStr(item2.date)+'&nbsp;&nbsp;今天'}}</p>
                                <p v-if='item2.date==yesterday' class='date MicrYaHei'>{{formatterStr(item2.date)+'&nbsp;&nbsp;昨天'}}</p>
                                <p class='date MicrYaHei' v-if='item2.date!=today&&item2.date!=yesterday'>
                                    {{formatterStr(item2.date)+'&nbsp;&nbsp;'}}
                                    <span v-if='formatter3(formatters(item2.date))==0'>星期日</span>
                                    <span v-if='formatter3(formatters(item2.date))==1'>星期一</span>
                                    <span v-if='formatter3(formatters(item2.date))==2'>星期二</span>
                                    <span v-if='formatter3(formatters(item2.date))==3'>星期三</span>
                                    <span v-if='formatter3(formatters(item2.date))==4'>星期四</span>
                                    <span v-if='formatter3(formatters(item2.date))==5'>星期五</span>
                                    <span v-if='formatter3(formatters(item2.date))==6'>星期六</span>
                                </p>
                            </div>
                            <!-- <p class='date MicrYaHei'>{{item2.date?formatterStr(item2.date):'--'}}</p> -->
                            <div class='execute'>
                                <div class='card' v-for='(item,index) in item2.children' :key='index'>
                                    <div class='time'>执行时间：{{item.recommend?formatterStr2(item.recommend.time):'--'}}</div>
                                    <div class='advice MicrYaHei'>
                                        <span>策略建议</span>
                                        <span>冷机台数</span>
                                        <span>{{item.recommend.chillerNumSetL||'--'}}大{{item.recommend.chillerNumSetS||'--'}}小</span>
                                        <span>冷机出水温度</span>
                                        <span>{{item.recommend.chillWaterOutTempSet||'--'}}°C</span>
                                    </div>
                                    <div class='advice'>
                                        <span>实际执行</span>
                                        <span>冷机台数</span>
                                        <span>{{item.real?item.real.chillerNumSetLOrg:'--'}}大{{item.real?item.real.chillerNumSetSOrg:'--'}}小</span>
                                        <span>冷机出水温度</span>
                                        <span>{{item.real?item.real.chillWaterOutTempSetOrg:'--'}}°C</span>
                                    </div>
                                    <div class='remark'>备注：{{item.remarks||'--'}}</div>
                                    <div class='refuteBox'>
                                        <div class='refute' v-if='item.status=="305"'>
                                            <img src='../../assets/error.png' alt />
                                            <span>已驳回</span>
                                        </div>
                                        <div v-else class='refute2'></div>
                                        <div class='btn'>
                                            <el-button size='mini' @click='lookQuickData(item)'>查看快照</el-button>
                                            <el-button size='mini' type='primary' @click='menu(item,1)'>申诉</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class='no-data' v-else>暂无数据</div>
                </div>
                <div class='appealBoxCenter'>
                    <div class='title'>
                        <span class='Micbold'>审核中</span>
                        <span v-if='InAuditArr.length>0'>{{InAuditArr.length}}</span>
                    </div>
                    <div class='center' v-if='InAuditArr.length>0'>
                        <div class='card' v-for='(item,index) in InAuditArr' :key='index'>
                            <div class='time' @click='menus(item,2)'>
                                <span class='time-box'>
                                    <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
                                    <span>{{item.title||'--'}}</span>
                                </span>
                                <span class='backout' @click='backoutClick(item,"revoke")'>
                                    <img src='../../assets/backout.png' />撤销申请
                                </span>
                            </div>
                            <div class='remark'>申请原因：{{item.reasonType||'--'}}</div>
                            <div class='remark'>{{item.reason||'--'}}</div>
                        </div>
                    </div>
                    <div class='no-data' v-else>暂无数据</div>
                </div>
                <div class='appealBoxRight' ref='appealBoxRight'>
                    <div class='title Micbold'>审核完成/超时未申诉</div>
                    <div class='right' v-if='auditCompletedArr.length>0'>
                        <div class='card' v-for='(item,index) in auditCompletedArr' :key='index' @click='menus(item,0)'>
                            <div class='remark'>
                                <div class='remark-left'>审批时间：{{item.status=='306'?'--':(item.updateTime?formatter1(item.updateTime):'--')}}</div>
                                <div class='remark-right Micbold'>
                                    <span :class='item.status=="303"?"backout":(item.status=="306"?"backout1":"backout2")'>
                                        <img
                                            :src='item.status=="303"?require("../../assets/completed.png"):(item.status=="306"?require("../../assets/gray.png"):require("../../assets/error.png"))'
                                        />
                                        {{item.status=='303'?'申诉成功':(item.status=='306'?'未申诉':'申诉失败')}}
                                    </span>
                                </div>
                            </div>
                            <div class='time'>
                                <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
                                <span>{{item.title||'--'}}</span>
                            </div>
                        </div>
                        <div v-infinite-scroll='loadMore' infinite-scroll-disabled='busy'>
                            <div
                                class='loadingIcon'
                                style='width: 50px;
                                text-align: center;
                                margin: 0 auto;
                                margin-top: 20px;
                                margin-bottom: 30px;'
                            >
                                <i v-if='loading' class='el-icon-loading'></i>
                            </div>
                        </div>
                    </div>
                    <div class='no-data' v-else>暂无数据</div>
                </div>
            </div>
        </div>
        <div class='view-dialog'>
            <el-dialog title='策略推出时状况' :visible.sync='viewSnapshots' :close-on-click-modal='false' width='1260px'>
                <ev-snapshots-dialog :appealsDate='appealsDate' :time='time'></ev-snapshots-dialog>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import Head from '../main/index'
import { queryWorkflow, queryChillerExecuteInfo, querySimpleInfo } from '@/api/appeal/appeal.js'
import EvSnapshotsDialog from '../evaluate/evSnapshotsDialog'
import { updateWorkflow } from '@/api/audit/audit.js'

var moment = require('moment')
import 'moment/locale/zh-cn'

export default {
    data() {
        return {
            headText: '未执行申诉',
            appealsArr: [], //可申诉的未执行策,
            appealsArr1: [],
            InAuditArr: [], //审核中
            auditCompletedArr: [], //审核完成，超时未申诉
            appealsDate: '',
            viewSnapshots: false,
            newArr: [],
            busy: true,
            page: 1,
            pageSize: 15,
            loading: false,
            time: '',
            day: '',
            day1: '',
            yesterday: '',
            today: ''
        }
    },
    components: {
        Head,
        EvSnapshotsDialog
    },
    mounted() {
        this.today = this.formatter2(moment(new Date()))
        this.yesterday = this.formatter2(moment(new Date()).add(-1, 'days'))
        this.init()
    },
    methods: {
        lookQuickData(item) {
            this.viewSnapshots = true
            this.time = item.recommend.time
        },
        backoutClick(item, type) {
            let params = {
                postParams: {
                    id: item.id,
                    commit: type,
                    roles: [1002],
                    updateUser: this.$store.state.userInfo.userId
                }
            }
            updateWorkflow(params).then(res => {
                if (res.result == 'success') {
                    this.$message.success('撤销成功')
                } else {
                    this.$message.error('撤销失败: ' + res.message)
                }
                this.init()
            })
        },
        formatter3(date) {
            return moment.unix(date / 1000).format('d')
        },
        formatter(date) {
            return moment.unix(date / 1000).format('YYYY.MM.DD HH:mm')
        },
        formatter1(date) {
            return moment.unix(date / 1000).format('YYYY.MM.DD')
        },
        formatterStr(str) {
            if (str) {
                return str.substring(0, 4) + '.' + str.substring(4, 6) + '.' + str.substring(6, 8)
            }
        },
        formatterStr2(str) {
            if (str) {
                return str.substring(0, 2) + ':' + str.substring(2, 4)
            }
        },
        formatters(date) {
            return moment(date).valueOf()
        },
        menus(item, type) {
            this.queryExecutes(item, type)
        },
        menu(item, type) {
            this.$router.push({
                path: '/appeal/appealDetail',
                query: { item: JSON.stringify(item), type: type }
            })
        },
        init() {
            this.day1 = this.formatter2(moment(new Date()).add(-6, 'days'))
            this.day = this.formatter2(moment(new Date()).add(-2, 'days'))
            this.appealsIng()
            this.auditCompletedIng()
            this.InAuditIng()
        },
        formatter2(date) {
            return moment.unix(date / 1000).format('YYYYMMDD')
        },
        // 可申诉的未执行策略
        appealsIng() {
            let params = {
                postParams: {
                    criteria: {
                        projectId: this.$store.state.projectId,
                        trackerId: 3, //固定为3
                        status: [301, 305], //固定为未申诉和已驳回
                        createTime: {
                            $gte: this.day + '000000' //三天以内
                        }
                    },
                    orders: [
                        {
                            column: 'createTime',
                            asc: false
                        }
                    ],
                    withColumns: ['customAttribute']
                }
            }
            queryWorkflow(params).then(res => {
                let arr = [],
                    arr1 = []
                arr = res.content ? res.content : []
                if (arr.length > 0) {
                    arr.forEach(item => {
                        arr1.push(item.commandId)
                        this.newArr.push(item)
                    })
                    this.queryExecute(arr1)
                }
            })
        },
        queryExecutes(item, type) {
            let params = {
                postParams: {
                    criteria: {
                        id: item.commandId
                    },
                    orders: [
                        {
                            column: 'createTime',
                            asc: false
                        }
                    ]
                }
            }
            queryChillerExecuteInfo(params).then(res => {
                console.log(res)
                let obj = Object.assign(item, res.data[0])
                this.menu(obj, type)
            })
        },
        queryExecute(id) {
            this.appealsArr = []
            let params = {
                postParams: {
                    criteria: {
                        id: id
                    },
                    orders: [
                        {
                            column: 'createTime',
                            asc: false
                        }
                    ]
                }
            }
            queryChillerExecuteInfo(params).then(res => {
                console.log(res)

                let arr1 = [],
                    arr2 = [],
                    arr3 = []
                arr1 = res.data ? res.data : []
                if (arr1.length > 0) {
                    arr1.forEach(item => {
                        this.newArr.forEach(item2 => {
                            if (item.recommend.appealId == item2.id) {
                                let obj = Object.assign(item, item2)
                                console.log(obj)
                                this.appealsArr.push(obj)
                                this.appealsDate = this.appealsArr[0].recommend.date
                            }
                        })
                    })
                    if (this.appealsArr.length > 0) {
                        this.appealsArr.forEach(el => {
                            arr3.push(el.recommend.date)
                        })
                    }
                    let arrNew = this.unique(arr3)
                    arrNew.forEach(item => {
                        let obj1 = {
                            date: item,
                            children: []
                        }
                        this.appealsArr1.push(obj1)
                    })
                    this.appealsArr1.forEach(item1 => {
                        this.appealsArr.forEach(item2 => {
                            if (item1.date == item2.recommend.date) {
                                item1.children.push(item2)
                            }
                        })
                    })
                }
            })
        },
        unique(array) {
            var res = []
            for (var i = 0, len = array.length; i < len; i++) {
                var current = array[i]
                if (res.indexOf(current) === -1) {
                    res.push(current)
                }
            }
            return res
        },
        formatt(str) {
            return str.moment().format('d')
        },
        // 审核完成、超时未申诉
        auditCompletedIng(flag) {
            let params = {
                postParams: {
                    criteria: {
                        projectId: this.$store.state.projectId,
                        trackerId: 3,
                        status: [303, 304, 306]
                        // createTime: {
                        //     $gte: this.day1 + '000000' //三天以内
                        // }
                    },
                    orders: [
                        {
                            column: 'createTime',
                            asc: false
                        }
                    ],
                    size: this.pageSize,
                    page: this.page,
                    withColumns: ['customAttribute']
                }
            }
            queryWorkflow(params).then(res => {
                // this.auditCompletedArr = res.content ? res.content : [];
                if (flag) {
                    this.loading = true
                    // 多次加载数据
                    this.auditCompletedArr = this.auditCompletedArr.concat(res.content || [])
                    if (res.content && res.content.length > 0) {
                        this.busy = false
                    } else {
                        this.loading = false
                        this.busy = true
                    }
                } else {
                    this.auditCompletedArr = res.content || []
                    this.busy = false
                }
            })
        },
        loadMore: function() {
            this.busy = true
            this.loading = true
            setTimeout(() => {
                this.page++
                this.auditCompletedIng(true)
            }, 1000)
        },
        // 审核中
        InAuditIng() {
            let params = {
                postParams: {
                    criteria: {
                        projectId: this.$store.state.projectId,
                        trackerId: 3,
                        status: 302
                    },
                    orders: [
                        {
                            column: 'createTime',
                            asc: false
                        }
                    ],
                    withColumns: ['customAttribute']
                }
            }
            queryWorkflow(params).then(res => {
                this.InAuditArr = res.content ? res.content : []
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.appealBoxContainer {
    height: 100%;
    display: flex;
    .top {
        height: 100px;
    }
    .bottom {
        flex: 1;
        .appealBox {
            height: 100%;
            background: #fff;
            display: flex;
            justify-content: space-between;
            padding: 0 24px;
            .appealBoxLeft {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                border-right: 1px solid #eff0f1;
                // overflow: scroll;
                .title {
                    display: flex;
                    align-items: center;
                    padding-top: 116px;
                    span:nth-of-type(1) {
                        height: 24px;
                        font-size: 16px;
                        color: rgba(31, 36, 41, 1);
                        line-height: 21px;
                        margin-right: 8px;
                    }
                    span:nth-of-type(2) {
                        width: 18px;
                        height: 18px;
                        background: rgba(245, 74, 69, 1);
                        border-radius: 9px;
                        border: 1px solid rgba(255, 255, 255, 1);
                        font-size: 12px;
                        font-family: ArialMT;
                        color: rgba(255, 255, 255, 1);
                        line-height: 18px;
                        text-align: center;
                    }
                }
                .date {
                    height: 18px;
                    font-size: 12px;
                    color: rgba(141, 147, 153, 1);
                    line-height: 16px;
                    margin: 0;
                    text-align: center;
                }
                .left {
                    flex: 1;
                    overflow: scroll;
                    .execute {
                        .card {
                            min-width: 470px;
                            background: rgba(255, 255, 255, 1);
                            border-radius: 4px;
                            border: 1px solid rgba(228, 230, 231, 1);
                            margin-top: 8px;
                            padding: 16px 20px;
                            cursor: pointer;
                            .time {
                                height: 24px;
                                font-size: 16px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: rgba(31, 36, 41, 1);
                                line-height: 22px;
                                margin-bottom: 8px;
                            }
                            .advice {
                                margin-top: 4px;
                                height: 40px;
                                background: rgba(245, 246, 247, 1);
                                border-radius: 1px;
                                display: flex;
                                justify-content: space-between;
                                padding-left: 16px;
                                padding-right: 20px;
                                align-items: center;
                                span:nth-of-type(1),
                                span:nth-of-type(3),
                                span:nth-of-type(5) {
                                    height: 22px;
                                    font-size: 14px;
                                    color: rgba(31, 36, 41, 1);
                                }
                                span:nth-of-type(3) {
                                    width: 115px;
                                    display: inline-block;
                                }
                                span:nth-of-type(5) {
                                    width: 65px;
                                    display: inline-block;
                                }
                                span:nth-of-type(2),
                                span:nth-of-type(4) {
                                    height: 18px;
                                    font-size: 12px;
                                    color: rgba(141, 147, 153, 1);
                                }
                                span:nth-of-type(1) {
                                    width: 56px;
                                    margin-right: 36px;
                                }
                                span:nth-of-type(2) {
                                    margin-right: 8px;
                                }
                                span:nth-of-type(3) {
                                    margin-right: 24px;
                                }
                                span:nth-of-type(4) {
                                    margin-right: 8px;
                                }
                            }
                            .remark {
                                height: 22px;
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: rgba(100, 108, 115, 1);
                                line-height: 20px;
                                margin-top: 16px;
                                margin-bottom: 24px;
                            }
                            .refuteBox {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                .refute {
                                    padding: 0 12px;
                                    // width: 85px;
                                    height: 24px;
                                    background: #fde3e2;
                                    border-radius: 12px;
                                    display: flex;
                                    align-items: center;
                                    img {
                                        width: 14px;
                                        height: 14px;
                                        margin-right: 4px;
                                    }
                                    span {
                                        display: inline-block;
                                        height: 22px;
                                        font-size: 14px;
                                        font-family: MicrosoftYaHeiSemibold;
                                        color: rgba(245, 78, 69, 1);
                                        line-height: 22px;
                                    }
                                }
                                .refute2 {
                                    padding: 0 12px;
                                    // width: 85px;
                                    height: 24px;
                                    background: #fff;
                                    border-radius: 12px;
                                    display: flex;
                                    align-items: center;
                                }
                                .btn {
                                    // display: flex;
                                    // justify-content: flex-end;
                                    .el-button {
                                        width: 80px;
                                        height: 28px;
                                    }
                                }
                            }
                        }
                    }

                    .card:after {
                        display: block;
                        clear: both;
                        content: '';
                        visibility: hidden;
                        height: 0;
                    }
                }
                .no-data {
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    color: rgba(100, 108, 115, 1);
                    height: 100%;
                    justify-content: center;
                    align-items: center;
                    display: flex;
                }
            }
            .appealBoxCenter {
                flex: 1;
                height: 100%;
                margin: 0 24px;
                border-right: 1px solid #eff0f1;
                // overflow: scroll;
                //  height: 100%;
                display: flex;
                flex-direction: column;
                .no-data {
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    color: rgba(100, 108, 115, 1);
                    height: 100%;
                    justify-content: center;
                    align-items: center;
                    display: flex;
                }
                .title {
                    display: flex;
                    margin-bottom: 16px;
                    padding-top: 116px;
                    span:nth-of-type(1) {
                        height: 24px;
                        font-size: 16px;
                        color: rgba(31, 36, 41, 1);
                        line-height: 21px;
                        margin-right: 8px;
                    }
                    span:nth-of-type(2) {
                        text-align: center;
                        line-height: 18px;
                        width: 18px;
                        height: 18px;
                        background: rgba(245, 74, 69, 1);
                        border-radius: 9px;
                        border: 1px solid rgba(255, 255, 255, 1);
                        font-size: 12px;
                        font-family: ArialMT;
                        color: rgba(255, 255, 255, 1);
                    }
                }
                .center {
                    margin: 0 18px;
                    min-width: 410px;
                    flex: 1;
                    overflow: scroll;
                    .card {
                        margin-top: 8px;
                        cursor: pointer;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 4px;
                        border: 1px solid rgba(228, 230, 231, 1);
                        padding: 16px 20px;

                        .time {
                            margin-bottom: 6px;
                            height: 24px;
                            font-size: 16px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(31, 36, 41, 1);
                            line-height: 22px;
                            .time-box {
                                display: flex;
                                align-items: center;
                                span:nth-of-type(1) {
                                    width: 140px;
                                }
                            }
                            .backout {
                                display: flex;
                                align-items: center;
                                font-size: 14px;
                                font-family: MicrosoftYaHei;
                                color: rgba(0, 145, 255, 1);
                                float: right;
                                margin-right: 20px;
                                display: none;
                                img {
                                    height: 15px;
                                    width: 18px;
                                }
                            }
                        }
                        .remark {
                            margin-top: 4px;
                            height: 22px;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(100, 108, 115, 1);
                            line-height: 20px;
                        }
                    }
                    .card:hover {
                        border: 1px solid rgba(0, 145, 255, 1);
                    }
                    .card:hover .backout {
                        display: block;
                    }
                    .loadingIcon {
                        width: 50px;
                        text-align: center;
                        margin: 0 auto;
                        margin-top: 20px;
                        margin-bottom: 30px;
                    }
                }
            }
            .appealBoxRight {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                .no-data {
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    color: rgba(100, 108, 115, 1);
                    height: 100%;
                    justify-content: center;
                    align-items: center;
                    display: flex;
                }
                .title {
                    padding-top: 116px;
                    margin-bottom: 16px;
                }
                .right {
                    flex: 1;
                    overflow: scroll;
                    min-width: 310px;
                    .card {
                        margin-bottom: 8px;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 4px;
                        border: 1px solid rgba(228, 230, 231, 1);
                        padding: 16px 20px;
                        cursor: pointer;
                        .remark {
                            margin-bottom: 14px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .remark-left {
                                height: 22px;
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: rgba(100, 108, 115, 1);
                                line-height: 20px;
                            }
                            .remark-right {
                                height: 24px;
                                height: 22px;
                                font-size: 14px;
                                line-height: 22px;

                                img {
                                    width: 14px;
                                    height: 14px;
                                    margin-right: 4px;
                                }
                                .backout {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    padding-left: 12px;
                                    padding-right: 14px;
                                    background: rgba(217, 245, 214, 1);
                                    color: rgba(52, 199, 36, 1);
                                    border-radius: 12px;
                                }
                                .backout1 {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    padding-left: 12px;
                                    padding-right: 14px;
                                    background: rgba(239, 240, 241, 1);
                                    color: rgba(141, 147, 153, 1);
                                    border-radius: 12px;
                                }
                                .backout2 {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    padding-left: 12px;
                                    padding-right: 14px;
                                    background: rgba(253, 227, 226, 1);
                                    color: rgba(245, 78, 69, 1);
                                    border-radius: 12px;
                                }
                            }
                        }
                        .time {
                            padding: 8px 12px;
                            background: rgba(248, 249, 250, 1);
                            border-radius: 1px;
                            height: 22px;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(31, 36, 41, 1);
                            line-height: 20px;
                            span:nth-of-type(2) {
                                margin-left: 10px;
                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
<style lang="scss">
.view-dialog {
    .el-dialog__header {
        padding: 16px 28px 0 32px;
        .el-dialog__title {
            height: 24px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(31, 36, 41, 1);
            line-height: 24px;
        }
    }
    .el-dialog__body {
        padding-top: 0;
    }
}
</style>