<template>
    <div class='update-record'>
        <van-nav-bar title='说明书更新记录' left-arrow @click-left='backPage' />
        <van-dropdown-menu active-color='#1989fa'>
            <van-dropdown-item v-model='objtype' :options='option' @change='handleObjTypeChange' />
        </van-dropdown-menu>
        <div class='record'>
            <!-- 引入list,触底更新 -->
            <van-list class='record-list' v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
                <div class='info' v-for='(item,index) in list' :key='index'>
                    <div class='left'>
                        <div class='dot'></div>
                        <div class='line'></div>
                    </div>
                    <div class='right'>
                        <div class='title'>
                            <span class='date'>{{item[0].date}}</span>
                        </div>
                        <div class='content' v-for='(detail,dIndex) in item' :key='dIndex' @click='goToDetailInfo(detail)'>
                            <p class='type'>{{objtypeDict[detail.objtype]}}</p>
                            <p>{{detail.content}}</p>
                        </div>
                        <!-- <div class='content'>
                            <p class='type'>重要维修</p>
                            <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
                        </div>-->
                    </div>
                </div>
                <!-- <div class='m-load-more' v-show='!finished && list.length && list.length<=5 && page === 1' @click='onLoad'>加载更多</div> -->
            </van-list>
        </div>
    </div>
</template>
<script>
/**
 * 说明书更新记录
 */
