<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view v-if="!refreshPage" class="main-container">
      <wk-nav-bar :title="navTitle" />

      <view class="filter-group">
        <wk-base-filter :tabs="taskOptions" @filter="handleFilter" />
      </view>

      <wk-scroll-view
        :status="listStatus"
        class="list-scroll"
        @refresh="getList({}, true)"
        @loadmore="getList()">
        <view
          v-for="(item, index) in listData"
          :key="index" class="journal-item-wrapper">
          <journal-item
            :journal-data="item"
            @comment="handleToCommand(index)"
            @update-data="data => handleUpdate(data, index)"
            @click="handleToDetail(item)" />
        </view>
      </wk-scroll-view>
    </view>

    <uni-popup
      ref="commentPopup"
      radius="20rpx 20rpx 0 0"
      type="bottom"
      @click.stop>
      <comment-popup
        v-if="activeItem && activeCommandData"
        :journal-data="activeItem"
        :reply-data="activeCommandData"
        @update="handleUpdateComment"
        @close="handleCloseCommentPopup" />
    </uni-popup>
  </view>
</template>

<script>
  import { QueryList } from 'API/oa/journal'
  import { QueryCommentList } from 'API/oa/comment'

  import CommentPopup from './component/commentPopup.vue'
  import JournalItem from './component/journalItem.vue'
  import mainListMixins from '@/mixins/mainList.js'

  export default {
    name: 'LogList',
    components: {
      JournalItem,
      CommentPopup
    },
    mixins: [mainListMixins],
    data() {
      return {
        GetListFn: QueryList,

        taskOptions: [
          {
            label: '类型',
            field: 'by',
            value: 1,
            valueData: 1,
            options: [
              {label: '全部', value: '__delete__'},
              {label: '我发出的', value: 1},
              {label: '我收到的', value: 2}
            ]
          },
          {
            label: '时间',
            field: 'type',
            value: 'recent30',
            valueData: 4,
            options: [
              {label: '今天', value: 'today'},
              {label: '昨天', value: 'yesterday'},
              {label: '本周', value: 'week'},
              {label: '上周', value: 'lastWeek'},
              {label: '最近30天', value: 'recent30'},
              {label: '最近60天', value: 'recent60'},
              {label: '本月', value: 'month'},
              {label: '上月', value: 'lastMonth'},
              {label: '本年', value: 'year'},
              {label: '去年', value: 'lastYear'},
            ]
          },
        ],
        filterData: {
          by: 1,
          type: 'recent30'
        },

        activeItem: null,
        activeIndex: null,
        activeCommandData: null,

        routerQuery: {},
        refreshPage: false	// 刷新页面标志
      }
    },
    computed: {
      navTitle() {
        return this.routerQuery.title || '日志'
      }
    },
    onLoad(options) {
      this.routerQuery = options
    },
    onShow() {
      if (this.refreshPage) {
        this.$nextTick(function() {
          this.refreshPage = false
          this.getList({}, true)
        })
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getParams() {
        this.filterData.createUserId = this.routerQuery.userId
        if (this.filterData.by && this.filterData.by === '__delete__') {
          delete this.filterData.by
          delete this.listParams.by
        }
        return this.filterData
      },

      handleFilter(item) {
        this.filterData[item.field] = item.value
        this.getList({}, true)
      },

      handleUpdate(data, index) {
        this.$set(this.listData, index, data)
      },

      handleToCommand(index) {
        this.activeItem = this.listData[index]
        this.activeIndex = index

        QueryCommentList({
          typeId: this.activeItem.logId,
          type: 2
        }).then(res => {
          this.activeCommandData = res || []
        }).catch(() => {})

        this.$refs.commentPopup.open()
      },

      handleUpdateComment() {
        const num = this.activeItem.replyNum
        this.activeItem.replyNum = 0
        this.$nextTick(function() {
          this.activeItem.replyNum = num + 1

          QueryCommentList({
            typeId: this.activeItem.logId,
            type: 2
          }).then(res => {
            this.activeCommandData = res || []
          }).catch(() => {})

          this.handleUpdate(this.activeItem, this.activeIndex)
        })
      },

      handleCloseCommentPopup() {
        this.$refs.commentPopup.close()
      },

      /**
       * 查看日志详情
       * @param data
       */
      handleToDetail(data) {
        this.$Router.navigateTo({
          url: '/pages_log/detail',
          query: {
            id: data.logId
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.main-container {
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.list-scroll {
			flex: 1;
			padding-bottom: 20rpx;
			overflow: hidden;

			.journal-item-wrapper {
				margin-bottom: 15rpx;
			}
		}
	}
</style>
