<template lang="pug">
  <div class='m_i_r_dialog'>
    <el-dialog  width="750px" style="height:640px" :close-on-click-modal='false' :visible.sync='visible' :modal="false" >
      .title-bold( slot='title') 新增通道轮巡
      <el-form :model='dataForm'  ref='dataForm' :inline="true" label-width="100px">
        <el-form-item label='轮播任务名称:' required  label-width="125px">
          <el-input v-model='dataForm.leftListOnData.name' disabled></el-input>
        </el-form-item>
        <el-form-item label='线路站点:' required>
          <el-input v-model='dataForm.lineStation' disabled></el-input>
        </el-form-item>
        <el-form-item label='资源点:' required></el-form-item>
      </el-form>
      <div style="height:370px">
        <div class="m_i_dialog_tree_left m_i_dialog_tree tree-container" >
          <el-tree class="dic_tree"  :data="treeLeftData" ref='leftTree' :accordion='true' :highlight-current='true' :props="defaultProps" :default-expand-all='true' :node-key='nodeKey' >
            <span class="custom-tree-node" style='width:100%' slot-scope="{ node, data }">
              <span  @dblclick="dbLeftclick(node)">{{node.label}}</span>
            </span>
          </el-tree>
        </div>
        <div class="m_i_dialog_tree_button">
          <el-button icon="el-icon-right" @click="toRightClick"></el-button>
          <el-button icon="el-icon-back" @click="toListClick" style="margin:10px 0"></el-button>
        </div>
        <div class="m_i_dialog_tree_tree_right m_i_dialog_tree tree-container">
          <el-tree class="dic_tree"  :data="treeRightData" :default-expand-all="true" ref='rightTree' :accordion='true' :highlight-current='true' :props="defaultProps" :node-key='nodeKey' >
            <span class="custom-tree-node"  style='width:100%' slot-scope="{ node, data }">
              <span @dblclick="dbRightclick(node)">{{node.label}}</span>
            </span>
          </el-tree>
        </div>
      </div>

      <div style="margin:20px auto; width:160px" >
        <el-button type="primary" @click='cancel'>取消</el-button>
        <el-button type="primary" @click='setData' v-prevent-re-click>保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import util from '../../../libs/util.js'
