<template>

    <div class="policy-container">
        <vuescroll>
            <div class="policy-box">
                <Card :bordered="false" class="policy-card">
                    <p slot="title" style="color:#17233d;font-weight:600;font-size:15px">
                        <Icon custom="iconfont icon-policy" size="20" />
                        国家文件
                    </p>
                    <div class="policy-list-wrap">
                        <vuescroll>
                            <EmptyData textContent="暂无相关文件" v-show="!country.length"></EmptyData>
                            <ul>
                                <li v-for="(item,index) in country" :key="index" class="policy-info">
                                    <span>{{`【${item.type}】`}}</span>
                                    <a :href="item.link" target="_blank" class="policy-title">{{item.title}}</a>
                                    <span>{{item.time}}</span>
                                </li>
                            </ul>
                        </vuescroll>
                    </div>
                </Card>
                <Card :bordered="false" class="policy-card">
                    <p slot="title" style="color:#17233d;font-weight:600;font-size:15px">
                        <Icon custom="iconfont icon-policy" size="20" />省级文件
                    </p>
                    <div class="policy-list-wrap">
                        <vuescroll>
                            <EmptyData textContent="暂无相关文件" v-show="!province.length"></EmptyData>
                            <ul>
                                <li v-for="(item,index) in province" :key="index" class="policy-info">
                                    <span>{{`【${item.type}】`}}</span>
                                    <a :href="item.link" target="_blank" class="policy-title">{{item.title}}</a>
                                    <span>{{item.time}}</span>
                                </li>
                            </ul>
                        </vuescroll>
                    </div>
                </Card>
                <Card :bordered="false" class="policy-card">
                    <p slot="title" style="color:#17233d;font-weight:600;font-size:15px">
                        <Icon custom="iconfont icon-policy" size="20" />市级文件
                    </p>
                    <div class="policy-list-wrap">
                        <vuescroll>
                            <EmptyData textContent="暂无相关文件" v-show="!city.length"></EmptyData>
                            <ul>
                                <li v-for="(item,index) in city" :key="index" class="policy-info">
                                    <span>{{`【${item.type}】`}}</span>
                                    <a :href="item.link" target="_blank" class="policy-title">{{item.title}}</a>
                                    <span>{{item.time}}</span>
                                </li>
                            </ul>
                        </vuescroll>
                    </div>
                </Card>
                <Card :bordered="false" class="policy-card">
                    <p slot="title" style="color:#17233d;font-weight:600;font-size:15px">
                        <Icon custom="iconfont icon-policy" size="20" />解读课程
                    </p>
                    <div class="policy-list-wrap">
                        <vuescroll>
                            <EmptyData textContent="暂无相关课程" v-show="!course.length"></EmptyData>
                            <ul>
                                <li v-for="(item,index) in course" :key="index" class="policy-info">
                                    <span>{{`【解读课程】`}}</span>
                                    <a @click="previewVideo(index)" href="#" class="policy-title">{{item.title}}</a>
                                    <span>{{item.time}}</span>
                                </li>
                            </ul>
                        </vuescroll>
                    </div>
                </Card>
            </div>
        </vuescroll>
        <div v-show="previewStatus" class="image-viewer">
            <div style="width:fit-content;position:relative;margin:auto;">
                <Icon type="md-close" class="close-icon" @click="closePreview" />
                <video id="previewVideo" :src="videouUrl" width="870" controls="controls" style="max-height: 800px;" autoplay="autoplay">
                    {{$t('teachContent.tips8')}}
                </video>
            </div>
        </div>
    </div>
</template>
<script>
const courseData = require('@/static/course.json')
import jwtDecode from 'jwt-decode'
export default {
    data() {
        return {
            previewStatus: false,
            country: [],
            province: [],
            city: [],
            other: [],
            course: [],
            videouUrl: ''
        }
    },
    methods: {
        closePreview() {
            let myVideo = document.getElementById('previewVideo') // 获取视频video
            myVideo.pause()
            this.previewStatus = false
        },
        previewVideo(index) {
            this.videouUrl = this.course[index].link
            this.previewStatus = true
        }
    },
    created() {
        let allPolicy = require('@/static/policy.json')
        this.country = allPolicy.filter(item => {
            return item.type == '国家文件'
        })
        this.province = allPolicy.filter(item => {
            return item.type == '省级文件'
        })
        this.city = allPolicy.filter(item => {
            return item.type == '市州文件'
        })
        this.other = allPolicy.filter(item => {
            return item.type == '其他文件'
        })
        this.course = []
        this.course = this._.cloneDeep(courseData)
		let userProfile = JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8"))
        let sas = userProfile.osblob_sas
        let blobUrl = userProfile.osblob_uri
		let standard = jwtDecode(localStorage.getItem('auth_token')).standard
        this.course.forEach(item => {
            let url = `${blobUrl}/yxpt/${standard}${item.link}?${sas}`
            item.link = url
        })
    }
}
</script>
<style lang="less" scoped>
@import "./Policy.less";
</style>