<template>
  <Card shadow>
    <div>
      <div class="message-page-con message-category-con">
        <Menu width="auto" active-name="unread">
          <MenuItem name="unread" @click.native="search">
            <span class="category-title">{{$t('99200020')}}</span><Badge style="margin-left: 10px"></Badge>
          </MenuItem>
          <MenuItem name="readed" @click.native="readedsearch">
            <span class="category-title">{{$t('99200021')}}</span><Badge style="margin-left: 10px" class-name="gray-dadge"></Badge>
          </MenuItem>
        </Menu>
      </div>

      <div class="message-page-con message-view-con">
        <div class="divborder">
          <Table
            highlight-row
            border
            @on-current-change="handleRowChange"
            :data="tableData1"
            :columns="tableColumns1"
             @on-selection-change="handleSelectRow"
          >
          </Table>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
              <Page
                :total="total"
                :current="page"
                @on-change="changePage"
                show-elevator
                show-sizer
                show-total
                @on-page-size-change="handlePageSize"
                :page-size-opts="[10,20,30,40,100]"
              ></Page>
            </div>
          </div>
      </div>

      </div>
    </div>
  </Card>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
const listDic = {
    unread: 'messageUnreadList',
    readed: 'messageReadedList',
    trash: 'messageTrashList'
}
export default {
    name: 'message_page',
    data () {
        return {
            listLoading: true,
            contentLoading: false,
            currentMessageType: 'unread',
            messageContent: '',
            showingMsgItem: {},
            page: 1,
            pagesize: 10,
            total: 0,
            tableData1: [],
            status: 0,
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t('1008'), // 序号
                    key: 'xuhao',
                    align: 'center',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    },
                    width: 80
                },
                {
                    title: this.$t(1026), // 工单号
                    align: 'center',
                    key: 'section'
                },
                {
                    title: this.$t('1950512'), // 设备
                    key: 'sendtime',
                    align: 'center'
                },
                {
                    title: this.$t('99200022'), // 失效模式
                    key: 'checkresult',
                    align: 'center'
                },
                {
                    title: this.$t('1950511'),
                    key: 'senduser',
                    width: 150,
                    align: 'center'
                },
                {
                    title: this.$t('1950492'), // 申请人
                    key: 'checkuser',
                    align: 'center'
                },

                {
                    title: this.$t('1950493'), // 申请时间
                    key: 'checktime',
                    align: 'center'
                }
            ] // 表头
        }
    },
    computed: {
    // ...mapState({
    //   messageUnreadList: state => state.user.messageUnreadList,
    //   messageReadedList: state => state.user.messageReadedList,
    //   messageTrashList: state => state.user.messageTrashList,
    //   messageList () {
    //     return this[listDic[this.currentMessageType]]
    //   },
    //   titleClass () {
    //     return {
    //       'not-unread-list': this.currentMessageType !== 'unread'
    //     }
    //   }
    // }),
    // ...mapGetters([
    //   'messageUnreadCount',
    //   'messageReadedCount',
    //   'messageTrashCount'
    // ]),

    },
    created () {
        this.search()
    },
    methods: {
    // ...mapMutations([
    //   //
    // ]),
    // ...mapActions([
    //   'getContentByMsgId',
    //   'getMessageList',
    //   'hasRead',
    //   'removeReaded',
    //   'restoreTrash'
    // ]),
        search () {
            this.status = 0
            this.page = 1
            this.getMessageLists(this.page, this.pagesize)
        },
        readedsearch () {
            this.status = 1
            this.page = 1
            this.getMessageLists(this.page, this.pagesize)
        },
        getMessageLists (page, pagesize) {
            var params = {
                status: this.status,
                page: page,
                pagesize: pagesize
            }
            this.axios.request({
                url: '/qms/CheckMessage/GetMessages',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1 && res.data.data.length > 0) {
                    let data = []
                    res.data.data.forEach(item => {
                        let str = '合格'
                        if (item.checkresult == 1) {
                            str = '合格'
                        } else if (item.checkresult == 2) {
                            str = '偏差放行'
                        } else if (item.checkresult == 3) {
                            str = '不合格'
                        }
                        data.push({
                            id: item.id,
                            section: item.section,
                            sendtime: item.sendtime,
                            senduser: item.senduser,
                            checkuser: item.checkuser,
                            checktime: item.checktime,
                            checkresult: str
                        })
                    })
                    this.getmessage_number()
                    this.total = res.data.total
                    this.tableData1 = data
                } else {
                    this.total = 0
                    this.tableData1 = []
                    // window_warning(this.$t(res.data.msg))
                }
            })
        },
        getmessage_number () {
            this.axios.request({
                url: '/qms/CheckMessage/GetMessageCount',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    // 全局变量
                    this.$root.UNReadMsgNum = res.data.data
                }
            })
        },
        stopLoading (name) {
            this[name] = false
        },
        changePage (value) {
            this.page = value
            this.getMessageLists(this.page, this.pagesize)
            // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
            // this.search(this.page, this.pagesize)
        },
        handleSelect (name) {
            this.currentMessageType = name
        },
        handlePageSize (value) {
            this.pagesize = value
            this.getMessageLists(this.page, this.pagesize)
        },
        handleRowChange (currentRow, oldCurrentRow) { // 点击之后将某一行的数据添加到obj的对象中
            this.obj = currentRow
            if (this.status == 0) {
                this.toreadmsg(this.obj.id)
                this.search()
            }
        },
        toreadmsg (id) {
            var params = {
                id: id
            }
            this.axios.request({
                url: '/qms/CheckMessage/ReadMessage',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.getMessageLists(this.page, this.pagesize)
                } else {
                    // window_warning(this.$t(res.data.msg))
                }
            })
        },
        handleSelectRow: function (data) {
            var ids = []
            for (var i in data) {
                ids.push(data[i].id)
            }
            this.selectids = ids.join(',')
        },
        handleView (msg_id) {
            this.contentLoading = true
            this.getContentByMsgId({ msg_id }).then(content => {
                this.messageContent = content
                const item = this.messageList.find(item => item.msg_id === msg_id)
                if (item) this.showingMsgItem = item
                if (this.currentMessageType === 'unread') this.hasRead({ msg_id })
                this.stopLoading('contentLoading')
            }).catch(() => {
                this.stopLoading('contentLoading')
            })
        },
        removeMsg (item) {
            item.loading = true
            const msg_id = item.msg_id
            if (this.currentMessageType === 'readed') this.removeReaded({ msg_id })
            else this.restoreTrash({ msg_id })
        }

    },
    mounted () {
        this.listLoading = true
        this.search()
    // 请求获取消息列表
    // this.getMessageList().then(() => this.stopLoading('listLoading')).catch(() => this.stopLoading('listLoading'))
    }
}
</script>

<style lang="less">
.message-page{
  &-con{
    height: ~"calc(100vh - 176px)";
    display: inline-block;
    vertical-align: top;
    position: relative;
    &.message-category-con{
      border-right: 1px solid #e6e6e6;
      width: 200px;
    }
    &.message-list-con{
      border-right: 1px solid #e6e6e6;
      width: 230px;
    }
    &.message-view-con{
      position: absolute;
      // left: 446px;
      left:220px;
      top: 16px;
      right: 16px;
      bottom: 16px;
      overflow: auto;
      padding: 12px 20px 0;
      .message-view-header{
        margin-bottom: 20px;
        .message-view-title{
          display: inline-block;
        }
        .message-view-time{
          margin-left: 20px;
        }
      }
    }
    .category-title{
      display: inline-block;
      width: 65px;
    }
    .gray-dadge{
      background: gainsboro;
    }
    .not-unread-list{
      .msg-title{
        color: rgb(170, 169, 169);
      }
      .ivu-menu-item{
        .ivu-btn.ivu-btn-text.ivu-btn-small.ivu-btn-icon-only{
          display: none;
        }
        &:hover{
          .ivu-btn.ivu-btn-text.ivu-btn-small.ivu-btn-icon-only{
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
