<template>
    <van-popup v-if='innerShow' v-model:show='innerShow' position='right' :style="{ height: '100%', width: '100%' }">
        <div class='flex flex-col' style='height: 100vh'>
            <div class='p-3 text-black text-center shrink-0 doc-nav-bar'>
            <span @click='onBack' class='text-12 back-bt'>
                <doc-icon type='doc-left2' />
            </span>
                <span>查看内容</span>
            </div>

            <div class='grow overflow-y-auto pl-4 pr-4 pt-3 pb-3'>
<!--                {{fileType}}-->
                <div>
                    <div class='flex flex-col '>
                        <!-- 文本 -->
                        <div class='card' v-if='contentList?.length' @click.stop='selectFiletype(1)'>
                            <div class='flex justify-between items-center'>
                            <div class='font-semibold mb-1'>文本</div>
                            <van-checkbox-group v-model="fileType" shape="square"  icon-size="16px" >
                                <van-checkbox :name="1" @click.stop='()=> {}'></van-checkbox>
                            </van-checkbox-group>
                            </div>
                            <div class='conten-bg'>
                                <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> {{ item.templateContent }}</span>
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class='card mt-4' v-if='mp4List?.length' @click='selectFiletype(3)'>
                        <div class='flex justify-between items-center'>
                            <div class='font-semibold mb-1'>视频</div>
                            <van-checkbox-group v-model="fileType" shape="square"  icon-size="16px">
                                <van-checkbox :name="3" @click.stop='()=> {}'></van-checkbox>
                            </van-checkbox-group>
                        </div>
                        <div class='conten-bg'>
                            <Mp4 :files='mp4List' :activeMediaUrl='activeMediaUrl'
                                 @play='e => activeMediaUrl = e.annexUrl' />
                        </div>
                    </div>


                    <div class='card flex flex-col mt-4' style='row-gap: .06rem;' v-if='mp3List?.length' @click='selectFiletype(2)'>
                        <div class='flex justify-between items-center'>
                            <div class='font-semibold mb-1'>音频</div>
                            <van-checkbox-group v-model="fileType" shape="square"  icon-size="16px">
                                <van-checkbox :name="2" @click.stop='()=> {}'></van-checkbox>
                            </van-checkbox-group>
                        </div>
                        <div class='conten-bg'>
                            <Mp3 :file='item' v-for='item in mp3List' :key='item.annexId'
                                 :activeMediaUrl='activeMediaUrl'
                                 @play='e => activeMediaUrl = e.annexUrl' />
                        </div>
                    </div>
                </div>
            </div>

            <div class='bbtn'>
                <van-button type='primary' @click='toUse'>引用</van-button>
            </div>
        </div>
    </van-popup>
</template>

<script>
import { getTemplateDetail } from '@/api/doctor/workbench'
import Mp3 from '@/doctor/components/mediaPlay/Mp3.vue'
import Mp4 from '@/doctor/components/mediaPlay/Mp4.vue'

export default {
    name: 'temDetail',
    components: { Mp4, Mp3 },
    props: {
        show: { default: false },
        id: String
    },
    data() {
        return {
            info: {},
            activeMediaUrl: '',
            fileType: [1, 2, 3],
        }
    },
    computed: {
        innerShow() {
            return this.show
        },
        contentList() {
            return this.info.contentList
        },
        // 文件内容
        annexList() {
            return this.info?.annexList || []
        },
        mp3List() {
            return this.annexList.filter(e => e.type == 2)
        },
        mp4List() {
            return this.annexList.filter(e => e.type == 3)
        }
    },
    created() {
        this.load()
    },
    methods: {
        async load() {
            if (!this.id) {
                this.$message.info('未获取到信息')
                return
            }
            let par = {
                id: this.id
            }
            getTemplateDetail(par).then(res => {
                let result = res.data || {}
                this.info = result
            }).finally(() => {
            })
        },
        selectFiletype(val) {
            let index = this.fileType.findIndex(item => item == val)
            if (index >= 0) {
                this.fileType = this.fileType.filter(item => item != val)
            } else {
                this.fileType.push(val)
            }
        },
        toUse() {
            this.$emit('selectedInfo', this.id, this.fileType)
            this.onBack()
        },
        onBack() {
            this.$emit('closeDetail', false)
        }
    }
}
</script>

<style scoped lang='less'>
@import url('../../utils/common.less');
.bbtn {
    padding: 8px 12px;
    border-top: 1px solid #D7D8DA;

    button {
        width: 100%;
        border-radius: 100px
    }
}

.card {
    border: 1px solid #CFD5DE;
    padding: 8px;
    border-radius: 8px;
    color: #262626;
}

.conten-bg {
    background: #F8FAFC;
    padding: 6px 10px;
    border-radius: 4px;
}
</style>