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'
/**
 * 主题管理
 *
 *  version = "1.0.0";
 *  author = "liucui";
 *  email = "liu.cui@data-u.com";
 * */
export default {
  name: 'ThemeDetail',
  components: {breadcrumbComponent, simpleSelectTree},
  mixins: [routerUserMenu],
  data () {
    return {
      // 页面是否可编辑
      readStatus: false,
      /* 树过滤条件 */
      filterText: '',
      /* 接口返回的树 */
      tree: [],
      /* 树组件配置 */
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      /* 右侧节点信息 */
      formInfo: {
        // 主题标识
        id: '',
        // 主题名称
        name: '',
        // 上级主题编码
        pcode: '',
        // 描述
        description: '',
        // 修改人
        updateUserName: '',
        // 修改时间
        updateTime: ''
      }
    }
  },
  watch: {
    /* 监听树过滤条件 */
    filterText (val) {
      this.$refs.topicTree.filter(val)
    }
  },
  computed: {
    // 组件设置是否只读
    readonly: {
      // getter
      get: function () {
        return this.readStatus
      },
      // setter
      set: function (newValue) {}
    },
    /* 转换数据格式 */
    treeData: {
      get: function () {
        let tree = this.tree
        // 线性数组转成树后渲染
        let defaultProps = {
          id: 'code',
          parent_id: 'pcode',
          label: 'name'
        }
        let newTree = toTree(tree, '0', defaultProps)
        let root = {
          id: '0',
          children: newTree,
          name: '主题根目录',
          data: {
            id: '0',
            code: '0',
            name: '主题根目录'
          }
        }
        return [root]
      }
    },
    /* 转换数据格式 */
    parentTreeData: {
      get: function () {
        let {id, topicCode} = this.formInfo
        let data = []
        console.log(topicCode)
        if (id) {
          let myTree = this.tree.filter(tree => {
            return tree.code !== topicCode
          })

          // let tree = this.tree
          // 线性数组转成树后渲染
          let defaultProps = {
            id: 'code',
            parent_id: 'pcode',
            label: 'name'
          }
          let newTree = toTree(myTree, '0', defaultProps)
          let root = {
            id: '0',
            children: newTree,
            name: '主题根目录',
            data: {
              id: '0',
              code: '0',
              name: '主题根目录'
            }
          }
          data = [root]
        } else {
          data = this.treeData
        }
        return data
      }
    }
  },

  mounted () {
    this.getTree()
  },
  methods: {
    /* 获取整个树 */
    getTree () {
      this.$api.kpiTopic.topicTtree().then(res => {
        if (res.code == 1) {
          this.tree = res.data
        }
      })
    },
    /* 获取单个节点 */
    getTreeNode (code) {
      this.$api.kpiTopic.getByTopicCode(code).then(res => {
        if (res.code === '1') {
          this.formInfo = res.data

          this.$nextTick(()=>{
            this.$refs.formInfo.clearValidate()
          })
        }
      })
    },
    /* 查看详情 */
    getCurrentTreeNode (data, node) {
      this.readStatus = true
      this.getTreeNode(data.data.code)
    },
    /* 点击更新 */
    editTreeNode (node, data, store, e) {
      this.$refs.topicTree.setCurrentKey(data.data.code)
      e.cancelBubble = true
      this.readStatus = false
      this.getTreeNode(data.data.code)
    },
    /* 点击插入 */
    addTreeNode (node, data, store, e) {
      console.log(data.data.code)
      this.$refs.topicTree.setCurrentKey(data.data.code)
      e.cancelBubble = true
      this.readStatus = false
      let newNode = {
        name: '',
        id: '',
        pcode: data.data.code,
        updateTime: '',
        updateUserName: ''
      }
      this.formInfo = newNode
      this.$nextTick(() => {
        this.$refs.formInfo.clearValidate()
      })
    },
    /* 点击删除 */
    delTreeNode (node, data, store, e) {
      this.$refs.topicTree.setCurrentKey(data.data.code)
      e.cancelBubble = true
      this.$confirm('此操作将永久删除主题及其子主题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delAction(data.data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 提交删除
    delAction (obj) {
      let params = {
        id: obj.code
      }
      this.$api.kpiTopic.delete(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>
      )
    },
    /* 提交新增节点 */
    add () {
      let _this = this
      // 判断组件设置是否通过验证
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          // 提交后台并在成功后回到上一页
          let params = _this.formInfo
          _this.$api.kpiTopic.save(params)
            .then(res => {
              if (res.code == 1) {
                _this.$message.success(res.msg)
                _this.getTree()

                this.$refs.formInfo.resetFields()
              }
            })
        } else {
          return false
        }
      })
    },
    /* 提交更新节点 */
    update () {
      let _this = this
      // 判断组件设置是否通过验证
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          // 提交后台并在成功后回到上一页
          let params = _this.formInfo
          params.id = params.code
          _this.$api.kpiTopic.update(params)
            .then(res => {
              if (res.code == 1) {
                _this.$message.success(res.msg)
                _this.getTree()
                this.$refs.formInfo.resetFields()
              }
            })
        } else {
          return false
        }
      })
    },
    /* 树过滤 */
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }
}
