<template>
  <div>
    <van-sticky>
      <van-nav-bar
        :title="generateTitle($route.name,$route.params.title||$route.meta.title)"
        :left-text="$t('common.button.back')"
        left-arrow
        @click-left="$router.push({ name: 'dashboard' })"
      />
      <van-search
        v-model="subject"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <van-icon name="filter-o" :class="{'ibps-active':stateActive}" @click="clickMoreSearch" />
        </template>
      </van-search>
    </van-sticky>
    <div class="ibps-blank-bar" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" @load="loadData">
        <van-cell
          v-for="(item,index) in listData"
          :key="item.id+index"
          :title="item.subject"
          :label="item.ownerName"
          size="large"
          @click="onClick(item,index)"
        >
          <template slot="icon">
            <ibps-avatar
              :icon="_randomIcon(index)"
              :text="item.name"
              :bg-color="_randomColor(index)"
              radius="4"
              icon-prefix="ibps-icon"
              class="ibps-mr-10"
            />
          </template>
          <span>{{ item.createTime }}</span>
          <div>
            <van-tag
              size="medium"
              :color="item.messageType | optionsFilter(typeOptions,'type')"
              :text-color="item.messageType | optionsFilter(typeOptions,'type') "
            >
              {{ item.messageType| optionsFilter(typeOptions) }}</van-tag>
          </div>
        </van-cell>
        <ibps-list-result-page
          :result-type="resultType"
          :error-type="errorType"
          :result-message="resultMessage"
        />
      </van-list>
    </van-pull-refresh>
    <ibps-more-search
      :show="moreSearchPopup"
      :search-forms="searchForms"
      @callback="onMoreSearch"
      @close="show => moreSearchPopup = show"
      @reset-form="resetForm"
    />
    <detail
      :id="innerMessageId"
      :visible="formVisible"
      @callback="onRefresh"
      @close="visible => formVisible = visible"
    />
  </div>
</template>
<script>
import { queryReceivePageList } from '@/api/platform/message/innerMessage'
import { typeOptions } from './constants'
import ActionUtils from '@/utils/action'
import i18n from '@/utils/i18n'
import random from '@/mixins/random'
import IbpsMoreSearch from '@/components/ibps-more-search'
import IbpsAvatar from '@/components/ibps-avatar'
import IbpsListResultPage from '@/components/ibps-list-result-page'
import Detail from './detail'

export default {
  components: {
    IbpsMoreSearch,
    IbpsAvatar,
    IbpsListResultPage,
    Detail
  },
  mixins: [random],
  data() {
    return {
      typeOptions: typeOptions,
      stateActive: false,
      moreSearchPopup: false,
      searchForms: {
        forms: [
          { prop: 'Q^subject^SL', label: '主题', fieldType: 'text' },
          { prop: ['Q^beginreceiveTime^DL', 'Q^endreceiveTime^DG'], label: '发送时间', fieldType: 'dateRange', options: { datefmt: 'yyyy-MM-dd' }},
          { prop: 'Q^messageType.^S', label: '消息类型', fieldType: 'checker', cols: 3, valueKey: 'value', options: typeOptions }
        ]
      },

      subject: '',
      moreParams: {},

      listData: [],
      pagination: {},
      sorts: {},

      loading: false,
      finished: false,
      refreshing: false,
      resultType: 'init',
      errorType: null,
      resultMessage: null,

      innerMessageId: '',
      formVisible: false
    }
  },
  methods: {
    generateTitle(name, title) { // generateTitle by vue-i18n
      return i18n.generateTitle(name, title)
    },
    /**
     * 加载数据
     */
    loadData() {
      this.loading = true
      queryReceivePageList(this.getSearcFormData()).then(response => {
        // 处理数据
        ActionUtils.handleListData(this, response.data)
      }).catch((e) => {
        ActionUtils.handleErrorData(this, e)
      })
    },
    /**
     * 获取格式化参数
     */
    getSearcFormData() {
      let params = {}
      if (this.$utils.isNotEmpty(this.subject)) {
        params['Q^subject_^SL'] = this.subject
      }
      if (this.$utils.isNotEmpty(this.moreParams)) {
        params = Object.assign(params, this.moreParams)
      }

      return ActionUtils.formatParams(
        params,
        this.pagination,
        this.sorts)
    },
    /**
     * 下拉刷新
     */
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.loading = true
      this.onSearch()
    },
    /**
     * 查询
     */
    onSearch() {
      this.stateActive = false
      ActionUtils.initListData(this)
      this.loadData()
    },
    /**
     * 高级查询
     */
    onMoreSearch(params) {
      if (this.$utils.isNotEmpty(this.typeId)) {
        params['Q^type_id_^SL'] = this.typeId
      }
      this.moreParams = params
      this.onSearch()
      if (this.$utils.isNotEmpty(params)) {
        this.stateActive = true
      }
    },
    /**
     * 弹窗更多查询条件
     */
    clickMoreSearch() {
      this.moreSearchPopup = true
      this.stateActive = false
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.typeId = ''
    },

    onClick(item) {
      this.innerMessageId = item.id
      this.formVisible = true
    }
  }

}
</script>
