<template>
    <div>
        <lj-win-index-common-tab :title="title"
                         api-name="GetL1MailAll"
                         :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_left">
                <mu-button icon onclick="$lj.openWin('email-sent')" style="font-size:20px">发</mu-button>
            </template>
            <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:75%"/>
            <mu-button flat color="primary" slot="header_sub" style="float:right;width:8%;font-size:16px;margin-top:5px" @click="EditMode">{{headerRight}}</mu-button>
            <div slot="body_list" style="margin-top:40px">
                <mu-list v-for="item in allData" style="background-color:#ffffff;">
                    <mu-list-item :ripple="false" button style="padding: 10px 0 10px 0;">
                        <div v-if="ifedit" style="width:10%;"><mu-checkbox :value="item.msgid" v-model="checkboxValue"></mu-checkbox></div>
                        <mu-list-item-action style="width:5%">
                            <mu-avatar size="40">
                                {{item.sendemp.substring(item.sendemp.length - 1, item.sendemp.length)}}
                            </mu-avatar>
                        </mu-list-item-action>
                        <mu-list-item-content style="width:100%" @click="gotoDetail(item)">
                            <mu-list-item-title>
                                <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>
                            </mu-list-item-title>
                            <mu-list-item-sub-title>
                                发件人:<span style="color: black">{{item.sendemp}}</span>
                                <span style="font-size:15px;float:right" v-if="item.dealflag==0"><mu-badge content="待确认" color="primary"></mu-badge></span>
                            </mu-list-item-sub-title>
                            <mu-list-item-sub-title>
                                <svg class="icon" aria-hidden="true" >
                                    <use xlink:href="#icon-youjian"></use>
                                </svg>
                                : {{item.s_msg.replace(/<[^>]+>/g,"")}}
                            </mu-list-item-sub-title>
                            <mu-divider style="margin-top:5px"></mu-divider>
                        </mu-list-item-content>
                    </mu-list-item> 
                </mu-list>
            </div>
            <div slot="footer" v-if="ifedit" v-bind:style="footerClass">
                <mu-row style="text-align:center">
                    <mu-col span="2" style="text-align:center;color:#2196f3;padding:5px;"  @click="selectAll">全选</mu-col>
                    <mu-col span="2" style="text-align:center;color:#2196f3;padding:5px;"  @click="selectNone">反选</mu-col>
                    <mu-col span="3" style="text-align:center;color:#2196f3;padding:5px;"  @click="openReadFlag">设置已读</mu-col>
                    <mu-col span="3" style="text-align:center;color:#2196f3;padding:5px;"  @click="openDealFlag">设置确认</mu-col>
                    <mu-col span="2" style="text-align:center;color:red;padding:5px;" onclick="$lj.toast('待商量开发!')">删除</mu-col>
                </mu-row>
                <mu-bottom-sheet :open.sync="openAlert">
                    <mu-list>
                        <mu-sub-header style="text-align:center">{{sheetTitle}}</mu-sub-header>
                        <mu-list-item button @click="setFlag">
                            <mu-list-item-title style="text-align:center;color:#2196f3">{{sheetRight}}</mu-list-item-title>
                        </mu-list-item>
                        <mu-divider></mu-divider>
                        <mu-list-item button @click="closeAlertDialog">
                            <mu-list-item-title style="text-align:center;color:red">取消</mu-list-item-title>
                        </mu-list-item>
                    </mu-list>
                </mu-bottom-sheet>
            </div>
        </lj-win-index-common-tab>
    </div>
</template>

<script>
    import LjWinIndexCommonTab from "components/lj-win-index-common-tab";
    import LjSearchbar from "components/lj-searchbar";

    export default {
        components: {
            LjWinIndexCommonTab,
            LjSearchbar,
        },
        data() {
            return {
                bindingParms: {keyword: ""},
                allData: [],
                ExcutorName:"",
                sheetTitle:"",
                sheetRight:"",
                checkboxValue:[],
                queryHardParms: {},
                footerClass: {
                    bottom: "0"
                },
                ifedit:false,
                openAlert: false,
                headerRight:'编辑',
                queryFields: [
                    {
                        title: "只显示待确认消息",
                        property:"dealflag",
                        type: "checkbox",
                        valueMap: ["-1", "0"]
                    },
                    {title: "发件人/标题/内容", property: "keyword"}
                ]
            }
        },
        created() {
            this.initStyle();
        },
        methods:{
            refresh(){
                this.$refs.baseWin.refresh(this.queryHardParms);
            },
            initStyle(){
                let footerHeight = 41 + api.safeArea.top;
                if (api.systemType === "ios") {
                    footerHeight += api.safeArea.bottom
                }
                this.footerClass.marginBottom = footerHeight  + "px"
            },
            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 = []
                }
            },
            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});
                }
            },
            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;
                            self.checkboxValue = []
                            self.ifedit = false;
                            self.refresh();

                        }
                    })
                }else{
                    $lj.toast("没有选择任何邮件!");
                    this.openAlert = false;
                }
            },
        },
        computed: {
            title() {
                    return "收件箱" + "(" + this.allData.length+")";
            }
        }
    }
</script>

<style>

</style>