<template>
  <van-row class="message-receiver__container">
    <van-col :span="24" class="message-receiver__header">消息</van-col>
    <van-col :span="24" class="message-receiver__search">
      <van-search
        v-model="searchValue"
        placeholder="请输入标题或内容..."
        @change="onSearchChange"
        @input="onSearch"
        @search="onSearch"
        @cancel="onCancel"
      >
        <template #left-icon>
          <i class="icon icon-sousuo1"></i>
        </template>
      </van-search>
    </van-col>
    <van-col :span="24" class="message-receiver__body">
      <van-pull-refresh
        v-model="isDownLoading"
        @refresh="onRefresh()"
        :head-height="0"
      >
        <van-list
          ref="vanList"
          v-model="loading"
          :finished="finished"
          finished-text=""
          :immediate-check="false"
          :offset="20"
          @load="onLoad"
        >
          <van-cell-group
            v-for="item in itemList"
            :key="item.id"
            class="message-list__group"
            @click="showItem(item)"
          >
            <van-cell class="message-list__cell">
              <template #title>
                <div class="message-item__title">
                  <i class="icon icon-yiduxiaoxi" v-if="item.receiveTime"></i>
                  <i class="icon icon-weiduxiaoxi" v-else></i>
                  <!-- <van-icon
                    v-if="!item.receiveTime"
                    name="envelop-o"
                    size="24"
                    dot
                  />
                  <van-icon v-else name="certificate" size="24" color="#999" /> -->
                  <span
                    class="van-ellipsis"
                    v-html="brightenKeyword(item.subject, searchValue)"
                  ></span>
                </div>
                <div class="message-item__foot">
                  <span
                    v-html="brightenKeyword(item.owner, searchValue)"
                  ></span>
                  <span>{{ item.createTime }}</span>
                </div>
              </template>
            </van-cell>
            <van-cell class="message-list__tail" title="立即处理" is-link />
          </van-cell-group>
        </van-list>
      </van-pull-refresh>
      <van-empty
        v-if="itemList.length == 0"
        class="custom-image"
        description="暂无内容"
      />
      <tabBar ref="tabBar" :active-index="1"></tabBar>
      <PlacedTop></PlacedTop>
    </van-col>
  </van-row>
</template>
<script>
  import { getMessageList } from '@/api/portal.js'
  import { Dialog } from 'vant'
  const tabBar = () => import('@/components/TabBar.vue')
  const PlacedTop = () => import('@/components/PlacedTop.vue')
  export default {
    name: 'MessageReceiverList',
    components: {
      tabBar,
      PlacedTop,
    },
    data() {
      return {
        searchValue: '',
        loading: false,
        finished: false,
        isLoading: false,
        isDownLoading: false,
        page: 1,
        itemList: [],
      }
    },
    created() {
      this.onRefresh()
    },
    methods: {
      brightenKeyword(val, keyword) {
        if (typeof val == 'number') {
          val = val.toString()
        }

        const Reg = new RegExp(keyword, 'ig')

        if (val) {
          const res = val.replace(
            Reg,
            `<span class='changColor'>${keyword}</span>`
          )

          return res
        }
      },
      onSearchChange(event) {
        this.onRefresh()
      },
      onSearch(event) {
        this.onRefresh()
      },
      onCancel() {
        this.searchValue = ''
        this.onRefresh()
      },
      //上拉加载
      //异步请求数据 ，我们的项目时封装好的方法，此处只是调用
      onLoad() {
        let params = {
          pageBean: {
            page: this.page,
            pageSize: this.pageSize,
            showTotal: true,
          },
          querys: [
            // {
            //   group: 'filterTime',
            //   operation: 'EQUAL',
            //   property: 'receiveTime',
            //   relation: 'AND',
            //   value: 1,
            // },
          ],
          sorter: [
            { direction: 'DESC', property: 'receiver_name_' },
            { direction: 'DESC', property: 'CREATE_TIME_' },
          ],
        }
        if (this.searchValue) {
          params.querys.push({
            property: 'subject',
            value: '%' + this.searchValue + '%',
            operation: 'LIKE',
            relation: 'OR',
            group: 'quickSearch',
          })
          params.querys.push({
            property: 'content',
            value: '%' + this.searchValue + '%',
            operation: 'LIKE',
            relation: 'OR',
            group: 'quickSearch',
          })
        }
        let _self = this

        getMessageList(params)
          .then((response) => {
            let rows = response.rows
            _self.loading = false //数据请成功后
            _self.isDownLoading = false //数据请成功后
            _self.page++ //页码要增加1
            if (rows == null || rows.length === 0) {
              // 加载结束
              _self.finished = true
              return
            }

            // 将新数据与老数据进行合并
            _self.itemList = _self.itemList.concat(rows)
            //如果列表数据条数>=总条数，不再触发滚动加载
            if (_self.itemList.length >= response.total) {
              _self.finished = true
            }
          })
          .catch((error) => {})
          .finally(() => {
            _self.isDownLoading = false
            _self.isUpLoading = false
          })
      },
      onRefresh() {
        //下拉刷新
        this.finished = false
        this.page = 1
        this.itemList = []
        this.loading = true
        this.onLoad() //正常的请求数据的方法，数组重新赋值
      },
      showItem(item) {
        let _this = this
        this.$http
          .get(
            `${window.context.portal}/innermsg/messageReceiver/v1/get?id=` +
              item.id
          )
          .then(
            (response) => {
              Dialog.alert({
                title: item.subject,
                message: response.content,
                className: 'approval-reminder',
                getContainer: '.message-receiver__container',
              }).then(() => {
                if (!item.receiveTime) {
                  _this.$refs.tabBar.refreshMsgbadge()
                  _this.onRefresh()
                }
              })
            },
            (error) => {}
          )
      },
    },
  }
