<template>
  <div class="notice ibps-fixed-bottom">
    <van-sticky>
      <van-nav-bar
        :title="generateTitle()"
      >
        <div
          slot="right"
          @click="onClickRight"
        >
          <span class="van-nav-bar__text">{{ $t('platform.notice.create') }}</span>
        </div>
      </van-nav-bar>
      <van-tabs v-show="tabDatas.length>1" v-model="tabActive" color="#3396FB" line-width="40" class="ibps-border-bm" @click="onClickTab">
        <van-tab v-for="data in tabDatas" :key="data.name" :name="data.name" :title="data.title" />
      </van-tabs>
      <van-search
        v-model="title"
        placeholder="请输入搜索标题"
        @search="onSearch"
      >
        <!-- <template #left>
          <van-icon name="bars" :class="{'ibps-active':$utils.isNotEmpty(typeId)}" class="ibps-pr-5" @click="clickType" />
        </template> -->
        <!-- <template #action>
          <van-icon name="filter-o" :class="{'ibps-active':stateActive}" @click="clickMoreSearch" />
        </template> -->
      </van-search>
    </van-sticky>

    <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"
          class="ibps-p-0"
        >
          <van-swipe-cell :right-width="tabActive==='drafts'?65:0">
            <!-- <van-cell
              :key="item.id+index"
              :title="item.title"
              :label="item.userName"
              @click="onClick(item)"
            >
              <div>{{ item.publicDate|dateFormat('yyyy/MM/dd') }}</div>
              <div>
                <van-tag plain :type="item.publicItem | optionsFilter(publishOptions,'type')">
                  {{ item.publicItem| optionsFilter(publishOptions) }}</van-tag>
              </div>
            </van-cell> -->
            <van-cell
              :key="item.id+index"
              @click="onClick(item)"
            >
              <template #title>
                <span class="ibps-size-l">{{ item.title }}</span>
                <van-tag
                  size="medium"
                  :color="item.publicItem | optionsFilter(publishOptions,'color')"
                  :text-color="item.publicItem | optionsFilter(publishOptions,'textColor')"
                  style="position: absolute;right: 16px;top: 12px;"
                >
                  {{ item.publicItem| optionsFilter(publishOptions) }}</van-tag>

              </template>
              <template #label>
                <div class="van-multi-ellipsis--l2 ibps-notice-text">{{ item.content | removeHtmlTag }}</div>
                <div>
                  <span class="ibps-offside ibps-border-r">来源：{{ item.userName }}</span>
                  <span>时间：{{ item.publicDate|dateFormat('yyyy/MM/dd') }}</span>
                </div>
              </template>

            </van-cell>
            <van-button
              v-if="tabActive==='drafts'"
              slot="right"
              type="danger"
              :text="$t('common.button.remove')"
              class="ibps-swipe-button"
              @click="onDelete(item.id)"
            />
          </van-swipe-cell>
        </van-cell>
        <ibps-list-result-page
          :result-type="resultType"
          :error-type="errorType"
          :result-message="resultMessage"
        />
      </van-list>
    </van-pull-refresh>
    <notice-dialog
      :id="noticeId"
      :visible="noticeVisible"
      :readonly="noticeReadonly"
      @callback="onRefresh"
      @close="visible => noticeVisible = visible"
    />
  </div>
</template>

<script>
import { queryPageList, remove } from '@/api/platform/system/news'

import ActionUtils from '@/utils/action'
import navbar from '@/mixins/navbar'
import { publishOptions } from './constants'

import IbpsListResultPage from '@/components/ibps-list-result-page'
import NoticeDialog from './edit'

export default {
  components: {
    IbpsListResultPage,
    NoticeDialog
  },
  mixins: [navbar],
  data() {
    return {
      tabActive: 'publish',
      tabDatas: [{
        name: 'publish',
        title: this.$t('platform.notice.notices')
      }, {
        name: 'expired',
        title: this.$t('platform.notice.expired')
      }, {
        name: 'drafts',
        title: this.$t('platform.notice.drafts')
      }],

      title: '',

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

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

      publishOptions: publishOptions,

      noticeVisible: false,
      noticeId: '',
      noticeReadonly: false
    }
  },
  methods: {
    onClickTab(name) {
      this.title = ''
      this.finished = false
      this.loading = true
      this.onSearch()
    },
    loadData() {
      queryPageList(this.getSearcFormData()).then(response => {
        // 处理数据
        ActionUtils.handleListData(this, response.data)
      }).catch((e) => {
        ActionUtils.handleErrorData(this, e)
      })
    },
    /**
     * 获取格式化参数
     */
    getSearcFormData() {
      let params = {}

      params['Q^STATUS_^S'] = this.tabActive

      if (this.$utils.isNotEmpty(this.title)) {
        params['Q^title_^S'] = this.title
      }

      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.loading = true
      this.onSearch()
    },
    /**
     * 查询
     */
    onSearch() {
      ActionUtils.initListData(this)
      this.loadData()
    },

    onClick(item) {
      this.noticeId = item.id
      this.noticeReadonly = item.status !== 'drafts'
      this.noticeVisible = true

      // this.$router.push({
      //   name: item.status === 'drafts' ? 'noticeEdit' : 'noticeDetail',
      //   query: {
      //     id: item.id
      //   }
      // })
    },
    onClickRight() {
      this.noticeId = ''
      this.noticeReadonly = false
      this.noticeVisible = true
      // this.$router.push({
      //   name: 'noticeAdd'
      // })
    },
    onDelete(id) {
      this.$dialog.confirm({
        title: this.$t('common.dialog.warn'),
        message: '确认删除该公告？'
      }).then(() => {
        remove({
          newsIds: id
        }).then(response => {
          this.onClickTab(this.tabActive)
        })
      })
    }
  }

}
</script>
