<template>
    <div class='comprehensive-matter-list'>
        <van-nav-bar :title='title' left-arrow @click-left='backPage' />
        <div class='main' v-show='!noData'>
            <van-list class='matters-list' v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load>
                <div class='card' v-for='(item,index) in list' :key='index'>
                    <div class='date-attachment'>
                        <div class='date'>
                            <span class='label'>日期:</span>
                            <span class='data'>{{item.date}}</span>
                        </div>
                        <div class='attachment' @click='showImg(item)'>
                            <span class='label'>附件:</span>
                            <span class='data'>{{item.attachmentCount}}</span>
                        </div>
                    </div>
                    <div class='record'>
                        <span class='label'>记录事项:</span>
                        <!-- 该条的showMore为true或者undefined,数据最多显示3行 -->
                        <div class='data' :class='item.showMore || item.showMore === undefined ?"van-multi-ellipsis--l3":"" '>{{item.recordsx ||'--'}}</div>
                    </div>
                    <div class='work' v-if='item.showMore === false'>
                        <span class='label'>工作要求:</span>
                        <div class='data'>{{item.workyq ||'--'}}</div>
                    </div>
                    <div class='matter' v-if='item.showMore === false'>
                        <span class='label'>整改事项:</span>
                        <div class='data'>{{item.zgyq || '--'}}</div>
                    </div>
                    <div class='show-more' v-if='item.showMore || item.showMore === undefined ' @click='changeStatus(item,false)'>
                        <i class='iconfont wanda-zhankai'></i>
                        <span>展开</span>
                    </div>
                    <div class='show-less' v-else @click='changeStatus(item,true)'>
                        <!-- TODO: 收起 箭头 -->
                        <i class='iconfont wanda-shouqi'></i>
                        <span>收起</span>
                    </div>
                </div>
            </van-list>
        </div>
        <div class='main' v-show='noData'>
            <van-empty description='暂无数据' />
        </div>
        <!-- 现场照片预览 -->
        <ImagePreview :key='imgKey' class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
    </div>
</template>
<script>
/**
 * 综合事项,政府/其他部门 列表页面
 */
import Vue from 'vue'
import { NavBar, List } from 'vant'
Vue.use(NavBar).use(List)
import { queryDetailList } from '@/api/other'
import { mapGetters } from 'vuex'
import moment from 'moment'
import ImagePreview from '@/components/ImagePreview'
export default {
    name: 'ComprehensiveMatterList',
    props: {},
    components: { ImagePreview },
    data() {
        return {
            // 列表数据
            list: [
                // { index: 0, date: '2020-08-20', id: 1 },
                // { index: 1, date: '2020-08-20', id: 2 },
                // { index: 2, date: '2020-08-20', id: 3 },
                // { index: 3, date: '2020-08-20', id: 4 },
            ],
            // 点击条的信息
            currentInfo: {
                showMore: true,
            },
            loading: false, // list加载中
            finished: true, //list组件,加载完成
            page: 1, //页码
            size: 5, //分页条数
            count: 0, //总条数
            title: '',
            params: {}, //跳转改页面时,路由传参
            showImgPreview: false, //是否展示图片预览
            imgList: [], //图片数组
            imgKey: `img${new Date().getTime()}`, //重新渲染图片预览组件使用
            noData: false,
        }
    },

    computed: {
        ...mapGetters(['plazaId']),
    },
    created() {
        console.log(this.$route.params)
        let { type, department, otherdescription, size, startDate, endDate } = this.$route.params
        this.size = size
        if (type === 1) {
            this.params = { department, startDate, endDate }
            this.title = department
        } else {
            this.params = { department, otherdescription, startDate, endDate }
            this.title = '其他部门'
        }
        this.getList()
    },
    beforeMount() {},
    mounted() {},
    methods: {
        // 返回上一个页面
        backPage() {
            this.$router.go(-1)
        },
        /**
         * 切换 展开,收起
         */
        changeStatus(item, showMore) {
            this.currentInfo = item
            this.$set(this.currentInfo, 'showMore', showMore)
        },
        async getList() {
            let params = this.params
            let getParams = {
                ...params,
                plazaId: this.plazaId,
                page: this.page,
                size: this.size,
                orderBy: 'createdate,0',
            }
            let res = await queryDetailList({ getParams })
            if (!res?.data) {
                return false
            }
            let data = res.data
            data.map((item) => {
                item.date = moment(item.createdate).format('YYYY-MM-DD')
                item.attachmentCount = item.glsmsZhsxfj ? item.glsmsZhsxfj.length : '--'
            })
            this.list = data
            if (!this.list.length) {
                this.noData = true
            } else {
                this.noData = false
            }
        },
        /**
         * 预览图片
         */
        showImg(data) {
            if (!data.attachmentCount) {
                return false
            }
            let imgList = []
            data.glsmsZhsxfj.map((attachment) => {
                imgList.push(attachment.urlname)
            })
            this.imgList = imgList
            imgList.length && (this.showImgPreview = true)
        },
        async onLoad() {},
    },
}
</script>
<style lang='less' scoped>
.comprehensive-matter-list {
    width: 100%;
    height: 100%;
    background-color: #f5f6f7;
    .main {
        width: 100%;
        height: calc(100% - 50px);
        // overflow: auto;
        .matters-list {
            width: 100%;
            height: 100%;
            overflow: auto;
            .card {
                width: 100%;
                padding: 15px;
                background-color: #fff;
                margin-bottom: 10px;
                .date-attachment,
                .record,
                .work,
                .matter {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    line-height: 20px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #666666;
                    margin-bottom: 12px;
                    .label {
                        width: 70px;
                    }
                    .data {
                        flex: 1;
                        color: #333;
                    }
                }
                // 日期,附件
                .date-attachment {
                    .label {
                        // margin-right: 10px;
                        display: inline-block;
                        width: 45px;
                    }
                    .attachment {
                        color: #025baa;
                        .data {
                            color: #025baa;
                        }
                    }
                }
                .show-more,
                .show-less {
                    margin: 0 auto;
                    width: 72px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    background: #e5eef6;
                    border-radius: 2px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 400;
                    color: #025baa;
                    font-size: 14px;
                    border-radius: 3px;
                    i {
                        position: relative;
                        top: 2px;
                        width: 20px;
                    }
                    span {
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>