<template>
  <div class="new-app-container layout-vertical">
    <!--    <YMTableSearch :loading="loading" :search-form="searchForm"  @submit="onSubmit" />-->
    <YMTable
      ref="table"
      :table-key="1"
      :index="true"
      :selection="false"
      :table-options="tableOptions"
      :edit-form="editForm"
      :edit-config="editConfig"
      :columns="columns"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :is-page="false"
      @onValueChange="onValueChange"
      :custom-style="{ height: 'calc(100vh - 100px)' }"
    />
    <!-- 自定义弹窗 -->
    <Dialog ref="dialog">
      <template slot="content"/>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
import { menutree } from '@/api/data'

export default {
  components: {
    Dialog
  },
  data() {
    return {
      loading: false,
      visibleBasicDrawer: false,
      renderContent: '',
      searchForm: [],
      columns: [
        {
          label: '角色名称',
          prop: 'display_name'
        },
        {
          label: '角色描述',
          prop: 'description'
        },
        {
          label: '角色拥有的菜单',
          prop: 'menus_ids',
          html: true,
          method: (row) => {
            var str = ''
            row.menus.forEach((item) => {
              str += `<div >《${item.title}》</div`
            })
            return str
          }
        },
      ],
      rowsActions: [
        {
          key: 'edit',
          label: '编辑'
        },
        {
          key: 'delete',
          label: '删除'
        }
      ],
      apis: {
        list: {
          url: 'role/all',
          dataParam: 'data',
          resultParam: 'data',
          init: false
        },
        add: {
          url: 'role/submit'
        },
        edit: {
          url: 'role/submit'
        },
        delete: {
          url: 'role/delete',
          method: 'post'
        }
      },
      tableOptions: {
        add: {
          show: true,
          initData: () => {
            return {}
          }
        }
      },
      editForm: [
        {
          body: [
            {
              type: 'input',
              label: '角色名称',
              prop: 'display_name',
              rules: [
                { required: true, message: '请输入角色名称', trigger: 'blur' }
              ]
            },
            {
              type: 'input',
              label: '角色描述',
              prop: 'description',
              rules: [
                { required: true, message: '请输入角色描述', trigger: 'blur' }
              ]
            },
            {
              type: 'tree',
              label: '角色拥有的菜单',
              showCheckbox: true,
              prop: 'menus_ids',
              defaultProps: {
                children: 'children',
                label: 'title',
                id: 'id'
              },
              data: [],
              rules: [
                { required: false, message: '请输入角色拥有的菜单', trigger: 'blur' }
              ]
            }
          ]
        }
      ],
      editConfig: {
        addTip: '注：备注',
        editTip: '注：备注'
      }
    }
  },

  mounted() {
    this.onSubmit()
    this.getmenutree()
  },
  methods: {
    getmenutree() {
      menutree()
        .then(res => {
          this.editForm[0].body[2].data = res.data
        })
    },
    onValueChange(val) {
      console.log(val)
    },
    onSubmit(params) {
      this.$refs.table.getList(params)
    }
  }
}
</script>
