<template>
  <div class="g-p20 message">
    <div class="g-bg"></div>
    <div class="message-content">
      <base-search isShowDate :isShowIpt="false" @on-search="search" @reset="reset"></base-search>
      <el-card class="card" v-loading="loading">
        <div class="line2"></div>
        <div class="g-fx-j">
          <div class="head">
            <div @click="onTabChange(item)" class="card__title g-xs" v-for="item in allMsgTypeList.arr">
              {{ MsgType[item.type] }}
              <div v-show="msgType == item.type" class="line"></div>
              <div class="remind" v-if="item.unReadCount > 0">
                {{ item.unReadCount >= 99 ? '99+' : item.unReadCount }}
              </div>
            </div>
          </div>
          <el-button class="clear" link @click="onClearMsg">清除消息</el-button>
        </div>
        <div style="margin-top: 20px; padding-left: 20px">
          <div
            v-if="allMsg.arr.length"
            class="message-item g-xs"
            @click="itemClick(item)"
            v-for="item in allMsg.arr"
            :key="item.id"
          >
            <el-badge :hidden="item.state == 1" is-dot>
              <div>
                <el-image :src="MsgIconType[msgType]" fit="cover" />
              </div>
            </el-badge>
            <div style="margin-left: 15px">
              <div class="item-text1">
                {{ item.deviceName }} <span class="item-text2" style="margin-left: 20px">{{ item.time }}</span>
              </div>
              <div class="item-text2">
                {{ item.message || '暂无消息' }}
              </div>
              <div class="item-text2">{{ item.companyName }} {{ item.workshop ? '|' : '' }} {{ item.workshop }}</div>
            </div>
          </div>
          <el-empty v-else description="暂无数据" />
          <pro-pagination
            class="g-pagination"
            v-if="allMsg.arr.length !== 0"
            :pageObj="pageObj"
            :total="totalCount"
          ></pro-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Search } from '@element-plus/icons-vue'
  import baoj from '@/assets/icon/baoj.png' // 报警
  import weix from '@/assets/icon/weix.png' //维修
  import sheb from '@/assets/icon/sheb.png' //设备
  import weib from '@/assets/icon/weib.png' // 维保
  import xit from '@/assets/icon/xit.png' // 系统
  import gongd from '@/assets/icon/gongd.png' // 系统
  import { fetchNotificationTypes, fetchUserNotificationsByType } from '@/api/notification'
  import { setAllNotificationsAsRead, setNotificationAsRead } from '@/api'
  import { ElMessage } from 'element-plus'
  const MsgType: any = {
    1: '系统消息',
    2: '报警消息',
    3: '报修消息',
    4: '工单消息',
    5: '维保消息',
    6: '设备寿命'
  }
  const MsgIconType: any = {
    1: xit,
    2: baoj,
    3: weix,
    4: gongd,
    5: weib,
    6: xit
  }

  const msgType = ref(0)
  const allMsgTypeList: any = reactive({
    arr: []
  })
  const allMsg: any = reactive({
    arr: []
  })
  const totalCount = ref('')
  const dateValue: any = ref({})
  // 各个消息的数据

  let pageObj: any = ref({
    MaxResultCount: 10,
    SkipCount: 1
  })
  const router = useRouter()

  onMounted(() => {
    getMessage()
  })

  const onTabChange = (v: any) => {
    pageObj.value.MaxResultCount = 0
    pageObj.value.MaxResultCount = 10
    pageObj.value.SkipCount = 1
    msgType.value = v.type
    allMsg.arr = []
  }

  const itemClick = async (row: any) => {
    await setNotificationAsRead(row.id)
    if ([2, 5, 6].includes(msgType.value)) {
      useToDetail(row.entityId, row.deviceType)
    }
    if ([3, 4].includes(msgType.value)) {
      router.push(`/order-center/my-order/details?orderId=${row.entityId}&faultType=${row.deviceType}`)
    }
  }
  const loading = ref(false)
  const getTypeMsg = async () => {
    loading.value = true
    try {
      const res: any = await fetchUserNotificationsByType({
        Type: msgType.value,
        MaxResultCount: pageObj.value.MaxResultCount,
        SkipCount: (pageObj.value.SkipCount - 1) * pageObj.value.MaxResultCount,
        ...dateValue.value
      })
      totalCount.value = res.totalCount
      allMsg.arr = res.items
    } finally {
      loading.value = false
    }
  }
  watch([pageObj.value], () => {
    getTypeMsg()
  })
  const getMessage = async () => {
    try {
      loading.value = true
      const data: any = await fetchNotificationTypes()
      allMsgTypeList.arr = data
      msgType.value = allMsgTypeList.arr[0].type
      getTypeMsg()
    } finally {
      loading.value = false
    }
  }

  const onClearMsg = async () => {
    const data = await setAllNotificationsAsRead()
    ElMessage.success('操作成功')
    getMessage()
  }
  const reset = () => {}
  const search = (v: any) => {
    dateValue.value.StartDate = v.dateValue[0]
    dateValue.value.EndDate = v.dateValue[1]
    getTypeMsg()
  }
</script>

<style lang="less" scoped>
  .message {
    position: relative;
  }

  .message-content {
    position: relative;
  }

  .message-search {
    width: 500px;
    height: 80px;

    .input {
      width: 77%;
      border-radius: 10px;
      height: 50px;
    }

    .el-button {
      height: 50px;
      width: 70px;
      border-radius: 10px;
      font-size: 20px;
    }
  }

  .card {
    border-radius: 10px;
    padding: 20px;
    min-height: calc(100vh - 240px);
    margin-bottom: 40px;
    padding-bottom: 50px;
    position: relative;

    .line2 {
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      top: 79px;
      background: #eee;
    }

    .head {
      display: flex;
      width: 100%;
    }

    &__title {
      width: 130px;
      position: relative;
      font-weight: bold;
      text-align: center;
      margin-right: 20px;
      font-size: 16px;

      .remind {
        width: 20px;
        height: 20px;
        position: absolute;
        line-height: 20px;
        right: 0;
        top: 0;
        transform: translateX(-50%);
        background: #df645f;
        border-radius: 50%;
        font-size: 6px;
        color: #fff;
      }

      .line {
        position: absolute;
        width: 70px;
        height: 5px;
        background: #2dcadc;
        border-radius: 3px;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .clear {
      color: #999;
    }
  }

  :deep(.message-search) {
    .el-input__wrapper {
      border-radius: 10px;
    }
  }

  .message-item {
    height: 120px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;

    .el-image {
      width: 48px;
      height: 48px;
      margin-right: 10px;
    }

    .item-text1 {
      font-weight: bold;
      font-size: 16px;
      margin: 5px 0;
    }

    .item-text2 {
      font-size: 14px;
      color: #999;
    }
  }
</style>
