<template>
    <div class="assistant" :style="{ width: this.assistantState ? 380 + 'px' : 0 }">
        <div v-if="assistantState">
            <div class="assistant-top">
                <span><i class="el-icon-s-unfold" style="margin:0 20px;" @click="open"></i>业务助手</span>
            </div>
            <div class="assistant-bottom">
                <el-collapse v-model="activeNames" @change="handleChange(activeNames, 1)" class="assistantBox">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <div class="title_box" flex="cross:center main:justify">
                                <span class="title">合同变更记录({{ changeNote.length }})</span>
                                <span class="operate">{{ arr1 == -1 ? "展开" : "关闭" }}</span>
                            </div>
                        </template>
                        <div v-if="changeNote.length > 0">
                            <div v-for="(item, index) in changeNote" :key="index" class="content">
                                <div style="padding: 15px;display: flex;">
                                    <div class="content_item" :style="randomRgb()"> {{ index + 1 }}</div>
                                    <div style="margin-left: 30px;">
                                        <span style="font-size: 14px;line-height: 1.1;">{{ item.changeContent
                                        }}</span><br />
                                        <span style="color: #666666;font-size: 12px;">{{ item.createDate | getDate }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else style="text-align: center;"> 暂无合同变更记录</div>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                        <template slot="title">
                            <div class="title_box" flex="cross:center main:justify">
                                <span class="title">合同执行进度(2/4)</span>
                                <span class="operate">{{ arr2 == -1 ? "展开" : "关闭" }}</span>
                            </div>
                        </template>
                        <div style="height: 200px;padding: 0 8px;" align-center>
                            <el-steps direction="vertical" :active="2" :style="{ color: active ? '#333333' : '#666666' }">
                                <el-step title="合同签订"></el-step>
                                <el-step title="步骤 2"></el-step>
                                <el-step title="签收完毕" description="这是一段很长很长很长的描述性文字"></el-step>
                            </el-steps>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="3">
                        <template slot="title">
                            <div class="title_box" flex="cross:center main:justify">
                                <span class="title">开票记录(3)</span>
                                <span class="operate">{{ arr3 == -1 ? "展开" : "关闭" }}</span>
                            </div>
                        </template>
                        <div v-for="(item, index) in list" :key="index" class="list">
                            <span style="width: 100px;display: inline-block;color: #1478F6;">{{
                                item.code }}</span>
                            <span style="margin-left: 70px;">{{ item.num }}</span>
                            <span style="float: right;">{{ item.date }}</span>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="4">
                        <template slot="title">
                            <div class="title_box" flex="cross:center main:justify">
                                <span class="title">收款记录(4)</span>
                                <span class="operate">{{ arr4 == -1 ? "展开" : "关闭" }}</span>
                            </div>
                        </template>
                        <div v-for="(item, index) in list" :key="index" class="list">
                            <span style="width: 100px;display: inline-block;color:#1478F6">{{ item.code }}</span>
                            <span style="margin-left: 70px;">{{ item.num }}</span>
                            <span style="float: right;">{{ item.date }}</span>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="5">
                        <template slot="title">
                            <div class="title_box" flex="cross:center main:justify">
                                <span class="title">审批流程({{ this.stepnum || '0' }}/{{ stepList.length }})</span>
                                <span class="operate">{{ arr5 == -1 ? "展开" : "关闭" }}</span>
                            </div>
                        </template>
                        <div class="auditWork">
                            <div v-for="(item, index) in stepList" :key="index" style="margin-bottom: 15px;">
                                <div style="display: flex;">
                                    <div class="auditWork_left">
                                        <div class="auditWork_left_image"
                                            :class="item.step < stepnum ? 'left' : item.step == stepnum ? 'on' : 'right'">
                                            <img :src="require('@/assets/audit/' + item.nodeName + '.png')" alt="" />
                                        </div>
                                        <div class="auditWork_left_line" v-if="item.step != stepList.length"></div>
                                    </div>
                                    <div class="auditWork_right">
                                        <div class="auditWork_right_title"
                                            :class="item.step < stepnum ? 'color1' : item.step == stepnum ? 'color2' : 'color3'">
                                            {{ item.nodeName }}
                                        </div>
                                        <div class="auditWork_right_content">
                                            <div v-for="(el, index) in item.list" :key="index"
                                                :class="el.state != 0 && item.step <= stepnum ? 'color1' : 'color3'">
                                                <img class="img" :src="require('@/assets/audit/1.png')" alt=""
                                                    v-if="el.state == 1" />
                                                <img class="img" :src="require('@/assets/audit/2.png')" alt=""
                                                    v-if="el.state == 2" />
                                                <span style="margin-right: 6px;">{{ el.auditPersonName }}</span>
                                                <span style="display: inline-block;">{{ el.auditdate | getDate }}</span>
                                                <span>{{ !el.state ? el.name : "" }}</span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="6">
                        <template slot="title">
                            <div class="title_box" flex="cross:center main:justify">
                                <span class="title">审批记录({{ auditNote.length }})</span>
                                <span class="operate">{{ arr6 == -1 ? "展开" : "关闭" }}</span>
                            </div>
                        </template>
                        <div>
                            <div ref="auditNote">
                                <div class="auditNote" v-for="(item, index) in auditNote" :key="index">
                                    <span style="width: 44%;height: 23px;line-height: 23px;">{{ item.auditPersonName
                                    }}</span>
                                    <span :style="{ color: item.stateName == '同意' ? 'blue' : 'red', }"
                                        style="width: 18%;height: 23px;line-height: 23px;">
                                        {{ item.stateName }}</span>
                                    <span style="width: 38%;height: 23px;line-height: 23px;">{{ item.auditdate }}</span>
                                    <span
                                        style="word-break: break-all; white-space: normal;padding: 3px 0;line-height: 1.3;">{{
                                            item.auditMessage
                                        }}</span>
                                </div>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
    </div>
</template>

<script>
import baseDragBall from '@/components/base/baseDragBall'
import { contractChangeNote } from "@/api/apis/contract";
import { getAuditBtn, getAuditNote, audit, removeAudit, auditAddFlow, getAuditList, } from "@/api/apis/audit";
export default {
    name: 'contractAssistant',
    components: { baseDragBall, },
    props: {
        billID: {
            type: String,
            required: "",
        },
        billStateName: {
            type: String,
            required: "",
        },
    },

    data() {
        return {
            imgUrlGif: require('@/assets/audit/机器人.gif'),
            show: true,
            gifState: 'fail', // 状态的变化
            dialogVisible: false,
            arr1: '',
            arr2: '-1',
            arr3: '-1',
            arr4: '-1',
            arr5: '-1',
            arr6: '-1',
            activeNames: ['1'],
            active: '',
            assistantState: false,
            changeNote: [],
            randomRgb(item) {
                let colorList = [
                    "#1478F6", "#F7870A", "#0EDE2D",
                ]
                let index = Math.floor(Math.random() * colorList.length)
                return {
                    backgroundColor: colorList[index]
                };
            },
            stepList: [],//审批流程
            stepnum: "",
            auditNote: [],//审批记录
            list: [{
                date: '2016-05-02',
                code: '23232322323',
                num: '1000'
            }, {
                date: '2016-05-04',
                code: '124141414',
                num: '24444'
            }, {
                date: '2016-05-01',
                code: '15151313515',
                num: '10000'
            },],
        };
    },
    filters: {
        getDate(value) {
            if (!value) {
                return ''
            }
            return value.split('.')[0]
        },
    },
    watch: {
        // billStateName: {
        //     immediate: false,
        //     handler(val) {
        //         // console.log(val, "wa")
        //         if (val == "未提交") {
        //             this.contractChangeNote()
        //         } else {
        //             this.init()
        //         }
        //     },
        //     deep: true,
        // },
    },
    mounted() {
    },
    destroyed() {
        clearInterval(this.interval)
    },
    methods: {
        open() {
            this.assistantState = !this.assistantState
            if (this.assistantState == true) {
                this.init()
            }
            // console.log(this.assistantState)
        },
        close() {
            this.assistantState = false
        },
        init() {
            if (!this.billStateName) {
                return
            } else if (this.billStateName == "未提交") {
                this.contractChangeNote()
            } else {
                this.contractChangeNote()
                this.getAuditNote()
                this.getAuditList()
            }
        },
        //合同变更记录
        async contractChangeNote() {
            const res = await contractChangeNote({
                id: this.billID,

                // id: "3C685D5C-74FD-4DBB-BAFB-0499E7322570",
            });
            this.changeNote = res.data[1] || []
            // console.log(this.changeNote, "this.changeNote");
        },
        //获取单据审批记录
        async getAuditNote() {
            const res = await getAuditNote({
                billID: this.billID,
            });
            this.auditNote = res.data[0];
        },
        //获取单据审批流程
        async getAuditList() {
            const res = await getAuditList({
                billID: this.billID,
            });
            this.stepnum = res.data[0];
            let stepList = res.data[1];
            stepList.forEach((el) => {
                res.data[2].forEach((item) => {
                    if (el.step == item.step) {
                        if (!el.list) {
                            el.list = [];
                        }
                        el.list.push(item);
                        el.list = Array.from(new Set(el.list));
                    }
                });
                res.data[3].forEach((item) => {
                    if (el.step == item.step) {
                        if (!el.list) {
                            el.list = [];
                        }
                        el.list.push(item);
                        el.list = Array.from(new Set(el.list));
                    }
                });
            });
            this.stepList = stepList;
            // console.log(this.stepList);
        },
        handleChange(val, index) {
            this.arr1 = val.indexOf("1");
            this.arr2 = val.indexOf("2");
            this.arr3 = val.indexOf("3");
            this.arr4 = val.indexOf("4");
            this.arr5 = val.indexOf("5");
            this.arr6 = val.indexOf("6");
        },
        toHistory() { // 点击组件调用的方法
            this.$router.push('/history')
        },
    }
}
</script>

<style lang="scss" scoped>
.list {
    width: 100%;
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    background: #fafafa;
    margin-bottom: 8px;
    padding: 0 8px;
}

.assistant {
    border-radius: 5px;

    .imgBox {
        width: 90px;
        height: 90px;
        position: fixed;
        right: 10px;
        bottom: 50%;
        z-index: 1000;

        img {
            width: 90px;
            height: 90px;
        }

        // img:hover {
        //     box-shadow: 0 8px 16px 0 rgba(86, 97, 113, 0.268);
        //     background-color: #e8e8e853;
        //     transform: translate(0, -5px);
        //     transition-delay: 0s !important;
        // }
    }

    .assistant-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 380px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        background: #FFFFFF;

        // border-bottom: 1px solid bac2d444;
        .el-icon-s-unfold {
            cursor: pointer;
        }
    }

    .assistant-bottom {
        margin-top: 10px;

        .assistantBox {
            background-color: white;
            border-radius: 3px;
            overflow-y: auto;
            height: calc(100vh - 240px);

            .title_box {
                width: 100%;
                font-size: 15px;
                color: #000;
                padding-left: 8px;
                text-align: left;

                .operate {
                    font-size: 14px;
                    color: #409eff;
                }
            }

            .content {
                width: 100%;
                background: #fafafa;
                margin-bottom: 8px;
                padding: 0 8px;
                border-radius: 4px;

                .content_item {
                    width: 44px;
                    height: 44px;
                    background: #1478F6;
                    border-radius: 8px;
                    text-align: center;
                    line-height: 44px;
                    color: #ffffff;
                    font-weight: 500;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-size: 17px;
                }
            }
        }
    }
}

