<template>
    <div class="flex flex-col" style="height: 100vh">
        <div class="p-3 text-black text-center shrink-0 doc-nav-bar" v-if='showNav()'>
            <span @click="onBack" class="text-12 back-bt">
                <doc-icon type="doc-left2" />
            </span>
            <span>指导详情</span>
        </div>

        <div class="px-4 py-3 flex shrink-0 base-info">
            <div class="flex w-full flex-wrap">
                <div class="item">
                    <span>指导单位：</span>
                    <span>{{ info.visitUnitName || '-' }}</span>
                </div>
                <div class="item">
                    <span>指导科室：</span>
                    <span>{{ info.visitOfficeName || '-' }}</span>
                </div>
                <div class="item">
                    <span>指导日期：</span>
                    <span>{{ info.visitDate || '-' }}</span>
                </div>
            </div>
        </div>
        <div class="p-3 grow cont-box">
            <div class="p-3 h-full cont-inner">
                <div class="flex justify-between collapse-head mt-2">
                    <span class="text-16 font-semibold">全部内容</span>
                    <!-- <span @click="toggleAll">
                        <span v-if="!collapseAll">展开全部</span>
                        <span v-else>展开收起</span>
                        <span :class="['ml-2 icon-down', { 'icon-down-expanded': collapseAll }]">
                            <doc-icon type="doc-down" />
                        </span>
                    </span> -->
                </div>
                <div>
                    <div class="my-2" style="color: #262626">指导内容</div>
                    <div v-if="contentList.length" class="flex flex-col card">
                        <!-- 文本 -->
                        <div v-for="item in contentList" :key="item.templateMode" class="mb-1 flex"
                            :style="`order: ${item.templateMode}`">
                            <span class="shrink-0 mr-1" v-if="item.templateModeTrans != '无'">{{ item.templateModeTrans }} :</span>
                            <span style="white-space: pre-wrap;">{{item.templateContent}}</span>
                        </div>
                    </div>
                    <div v-if="mp4List.length" class="card mt-2">
                        <Mp4 :files="mp4List"/>
                    </div>
                    <div v-if="mp3List.length" class="card flex flex-col mt-2" style="row-gap: .06rem;">
                        <Mp3 :file="item" v-for="item in mp3List" :key="item.annexId"/>
                    </div>
                </div>

                <!-- <van-collapse v-model="activeCollapse" ref="collapse" class="doc-collapse"
                    @change="collapseChange">
                    <van-collapse-item v-for="collapse in collapseList" :key="collapse.name"
                        :title="collapse.title" :name="collapse.name">
                        <template #right-icon>
                            <doc-icon type="doc-down" />
                        </template>
                        
                    </van-collapse-item>
                </van-collapse> -->
            </div>
        </div>
    </div>
</template>

<script>
import { showNotify } from 'vant'
import { queryGuideDetail } from '@/api/residentWX/guide.js'
import { useStore } from '@/residentWX/store'
import Mp3 from '../components/mediaPlay/Mp3.vue'
import Mp4 from '../components/mediaPlay/Mp4.vue'

export default {
    components: {
        Mp3,
        Mp4
    },
    inject:['showNav'],
    data() {
        return {
            store: useStore(),
            activeCollapse: [],
            collapseList: [
                { title: '生活方式指导', name: '1' }
            ],
            // 全部展开、收起
            collapseAll: false,
            info: {}
        }
    },
    computed: {
        id() {
            return this.$route.params.id
        },
        userInfo() {
            return this.store.userInfo
        },
        // 文本内容
        contentList() {
            return this.info?.guide?.contentList || []
        },
        // 文件内容
        annexList() {
            return this.info?.publicize?.annexList || []
        },
        mp3List() {
            return this.annexList.filter(e => e.type == 2)
        },
        mp4List() {
            return this.annexList.filter(e => e.type == 3)
        }
    },
    created() {
        document.title = '指导详情'
        if (!this.id) {
            showNotify({ type: 'warning', message: '未获取到查询信息' })
            return
        }
        this.init()
    },
    methods: {
        init() {
            queryGuideDetail(this.id).then(res => {
                this.info = res.data || {}
            })
        },
        // 折叠面板切换
        collapseChange(val) {
            if (val && val.length === this.collapseList.length) {
                this.collapseAll = true
            } else {
                this.collapseAll = false
            }
        },
        // 全部展开、收起
        toggleAll() {
            if (this.collapseAll) {
                this.activeCollapse = []
            } else {
                this.activeCollapse = this.collapseList.map(e => e.name)
            }
            this.collapseAll = !this.collapseAll
        },
        onBack() {
            this.$router.back()
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../utils/common.less');

.base-info {
    background: linear-gradient(to bottom, #DFF5F4 , #fff 50%);
    >div {
        column-gap: 16px;
        row-gap: 8px;
    }
    .item {
        margin-bottom: 2px;
        >span:nth-child(1) {
            color: #8C8C8C;
        }
    }
}

.cont-box {
    background-color: #f9f9f9;
    .cont-inner {
        background: linear-gradient(to bottom, #DFF5F4 , #fff .6rem);
        border-top-left-radius: .08rem;
        border-top-right-radius: .08rem;
    }
}

.collapse-head {
    .icon-down {
        vertical-align: middle;
        font-size: .12rem;
        .svg-icon {
            transition: all .2s;
        }
    }
    .icon-down-expanded {
        .svg-icon {
            transform: rotate(-180deg);
        }
    }
}
.card {
    background-color: #F8FAFC;
    padding: 4px 10px;
    border-radius: 4px;
    color: #4D5665;
}
textarea {
    height: 100%;
    width: 100%;
    border: 0;
    resize: none;
}
</style>