</script>
<style lang="scss" scoped>
  .message-receiver__container {
    background: #f5f5f5;
    height: calc(100% - 44px);

    .message-receiver__header {
      background: #fff;
      line-height: 44px;
      height: 44px;
      text-align: center;
      position: fixed;
      z-index: 10;
      font-size: 17px;
      font-weight: 800;
      color: #222222;
    }
    .message-receiver__search {
      margin: 60px 16px 10px;
      width: calc(100% - 32px);
      border-radius: 8px;
      ::v-deep {
        .van-field__left-icon {
          // line-height: 20px;
          height: 20px;
        }
        .icon {
          font-size: 18px;
        }
        .van-search {
          padding: 1px;
          height: 32px;
          border-radius: 8px;
          background: #f5f5f5;

          .van-search__content {
            background: #fff;
            border-radius: 8px;
          }
        }
      }
    }
    .message-receiver__body {
      height: calc(100% - 113px);
      overflow-y: auto;
      padding: 0px 16px;
      ::v-deep {
        .van-search__content {
          border-radius: 8px;
          padding-left: 8px;
        }
        .van-field__control {
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          color: #bfbfbf;
        }
        .van-cell__value {
          line-height: 20px;
          height: 20px;
        }
      }
    }
    .message-list__group {
      margin-bottom: 10px;
      border-radius: 12px;

      .message-list__cell {
        width: 100%;
        border-radius: 12px;
        padding: 16px 12px;
        height: 82px;

        .van-cell__title {
          width: 100%;
        }
        .icon {
          font-size: 16px;
          width: 24px;
          height: 24px;
          background: rgba(64, 158, 255, 0.1);
          border-radius: 18px 18px 18px 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          color: #409eff;
        }
        .icon-yiduxiaoxi {
          color: rgba(#409eff, 0.64);
        }
        .icon-weiduxiaoxi::after {
          position: absolute;
          top: -3px;
          right: -3px;
          width: 8px;
          height: 8px;
          background: #e55555;
          border-radius: 18px 18px 18px 18px;
          content: ' ';
        }
      }

      .message-list__tail {
        line-height: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        padding: 17px 12px 16px;
        .van-cell__title {
          height: 17px;
          line-height: 17px;
        }
        span {
          font-size: 12px;
          color: #333333;
        }

        .van-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
        }
      }

      .message-item__title {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .van-icon {
          color: $--color-primary;
        }

        span {
          margin-left: 8px;

          color: #262626;
          font-size: 16px;
          font-weight: bold;
        }
      }
      .message-item__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 8px 0 0 0;
        padding: 0 0 0 32px;

        span {
          color: #8c8c8c;

          font-size: 12px;
          font-weight: 400;
        }
      }
    }
  }

  ::v-deep .approval-reminder {
    border-radius: 12px 12px 12px 12px;
    color: #262626;
    .van-dialog__header {
      padding-top: 24px;

      color: #262626;
      font-weight: 800;
      font-size: 17px;
    }
    .van-dialog__message--has-title {
      padding: 8px 16px 10px;
    }

    .van-button {
      font-size: 15px;
      font-weight: 400;
      color: #409eff;
    }
  }
  ::v-deep .changColor {
    color: #409eff;
  }
</style>
