<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      @search-change="searchChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @search-reset="searchReset"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button size="small" type="primary" @click="add">新增内容</el-button>
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button size="small" type="text" @click="modify(row)">编辑</el-button>
        <el-button size="small" type="text" @click="del(row)">删除</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {getAllContentCategoryFirst} from '@/api/help/classify'
  import {getContentList, contentDel} from '@/api/help/content/allContent'

  export default {
    name: "index",
    data () {
      return {
        loading:false,
        viewDrawer:false,
        drawerTitle: '新增内容',
        query: {},
        option: {
          height: "auto",
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          indexLabel: "序号",
          selection: false,
          viewBtn: false,
          addBtn: false,
          editBtn:false,
          delBtn: false,
          columnBtn: false,
          menuWidth: 300,
          labelWidth: 151,
          dialogClickModal: false,
          dialogType: "drawer",
          dialogFullscreen: true,
          column: [
            {
              label: "内容标题",
              prop: "title",
              display: false,
              search: true
            },
            {
              label: "一级分类",
              prop: "firstId",
              display: false,
              search: true,
              type: "tree",
              dicUrl: getAllContentCategoryFirst(),
              props: {
                label: "name",
                value: "id"
              },
            },
            {
              label: "二级分类",
              prop: "secondName",
              display: false,
            },
            {
              label: "更新时间",
              prop: "createTime",
              display: false,
              type: "datetime",
              format: "yyyy/MM/dd",
            }
          ]
        },
        data: [
          {
            title: '测试标题',
            type: '常见问题',
            tag: '规范',
            time: '2021.7.2',
            note: '<p>测试内容</p>'
          }
        ],
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 100,
        },
        first: [],
        second: []
      }
    },
    methods: {
      add () {
        this.$router.push({ name: '添加/修改内容', params: { type: 'add', id: null } })
      },
      modify (row) {
        this.$router.push({ name: '添加/修改内容', params: { type: 'edit', id: JSON.stringify(row) } })
      },
      del (row) {
        this.$confirm('是否删除此数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          contentDel(JSON.stringify(row)).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.onLoad(this.page);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      /* 表格方法 */
      onLoad(page, params = {}) {
        this.loading = true;
        getContentList(
          page.currentPage,
          page.pageSize,
          Object.assign(this.query, params)
        ).then((res) => {
          this.data = res.data.data.records;
          this.page.total = res.data.data.total;
          this.loading = false;
        });
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params,done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      currentChange(val) {
        this.page.currentPage = val
      },
      sizeChange(val) {
        this.page.currentPage = 1
        this.page.pageSize = val
      },
      refreshChange () {
        this.page.currentPage = 1;
        this.onLoad(this.page)
      }
    }
  }
</script>

<style scoped>

</style>
