<template>
  <div v-loading="loading">
    <div class="heior_box">
      <el-button size="small" type="primary" icon="el-icon-plus" v-href="'add?optype=1'">添加文章</el-button>
      <div class="search-box">
        <el-input v-model="searchModel.keyWord" placeholder="请输入名称/标题" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <el-table :data="retData.Data" size="medium" :height="$getHeight(100)" row-key="Id" border>
      <!-- <el-table-column label="图片" width="80">
        <template slot-scope="scope">
          <img :src="scope.row.Thumb" style="width:50px;height:20px" />
        </template>
      </el-table-column> -->
       <el-table-column prop="CatalogId" label="分类" width="180"  :formatter="catalogFormat"></el-table-column>
      <el-table-column prop="Title" label="标题" width="180"></el-table-column>
      <el-table-column prop="SubTitle" label="子标题" width="180"></el-table-column>
      <el-table-column prop="AccessCount" label="访问人数"></el-table-column>
      <el-table-column prop="CreateTime" label="发布时间" aformatter="formatterTime"></el-table-column>
      <el-table-column label="发布状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.Publish"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            @change="audit(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="handel cursor edit" v-href="'add?optype=2&id='+scope.row.Id">编辑</span>
          <span class="handel cursor del" @click="del(scope.row)">删除</span>         
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="20"
        :current-page.sync="searchModel.PageIndex"
        layout="total,prev, pager, next"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "treeTable",
  data() {
    return {
      loading: false,
      retData: { TotalCount: 0, Data: [] },
      searchModel: {
        PageIndex: 1,
        keyWord: ""
      },
      catalogFormat(data) {
        console.log(data)
        switch (data.CatalogId) {
          case 1:
            return "其他帮助";
          case 2:
            return "优惠活动";
          case 3:
            return "常见售后";
          case 4:
            return "直连教程";
          case 5:
            return "公告中心";
          case 6:
            return "代理合作";
        }
      }
    };
  },
  created() {
    this.get();
  },
  methods: {
    search(){
      this.searchModel.PageIndex=1;
      this.get();
    },
    get() {
      this.$api.get("course/v1/article/page", this.searchModel).then(res => {
        this.retData = res;
      });
    },
    del(item) {
      var that = this;
      this.$confirm("确定删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(_ => {
        this.$api.post("course/v1/article/Delete?id=" + item.Id).then(res => {
          that.get();
        });
      });
    },
    audit(item) {
      this.$api.post("course/v1/article/Audit?id=" + item.Id).then(res => {
        item.Publish = res.Data;
      });
    }
  }
};
</script>
<style scoped>
</style>
