<template>
  <div>
    <p class=" text-2xl font-bold mb-5">资讯管理</p>
    <!-- 搜索框 -->
    <a-input placeholder="标题模糊搜索"  v-model="searchPageReqParams.title" style="width: 150px; margin-right:10px;"/>
     <!-- timepicker -->
      <span class=" font-semibold">新增时间：</span>
      <timerange class=" mr-3" :startTime="searchPageReqParams.start_time" :endTime="searchPageReqParams.end_time"
                 @getNewTime="getNewTime"/>
      <!-- 咨询分类 -->
      <span class=" mr-3">资讯分类</span>
      <a-select :default-value="newsType[0]" style="width: 120px; margin-right:10px;" v-model="searchPageReqParams.article_type">
        <a-select-option v-for="type in newsType" :key="type.value">
          {{type.label}}
        </a-select-option>
      </a-select>
      <!-- 操作 -->
      <a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
      <a-button type="primary" style=" margin-right:10px;" @click="reset">重置</a-button>
      <a-button type="primary" @click="release(null, null)">新增</a-button>
      <!-- 资讯列表 -->
      <a-table
        :columns="columns"
        :data-source="list"
        :loading="tableLoading"
        rowKey="columns"
        style=" text-align: center; margin-top:40px;"
        bordered
        :pagination="pagination"
        @change="tableChange">
        <!-- 发布时间 -->
        <span slot="created_at" slot-scope="text,record">
          {{ record.updated_at | format }}
        </span>
        <!-- 新闻内容 -->
        <span slot="content" slot-scope="text,record">
          <a @click="toDetail(record)">查看</a>
        </span>
        <!-- 新闻状态 -->
        <span slot="status" slot-scope="text,record">
          {{ record.article_status === 2 ? '已发布' : '未发布' }}
        </span>
        <!-- 新闻分类 -->
        <span slot="type">
          {{ articleType === 2 ? '新闻' : '政策' }}
        </span>
        <!-- 操作 -->
        <span slot="action" slot-scope="text,record">
          <a  v-if="record.article_status==1" 
              @click="add(record)">
              上架
          </a>
          <a  v-else-if="record.article_status === 2"
              @click="remove(record)">
              下架
          </a>
          <a-divider v-show="record.article_status==1" type="vertical" />
          <a v-show="record.article_status==1" 
              @click="release(record, searchPageReqParams.article_type)">
              编辑
          </a>
          <a-divider v-show="record.article_status==1" type="vertical" />
          <a v-show="record.article_status==1" @click="onDelete(record)">
              删除
          </a> 
        </span>
      </a-table>
      <!-- 操作Modal -->
      <a-modal
        :title="title"
        v-model="show"
        :centered="true"
        :closable="false"
        @ok="handleOk"
        @cancle="show = false"
      >
        <p class=" text-center">{{text}}</p>
      </a-modal>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { columns } from '@/const/columns/newsColunms'
import { modal } from './const'
import { getDate } from '@/utils/days/index'
import timerange from '@/components//TimePicker/index.vue'
import News from '@/service/News/index'
import { message } from 'ant-design-vue'
import Filter from '@/filter/index'

const news = new News()

export default Vue.extend({
  components:{ timerange },
  filters: {
    format(value: string) {
      return Filter.formatDate(value)
    }
  },
  computed:{
    columns(){
      return columns
    }
  },
  props:{
    newsType:{
      type:Array,
      default(){
        return [{
          label: '政策',
          value: 1
        }, {
          label: '新闻',
          value: 2
        }]
      }
    }
  },
  data(){
    return{
      show:false,
      title:'',
      list: [],
      type:modal.on,
      text:'',
      searchPageReqParams: {
        title: '',
        article_status: 0,
        article_type: 1 as undefined | number,
        start_time: undefined as undefined | number,
        end_time: undefined as undefined | number,
      },
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0
      },
      uuid: '',
      articleType: undefined as undefined | number,
      tableLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods:{
    tableChange(e: any) {
      this.pagination.current = e.current
      this.getList()
    },
    getList() {
      const params = {
        ...this.searchPageReqParams,
        limit: this.pagination.defaultPageSize,
        // offset: 10
        offset: (this.pagination.current - 1) * this.pagination.defaultPageSize
      }
      this.tableLoading = true
      news.articleList(params)
      .then(res => {
        this.list = res.data.items
        this.articleType = this.searchPageReqParams.article_type
        this.pagination.total = res.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
      
    },
    // findTitle() {
    //   const searchParams = this.searchPageReqParams.article_type === 1 ? "searchByPolicy" : "searchByTitle"
    //   news[searchParams]({title: this.searchPageReqParams.title}).then(res => {
    //     console.log(res,'this res')
    //     this.list = res.data.items
    //     this.pagination.total = res.data.total
    //   })
    // },
    query(){
      this.pagination.current = 1
      this.getList()
    },
    getNewTime(startTime:number,endTime:number){
      this.searchPageReqParams.start_time = startTime
      this.searchPageReqParams.end_time = endTime
    },
    reset(index:number){
      this.searchPageReqParams.title = ''
      this.searchPageReqParams.article_status = 0
      this.searchPageReqParams.article_type = 1
      this.searchPageReqParams.start_time = undefined
      this.searchPageReqParams.end_time = undefined  
      this.query() 
    },
    release(item?: any, type?:string){
      if (item && type) {
        this.$router.push({name:'publishNews', query: {msg: JSON.stringify(item), type}}) 
      } else {
        this.$router.push({name:'publishNews'}) 
      }
    },
    edit(key:string){
      this.$router.push({name:'publishNews',query:{key:key}}) 
    },
    add(record:any){
      this.type = modal.on
      this.show = true
      this.uuid = record.uuid
      this.title = '上架资讯'
      this.text = '确定上架该资讯吗？'
    },
    remove(record:any){
      this.type = modal.off
      this.show = true
      this.uuid = record.uuid
      this.title = '下架资讯'
      this.text = '确定下架该资讯吗？'
    },
    onDelete(record:any){
      this.type = modal.delete
      this.show = true
      this.uuid = record.uuid
      this.title = '删除资讯'
      this.text = '确定删除该资讯吗？'
    },
    setStatus(status: number, msg: string) {
      news.modifyStatus({
        article_status: status,
        article_type: this.searchPageReqParams.article_type,
        uuid: this.uuid
      }).then(res => {
        if (res.code === 200) {
          message.success(msg)
          this.getList()
        }
      })
    },
    removeArticle() {
      const props = this.searchPageReqParams.article_type === 1 ? 'delPolicyArticle' : 'delArticle'
      news[props]({uuid: this.uuid}).then(res => {
        if (res.code === 200) {
          message.success('删除成功')
          this.getList()
        }
      })
    },
    handleOk(record:any){
      console.log(record)
      if( this.type == modal.on){
        this.setStatus(2, '上架成功')
      } else if( this.type == modal.off){
        this.setStatus(1, '下架成功')
      } else if( this.type == modal.delete){
        this.removeArticle()
        this.pagination.current = 1
      }
      this.show = false
    },
    toDetail(msg: any){
      this.$router.push({name:'newsDetail',query:{ msg: JSON.stringify(msg) }})
    }
  },
  watch: {
    'articleType'(n) {
      this.columns.forEach(i => {
        if (i.dataIndex === 'content') {
          if (n === 1) {
            i.title = '资讯内容'
          } else {
            i.title = '新闻内容'
          }
        }
      })
    }
  }
})
</script>
