<template>
  <div
    class="newMessagePanel message-panel"
    v-if="panel.show"
  >
    <div
      class="modal-backdrop"
      @click="closeMessage"
    />
    <div class="panel-main">
      <div class="panel-title">
        <label class="left"><Icon style="color: var(--primary-color);font-size: 22px;margin-bottom:2px;margin-right:4px;" type="ios-text" />消息</label>
        <span
          class="right"
          style="color: var(--primary-color);"
          @click="ignoreMsg"
        >全部已读</span>
      </div>
      <div class="panel-filter">
        <!-- <Select
            v-model="messageType"
            class="itemCom"
            multiple
            placeholder="请选择消息类型"
          >
            <Option value="0">
              通知
            </Option>
            <Option value="1">
              监控
            </Option>
        </Select>
        <Select
            v-model="colorType"
            class="itemCom itemComColor"
            placeholder="请选择颜色分类"
            ref="colorSelect"
            multiple
            @on-change="changeColorSpart"
          >
            <Option value="1">
              红<span style="display: inline-block;width: 16px;height: 16px;background-color: red;border-radius: 50%;margin-left:4px"></span>
            </Option>
            <Option value="2">
              橙<span style="display: inline-block;width: 16px;height: 16px;background-color: #ff6500;border-radius: 50%;margin-left:4px"></span>
            </Option>
            <Option value="3">
              绿<span style="display: inline-block;width: 16px;height: 16px;background-color: green;border-radius: 50%;margin-left:4px"></span>
            </Option>
        </Select> -->
      </div>
      <div
        ref="messageBox"
        class="panel-content"
        @scroll="handleScroll"
      >
        <div
          v-if="panel.list.length == 0"
          class="no-message"
        >
          <!-- <span v-if="!panel.loaded">加载中...</span> -->
          <span>目前没有消息</span>
        </div>
        <div
          v-for="(item, index) in messagePanel.list"
          :key="item.ID.val"
          class="panel-item"
        >
        <!-- @click="markRead(item)" -->
          <div class="item-time" :class="item.READ_STATE.refobjval==1 || item.Reading?'readed':''">
            <div>
              <i
                class="circle"
                :class="item.TASK_STATE.refobjval === 2?'green':'red'"
              />
              <span>{{ calcdateDiff(item.MODIFIEDDATE.val) || item.MODIFIEDDATE.val }}</span>
            </div>
            <div v-if="item.READ_STATE.refobjval==0">
              <Checkbox v-model="item.changereadStatus" :disabled="item.disabled" @on-change="changeReadStatus($event,index)">已读</Checkbox>
            </div>
            

          </div>
          <div class="item-inner">
            <div v-if="(item.MENU.val+item.MESSAGE.val).length > 25" class="item-title itemHigh" :class="item.READ_STATE.refobjval==1 || item.Reading?'titleReaded':''">
              <span :title="(item.MENU.val+item.MESSAGE.val)">{{ item.MENU.val }}{{ item.MESSAGE.val }}</span>
              <!-- <b>[{{$t('tips.asyncTask')}}]</b> -->
            </div>
            <div v-else class="item-title" :class="item.READ_STATE.refobjval==1 || item.Reading?'titleReaded':''">
              <span>{{ item.MENU.val }}{{ item.MESSAGE.val }}</span>
              <!-- <b>[{{$t('tips.asyncTask')}}]</b> -->
            </div>
            <div style="text-align: right;" v-if="item.MESSAGE.val.indexOf('导出') > -1 || item.MESSAGE.val.indexOf('插入') > -1 || item.MENU.val.indexOf('导入') > -1"><span  class="toDetailBtn" @click="goToDeatil(item)">>>查看详情</span></div>
            <!-- <div class="item-content">
              <p style="-webkit-box-orient:vertical;">
                {{ (item.MESSAGE.val.substring(0, 200)) }}
              </p>
            </div> -->
          </div>
        </div>
      </div>
      <div class="panel-bottom">
        <span
          class="right"
          @click="jumpTask"
        >{{$t('tips.allTasks')}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  const R3 = window.R3;
  const { network, urlSearchParams } = R3;

  export default {
    props: {
      panel: {
        type: Object,
        default: () => ({})
      },
    },
    computed: {
      messagePanel() {
        return this.panel;
      }
    },
    watch: {
      panel(val) {
        if (!val.show) {
          this.$refs.messageBox.scrollTop = 0;
        }
      }
    },
    data() {
      return {
        messageType: '',
        colorType: '',
        readMore: {
          isShow: false,
          currentItem: ''
        }
      };
    },
    mounted() {
      
    },
    methods: {
      changeReadStatus(e,index) {
        if(e){
          this.messagePanel.list[index].Reading = true;
          this.messagePanel.list[index].disabled = true;
        }
        this.markRead(index)
      },
      changeColorSpart(e) {
        let spanHtml = ''
        for(let i = 0;i < e.length;i++){
          let color = e[i]==1?'red':e[i]==2?'#ff6500':'green'
          spanHtml += `<span class='messagecolorSpart' style='background:${color};margin-right:6px;'></span>`
        }
        
        this.$refs.colorSelect.$el.children[0].children[1].children[0].innerHTML = spanHtml
      },
      handleScroll() {
        if (this.$refs.messageBox.scrollTop / this.$refs.messageBox.scrollHeight > 0.1) {
          this.$emit('nextPage');
        }
      },
      moreDescription(item) {
        item.isShow = !item.isShow;
      },
      markRead(index) { // 触发navBar 标记已读方法
        let params = {
          ids:[this.messagePanel.list[index].ID.val],
          readState: 1,
        }
        network.post('/p/cs/user/note/mark-read',params).then(res => {})
        // this.$emit('markRead', item);
      },
      closeMessage() {
        this.messagePanel.show = false;
        this.$emit('closeOrderDetail')
      },
      ignoreMsg() {
        let ids = [];
        this.messagePanel.list.forEach(item => {
          if(item.READ_STATE.refobjval==0){
            item.disabled = true;
            item.changereadStatus = true
            ids.push(item.ID.val)
          }
        })
        let params = {
          // ids:'', // ids
          readState: 1,
        }
        network.post('/p/cs/user/note/mark-read',params).then(res => {})
        // this.$emit('ignoreMsg');
      },
      calcdateDiff(date) {
        return date;
      },
      jumpTask() {
        console.log(12345)
        this.panel.show = false;
        this.$emit('jumpTask');
      },
      goToDeatil(item) {
        this.closeMessage()
        window.parent.R3.store.commit('global/tabOpen', {
          type: 'V',
          tableName: 'U_NOTE',
          tableId: '963',
          label: '我的任务编辑',
          id: item.ID.val,
        });
      }
    }
  };
</script>
<style lang="less">
  .itemComColor .ark-select-dropdown-list li:first-child {
    display: none;
  }
  .itemComColor .ark-select-dropdown-list .ark-select-item {
    display: flex;
  }
  .messagecolorSpart {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
</style>
<style lang="less" scoped>
  .newMessagePanel.message-panel .panel-main .panel-content {
    // top: 76px;
    top: 36px;
  }
  .newMessagePanel.message-panel .panel-main .panel-content .panel-item {
    cursor: unset;
  }
  .newMessagePanel.message-panel .panel-main .panel-content .panel-item .item-inner {
    border: none;
  }
  .panel-filter {
    display: flex;
    margin-top: 12px;
    padding: 0 12px;
  }
  .panel-filter .itemCom:first-child {
    margin-right: 8px;
  }

  .newMessagePanel.message-panel .panel-main .panel-content .panel-item .item-time {
    display: flex;
    justify-content: space-between;
    background: #F7F8FD;
    padding-left: 6px;
  }

  .newMessagePanel.message-panel .panel-main .panel-content .panel-item .item-time .circle.red {
    background-color: red;
  }

  .newMessagePanel.message-panel .panel-main .panel-content .panel-item .item-time .circle.orange {
    background-color: #ff6500;
  }

  .newMessagePanel.message-panel .panel-main .panel-content .panel-item .item-time .circle.green {
    background-color: green;
  }

  .newMessagePanel.message-panel .panel-main .panel-content .panel-item .item-time {
    color: #444;
    font-style: normal;
  }

  .newMessagePanel.message-panel .panel-main .panel-content .panel-item .item-time.readed {
    color: #999;
    font-style: italic;
  }

  .newMessagePanel.message-panel .panel-main .panel-content .panel-item .item-title.itemHigh{
    // height: 40px; 
    // line-height: 20px;
    overflow:hidden;
    word-wrap: break-word;
    text-overflow:ellipsis;
    white-space: unset;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    max-height: 3.0em; /* 高度为字体大小的两倍 */
    line-height: 1.5em; /* 行高 */
    height: 3.0em; /* 高度为行高的两倍 */
  }
  .newMessagePanel.message-panel .panel-main .panel-content .panel-item .item-title.titleReaded {
    color: #999;
    font-style: italic;
  }
  .newMessagePanel.message-panel .toDetailBtn {
    color: var(--primary-color);
    cursor: pointer;
    text-align: right;
  }
  
</style>
