<template>
    <div>
        <lj-win-index-common :title="title" api-name="GetL1MailSent" :showBack="false" :addable="false"
            :data-reset-callback="handleDataReset" :data-loaded-callback="handleDataLoaded"
            :query-hard-parms="queryHardParms" :query-fields="queryFields" :binding-parms="bindingParms" ref="baseWin">
            <template slot="header_right">
                <svg class="icon" aria-hidden="true" style="font-size:25px" onclick="$lj.openWin('email-edit')">
                    <use xlink:href="#icon-write-text"></use>
                </svg>
            </template>
            <lj-searchbar slot="header_sub" hint="搜索 标题/内容" v-model="bindingParms.keyword" @search="handleSearchbar"
                style="float:left;width:100%" />
            <div slot="body_list">
                <div v-for="item in allData" style="background-color:#ffffff;" >
                    <swipeout>
                        <swipeout-item transition-mode="follow">
                            <div slot="right-menu">
                                <swipeout-button @click.native="onButtonClick(item)" type="warn">删除
                                </swipeout-button>
                            </div>
                            <div slot="content" class="demo-content" @click="gotoDetail(item)">
                                <div style="font-size:18px">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-biaoti"></use>
                                    </svg>
                                    {{item.s_msgtitle}}
                                    <span style="font-size:15px;float:right">{{item.senddt | dateFilter}}</span>
                                </div>
                                <div>
                                    <span style="color:rgb(146, 143, 143)">收件人:</span><span style="color: black">{{item.Empname}}</span>
                                </div>
                                <div>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-youjian"></use>
                                    </svg>
                                    : <span style="color:rgb(146, 143, 143)">{{item.s_msg.replace(/<[^>]+>/g,"")}}</span>
                                </div>
                            </div>
                        </swipeout-item>
                    </swipeout>
                    <mu-divider></mu-divider>
                </div>
            </div>
        </lj-win-index-common>
    </div>
</template>

<script>
    import LjWinIndexCommon from "components/lj-win-index-common";
    import LjSearchbar from "components/lj-searchbar";
    import {
        Swipeout,
        SwipeoutItem,
        SwipeoutButton
    } from 'vux'
    export default {
        components: {
            LjWinIndexCommon,
            LjSearchbar,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton
        },
        data() {
            return {
                bindingParms: {
                    keyword: ""
                },
                allData: [],
                ExcutorName: "",
                sheetTitle: "",
                sheetRight: "",
                checkboxValue: [],
                queryHardParms: {},
                ifedit: false,
                openAlert: false,
                headerRight: '编辑',
                queryFields: [{
                    title: "标题/内容",
                    property: "keyword"
                }]
            }
        },
        methods: {
            handleDataReset(response) {
                this.allData = [];
                this.addList(response.MailAll);
            },
            handleDataLoaded(response) {
                let moreItems = response.MailAll;
                if (moreItems.length > 0) {
                    this.addList(moreItems);
                    return true;
                }
                return false;
            },
            handleSearchbar(text) {
                this.$refs.baseWin.refresh(Object.assign({
                    keyword: text
                }, this.queryHardParms));
            },
            addList(list) {
                this.allData = this.allData.concat(list);
            },
            EditMode() {
                this.ifedit = !this.ifedit
                if (this.ifedit) {
                    this.headerRight = '完成'
                } else {
                    this.headerRight = '编辑';
                    this.checkboxValue = []
                }
            },
            onButtonClick(item) {
                $lj.toast("待开发!");
            },
            selectAll() { //全选
                for (let i = 0; i < this.allData.length; i++) {
                    if (this.checkboxValue.indexOf(this.allData[i].msgid) == -1) {
                        this.checkboxValue.push(this.allData[i].msgid)
                    }
                }
            },
            selectNone() { //反选
                this.checkboxValue = []
            },
            gotoDetail(item) { //打开邮件或者多选
                if (this.ifedit == true) { //编辑状态
                    if (this.checkboxValue.indexOf(item.msgid) == -1) {
                        this.checkboxValue.push(item.msgid)
                    } else {
                        var index = this.checkboxValue.indexOf(item.msgid);
                        this.checkboxValue.splice(index, 1)
                    }
                } else {
                    $lj.openWin("email-detail", {
                        mainObject: item,
                        ifSent: true
                    });
                }
            },
            openDealFlag() {
                this.sheetTitle = "是否对选中邮件设置确认"
                this.sheetRight = "标记为已确认"
                this.ExcutorName = "DealMail"
                this.openAlert = true;
            },
            openReadFlag() {
                this.sheetTitle = "是否对选中邮件设置已读"
                this.sheetRight = "标记为已读"
                this.ExcutorName = "ReadMail"
                this.openAlert = true;
            },
            closeAlertDialog() {
                this.openAlert = false;
            },
            setFlag() { //设置Flag
                let self = this;
                let requestBody = {
                    token: $lj.getStorage("token"),
                    msgids: self.checkboxValue,
                };
                if (self.checkboxValue.length > 0) {
                    $lj.postLJRequest(this.ExcutorName, requestBody, function (ret) {
                        if (ret) {
                            $lj.toast("设置成功!");
                            self.openAlert = false;
                            window.location.reload();
                        }
                    })
                } else {
                    $lj.toast("没有选择任何邮件!");
                    this.openAlert = false;
                }
            },
        },
        computed: {
            title() {
                return "发件箱" + "(" + this.allData.length + ")";
            }
        }
    }
</script>

<style>
    .demo-content {
        padding: 6px 10px;
    }
</style>