<template>
  <div class="assistance-center-container">
    <div class="assistance-center-top-zone">
      <div class="assistance-center-top-operation">
        <el-button type="primary" @click="addDocument">添加文章</el-button>
        <el-button type="primary" @click="classifyManage" style="margin-left: 20px;">分类管理</el-button>
      </div>
      <div class="assistance-center-top-search">
        <el-cascader
          :options="classifyList"
          collapse-tags
          clearable
          :props="{
            multiple:true,
            value:'ClassifyId',
            label:'ClassifyName',
            children:'Children',
            emitPath:false
          }"
          placeholder="所属分类"
          @change="handlSearchClassify"
        />
        <el-input placeholder="文章标题" v-model="queryParams.KeyWord" clearable @input="searchDocumentList"
        style="width:500px;margin-left: 20px;">
				  <i slot="prefix" class="el-input__icon el-icon-search"></i>
			  </el-input>
      </div>
    </div>
    <el-table ref="documentTable" :data="documentList" border class="document-table">
      <el-table-column prop="Title" label="文章标题" align="center">
        <template slot-scope="scope">
          <span @click="goDetail(scope.row)" class="document-title">{{scope.row.Title}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ClassifyName" label="所属分类" align="center">
        <template slot-scope="scope"> <span>{{scope.row.ClassifyName}}</span> </template>
      </el-table-column>
      <el-table-column prop="Author" label="文章作者" align="center">
        <template slot-scope="scope"> <span>{{scope.row.Author}}</span> </template>
      </el-table-column>
      <el-table-column prop="Status" label="发布状态" align="center">
        <template slot-scope="scope"> 
          <span :style="{color:scope.row.Status==2?'#4FB112':'#F56C6C'}">{{scope.row.Status==2?"已发布":"未发布"}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="CreateTime" label="创建时间" align="center">
        <template slot-scope="scope"> <span>{{scope.row.CreateTime}}</span> </template>
      </el-table-column>
      <el-table-column prop="ModifyTime" label="更新时间" align="center">
        <template slot-scope="scope"> <span>{{scope.row.ModifyTime}}</span> </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="110" v-if="Role!='admin'">
        <template slot-scope="scope">
          <div style="color:#4099ef;">
            <span style="margin-right:10px;cursor: pointer;" @click="publish(scope.row)" v-if="scope.row.Status==2">取消发布</span>
            <template v-if="scope.row.Status==1">
              <span style="margin-right:10px;cursor: pointer;" @click="editDocument(scope.row)">编辑</span>
              <span style="margin-right:10px;cursor: pointer;" @click="publish(scope.row)">发布</span>
            </template>
            <span style="color: #F56C6C;cursor: pointer;" @click="deleteDocument(scope.row)">删除</span>
          </div>
        </template>
      </el-table-column>
      <div slot="empty" style="lineHeight:44px;margin:60px 0;color:#999;">
        <img src="~@/assets/img/cus_m/nodata.png" style="display:block;width:160px;height:128px;margin: auto;">
        <span>暂无数据</span>
      </div>
    </el-table>
    <!-- 页数选择器 -->
    <m-page :page_no="queryParams.CurrentIndex" :pageSize="queryParams.PageSize"
    :total="total" style="position: absolute;right: 40px;bottom: 40px;" @handleCurrentChange="pageChange"
    />
  </div>
</template>

<script>
import mPage from '@/components/mPage.vue';
import { assistanceDocInterence } from '../../../api/modules/assistanceDoc';

  export default {
    name:"assistanceCenter",
    components:{mPage},
    data() {
      return {
        classifyList:[],
        documentList:[],
        ClassifyIdList:[],
        queryParams:{
          CurrentIndex:1,
          PageSize:10,
          ClassifyIds:"",
          KeyWord:""
        },
        total:100
      }
    },
    created(){
      this.getClassifyList()
      this.getDocumentList()
    },
    methods: {
      getClassifyList(){
        assistanceDocInterence.getAssistanceClassifyList().then(res=>{
          if(res.Ret == 200){
            this.classifyList = res.Data?res.Data.AllNodes||[]:[]
          }
        })
      },
      getDocumentList(){
        assistanceDocInterence.getAssistanceDocList(this.queryParams).then(res=>{
          if(res.Ret == 200){
            this.documentList=res.Data.List || []
            this.total = res.Data.Paging.Totals || 0
          }
        })
      },
      searchDocumentList(){
        this.queryParams.CurrentIndex=1
        this.getDocumentList()
      },
      handlSearchClassify(value){
        // console.log(value);
        this.queryParams.ClassifyIds = value.join(',')
        this.queryParams.CurrentIndex=1
        this.getDocumentList()
      },
      pageChange(page_no){
        this.queryParams.CurrentIndex=page_no
        this.getDocumentList()
      },
      goDetail(item){
        this.$router.push({path:"/assistanceDocDetail",query:{DocId:item.Id}})
      },
      //发布/取消发布
      publish(item){
        let text = item.Status==2?'取消发布':'发布'

        this.$confirm(`是否确认${text}？`,"提示",
        {
          type:"warning",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(res=>{
          assistanceDocInterence.assistanceDocPublish({
            DocId:item.Id,
            Status:3-item.Status
          }).then(res=>{
            if(res.Ret == 200){
              this.$message.success(text+"成功")
              this.getDocumentList()
            }
          })
        }).catch(() => {});
      },
      addDocument(){
        this.$router.push("/assistanceDocAdd")
      },
      editDocument(item){
        this.$router.push({path:"/assistanceDocEdit",query:{DocId:item.Id}})
      },
      //删除文章
      deleteDocument(item){
        this.$confirm('删除后不可恢复，是否确认删除？',"提示",
        {
          type:"warning",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(res=>{
          assistanceDocInterence.assistanceDocDelete({DocId:item.Id}).then(res=>{
            if(res.Ret == 200){
              this.$message.success("删除成功")
              this.getDocumentList()
            }
          })
        }).catch(() => {});
      },
      classifyManage(){
        this.$router.push("/docClassifyManage")
      }
    },
  }
</script>

<style lang="scss" scoped>
.assistance-center-container{
  background-color: white;
  min-height: calc(100vh - 110px);
  padding: 30px 30px 80px;
  box-sizing: border-box;
  border: solid 1px #ECECEC;
  .assistance-center-top-zone{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .assistance-center-top-operation{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin: 0 30px 8px 0;
    }
    .assistance-center-top-search{
      margin-bottom: 8px;
    }
  }
  .document-table{
    .document-title{
      color:#409EFF;
      cursor:pointer;
    }
  }
}
</style>