<template>
  <div>
    <div class="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>文化数据分类管理</a-breadcrumb-item>
        <a-breadcrumb-item>文化数据类别管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="body">
      <div class="query">
        <a-row type="flex" justify="space-between" >
          <a-col :span="6" class="query_item">
            <span>一级分类：</span>
            <a-select default-value=""  @change="handleChange" v-model="query.top_class">
              <a-select-option :value="item" v-for="(item,index) in oneList" :key="index">
                {{item}}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6" class="query_item">
            <span>二级分类：</span>
            <a-select default-value=""  v-model="query.son_class">
              <a-select-option :value="item" v-for="(item,index) in twoList" :key="index">
                {{item}}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6" class="query_item">
            <span>创建人员：</span>
            <a-select default-value=""  v-model="query.user_id">
              <a-select-option :value="item.id" v-for="(item,index) in userList" :key="index">
                {{item.name}}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6" class="query_item" >
            <span>使用状态：</span>
            <a-select default-value=""  v-model="query.usestatus">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="0">启用</a-select-option>
              <a-select-option value="1">禁用</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="12" class="query_item query_item2">
            <span>创建时间：</span>
            <a-range-picker valueFormat="YYYY-MM-DD" v-model="query.createtime"/>
          </a-col>
          <a-col :span="12" class="query_item query_item1">
            <a-space :size="21">
              <a-button type="primary" class="query_button" @click="getAllDate">查 询</a-button>
              <a-button class="query_button" @click="resetQurey">重 置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </div>
      <div class="table">
        <div class="table_title">
          <span>查询结果</span>
          <a-button type="primary" class="query_button" @click="visible2=true">新 增</a-button>
        </div>
        <a-table :columns="columns" :data-source="data" bordered :pagination="false">
          <template slot="status" slot-scope="status">
            <span>{{status==0?'启用':'禁用'}}</span>
          </template>
          <template slot="operation" slot-scope="item">
            <a-space :size="24">
              <span class="table_operation" @click="updateStatus(item.id)">{{item.status==0?'禁用':'启用'}}</span>
              <span class="table_operation" @click="selectRecords(item.id)">操作记录</span>
            </a-space>
          </template>
        </a-table>
        <a-pagination
        class="pagination"
        size="small"
        :total="total"
        v-model="page"
        :page-size="limit"
        :show-total="total => `第 ${startTotal} / ${endTotal} 条 / 总共 ${total} 条`"
        :page-size-options="pageSizeOptions"
        @showSizeChange="onShowSizeChange"
        @change="changePage"
        show-size-changer >
          <template slot="buildOptionText" slot-scope="props">
            <span >{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </div>
    <operationRecords :visible.sync="visible1" :logDate="logDate"></operationRecords>
    <!-- 添加分类 -->
    <a-modal  v-model="visible2" title="新增分类" width="800px" :bodyStyle="modeStyle">
      <div class="">
        <a-row  justify="space-between" >
          <a-col :span="10" class="query_item">
            <span>一级分类：</span>
            <a-select default-value=""  @change="handleChange(1)" v-model="query1.pull_top_class">
              <a-select-option :value="item" v-for="(item,index) in oneList" :key="index">
                {{item}}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="10" class="query_item">
            <span>自定义名称：</span>
            <a-input v-model="query1.top_class"/>
          </a-col>
        </a-row>
        <a-row  justify="space-between" >
          <a-col :span="10" class="query_item">
            <span>二级分类：</span>
            <a-select default-value="">
              <a-select-option :value="item" v-for="(item,index) in twoList" :key="index">
                {{item}}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="10" class="query_item">
            <span>自定义名称：</span>
            <a-input v-model="query1.son_class"/>
          </a-col>
        </a-row>
      </div>
      <template slot="footer">
        <div>
          <a-button type="white" @click="visible2=false">返 回</a-button>
          <a-button type="primary" @click="addClass">确定</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
import Operation from '../../Operation.vue'
import operationRecords from '../../operationRecords/index.vue'
import {ClassifyList,getLog,getTop,getSon,addClass,updateStatus,getUser} from '../../../api/index'
export default {
  data() {
    return{
      visible1:false,
      visible2:false,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      //一页多少条
      pageSize:10,
      total:500,
      startTotal:1,
      endTotal:10,
      // 当前页数
      page: 1,
      limit:10,
      query:{
        top_class:'',
        son_class:'',
        user_id:'',
        usestatus:'',
        createtime:[]
      },
      query1:{
        top_class:'',
        son_class:'',
        pull_top_class:''
      },
      modeStyle:{
        'height':'200px'
      },
      logDate:[],
      data:[],
      columns:[
        {
          title: '序号',
          dataIndex: 'id',
          width:'65px',
          align:'center'
        },
        {
          title: '创建时间',
          dataIndex: 'createtime',
          // align:'center'
        },
        {
          title: '一级分类名称',
          dataIndex: 'top_class',
          // align:'center'
        },
        {
          title: '二级分类名称',
          dataIndex: 'son_class',
          // align:'center'
        },
        {
          title: '使用状态',
          dataIndex: 'status',
          scopedSlots:{customRender:'status'},
          // align:'center'
        },
        {
          title: '创建人员',
          dataIndex: 'account_name',
          // align:'center'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operation' },
          // align:'center'
        },
      ],
      oneList:[],
      twoList:[],
      userList:[]
    }
  },
  components:{
    Operation,
    operationRecords
  },
  created(){
    this.getAllDate()
    this.getTop()
    this.getUser()
  },
  methods:{
    //修改状态
    updateStatus(id){
      let data={id:id}
      updateStatus(data).then(res=>{
        if(res.code==200){
          this.$message.success('修改分类状态成功！');
          this.getAllDate()
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    //添加分类
    addClass(){
      addClass(this.query1).then(res=>{
        if(res.code==200){
          this.$message.success('添加成功！');
          Object.assign(this.query1, this.$options.data().query1)
          this.getTop()
          this.visible2=false
        }else{
          this.$message.error(res.msg);
        }
      })
    },
     // 重置query
    resetQurey(){
      Object.assign(this.query, this.$options.data().query)
      this.getAllDate()
    },
    //获取二级分类
    getSon(type){
      let data
      if(type==1){
        data={top_class:this.query1.pull_top_class}
      }else{
        data=this.query
      }
      getSon(data).then(res=>{
        if(res.code==200){
          this.twoList=res.data
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 获取一级分类
    getTop(){
      getTop().then(res=>{
        if(res.code==200){
          this.oneList=res.data
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 获取用户
    getUser(){
      getUser().then(res=>{
        if(res.code==200){
          this.userList=res.data
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    getAllDate(){
      let data=this.query
      data.limit=this.limit
      data.page=this.page
      ClassifyList(data).then(res=>{
        console.info(res)
        if(res.code==200){
          this.data=res.data.data
          this.startTotal=res.data.start
          this.endTotal=res.data.end
          this.total=res.data.total
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    selectRecords(id){
      let data={log_id:id,type:'class'}
      getLog(data).then(res=>{
        if(res.code==200){
          this.logDate=res.data
          this.visible1=true
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 切换一页显示多少条
    // 切换一页显示多少条
    onShowSizeChange(current, pageSize){
      this.limit = pageSize;
      this.getAllDate()
    },
    // 切换页数
    changePage(page, pageSize){
      this.page=page
      this.getAllDate()
    },
    handleChange(type){
      this.getSon(type)
    },
    onChange(){

    }
  }
}
</script>
<style scoped>
  /deep/ .ant-modal-header{
    border-bottom: none;
  }
  /deep/ .ant-modal-footer{
    border-top: none;
    padding: 20px 16px;
  }
</style>
