<template>
    <div class="edit-view">
        <div class="title">{{ formData.title }}</div>
        <div class="time">发布时间：{{ formData.createdAt }}</div>
        <div style="min-height: 400px">
            <div class="content" v-html="formData.content"></div>
            <div v-if="formData.annexes" style="padding: 20px 50px">
                <div class="file-list-item" v-for="(file, index) in formData.annexes" :key="index">
                    <div class="file-name">
                        <i class="status-icon el-icon-circle-check success"></i>

                        {{ file.name }}
                        <i class="opt">
                            <i class="opt-icon el-icon-search" v-if="isImage(file)" @click="preview(file)"></i>
                            <i class="opt-icon el-icon-search" v-if="isPdf(file)" @click="previewPdf(file)"></i>
                            <i class="opt-icon el-icon-search" v-if="isDoc(file)" @click="previewDoc(file)"></i>
                            <i class="opt-icon el-icon-download" @click="download(file)"></i>
                        </i>
                    </div>
                    <el-progress
                        v-if="file.status === 'uploading'"
                        :percentage="file.percentage"
                        :show-text="false"
                        :stroke-width="2"
                        class="upload-progress"
                    ></el-progress>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'AnnouncementEdit',
    created() {
        if (this.$route.query.id) {
            this.$http
                .get('announcement/get/' + this.$route.query.id)
                .then(res => {
                    this.formData = res;
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
    },
    data() {
        return {
            saving: false,
            formData: {},
            rules: {}
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.formData };

            this.saving = true;
            this.$http
                .post('/announcement/save', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/announcement/del/${this.formData.id}`);
                })
                .then(() => {
                    this.$message.success('删除成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    if (e !== 'cancel') {
                        console.log(e);
                        this.$message.error((e || {}).error || '删除失败');
                    }
                });
        },
        download(file) {
            window.open(file.url, '_blank');
        },
        preview(file) {
            this.previewUrl = file.url;
            this.$nextTick(() => {
                this.$refs.preview.clickHandler();
            });
        },
        previewDoc(file) {
            window.open('https://view.officeapps.live.com/op/view.aspx?src=' + file.url, '_blank');
        },
        previewPdf(file) {
            window.open(this.$baseUrl + '/pdf/web/viewer.html?file=' + file.url, '_blank');
        },
        isImage(file) {
            return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file.url);
        },
        isPdf(file) {
            return /\.(pdf)$/i.test(file.url);
        },
        isDoc(file) {
            return /\.(docx|doc)$/i.test(file.url);
        }
    }
};
</script>
<style lang="less" scoped>
.title {
    font-size: 24px;
    text-align: center;
    padding: 20px;
    font-weight: bold;
}
.time {
    font-size: 12px;
    text-align: right;
    margin-right: 50px;
    padding: 10px;
}

.content {
    padding: 20px 50px;
    // min-height: 500px;
}
.file-list-item {
    font-size: 14px;
    color: #2f2f31;
    line-height: 1.8;
    margin-top: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    .file-name {
        padding: 0 20px 0 20px;
    }
    .upload-progress {
        margin-top: 2px;
        position: absolute;
        bottom: 0;
        left: 20px;
        right: 0;
        width: auto;
    }
    .danger {
        color: #f56c6c;
    }
    .success {
        color: #67c23a;
    }
    .status-icon {
        position: absolute;
        left: 0;
        top: 0;
        line-height: inherit;
    }
    .opt {
        // position: absolute;
        right: 0;
        top: 0;
        line-height: inherit;
        .opt-icon {
            margin-left: 15px;
            transition: color 0.3s;
            &:hover {
                color: #409eff;
            }
        }
    }
}
</style>
