<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="filter-container">
      <el-select v-model="listQuery.group_id" placeholder="请选择文章类型" class="filter-item" @change="getList()">
        <el-option
          v-for="item in cleGroupList"
          :key="item.id"
          :label="item.group_name"
          :value="item.id"
        />
      </el-select>
      <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>
      <el-button
        type="primary"
        class="filter-item"
        @click="dialogFormVisible=true"
      >
        添加文章类型
      </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="group_name"
        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
        prop="issue"
        align="center"
        label="第几期"
      />
      <el-table-column
        prop="is_top"
        label="是否置顶"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag :type="row.is_top == 1 ? 'success' : 'info'">{{ row.is_top == 0 ? '不置顶' : '置顶' }}</el-tag>
          <!-- <span :class="[row.is_top == 1 ? 'green' : '']">{{row.is_top == 0 ? '否' : '是' }}</span> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="recommended"
        label="是否推荐"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag :type="row.recommended == 1 ? 'success' : 'info'">{{ row.recommended == 0 ? '不推荐' : '推荐' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="270"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-button
            type="success"
            size="mini"
            plain
            @click="handlePreView(row)"
          >
            预览
          </el-button>
          <el-button
            type="primary"
            size="mini"
            plain
            @click="handleEdit(row)"
          >
            修改
          </el-button>
          <el-button
            type="danger"
            size="mini"
            plain
            @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>
    <el-dialog
      title="添加文章类型"
      :visible.sync="dialogFormVisible"
      width="20%"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="formRule"
        label-width="90px"
      >
        <el-form-item label="类型名称:" prop="group_name">
          <el-input v-model="form.group_name" autocomplete="off" style="width:200px" />
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-select v-model="form.status" placeholder="状态">
            <el-option label="禁用" value="1" />
            <el-option label="启用" value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; form = {}">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// api
import {
  getArticleGroup,
  getList,
  setDelete,
  AddArticleGroup
} from '@/api/community/list'
// 预览组件
import Preview from './components/Preview'
export default {
  components: {
    Preview
  },
  data() {
    return {
      table: [],
      cleGroupList: [],
      tableTotal: 0,
      dialogFormVisible: false,
      params: {
        search_content: '',
        status: 0
      },
      form: {
        group_name: '',
        status: ''
      },
      formRule: {
        group_name: [{ required: true, message: '请输入文章类型名称', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ]
      },
      listQuery: {
        search_name: '',
        group_id: '',
        page_index: 1,
        page_size: 20
      },
      visible: {
        preview: false,
        info: {}
      },
      loadingFull: false
    }
  },
  created() {
    this.getArticleGroup()
    this.getList()
  },
  methods: {
    async getArticleGroup() {
      this.loadingFull = true
      await getArticleGroup(this.params).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.cleGroupList = res.data.list
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // getArticleGroup(){
    //   getArticleGroup().then(res=>{
    //     console.log(res)
    //   })
    // },
    // 获取列表
    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
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //  const res = await AddArticleGroup(this.form)
          //   try {
          //     const { message, code } = res
          //     if (code === 200) {
          //       this.$message.success(message)
          //     } else {
          //       this.$message.error(message)
          //     }
          //   } catch (e) {
          //     console.log(e)
          //   }
          AddArticleGroup(this.form).then(res => {
            this.$message.success('添加成功!')
            this.dialogFormVisible = false
            this.getArticleGroup()
            this.getList()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

