<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="filter-container">
      <el-input
        v-model="listQuery.search_name"
        placeholder="标题"
        class="filter-item filter-input"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        class="filter-item"
        @click="listQuery.page_index = 1;getList()"
      >
        搜索
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-edit"
        class="filter-item"
        @click="handleAddArtShow"
      >
        添加
      </el-button>
    </div>

    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        type="index"
        :index="indexMethod"
        width="70"
        label="编号"
        align="center"
      />
      <el-table-column
        prop="title"
        align="center"
        label="标题"
      />
      <el-table-column
        prop="author"
        align="center"
        label="作者"
      />
      <el-table-column
        prop="label"
        label="文章类型"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          {{ row.label && row.label === 1 ? '常来微聊' : '社区文章' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        align="center"
        label="上传时间"
        width="250"
      />
      <el-table-column
        label="操作"
        width="270"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-button
            type="primary"
            size="mini"
            @click="handlePreView(row)"
          >
            预览
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleEdit(row)"
          >
            修改
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="tableTotal"
      :limit="listQuery.page_size"
      :page="listQuery.page_index"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
    <!-- 预览 -->
    <el-dialog
      title="文章预览"
      width="375px"
      :visible.sync="visible.preview"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <preview :info="visible.info" />
    </el-dialog>
  </div>
</template>

<script>
// api
import {
  getList,
  setDelete
} from '@/api/community/list'
// 预览组件
import Preview from './components/Preview'
export default {
  components: {
    Preview
  },
  data() {
    return {
      table: [],
      tableTotal: 0,
      listQuery: {
        search_name: '',
        page_index: 1,
        page_size: 20
      },
      visible: {
        preview: false,
        info: {}
      },
      loadingFull: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList() {
      this.loadingFull = true
      try {
        const res = await getList(this.listQuery)
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.tableTotal = total
          this.table = list
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取社区文章失败:${e}`)
      }
      this.loadingFull = false
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    // 删除
    handleDelete(row) {
      this.$confirm(`确认删除${row.title}这篇文章?`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = row
        this.setDelete(id)
      })
    },
    // 删除
    async setDelete(id) {
      const res = await setDelete({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`删除社区文章失败${e}`)
      }
    },
    // 发表文章
    handleAddArtShow() {
      this.$router.push({
        name: 'community_add'
      })
    },
    // 修改文章
    handleEdit(row) {
      const { id } = row
      window.localStorage.setItem('editCom', JSON.stringify(row))
      this.$router.push({
        name: 'community_edit',
        params: { id }
      })
    },
    // 预览
    handlePreView(row) {
      this.visible.info = row
      this.visible.preview = true
    },
    // 编号
    indexMethod(index) {
      const { page_index, page_size } = this.listQuery
      index += (page_index - 1) * page_size + 1
      return index
    }
  }
}
</script>