import Vue from 'vue'
import { NavBar, DropdownMenu, DropdownItem, List } from 'vant'
Vue.use(NavBar)
Vue.use(DropdownMenu).use(DropdownItem)
Vue.use(List)
import { mapGetters } from 'vuex'
import { queryEventypes, getChangeList } from '@/api/overview'
import { querySelect } from '@/api/public'
import moment from 'moment'
import { flattenDeep } from 'lodash'
export default {
    name: 'UpdateRecord',
    props: {},
    components: {},
    data() {
        return {
            objtype: 0,
            option: [
                // { text: '全部', value: 0 },
                // { text: '重要维保', value: 1 },
                // { text: '重要维修', value: 4 },
                // { text: '其他事项', value: 5 },
                // { text: '综合事项', value: 3 },
            ],
            list: [],
            loading: false,
            finished: false,
            page: 1,
            size: 6,
            count: 0,
        }
    },
    computed: {
        ...mapGetters(['plazaId', 'objtypeDict']),
    },
    created() {
        // 查询更新记录列表
        this.getList()
        // 查询下拉菜单
        this.querySelect()
    },
    beforeMount() {},
    mounted() {},
    methods: {
        /**
         * 查询事件类型 下拉菜单
         */
        async querySelect() {
            let data = {
                    plazaId: this.plazaId,
                },
                postParams = [
                    {
                        tableName: 'rpt_change_record',
                        columnName: {
                            objtype: 'objtype',
                        },
                    },
                ]
            let resData = await queryEventypes({ data, postParams })
            let objtype = resData?.data?.data?.rpt_change_record?.objtype
            console.log('%c======', 'color:blue')
            console.log(objtype)
            objtype.map((item) => (item.text = this.objtypeDict[item.value]))
            let option = [{ text: '全部', value: 0 }, ...objtype]
            // 下拉菜单按照  重要维保、重要维修、其他事项、综合事项 排序
            let orderDict = {
                0: 0,
                1: 1,
                4: 2,
                5: 3,
                3: 4,
            }
            this.option = option.sort((a, b) => orderDict[a.value] - orderDict[b.value])
        },
        /**
         * 查询列表
         */
        async getList() {
            let getParams = {
                plazaId: this.plazaId,
                page: this.page,
                size: this.size,
                // TODO: 一年 改一个月
                changeDateStartDate: moment().subtract(1, 'years').format('YYYYMMDD000000'), //变更记录开始时间 格式yyyyMMddHHmiss 必填
                changeDateEndDate: moment().format('YYYYMMDD000000'), //变更记录结束时间 格式yyyyMMddHHmiss 必填
            }
            if (this.objtype !== 0) {
                getParams.objtype = this.objtype
            }
            let res = await getChangeList({ getParams })
            if (!res) {
                this.list = this.list.concat([])
                return false
            }
            this.count = res.count

            let listArr = res?.data || []
            // 处理时间
            listArr.map((item) => {
                item.date = moment(item.create_date_time).format('YYYY.MM.DD')
            })
            /**
             * 按照时间,构造二维数据
             */
            let list = [],
                __index = 0
            list[0] = [listArr[0]]
            listArr.map((item, index) => {
                if (index >= 1) {
                    if (item.date === list[__index][0].date) {
                        list[__index].push(item)
                    } else {
                        __index++
                        list[__index] = [item]
                    }
                }
            })
            // console.log(JSON.stringify(list, null, 2))
            // 第一页,直接设置list
            // debugger
            if (this.page === 1) {
                this.list = list
            } else {
                // 第二页之后
                // 将第一页,与第二页合并,并处理两页中时间一直的数据
                const { length } = this.list
                if (this.list[length - 1][0].date === list[0][0].date) {
                    this.list = [...this.list.slice(0, length - 1), flattenDeep([this.list.slice(-1).concat(list.slice(0, 1))]), ...list.slice(1)]
                } else {
                    this.list = this.list.concat(list)
                }
            }
            console.log(this.list)
            if (this.list.length === this.count) {
                this.loading = false
            }
        },
        handleObjTypeChange(data) {
            console.log(data)
            this.initData()
            this.getList()
        },
        /**
         * 更改下拉菜单,初始化数据
         */
        initData() {
            this.page = 1
            this.finished = false
            this.loading = false
            this.count = 0
            this.list = []
        },
        // 返回上一个页面(项目概况)
        backPage() {
            this.$router.go(-1)
        },
        /**
         * @param { Object } info 某一天更新记录的参数
         *  changedate: 1599646777000
            content: "消防系统-商业楼/3F/室内步行街/店铺/1-消防电系统/厨房自动灭火设备-1号-动火离人设施的增设或拆除-设备拆除"
            create_date_time: 1599688281000
            date: "2020.09.10"
            diff: "out"
            gname: "f3"
            id: 3357
            objid: "4932999"
            objtype: 4
            seq: "2"
            siteid: "1000423"
            smsxt: "1003"
         */
        goToDetailInfo(info) {
            console.log(info)
            this.$router.push({ name: 'UpdateRecordDetail', params: { info } })
        },
        /**
         * 同步延迟器
         * @param { Number } timeout 延迟时间,ms
         */
        async sleep(timeout) {
            await new Promise((resolve) => {
                setTimeout(() => {
                    resolve()
                }, timeout)
            })
        },
        async onLoad() {
            await this.sleep(1000)
            this.page++
            // 异步更新数据
            await this.getList()
            // 加载状态结束
            this.loading = false
            // 获取平铺后list的总条数
            const { length } = flattenDeep(this.list)
            // 查询完成
            if (length >= this.count) {
                this.finished = true
            }
            console.log(this.loading, this.finished)
        },
    },
}
</script>
<style lang='less' scoped>
.update-record {
    width: 100%;
    height: 100%;
    // background-color: lightblue;
    // 下拉菜单
    /deep/.van-dropdown-menu__item {
        justify-content: flex-start !important;
        padding-left: 8px;
    }
    // 主体内容
    .record {
        width: 100%;
        height: calc(100% - 95px);
        padding: 15px;
        background-color: #f5f6f7;
        overflow: auto;
        .record-list {
            width: 100%;
            height: 100%;
            .info {
                width: 100%;
                // TODO:
                // min-height: 103%;
                // min-height: 100px;
                // background-color: chartreuse;
                display: flex;
                .left {
                    width: 8px;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    .dot {
                        margin-top: 6px;
                        width: 8px;
                        height: 8px;
                        background-color: #025baa;
                        border-radius: 50%;
                    }
                    .line {
                        margin: 0 auto;
                        width: 2px;
                        flex: 1;
                        margin-top: 6px;
                        background: #dcdcdc;
                        // background-color: red;
                    }
                }
                .right {
                    flex: 1;
                    padding-left: 10px;
                    padding-bottom: 30px;
                    .title {
                        width: 100%;
                        height: 20px;
                        font-size: 14px;
                        font-weight: 400;
                        color: #666666;
                        .type {
                            margin-left: 15px;
                        }
                    }
                    .content {
                        width: 100%;
                        height: auto;
                        margin-top: 8px;
                        font-size: 14px;
                        font-weight: 400;
                        color: #333333;
                        line-height: 25px;
                        background-color: #fff;
                        padding: 12px 10px;
                        .type {
                            font-weight: 500;
                            color: #333333;
                        }
                    }
                }
            }
            // 加载更多
            .m-load-more {
                width: 100%;
                height: 20px;
                line-height: 20px;
                margin-top: 20px;
                font-size: 14px;
                text-align: center;
            }
        }
    }
}
</style>