<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="管理制度">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click="jumpBack()"></mt-button>
            </router-link>
        </mt-header>
        <div class="detail_body">
            <div class="title">{{detail.title}}</div>
            <div class="indate">{{detail.indate}}</div>
            <div class="content">{{detail.content}}</div>
            <div class="file">本文附件</div>
            <div class="fileList">
                <div class="one_file" v-for="item in detail.institutionFiles" v-on:click="downLoadFile(item.url)">
                    <div>{{item.name}}</div>
                    <img  src="../../assets/image/downLoad.png">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                id: this.$route.params.id,
                user: JSON.parse(sessionStorage.getItem("user")),
                detail: "",
			}
		},
		methods: {
            // 消息列表
            getDetail() {
                this.$indicator.open();
                this.http.post(this.port.my.insDetail, {
                    'id': this.id
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.detail = res.data;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            downLoadFile(url) {
                // var iframe = document.createElement('iframe');
                // iframe.style.display = 'none';
                // iframe.src = "javascript: '<script>location.href=\"" + url + "\"<\/script>'";
                // document.getElementsByTagName('body')[0].appendChild(iframe);

                var form = document.createElement('form');
                form.action = url;
                document.getElementsByTagName('body')[0].appendChild(form);
                form.submit();

                // var dtask = plus.downloader.createDownload(url);
                // dtask.addEventListener("statechanged", onStateChanged, false);
                // dtask.start(); 
            },

            jumpBack() {
                this.$router.go(-1);
            }
        },
        created() {
            this.getDetail();
        },
		mounted() {
            
		}
	}

</script>

<style scoped>
    body {
        background: #fff;
    }
    
    .detail {
        background: #fff;
    }

    .detail_head {
        background: #fff;
        color: #333;
        height: 0.4rem;
    }

    .detail_body {
        margin-top: 0.4rem;
        padding: 0.08rem 0.2rem;
    }

    .detail_body .title {
        font-weight: 500;
        font-size: 0.16rem;
        line-height: 0.25rem;
    }

    .detail_body .indate {
        color: #999;
        margin: 0.12rem 0 0.12rem 0;
    }

    .detail_body .content {
        color: #444;
        line-height: 0.2rem;
        /* text-indent: 2em; */
        padding: 0 0 0.3rem 0;
        border-bottom: 1px solid #ddd;
    }

    .detail_body .file {
        margin: 0.12rem 0 0.08rem 0;
    }

    .detail_body .one_file {
        padding: 0.12rem 0.04rem;
    }

    .detail_body .one_file div {
        display: inline-block;
        vertical-align: middle;
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 0.14rem;
        color: #333;
    }

    .detail_body .one_file img {
        width: 0.15rem;
        float: right;
        vertical-align: middle;
    }

    .noList {
        text-align: center;
        padding: 1.5rem 0;
    }

    .noList img {
        width: 1.2rem;
        height: 1.2rem;
    }
</style>