<template>
  <div class="container">
    <div class="content">
      <div class="left">
        <div class="title">
          角色管理
        </div>
        <div class="main">
          <my-tree
            :data="treeData"
            :formConfig="treeformConfig"
            :ruleValidate="treeRuleValidate"
            :showCheckbox="false"
            @handleEvent="treeHandle"
            @check="treeCheck"></my-tree>
        </div>
      </div>
      <div class="right" style="margin-right: 15px">
        <div class="title">
          仓储web权限
        </div>
        <div class="main" v-if="roleKey">
          <div style="text-align: right">
            <Button type="primary" @click="savaRoleMenu">保存权限</Button>
          </div>
          <div style="height: calc(100% - 32px)">
            <my-tree
              :data="menuData"
              :show-edit="false"
              :multiple="true"
              @check="menuTreeCheck"></my-tree>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          仓储APP权限
        </div>
        <div class="main" v-if="roleKey">
          <div style="text-align: right">
            <Button type="primary" @click="savaRoleMenu">保存权限</Button>
          </div>
          <div style="height: calc(100% - 32px)">
            <my-tree
              :data="menuData2"
              :show-edit="false"
              :multiple="true"
              @check="menuTreeCheck2"></my-tree>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetRolePageList,
  AddRole,
  UpdateRole,
  DeleteRole,
  GetMenuOperateList,
  EditRoleMenu,
  GetMenuZTreeChildren
} from '@/api/user'
import MyTable from '_c/my-table/my-table'
import MyTree from '_c/my-tree/my-tree'
import MyModalForm from '_c/my-modal-form/my-modal-form'

