<template>
  <div class="soundTrack">
    <Tabs type="card" :animated="false" @on-click='onClick'>
      <TabPane label="放松">
        <div class="topSearch">
          <div class="left">
            <Input style="width:200px" search enter-button placeholder="" @on-search='onSearch'/>
            <span class="lable">
              关联主题
            </span>
              <Cascader style="width:250px" :data="treeData" @on-change="handleChange" v-model="seleted"></Cascader>
            <!-- <span class="lable">
              场景
            </span>
             <Select clearable  v-model="model1" style="width:80px">
              <Option
                v-for="item in $store.state.app.sceneObj.scenes"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
            <span class="lable">
              主题
            </span>
             <Select clearable  v-model="model1" style="width:80px">
              <Option
                v-for="item in $store.state.app.sceneObj.themes"
               :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select> -->
          </div>
          <div class="right">
            <Button type="success" @click="seq">排序</Button>
            <Button type="info">预览</Button>
            <Button type="warning">复制</Button>
            <Button @click="add"  type="primary">新增</Button>
            <Button type="error" @click="del">删除</Button>
          </div>
        </div>
         <Stable :data='data'  @edit='edit' @select='select'/>
      </TabPane>
      <TabPane label="常规">
       <div class="topSearch">
          <div class="left">
            <Input style="width:200px" search enter-button placeholder="" @on-search='onSearch'/>
            <span class="lable">
              关联内容
            </span>
            <Cascader style="width:250px" :data="treeData2" @on-change="handleChange"></Cascader>
            <!-- <span class="lable">
              栏目
            </span>
             <Select clearable  v-model="model1" style="width:80px">
              <Option
                v-for="item in $store.state.app.categoryObj.categories"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
            <span class="lable">
              条目
            </span>
             <Select clearable  v-model="model1" style="width:80px">
             <Option
                v-for="item in $store.state.app.categoryObj.courses"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
            <span class="lable">
              板块
            </span>
             <Select clearable  v-model="model1" style="width:80px">
             <Option
                v-for="item in $store.state.app.categoryObj.sections"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
            <span class="lable">
              内容
            </span>
             <Select clearable  v-model="model1" style="width:80px">
             <Option
                v-for="item in $store.state.app.categoryObj.contents"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select> -->
          </div>
          <div class="right">
            <Button type="success" @click="seq">排序</Button>
            <Button type="info">预览</Button>
            <Button type="warning">复制</Button>
            <Button @click="add"  type="primary">新增</Button>
            <Button type="error" @click="del">删除</Button>
          </div>
        </div>
         <Stable :data='data'  @edit='edit' @select='select'/>
      </TabPane>
    </Tabs>
       <Forms :visible.sync="visible" :search='search' :row='row' :treeData='type===1?treeData:treeData2' :type='type'/>
        <draggableList :visible.sync="draggableVisible" :list='data' @ok='ok'/>
  </div>
</template>

<script>
import Forms from '@/view/components/soundTrack/form.vue'
import Stable from '@/view/components/soundTrack/table.vue'
import draggableList from '@/view/common/draggable.vue'
import {
  getTracks,
  editTracks,
  delTracks
} from '@/api/tracks'
import {
  getTreeScene2
} from '@/api/scenes'
import {
  getTreeCategorie2
} from '@/api/categories'
export default {
  name: 'soundTrack',
  components: {
    Forms,
    Stable,
    draggableList
  },
  data () {
    return {
      type: 1,
      seleted: [],
      visible: false,
      draggableVisible: false,
      treeData: [],
      treeData2: [],
      selectList: [],
      categoryObj: {},
      sceneObj: {},
      row: {},
      data: []
    }
  },
  methods: {
    handleChange (val) {
      console.log(val)
      this.search({
        theme: 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) {
      editTracks(list).then((res) => {
        if (res.code === 200 && res.data.length > 0) {
          this.$Message.success('操作成功')
          this.draggableVisible = false
          this.search()
        }
      })
    },
    del () {
      delTracks(this.selectList).then((res) => {
        if (res.code === 200) {
          this.$Message.success('删除成功')
          this.search()
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    getTree () {
      getTreeScene2('track').then((res) => {
        this.treeData = res.data.scenes.map((p) => {
          p.label = p.name
          p.value = p.id
          p.children = p.themes
          if (p.themes.length > 0) {
            this.recursion(p.children)
          }
          return p
        })
      })
    },
    recursion (data) {
      data = data.map((p) => {
        p.label = p.name
        p.value = p.id
        return p
      })
    },
    getTree2 () {
      getTreeCategorie2('content').then((res) => {
        this.treeData2 = res.data.categories.map((p) => {
          p.label = p.name
          p.value = p.id
          p.children = p.courses
          if (p.courses.length > 0) {
            this.recursion2(p.children)
          }
          return p
        })
      })
    },
    recursion2 (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
      })
    },
    onClick (e) {
      this.type = e + 1
      console.log(this.type)
    },
    onSearch (p) {
      this.search({
        keyword: p
      })
    },
    search (p) {
      getTracks(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 = {
      theme: id
    }
    if (parmas) {
      this.search(parmas)
    } else {
      this.search({})
    }
  },
  mounted () {
    this.getTree()
    this.getTree2()
  }
}
</script>

<style lang="less">
.soundTrack {
  position: relative;
  /deep/ .ivu-tabs{
      min-height: 60vh;
  }
}
</style>
