<!-- 菜单管理 -->
<template>
  <div class="container">
    <div class="wrap">
      <div class="title">
        仓储web菜单
      </div>
      <my-tree
        :data="data"
        :formConfig="treeformConfig"
        :ruleValidate="treeRuleValidate"
        :show-checkbox="false"
        @handleEvent="treeHandle"
        >
      </my-tree>
    </div>
    <div class="wrap">
      <div class="title">
        仓储APP菜单
      </div>
      <my-tree
        :data="data2"
        :formConfig="treeformConfig"
        :ruleValidate="treeRuleValidate"
        :show-checkbox="false"
        @handleEvent="treeHandle2"
      >
      </my-tree>
    </div>
  </div>
</template>

<script>
import { GetMenuZTreeChildren, MenuAdd, MenuUpdate, MenuDelete } from '@/api/user'
import MyTree from '_c/my-tree/my-tree'
export default {
  name: 'menu_manage',
  components: {
    MyTree
  },
  data () {
    return {
      formType: '',
      show: false,
      data: [],
      data2: [],
      // 树相关数据
      treeRuleValidate: {
        name: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        key: [
          { required: true, message: '菜单编码不能为空', trigger: 'blur' }
        ]
      },
      treeformConfig: [
        {
          type: 'input',
          label: '菜单名称',
          key: 'name',
          placeholder: '请输入菜单名称'
        },
        {
          type: 'input',
          label: '菜单编码',
          key: 'key',
          placeholder: '请输入菜单编码'
        },
        {
          type: 'input',
          label: '优先级',
          key: 'sort',
          placeholder: '请输入菜单优先级'
        },
        {
          type: 'input',
          label: '图标',
          key: 'icon',
          placeholder: '请输入图标'
        },
        {
          type: 'input',
          label: '备注',
          key: 'remark',
          placeholder: '请输入备注'
        }
      ],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '菜单名称',
          key: 'name',
          minWidth: 200
        },
        {
          title: '菜单编码',
          key: 'key',
          minWidth: 200
        },
        {
          title: '备注',
          key: 'remark',
          minWidth: 200
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '200px',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '.5vw'
                  },
                  on: {
                    click: () => {
                      for (const key in params.row) {
                        this.formData[key] = params.row[key]
                      }
                      this.formData.key = params.row.data.key
                      // this.formData.name = params.row.materialName
                      // this.$set(this.formData, 'applyUser', this.$store.state.user.name)
                      this.formType = 'edit'
                      this.updShow = true
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                  },
                  on: {
                    click: () => {
                      this.$MyModal.show({ text: '是否删除？' }).$on('confirm', () => {
                        MenuDelete({
                          id: params.row.id
                        }).then(res => {
                          if (res.code === 0) {
                            this.$Message.info(res.msg)
                            this.getList()
                          }
                        })
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '添加',
          align: 'right',
          e: 'add'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    // 提交树操作
    treeHandle (type, data, target) {
      if (type === 'add') {
        MenuAdd({
          ...data,
          deviceType: 1,
          parentId: target.value || ''
        }).then(res => { 
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'edit') {
        console.log('data.data.id-----------')
        console.log(data)
        MenuUpdate({
          ...data,
          id: data.value
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'del') {
        MenuDelete({ id: target.value }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      }
    },
    treeHandle2 (type, data, target) {
      if (type === 'add') {
        MenuAdd({
          ...data,
          deviceType: 3,
          parentId: target.value || ''
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList2()
          }
        })
      } else if (type === 'edit') {
        console.log('data.data.id-----------')
        console.log(data)
        MenuUpdate({
          ...data,
          id: data.value
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList2()
          }
        })
      } else if (type === 'del') {
        MenuDelete({ id: target.value }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList2()
          }
        })
      }
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.key = option.key
          this.getList()
          break
        case 'add':
          this.formType = 'add'
          this.show = true
          break
        case 'back':
          this.$router.go(-1)
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    initTree (data) {
      data.forEach(item => {
        item.key = item.data.key
        item.icon = item.data.icon
        item.sort = item.data.sort
        item.expand = true
        if (item.children) {
          this.initTree(item.children)
        }
      })
    },
    getList () {
      const v = this
      v.$get('/api/blade-system/menu/menu-list').then(res=>{
        //v.initTree(res.data)
        this.data = res.data
        // console.log(res)
      })
      // GetMenuZTreeChildren({
      //   deviceType: 1
      // }).then(res => {
      //   if (res.code === 0) {
      //     this.data = res.result
      //     this.initTree(this.data)
      //     this.params.total = res.result.totalCount
      //   }
      // })
    },
    getList2 () {
      GetMenuZTreeChildren({
        deviceType: 3
      }).then(res => {
        if (res.code === 0) {
          this.data2 = res.result
          this.initTree(this.data2)
          this.params.total = res.result.totalCount
        }
      })
    }
  },
  mounted () {
    this.getList()
    this.getList2()
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .wrap {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    background: #FFFFFF;
    border-radius: 5px;
    &:first-child {
      margin-right: 10px;
    }
    .title {
      padding-bottom: 10px;
      text-align: center;
      font-weight: bold;
    }
  }
}
::-webkit-scrollbar {
  //width: 0px; /*对垂直流动条有效*/
  //height: 0px; /*对水平流动条有效*/
  width: 0; /*对垂直流动条有效*/
  height: 5px;
  background-color: #FFFFFF;
}
</style>