export default {
  name: 'role_manage',
  components: {
    MyTree,
    MyTable,
    MyModalForm
  },
  data () {
    return {
      show: false,
      roleKey: '',
      menuIds: [],
      menuIds2: [],
      // 树相关数据
      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: 'select',
          label: '角色类型',
          key: 'isDefault',
          list: [
            { label: '默认用户', value: 1 },
            { label: '普通用户', value: 0 }
          ],
          placeholder: '请选择角色类型'
        }
      ],
      ruleValidate: {
        name: [
          { required: true, message: '物料名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ],
        spec: [
          { required: true, message: '规格不能为空', trigger: 'blur' }
        ],
        unitWeight: [
          { required: true, message: '克重不能为空', trigger: 'blur' }
        ]
      },
      formType: '',
      formData: {},
      formConfig: [
        {
          type: 'input',
          label: '物料编码',
          key: 'code',
          placeholder: '请输入物料编码'
        },
        {
          type: 'input',
          label: '物料名称',
          key: 'name',
          placeholder: '请输入物料名称'
        },
        {
          type: 'input',
          label: '规格',
          key: 'spec',
          placeholder: '请输入规格'
        },
        {
          type: 'input',
          comType: 'number',
          label: '单位',
          key: 'unit',
          placeholder: '请输入单位/米'
        },
        {
          type: 'input',
          comType: 'number',
          label: '克重',
          key: 'unitWeight',
          placeholder: '请输入克重'
        },
        {
          type: 'input',
          comType: 'number',
          label: '门幅',
          key: 'width',
          placeholder: '请输入门幅'
        },
        {
          type: 'input',
          comType: 'number',
          label: '安全库存',
          key: 'safetyStock',
          placeholder: '请输入安全库存'
        },
        {
          type: 'input',
          comType: 'number',
          label: '采购周期',
          key: 'safetyWarnDay',
          placeholder: '请输入采购周期'
        },
        {
          type: 'input',
          comType: 'number',
          label: '抽检比例',
          key: 'checkRate',
          placeholder: '请输入抽检比例'
        },
        {
          type: 'input',
          comType: 'textarea',
          label: '备注',
          key: 'remark',
          placeholder: '请输入仓库说明'
        }
      ],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'code',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'name',
          minWidth: 150
        },
        {
          title: '克重',
          key: 'unitWeight',
          minWidth: 100
        },
        {
          title: '门幅',
          key: 'width',
          minWidth: 100
        }, {
          title: '安全库存',
          key: 'safetyStock',
          minWidth: 100
        },
        {
          title: '采购周期',
          key: 'safetyWarnDay',
          minWidth: 100
        },
        {
          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.formType = 'edit'
                      this.show = true
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                  },
                  on: {
                    click: () => {
                      this.$MyModal.show({ text: '是否删除？' }).$on('confirm', () => {
                        MaterialDelete({
                          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
      },
      menuData: [],
      menuData2: [],
      treeData: []
    }
  },
  methods: {
    cfm (type, data) {
      if (type === 'add') {
        MaterialAdd({
          ...data,
          categoryCode: this.categoryCode
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'edit') {
        MaterialUpdate(data).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      }
    },
    getTree () {
      GetRolePageList().then(res => {
        if (res.code === 0) {
          let array = [
            { name: '默认角色', children: [], isHiddenEditBtn: true, expand: true },
            { name: '普通角色', children: [], isHiddenEditBtn: true, expand: true }
          ]
          res.result.forEach(item => {
            if (item.isDefault) {
              item.isHiddenAddBtn = true
              array[0].children.push(item)
            } else {
              array[1].children.push(item)
              item.isHiddenAddBtn = true
            }
          })
          this.treeData = array
        }
      })
    },
    // list 项目路由 menus 系统定义的路由
    iniTree (list, menus) {
      list.forEach(item => {
        menus.forEach(menu => {
          item.expand = true
          if (item.value === menu) {
            item.checked = true
          }
          if (item.children) {
            this.iniTree(item.children, menus)
          }
        })
      })
      return list
    },
    getHandleMenuIds (data, type) {
      data.forEach(item => {
        if (item.checked) {
          if (type === 1) {
            this.menuIds.push(item.value)
          } else if (type === 2) {
            this.menuIds2.push(item.value)
          }
        }
        if (item.children) {
          this.getHandleMenuIds(item.children, type)
        }
      })
    },
    // 获取已勾选的菜单
    getList () {
      GetMenuZTreeChildren({
        deviceType: 1
      }).then(res => {
        if (res.code === 0) {
          GetMenuOperateList({ roleKey: this.roleKey }).then((menu) => {
            if (menu.code === 0) {
              this.menuData = this.iniTree(res.result, menu.result.menuIds)
              this.menuIds = []
              this.getHandleMenuIds(this.menuData, 1)
            }
          })
        }
      })
    },
    getList2 () {
      GetMenuZTreeChildren({
        deviceType: 3
      }).then(res => {
        if (res.code === 0) {
          GetMenuOperateList({ roleKey: this.roleKey }).then((menu) => {
            if (menu.code === 0) {
              this.menuData2 = this.iniTree(res.result, menu.result.menuIds)
              this.menuIds2 = []
              this.getHandleMenuIds(this.menuData2, 2)
            }
          })
        }
      })
    },
    savaRoleMenu () {
      EditRoleMenu({
        roleKey: this.roleKey,
        menuIds: [ ...this.menuIds, ...this.menuIds2 ]
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info('保存成功！')
          this.getList()
        }
      })
    },
    menuTreeCheck (data) {
      this.menuIds = []
      data.forEach(item => {
        this.menuIds.push(item.value)
      })
    },
    menuTreeCheck2 (data) {
      this.menuIds2 = []
      data.forEach(item => {
        this.menuIds2.push(item.value)
      })
    },
    // 选择物料分类 显示物料列表
    treeCheck (data) {
      if (data.name !== '默认角色' && data.name !== '普通角色') {
        this.roleKey = data.key
        this.menuIds = []
        this.getList()
        this.getList2()
      }
    },
    // 提交树操作
    treeHandle (type, data, target) {
      if (type === 'add') {
        AddRole({
          ...data,
          isDefault: !!data.isDefault
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getTree()
          }
        })
      } else if (type === 'edit') {
        UpdateRole({
          ...data,
          isDefault: !!data.isDefault,
          id: data.id
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getTree()
          }
        })
      } else if (type === 'del') {
        DeleteRole({ id: target.id }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getTree()
          }
        })
      }
    }
  },
  mounted () {
    this.getTree()
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  overflow: hidden;
  .content {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    height: 100%;
    .left, .right {
      height: 100%;
      overflow: auto;
      box-shadow: 3px 3px 5px rgb(127, 127, 127, .35);
      background-color: #FFFFFF;
      .title {
        padding: 5px 0;
        background-color: #539DFA;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        color: #FFFFFF;
      }
      .main {
        box-sizing: border-box;
        padding: 10px;
        height: ~"calc(100% - 48px)";
      }
    }
    .left {
      margin-right: 15px;
      flex: 1;
      min-width: 320px;
    }
    .right {
      flex: 3;
      min-width: 200px;
    }
  }
}
</style>
