<template>
  <div class="warrper">
    <div v-if="messagePages" class="pt32l24">
      <div class="gotoButton pb24" @click="gotoCLick"><i class="gotoIcon"></i>返回</div>
      <div class="gjhqTitle pb24">消息中心</div>
      <div class="messageTab">
        <ul>
          <li v-for="(item, i) in listDatas" :key="i" :class="(typeName==item.type)?'current':''" @click="tabClick(item.type)">{{ item.name}}</li>
        </ul>
      </div>
      <div v-if="messageListData.length != 0">
        <div class="messagelist">
          <ul>
            <li style="cursor:pointer;" v-for="(item, i) in messageListData" :key="i" @click="detialHandle(item)">
              <div class="lititle" v-if="item.type == 1"><span>{{ item.created_at }}</span><i class="messYuan" v-if="item.is_read == 2"></i><i class="messYuan current" v-else></i> 整改消息</div>
              <div class="lititle" v-if="item.type == 2"><span>{{ item.created_at }}</span><i class="messYuan" v-if="item.is_read == 2"></i><i class="messYuan current" v-else></i> 操作消息</div>
              <div class="lititle" v-if="item.type == 3"><span>{{ item.created_at }}</span><i class="messYuan" v-if="item.is_read == 2"></i><i class="messYuan current" v-else></i> 系统消息</div>
              <p>
                <span v-if="item.name != ''">{{ item.name }}</span>
                <span v-if="item.content != null"><span style="color:#000;">{{ item.content }}</span> 点击进入详情</span>
                <span v-else>点击进入详情</span>
                <span v-if="item.biao != ''">{{ item.biao }}</span></p>
            </li>
          </ul>
        </div>
      </div>
      <div v-else class="elementUiTableNOdata"></div>
    </div>
    <messagedetails v-else :typeVals="itemDatas" @gotoBzck="goBack"></messagedetails>
  </div>
</template>
<script>
import { adminMessage, adminMessagePut } from '../../axios/api'
import messagedetails from './messagedetails.vue'
export default {
  name: 'messagecent',
  components: {
    messagedetails
  },
  data () {
    return {
      messagePages: true,
      listDatas: [
        {
          type: '',
          name: '全部'
        },
        {
          type: 1,
          name: '整改消息'
        },
        {
          type: 2,
          name: '操作消息'
        },
        {
          type: 3,
          name: '系统消息'
        }
      ],
      typeName: '',
      types: '',
      messageListData: '',
      itemDatas: ''
    }
  },
  created () {
    let that = this    
    if (navigator.onLine) {      
    } else {
      that.$messageOne({message: '网络异常，请检测网络是否链接！', type: 'error', duration: 3000})
      return
    }
    let obj = {
      type: ''
    }
    that.mesageListfun(obj)
  },
  methods: {
    mesageListfun (objs) {
      let that = this
      adminMessage(objs).then(res => {
        if (res.code == 10000) {
          let datas = res.data
          for (var i = 0; i < datas.length; i++) {
            let timers = new Date(datas[i].updated_at)
            datas[i].updated_at = that.$gshDateTime(timers)
            let timersCet = new Date(datas[i].created_at)
            datas[i].created_at = that.$gshDateTime(timersCet)
          }
          that.messageListData = res.data
        } else if (res.code == 10002) {
          that.$router.push({name: 'Login'})
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    },
    gotoCLick () {
      this.$router.push({name: 'homes'})
    },
    tabClick (idx) {
      let that = this
      that.typeName = idx
      let obj = {
        type: idx
      }
      that.mesageListfun(obj)
    },
    detialHandle (item) {
      let that = this
      adminMessagePut(item.id).then(res => {
        if (res.code == 10000) {
          console.log(res)
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
      that.messagePages = false
      that.itemDatas = item
    },
    goBack (val) {
      let that = this
      that.messagePages = val
      let obj = {
        type: that.typeName
      }
      that.mesageListfun(obj)
    }
  }
}
</script>
<style scoped>
.messageTab{height:40px;line-height:40px;background: #FFFFFF;border-bottom:1px solid #e6e6e6;padding:0 16px;}
.messageTab li{padding:0 14px;float:left;height:38px;cursor:pointer;font-size: 14px;color: #787A80;line-height:38px;border-bottom:2px solid #fff;margin-right:14px;}
.messageTab li.current{color:#161617;border-bottom:2px solid #5291FF;}
.messagelist{height:780px;overflow:hidden;overflow-y:auto;}
.messagelist li{border-bottom:1px solid #e6e6e6;margin-top:24px;padding:0 20px 16px 0;}
.messagelist li .messYuan{display:inline-block;width: 8px;height: 8px;background: #FF0000;border-radius:50%;margin-left:8px;position:relative;top:-2px;}
.messagelist li .messYuan.current{background:none;}
.messagelist .lititle{height: 24px;font-weight: bold;font-size: 16px;color: #000000;line-height: 24px;margin-bottom:8px;overflow:hidden;}
.messagelist .lititle span{float:right;font-size: 14px;color: #787A80;font-weight:normal;}
.messagelist p{font-size: 14px;color: #000000;line-height: 22px;height:22px;overflow:hidden;}
.messagelist p span{color:#0071DB;padding-right:8px;}
.elementUiTableNOdata{background:url('../../assets/icon24.png') no-repeat center center/64px 88px;display:inline-block;width:100%;height:88px;margin:100px auto;text-indent:-9999px;}
</style>
