<template>
  <div>
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 个人消息 -->
        {{ $t('inform.l28') }}
        <div class="right">
          <van-popover
            v-model="showPopover"
            placement="bottom-end"
            trigger="click"
          >
            <div class="filter-box">
              <div class="check flex" :class="{active: category == ''}" @click="resetList('')">
                <div class="radio"></div>
                <div>
                  <!-- 全部 -->
                  {{ $t('inform.l21') }}
                </div>
              </div>
              <div class="check flex" :class="{active: category == '3'}" @click="resetList('3')">
                <div class="radio"></div>
                <div>
                  <!-- 登录认证 -->
                  {{ $t('inform.l56') }}
                </div>
              </div>
              <div class="check flex" :class="{active: category == '1'}" @click="resetList('1')">
                <div class="radio"></div>
                <div>
                  <!-- 资金动态 -->
                  {{ $t('inform.l') }}
                </div>
              </div>
              <div class="check flex" :class="{active: category == '2'}" @click="resetList('2')">
                <div class="radio"></div>
                <div>
                  <!-- 合约交易 -->
                  {{ $t('inform.l4') }}
                </div>
              </div>
              
            </div>
            <template #reference>
                <img class="filter" src="/img/icon/filter.png" alt="极度证券"/>
            </template>
          </van-popover>
        </div>
      </div>
    </van-sticky>
    <!-- 没有更多了 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="list.length ? $t('common.l5') : ''"
      @load="onLoad"
    >
      <template v-for="(item) in list">
        <div v-if="item.content && isItem[item.content.action]" :key="item.id">
          <div class="item" :class="{'active': item.status == 0}">
            <van-icon @click.stop="deleteMessage(item.id)" size="15px" color="#999999" name="close" class="delete" />
            <component :is="isItem[item.content.action]" :item="item" />
            <div class="time">{{ $parseTime(item.content.time, '{h}:{i}') }}</div>
          </div>
        </div>
      </template>
    </van-list>
    <!-- 暂无消息 -->
    <NoData v-if="!loading && list.length == 0" :title="$t('inform.l23')"/>
  </div>
</template>
<script>
import { Login, withdrawCash, position, entrust, realUser, convert, transfer, depositCash, updateNickName, collectionAccount } from "./components/index.js";
import { getMessageList, deleteMessage, readMessage } from "@/api/user";
export default {
  components: {
    Login,
    withdrawCash,
    position,
    entrust,
    realUser,
    convert,
    transfer,
    depositCash,
    updateNickName,
    collectionAccount
  },
  data () {
    return {
      showPopover: false,
      category: '',
      list: [],
      loading: false,
      finished: false,
      pageNum: 0,
      pageSize: 15,
      isItem: {
        Login: 'Login',
        withdrawCash: 'withdrawCash',
        closePosition: 'position',
        openPosition: 'position',
        updatePosition: 'position',
        deleteEntrust: 'entrust',
        openEntrust: 'entrust',
        updateEntrust: 'entrust',
        realUser: 'realUser',
        TransactionToCash: 'convert',
        CashToTransaction: 'convert',
        CashToFollow: 'convert',
        FollowToCash: 'convert',
        UserExchange: 'transfer',
        depositCash: 'depositCash',
        updateNickName: 'updateNickName',
        insertCollectionAccount: 'collectionAccount',
        deleteCollectionAccount: 'collectionAccount',
      }
    }
  },
  methods: {
    resetList(category) {
      this.showPopover = false
      if (this.category === category) {
        return
      }
      this.list = []
      this.category = category
      this.pageNum = 0
      this.loading = true
      this.onLoad()
    },
    onLoad() {
      this.pageNum += 1;
      getMessageList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: this.category
      }).then((res) => {
        var list = res.list || []
          list.forEach(item => {
          item.content = item.content ? JSON.parse(item.content) : {}
          if (item.content.from) {
            if (typeof item.content.from == 'object') {
            } else {
              item.content.from = JSON.parse(item.content.from)
            }
          } else {
            item.content.from = {}
          }
          if (item.content.to) {
            if (typeof item.content.to == 'object') {
            } else {
              item.content.to = JSON.parse(item.content.to)
            }
          } else {
            item.content.to = {}
          }
        })
        // console.log(list)
        if (this.pageNum == 1) {
          this.list = list
          this.readMessage()
        } else {
          this.list = this.list.concat(list)
        }
        this.loading = false;
        if (this.list.length >= res.total) {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      })
    },
    readMessage() {
      readMessage({
        id: 0
      }).then(res => {
        this.$store.dispatch('getMessageList')
      }).catch(() => {})
    },
    deleteMessage(id) {
      deleteMessage({
        id: id || 0
      }).then(res => {
        this.$notify({
          // message: '删除成功',
          message: this.$t('common.l27'),
          type: 'success'
        });
        this.pageNum = 0
        this.loading = true
        this.onLoad()
        this.$store.dispatch('getMessageList')
      }).catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>

.sticky {
  background-color: var(--bg-);
}
.header {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 9px 17px;
  background-color: var(--bg-);
  text-align: center;
  .back {
    position: absolute;
    top: 11px;
    left: 9px;
  }
  .right {
    position: absolute;
    top: 11px;
    right: 15px;
  }
  .filter {
    display: block;
    width: 22px;
  }
}
.filter-box {
  background-color: #FFFFFF;
  color: #292929;
  .check {
    padding: 13px 12px;
    &+.check {
      border-top: 1px solid #E9E9E9;
    }
    &.active {
      color: #FF6F30;
      .radio {
        border: 5px solid #FF6F30;
      }
    }
  }
  .radio {
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 50%;
    margin-right: 5px;
  }
}
.van-list {
  padding: 2px 18px 15px;
  .item {
    border-radius: 8px;
    border: 1px solid #EEEEEE;
    position: relative;
    margin-bottom: 8px;
  }
  .delete {
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
  }
  .time {
    position: absolute;
    right: 6px;
    bottom: 11px;
    color: #A3A3A3;
    font-size: 12px;
  }
}
::v-deep .item{
  .li {
    padding: 13px 12px;
    position: relative;
    cursor: pointer;
  }
  .top {
    margin-bottom: 5px;
  }
  .tag {
    border-radius: 4px;
    padding: 3px;
    margin-right: 4px;
    font-size: 12px;
  }
  .title {
    font-size: 14px;
    color: #000000;
    flex: 1;
    min-width: 10%;
  }
  .tip {
    line-height: 16px;
    color: #999;
    margin-bottom: 5px;
  }
  .row {
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    color: #A3A3A3;
    line-height: 18px;
    padding-right: 26px;
    .label {
      min-width: 76px;
      max-width: 76px;
    }
  }
  .text {
    word-break: break-all;
  }
}
</style>