<template>
    <div class="notify-mgt-container">
        <div class="notify-filter-wrap">
            <Input search v-model="keyword" :placeholder="$t('notify.search')" class="keyword-search light-iview-input" @on-change="searchNotice" />
            <span class="keyword-search">
                <Checkbox v-model="publish" @on-change="toggleNoticeStatus" :true-value="0" :false-value="1" style="margin-left:30px">
                    {{$t('notify.draft')}}
                </Checkbox>
            </span> <span class="icon-text-btn" @click="toCreateNotify">
                <Icon type="md-add" size="16" style="margin-right:2px" />
                {{$t('notify.toCreate')}}
            </span>
        </div>
        <div class="notify-list-wrap">
            <vuescroll>
                <div v-for="(item,index) in notifyListShow" :key="index" class="notify-item">
                    <Icon custom="iconfont icon-notify" class="nitify-icon" />
                    <div class="notify-info-wrap">
                        <h3 class="notify-title">
                            {{item.title}}
                            <span class="file-tag" style="background:#2db7f5" v-show="item.status == 'pending'">
                                {{$t('notify.pending')}}
                            </span>
                            <span class="file-tag" style="background:#ff9900" v-show="item.status == 'going'">
                                {{$t('notify.going')}}
                            </span>
                            <span class="file-tag" style="background:#19be6b" v-show="item.status == 'finish'">
                                {{$t('notify.finish')}}
                            </span>
                        </h3>
                        <p class="notify-time">
                            {{$t('notify.ntTime')}}
                            {{$jsFn.dateFormat(item.startTime)}}
                            —
                            {{$jsFn.dateFormat(item.endTime)}}
                        </p>
                    </div>
                    <div class="notify-action-wrap">
                        <Button type="warning" size="small" style="width:60px;" @click="delNotice(index)">
                            {{$t('notify.delete')}}
                        </Button>
                        <Button type="success" size="small" style="width:60px;margin-left:15px" @click="viewNotice(index)">
                            {{$t('notify.view')}}
                        </Button>
                        <Button type="primary" size="small" style="width:60px;margin-left:15px" @click="editNotice(index)">
                            {{$t('notify.edit')}}
                        </Button>
                    </div>
                </div>
                <EmptyData v-show="!notifyListShow.length" :textContent="$t('notify.noNotify')"></EmptyData>
            </vuescroll>
        </div>
        <Modal v-model="viewStatus" :title="notifyListShow[viewIndex] ? notifyListShow[viewIndex].title : ''" width="600">
            <template v-if="notifyListShow[viewIndex]">
                <!-- <h2 class="notice-title">{{notifyListShow[viewIndex].title}}</h2> -->
                <p class="notice-content" v-html="notifyListShow[viewIndex].content"></p>
            </template>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            keyword: '',
            notifyList: [],
            notifyListShow: [],
            viewIndex: 0,
            viewStatus: false,
            publish: 1
        }
    },
    methods: {
        editNotice(index) {
            this.$router.push({
                name: 'createNotify',
                params: {
                    notice: this.notifyListShow[index]
                }
            })
        },
        toggleNoticeStatus() {
            // this.publish = 1 - this.publish
            this.keyword = ''
            this.searchNotice()
        },
        searchNotice() {
            this.notifyListShow = this.notifyList.filter(item => {
                return (item.title.includes(this.keyword) || item.content.includes(this.keyword)) && item.publish == this.publish
            })
        },
        viewNotice(index) {
            this.viewIndex = index
            this.viewStatus = true
        },
        toCreateNotify() {
            this.$router.push({
                name: 'createNotify'
            })
        },
        findNotice() {
            let params = {
                admin: "1",
                code: this.$store.state.userInfo.schoolCode,
                type: "school"
            }
            this.$api.notice.FindNotice(params).then(
                res => {
                    let curTime = new Date().getTime()
                    res.notices.forEach(item => {
                        if (item.startTime > curTime) {
                            item.status = 'pending'
                        } else if (item.endTime < curTime) {
                            item.status = 'finish'
                        } else {
                            item.status = 'going'
                        }
                    })
                    this.notifyList = res.notices
                    this.notifyListShow = res.notices.filter(item => {
                        return item.publish == this.publish
                    })
                },
                err => {
                    this.$Message.error('API error!')
                }
            )
        },
        delNotice(index) {
            this.$Modal.confirm({
                title: this.$t('notify.delNotifyTitle'),
                content: `${this.$t('notify.delNotifyContent')}${this.notifyListShow[index].title}?`,
                okText: this.$t('notify.yes'),
                cancelText: this.$t('notify.no'),
                onOk: () => {
                    let params = {
                        id: this.notifyListShow[index].id,
                        code: this.notifyListShow[index].code.replace('Notice-', '')
                    }
                    this.$api.notice.DelNotice(params).then(
                        res => {
                            this.$Message.success(this.$t('notify.delOk'))
                            this.notifyListShow.splice(index, 1)
                        },
                        err => {
                            this.$Message.error(this.$t('notify.delErr'))
                        }
                    )
                }
            })
        }
    },
    created() {
        this.findNotice()
    }
}
</script>
<style lang="less" scoped>
@import "./NotifyMgt.less";
</style>