export default {
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data () {
    return {
      visible: false,
      dataForm: {},
      treeData: [], //全部数据列表
      nodeKey: 'id',
      treeLeftData: [], //左侧树形数据
      treeRightData: [], //右侧树形数据
      rightDataList: [], //右侧选中数据id列表
      rightTreeDataList: [], //右侧数据列表
      defaultProps: {
        children: 'children',
        label: 'name',
        level1: 'level'
      }
    }
  },
  created() {

  },
  methods: {
    init (res) {
      this.treeData = []
      this.treeRightData = []
      this.treeLeftData = []
      this.rightDataList = []
      this.rightTreeDataList = []
      this.visible = true
      this.dataForm = res
      this.getTree(res.rightAddListData)
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', '新增通道轮巡', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.visible = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },
    getTree(rightAddListData) {
      console.log(rightAddListData)
      this.$http({
        url: this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList'),
        method: 'post',
        data: {
          subCode: this.dataForm.subCode,
          stationId: this.dataForm.stationId
        }
      }).then(data => {
        if (data.code == 0) {
          let treeList = JSON.parse(JSON.stringify(data.nodes))
          treeList.forEach(x => {
            if (x.children && x.children.length > 0) {
              x.children.forEach((res, index) => {
                rightAddListData.forEach(y => {
                  if (res.id === y.resourceId) {
                    x.children.splice(index, 1)
                  }
                })
              })
            }
          })
          this.treeLeftData = treeList
          this.setDataList(JSON.parse(JSON.stringify(data.nodes)))
        }
      })
    },
    dbLeftclick(node) {
      this.dataMove(node.data)
    },
    toRightClick() {
      this.dataMove(this.$refs.leftTree.getCurrentNode())
    },
    dataMove(node) {
      if (node && node.level && node.level == 6) {
        if (this.rightDataList.indexOf(node.id) == -1) {
          console.log(node.id)
          this.rightDataList.push(node.id)
          this.setRightData(node)
          this.treeRightData = this.setRightTreeData()
          this.$refs.leftTree.setCurrentNode(node.id, false)
        }
      } else {
        this.$message.warning('请选择资源点')
      }
    },
    setRightData(node) { //生成右侧数据
      if (this.rightTreeDataList.indexOf(node) == -1) {
        this.rightTreeDataList.push(node)
      }
      this.treeData.forEach((res, index) => {
        if (res.id == node.pid) {
          if (this.rightTreeDataList.indexOf(res) == -1) {
            res.children = []
            this.rightTreeDataList.push(res)
          }
        }
      })
    },
    setRightTreeData() { //生成右侧树
      return util.ConvertToTreeJson(this.rightTreeDataList, 'id', 'pid', 'level,name,pid,addressCode,password,port,type,username,xpoint,ypoint')
    },
    setDataList(data) { //tree数据拆分
      data.forEach(res => {
        this.treeData.push(res)
        if (res.children && res.children.length) {
          res.children.forEach(item => {
            this.treeData.push(item)
          })
        }
      })
    },
    setData() { //保存
    console.log(this.rightDataList)
      this.$http({
        url: this.$http.adornUrlEq('/videoTaskResource/save'),
        method: 'post',
        data: {
          taskId: this.dataForm.leftListOnData.id,
          stationId: this.dataForm.leftListOnData.stationId,
          resourceIds: this.rightDataList
        }
      }).then(data => {
        if (data.code == 0) {
          this.$message.success('保存成功')
          this.$emit('rightDialogSuccess')
          this.visible = false
        }
      })
    },
    toListClick() {
      this.toListSet(this.$refs.rightTree.getCurrentNode())
    },
    toListSet(node) {
      if (node && node.level && node.level == 6) {
        let nodeIdIndex = this.rightDataList.indexOf(node.id)
        this.rightDataList.splice(nodeIdIndex, 1)
        this.rightTreeDataList.forEach((item, index) => {
          if (node.id == item.id) {
            this.rightTreeDataList.splice(index, 1)
          }
        })

        let list = this.setRightTreeData()
        list.forEach((res, index) => {
          if (!res.children || !res.children.length) {
            list.splice(index, 1)
            this.rightTreeDataList.forEach((item, index) => {
              if (node.pid == item.id) {
                this.rightTreeDataList.splice(index, 1)
              }
            })
          }
        })
        this.treeRightData = list
        this.$refs.rightTree.setCurrentNode(node.id, false)
      } else {
        this.$message.warning('请选择资源点')
      }
    },
    dbRightclick(node) {
      this.toListSet(node.data)
    }
  }
}
</script>
<style lang='scss'>
.m_i_r_dialog{
  .m_i_dialog_tree_button{
    float: left;
    width: 60px;
    margin-top: 150px;
  }
  .m_i_dialog_tree{
    width: 300px; float: left; height: 370px; overflow: auto;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);

  }
  .el-dialog{
    height: 650px;
  }
}
</style>
<style lang='scss' scoped>
    .dic_tree {
        // background: #f4f4f4;
        font-size: 14px;
        // transform: translateX(-6px);
    }
    .dic_tree /deep/ .el-tree-node__content {
        padding-left: 0px !important;
    }

    .dic_tree /deep/ .el-tree-node {
        position: relative;
        padding-left: 16px;
    }

    .dic_tree /deep/ .el-tree-node__children {
        padding-left: 8px;
    }

    .dic_tree /deep/ .el-tree-node :last-child:before {
        height: 38px;
    }

    .dic_tree /deep/ .el-tree > .el-tree-node:before {
        border-left: none;
    }

    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .dic_tree /deep/ .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:before {
        border-left: 1px dashed #bfbfbf;
        bottom: 0px;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:after {
        border-top: 1px dashed #bfbfbf;
        height: 20px;
        top: 12px;
        width: 36px;
    }
    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .tree-container {
        /* 树的parent，样式自定 */
    }
    .dic_tree /deep/ .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    .dic_tree /deep/ .el-icon-caret-right:before {
        background: url("../../../assets/images/add.png");
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        font-size: 18px;
        background-size: 18px;
    }
    .dic_tree
    /deep/
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        background: url("../../../assets/images/sub.png");
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        font-size: 18px;
        background-size: 18px;
    }
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon{
  padding:0 2px 0 0;
}

    .dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
        opacity: 0;
    }
    .dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
      // margin-left: -15px !important;
    }
</style>