<template>
  <div class="content">
    <div class="topSearch">
      <div class="left">
        <Input style="width:280px" search enter-button placeholder="" @on-search='onSearch'/>
         <span class="lable">
              关联条目板块
            </span>
              <Cascader style="width:250px" :data="treeData" v-model="seleted" @on-change="handleChange"></Cascader>
      </div>
      <div class="right">
        <Button class='success-btn' type="success" @click="seq">场景排序</Button>
        <Button @click="add" type="primary">新增</Button>
        <Button type="error" @click="del">删除</Button>
      </div>
    </div>
     <Stable :data='data' @edit='edit' @select='select'/>
     <Forms :visible.sync="visible" :search='search' :row='row' :treeData='treeData'/>
     <draggableList :visible.sync="draggableVisible" :list='data' @ok='ok'/>
  </div>
</template>

<script>
import Stable from './table.vue'
import Forms from './form.vue'
import draggableList from '@/view/common/draggable.vue'
import {
  getContents,
  delContents,
  editContents
} from '@/api/contents'
import {
  getTreeCategorie2
} from '@/api/categories'
export default {
  name: 'categories',
  components: {
    Stable,
    Forms,
    draggableList
  },
  data () {
    return {
      seleted: [],
      treeData: [],
      selectList: [],
      visible: false,
      draggableVisible: false,
      row: {},
      data: []
    }
  },
  methods: {
    handleChange (val) {
      console.log(val)
      this.search({
        section: val[val.length - 1]
      })
    },
    edit (row) {
      this.visible = true
      this.row = row
    },
    add () {
      this.visible = true
      this.row = {
        id: 'add'
      }
    },
    select (val) {
      this.selectList = val
    },
    seq () {
      this.draggableVisible = true
    },
    ok (list) {
      editContents(list).then((res) => {
        if (res.code === 200 && res.data.length > 0) {
          this.$Message.success('操作成功')
          this.draggableVisible = false
          this.search()
        }
      })
    },
    del () {
      delContents(this.selectList).then((res) => {
        if (res.code === 200) {
          this.$Message.success('删除成功')
          this.search()
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    getTree () {
      getTreeCategorie2('section').then((res) => {
        this.treeData = res.data.categories.map((p) => {
          p.label = p.name
          p.value = p.id
          p.children = p.courses
          if (p.courses.length > 0) {
            this.recursion(p.children)
          }
          return p
        })
      })
    },
    recursion (data) {
      data = data.map((p) => {
        p.label = p.name
        p.value = p.id
        p.children = p.sections
        if (p.children.length > 0) {
          p.children = p.children.map((i) => {
            i.label = i.details.name
            i.value = i.id
            return i
          })
        }
        return p
      })
    },
    onSearch (p) {
      this.search({
        keyword: p
      })
    },
    search (p) {
      getContents(p).then((res) => {
        this.data = res.data
      })
    }
  },
  activated: function () {
    let id = this.$route.query.row && this.$route.query.row.id
    this.seleted = this.$route.query.row && this.$route.query.row.ancestors
    this.seleted[this.seleted.length] = id
    let parmas = {
      section: id
    }
    if (parmas) {
      this.search(parmas)
    } else {
      this.search({})
    }
  },
  mounted () {
    this.getTree()
  }
}
</script>

<style lang="less"></style>