.auditNote {

    display: flex;
    flex-wrap: wrap;
    place-content: space-around space-between;
    margin-bottom: 8px;
    background: rgba(192, 196, 204, 0.1);
    font-size: 13px;
    // height: 60px;
    padding: 10px 15px 5px 15px;
    border-radius: 5px;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.auditWork {
    width: 100%;
    // height: calc(100vh - 250px);
    overflow-y: auto;
    background: #fafafa;
    border-radius: 8px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .auditWork_left {
        width: 7%;
        text-align: center;

        .auditWork_left_image {
            width: 24px;
            height: 24px;
            line-height: 24px;
            border-radius: 50%;
            text-align: center;
            z-index: 10;
        }

        .auditWork_left_line {
            background-color: #c0c4cc;
            width: 2px;
            height: 100%;
            margin: 0 auto;
        }
    }

    .auditWork_right {
        width: 93%;

        .auditWork_right_title {
            font-size: 16px;
            margin-left: 10px;
            font-weight: 600;
            font-family: PingFangSC-Semibold, PingFang SC;
        }

        .auditWork_right_content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            align-items: center;
            padding: 5px 10px;
            font-size: 12px;

            .img {
                margin-top: 6px;
                margin-right: 6px;
            }
        }
    }

    .left {
        background: #dcdcdc;
    }

    .right {
        background: #333333bb;
    }

    .on {
        background: #2a6aff;
    }

    .color1 {
        width: 80%;
        line-height: 24px;
        height: 24px;
        font-family: PingFangSC;
        color: #999999;


    }

    .color2 {
        font-family: PingFangSC;
        color: #1642c3;
    }

    .color3 {
        width: 50%;
        height: 24px;
        line-height: 24px;
        font-family: PingFangSC;
        color: #333333d9;
        font-weight: 600;
    }
}

::v-deep .el-collapse-item {
    // border-bottom: 10px solid #f2f2f2;
    padding: 0 10px;
}

::v-deep .el-collapse-item__header {
    height: auto;
    line-height: normal;
    padding: 15px 0;
}

::v-deep .el-collapse-item__arrow {
    font-size: 15px;
    color: #409eff;
}

::v-deep .el-step__icon {
    font-size: 13px;
    width: 18px;
    height: 18px;
}

::v-deep .el-step.is-vertical .el-step__line {
    top: 3px;
    bottom: -4PX;
    left: 9px;
}
</style>