import routerUserMenu from '@/mixins/router-user-menu'
import breadcrumbComponent from '@/components/breadcrumb.vue'
import simpleSelectTree from '@/components/simple-select-tree.vue'

import {toTree} from '@/utils/util'

export default {
  name: 'TypeDetail',
  components:{ breadcrumbComponent, simpleSelectTree},
  mixins: [routerUserMenu],
  data () {
    return {
      hasReport: false,
      readStatus: false,
      /* 树过滤条件 */
      filterText: '',

      /* 接口返回的树 */
      menu: [],

      /* 树组件配置 */
      defaultProps: {
        children: 'children',
        label: 'name'
      },

      /* 右侧节点信息 */
      formInfo: {
        className: '',
        classCode: '',
        id: '',
        pcode: '',
        updateTime: '',
        updateUserName: ''
      },
    }
  },
  watch: {
    /* 监听树过滤条件 */
    filterText(val) {
      this.$refs.menuTree.filter(val);
    }
  },
  computed: {
    /* 转换数据格式 */
    treeData:{
      get: function(){
        let tree=this.menu
        // 线性数组转成树后渲染
        let defaultProps={
          id: 'classCode',
          parent_id: 'pcode',
          label: 'className'
        }
        let newTree=toTree(tree,'0',defaultProps)
        let root={
          id: '0',
          children: newTree,
          name: '图表分类',
          data:{
            id: '0',
            classCode: '0',
            className: '图表分类'
          }
        }
        return [root]
      }
    },


    /* 转换数据格式 */
    parentTreeData:{
      get: function(){
        let {id,classCode}=this.formInfo
        let data=[]

        if(id){
          let tree=this.menu.filter(menu=>{
            return menu.classCode!==classCode
          })
          // 线性数组转成树后渲染
          let defaultProps={
            id: 'classCode',
            parent_id: 'pcode',
            label: 'className'
          }
          let newTree=toTree(tree,'0',defaultProps)
          let root={
            id: '0',
            children: newTree,
            name: '图表分类',
            data:{
              id: '0',
              classCode: '0',
              className: '图表分类'
            }
          }
          data= [root]
        }else{
          data=this.treeData
        }
        return data

      }
    }
  },

  mounted () {
    this.getTree()
  },
  methods: {
    /* 获取整个树 */
    getTree(){
      this.$api.chartType.getChartClassTree().then(res=>{
        if(res.code==1){
          this.menu=res.data
        }
      })
    },

    /* 获取单个节点 */
    getTreeNode(classCode){
      this.$api.chartType.getChartClassTreeByCode({classCode:classCode}).then(res=>{
        if(res.code==='1'){
          this.formInfo=res.data
          this.$nextTick(()=>{
            this.$refs.formInfo.clearValidate()
          })

        }
      })
    },

    /* 点击更新 */
    editTreeNode(node, data, store,e){
      this.$refs.menuTree.setCurrentKey(data.data.classCode)
      e.cancelBubble = true;
      this.getTreeNode(data.data.classCode)
      this.readStatus=false
    },

    /* 点击查看 */
    showTreeNode(data, node){
      this.getTreeNode(data.data.classCode)
      this.readStatus=true
      this.hasReport=data.data.reportCount>0
    },

    /* 点击插入 */
    addTreeNode(node, data, store,e){
      this.$refs.menuTree.setCurrentKey(data.data.classCode)
      e.cancelBubble = true;
      let newNode={
        className: '',
        id: '',
        pcode: data.data.classCode,
        updateTime: '',
        updateUserName: ''
      }
      this.formInfo=newNode
      this.readStatus=false
      this.$nextTick(()=>{
        this.$refs.formInfo.clearValidate()
        // console.log(this.$refs.menuTree.getCurrentNode())
      })
    },

    /* 点击删除 */
    delTreeNode(node, data, store){
      this.$refs.menuTree.setCurrentKey(data.data.classCode)
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delAction(data.data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 提交删除
    delAction(obj) {
      let params = {
        classCode: obj.classCode
      }
      delChartClass.deleteMenu(params)
        .then(res => {
          if (res.code == 1) {
            this.$message.success(res.msg)
            this.getTree()
          }
        })
    },

    // 修改节点文本，自定义图标，return内是jsx语法
    renderContent(h, { node, data, store }) {
      if(node.level == 1){
        return (
          <div class='tree-node'>
            <i class={node.level == 1 ? 'el-icon-datau-genmulu' : (data.children&&data.children.length > 0 ? 'el-icon-datau-wenjianjia' : 'el-icon-datau-wenjian')}></i>
            <span>{node.label}</span>
            <span class='tree-node-method'>
            <i class='el-icon-plus' on-click={(e) => this.addTreeNode(node, data, store,e)}></i>
         </span>
          </div>
        )
      }
      return (
        <div class='tree-node'>
          <i class={node.level == 1 ? 'el-icon-datau-genmulu' : (data.children&&data.children.length > 0 ? 'el-icon-datau-wenjianjia' : 'el-icon-datau-wenjian')}></i>
          <span >{node.label}</span>
          <span class='tree-node-method'>
            <i class='el-icon-edit' on-click={(e) => this.editTreeNode(node, data, store,e)}></i>
            <i class='el-icon-plus' on-click={(e) => this.addTreeNode(node, data, store,e)}></i>
            <i class='el-icon-minus' on-click={(e) => this.delTreeNode(node, data, store,e)}></i>
         </span>
        </div>
    )
    },

    viewNode(){
      let menu=this.formInfo
      this.go('AutomaticMenuReport',{id: menu.classCode})
    },

    /* 提交新增节点 */
    add(){
      let _this = this
      // 判断组件设置是否通过验证
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          // 提交后台并在成功后回到上一页
          let params = _this.formInfo
          _this.$api.chartType.addChartClass(params)
            .then(res => {
              if (res.code == 1) {
                _this.formInfo={
                  className: '',
                  id: '',
                  classCode: '',
                  pcode: '',
                  updateTime: '',
                  updateUserName: ''
                }
                _this.$nextTick(()=>{
                  _this.$refs.formInfo.clearValidate()
                })
                _this.$message.success(res.msg)
                _this.getTree()
              }
            })
        } else {
          return false
        }
      })
    },

    /* 提交更新节点 */
    update(){
      let _this = this
      // 判断组件设置是否通过验证
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          // 提交后台并在成功后回到上一页
          let params = _this.formInfo
          params.id=params.classCode
          _this.$api.chartType.updateChartClass(params)
            .then(res => {
              if (res.code == 1) {
                _this.formInfo={
                  className: '',
                  id: '',
                  classCode: '',
                  pcode: '',
                  updateTime: '',
                  updateUserName: ''
                }
                _this.$nextTick(()=>{
                  _this.$refs.formInfo.clearValidate()
                })
                _this.$message.success(res.msg)
                _this.getTree()
              }
            })
        } else {
          return false;
        }
      })
    },

    /* 树过滤 */
    filterNode(value, data) {
      console.log(data)
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },


    // test(a,b,c){
    //   console.log(a)
    //   console.log(b)
    //   console.log(c)
    // }
  }
}
