<template>
    <div>
        <Card>
          <div class="card-manage">
            <div class="left-auth-catalogue">
                <Tree :data="allAuth" show-checkbox multiple ref="tree" @on-check-change="changeAuthList"></Tree>
            </div>
            <div class="right-auth-content">
              <div class="item">
                <label class="label">名称：</label>
                <Input type="text" v-model="form.name" style="width:300px"/>
              </div>
              <div class="item">
                <label class="label">上级节点：</label>
                <Select v-model="form.select" style="width:300px">
                  <Option value="全部">
                      全部
                  </Option>
                </Select>
                <!-- <Input type="text" v-model="form.select" /> -->
              </div>
              <div class="item">
                <label class="label">类型：</label>
                <RadioGroup v-model="form.type" @on-change="changeRadio">
                <Radio :label="4" style="width:100px">导航</Radio>
                <Radio :label="5" style="width:100px">页面</Radio>
                <Radio :label="6" style="width:100px">按钮</Radio>
              </RadioGroup>
              </div>
              <!-- <div class="item">
                 <label class="label">请求方法：</label>
                 <CheckboxGroup v-model="form.reqType">
                  <Checkbox label="POST"></Checkbox>
                  <Checkbox label="GET"></Checkbox>
                  <Checkbox label="PUT"></Checkbox>
                  <Checkbox label="DELETE"></Checkbox>
                </CheckboxGroup>
              </div> -->
              <div class="item">
                 <label class="label">请求URL：</label>
                 <Input type="text" v-model="form.url" style="width:300px"/>
              </div>
              <div class="footer">
                <Button class="btn-opt" @click="handleReset">重置</Button>
                <Button class="btn-opt" type="primary" @click="handleAdd">添加</Button>
              </div>
            </div>
            </div>
        </Card>
    </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        name: '',
        select: '',
        type: '',
        reqType: [],
        url: ''
      },
      allAuth: [{
        title: 'parent 1',
        children: [
          {
            title: 'parent 1-1',
            expand: true,
            children: [
              {
                title: 'leaf 1-1-1'
              },
              {
                title: 'leaf 1-1-2'
              }
            ]
          },
          {
            title: 'parent 1-2',
            children: [
              {
                title: 'leaf 1-2-1'
                // checked: true
              },
              {
                title: 'leaf 1-2-1'
              }
            ]
          }
        ]
      }]
    }
  },
  methods: {
    handleReset () {

    },
    handleAdd () {

    },
    changeAuthList () {

    },
    changeRadio () {

    },
    getAuthCatalogueData () {
      this.api({
        apiName: 'getAuthCatalogue',
        success: (res) => {
          let value = this.formatRes(res.data)
          this.allAuth.forEach(item => {
            item.title = value[0].title
            item.children = value[0].children
            item.categoryId = value[0].menuIndex
            item.expand = true
          })
        }
      })
    },
    formatRes (res) {
      const arr = []
      let obj = {}
      res.forEach(item => {
        const tmp = { ...item }
        if (item.menuName) {
          if (tmp.subAuthMenu || tmp.subAuthMenu == null) {
            tmp.children = this.formatRes(tmp.subAuthMenu)
            obj = {
              title: tmp.menuName,
              children: tmp.children,
              menuIndex: tmp.menuIndex,
              checked: tmp.select
            }
          }
          arr.push(obj)
        }
      })
      return arr
    }
  },
  created () {
    this.getAuthCatalogueData()
  }
}
</script>
<style lang="less" scoped>
.card-manage {
  display: flex;
  .left-auth-catalogue {
    width: 45%;
  }
  .right-auth-content {
    .item {
      display: flex;
      margin-bottom: 15px;
      align-items: center;
      .label {
        width: 100px;
        text-align: right;
      }
    }
  }
  .footer {
    margin-top: 20px;
    margin-left:120px;
    .btn-opt {
      margin: 0 10px;
    }
  }
}
</style>
