<template>
  <div class="page">
    <div class="tool">
      <div class="search-wrap">
        <el-select v-model="field" @change="initData">
          <el-option
            v-for="(item, i) in keywords"
            :key="i"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name" v-model.trim="keyword" clearable></el-input>
      </div>
      <div class="actions">
        <el-button v-auth="'/site/list:内容管理:文章管理:删除'" @click="batchDel">批量删除</el-button>
        <el-button v-auth="'/site/list:内容管理:文章管理:新增'" type="primary" @click="add" >新增文章</el-button>
      </div>
    </div>
    <el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="title" label="标题" align="center" min-width="150"></el-table-column>
      <el-table-column prop="classificationName" label="所属分类" align="center" min-width="120" sortable="custom"></el-table-column>
      <el-table-column prop="founderName" label="录入人" align="center" min-width="80"></el-table-column>
      <el-table-column prop="editorName" label="修改人" align="center" min-width="80"></el-table-column>
      <el-table-column prop="updateTime" label="修改日期" align="center" min-width="150" sortable="custom"></el-table-column>
      <el-table-column prop="createTime" label="发布日期" align="center" min-width="100" sortable="custom"></el-table-column>
      <el-table-column prop="workNumber" label="状态" align="center" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.isRelease ? '已发布' : '草稿' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="170">
        <template slot-scope="scope">
          <el-button v-auth="'/site/list:内容管理:文章管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button v-auth="'/site/list:内容管理:文章管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button>
          <el-switch
            v-if="scope.row.isRelease"
            class="m-l-10"
            v-model="scope.row.isDisable"
            :active-value="0"
            :inactive-value="1"
            @change="switchOff($event, scope.row, scope.$index)">
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import util from '@/libs/util'
export default {
    data() {
      return {
        field: 'title',
        keywords: [
          {
            id: 'title',
            name: '标题'
          },
          {
            id: 'founder',
            name: '录入人'
          },
          {
            id: 'editor',
            name: '修改人'
          }
        ],
        keyword: '',
        list: [],
        page: 1,
        pageSize: 10,
        total: 0,
        modifiedTimeSort: '',
        releaseDateSort: 'desc',
        classificationNameSort: '',
        editTimeSort: '',
        multipleSelection: [],
      };
    },
    watch: {
      keyword: function(val) {
        clearTimeout(this.searchTimer)
        this.searchTimer = setTimeout(() => {
          this.initData()
        }, 500)
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      // 文章列表
      getData() {
        const { keyword } = this
        const data = {
          pageNum: this.page,
          pageSize: this.pageSize,
          querySource: 3, //查询来源(3.中台 4.合伙人平台)
          classificationNameSort: this.classificationNameSort,
          editTimeSort: this.editTimeSort,
          createTimeSort: this.releaseDateSort,
          title: this.field === 'title' ? keyword : '',
          founderName: this.field === 'founder' ? keyword : '',
          editorName: this.field === 'editor' ? keyword : ''
        }
        this.$post(this.api.schemeList, data).then(({ data }) => {
          this.list = data.records
          this.total = +data.total
        }).catch(err => {})
      },
      currentChange(val) {
        this.page = val
        this.getData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      initData() {
        this.$refs.table.clearSelection()
        this.page = 1
        this.getData()
      },
      // 批量删除
      batchDel() {
        const list = this.multipleSelection
        if (list.length) {
          this.$confirm('确定要删除吗？', '提示', {
            type: 'warning'
          }).then(() => {
            const data = []
            list.map(e => {
              data.push('ids=' + e.id)
            })
            this.$post(`${this.api.batchDeletionScheme}?${data.join('&')}`).then(res => {
              this.$refs.table.clearSelection()
              util.successMsg("删除成功")
              this.getData()
            }).catch(res => {})
          }).catch(() => {})
        } else {
          util.errorMsg('请先选择数据 ！')
        }
      },
      // 删除
      handleDelete(row) {
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$post(`${this.api.batchDeletionScheme}?ids=${row.id}`).then(res => {
            util.successMsg('删除成功')
            this.getData()
          }).catch(res => {})
        }).catch(() => {})
      },
      // 禁用启用
      switchOff(val, row) {
        this.$post(`${this.api.enableOrDisableScheme}?id=${row.id}&isDisable=${val}`).then(res => {}).catch((res) => {})
      },
      // 新增
      add() {
        this.$router.push(`/schemeSet`)
      },
      // 排序回调
      sortChange(column) {
        const { order } = column
        // 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个
        if (column.prop === 'classificationName') {
          this.classificationNameSort = order ? order === 'ascending' ? 'asc' : 'desc' : ''
          if (order) {
            this.editTimeSort = ''
            this.releaseDateSort = ''
            this.sequenceSort = ''
          }
        }
        if (column.prop === 'updateTime') {
          this.editTimeSort = order ? order === 'ascending' ? 'asc' : 'desc' : ''
          if (order) {
            this.classificationNameSort = ''
            this.releaseDateSort = ''
            this.sequenceSort = ''
          }
        }
        if (column.prop === 'createTime') {
          this.releaseDateSort = order ? order === 'ascending' ? 'asc' : 'desc' : ''
          if (order) {
            this.editTimeSort = ''
            this.classificationNameSort = ''
            this.sequenceSort = ''
          }
        }
        if (column.prop === 'sequence') {
          this.sequenceSort = order ? order === 'ascending' ? 'asc' : 'desc' : ''
          if (order) {
            this.editTimeSort = ''
            this.releaseDateSort = ''
            this.classificationNameSort = ''
          }
        }
        this.getData()
      },
      // 编辑
      edit(row) {
        this.$router.push(`/schemeSet?id=${row.id}`)
      },
    }
};
</script>

<style lang="scss" scoped>
.m-l-10 {
  margin-left: 10px;
}
</style>