<template>
    <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
      <a-divider orientation="left">
        <b>{{ formTitle }}</b>
      </a-divider>
      <a-form :form="form" v-bind="formItemLayout">
        <a-form-item label="上级菜单" v-if="form.getFieldValue('menuType') !== menuType.S">
          <a-tree-select
            v-decorator="[
              'parentId',
              {
                initialValue: (detail && detail.parentId) || undefined,
                rules: [{ required: true, message: '请选择上级菜单' }]
              }
            ]"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="orgTree"
            placeholder="请选择"
            :replaceFields="{ children: 'children', title: 'label', key: 'value', value: 'value' }"
            tree-default-expand-all
          />
        </a-form-item>
        <a-form-item label="菜单类型">
          <a-radio-group
            :options="menuTypeOptions"
            v-decorator="[
              'menuType',
              {
                initialValue: (detail && detail.menuType) || menuType.M,
                rules: [{ required: true, message: '请选择菜单类型' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="代码" v-if="form.getFieldValue('menuType') === menuType.S">
          <a-input
            v-decorator="[
              'systemCode',
              {
                initialValue: (detail && detail.systemCode) || undefined,
                rules: [{required: true, message: '代码不能为空'}]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="菜单图标" v-if="form.getFieldValue('menuType') !== menuType.F">
          <icon-selector
            v-decorator="[
              'icon',
              {
                initialValue: (detail && detail.icon) || undefined
              }
            ]"
          />
        </a-form-item>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="菜单名称" v-bind="inlineFormItemlayout">
              <a-input
                v-decorator="[
                  'menuName',
                  {
                    initialValue: (detail && detail.menuName) || undefined,
                    rules: [{required: true, message: '资源名称不能为空'}]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
  
          <a-col :span="12">
            <a-form-item label="显示排序" v-bind="inlineFormItemlayout">
              <a-input-number
                :style="{ width: '100%' }"
                v-decorator="[
                  'orderNum',
                  {
                    initialValue: (detail && detail.orderNum) || 0,
                    rules: [{required: true, message: '显示排序不能为空'}]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" >
          <a-col :span="12" v-if="form.getFieldValue('menuType') === menuType.C">
            <a-form-item label="是否外链" v-bind="inlineFormItemlayout">
              <a-radio-group
                :options="isFrameOptions"
                v-decorator="[
                  'isFrame',
                  {
                    initialValue: (detail && detail.isFrame) || '0'
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="form.getFieldValue('menuType') === menuType.C || form.getFieldValue('menuType') === menuType.M">
            <a-form-item label="路由地址" v-bind="inlineFormItemlayout">
              <a-input
                v-decorator="[
                  'path',
                  {
                    initialValue: (detail && detail.path) || undefined,
                    rules: [{required: true, message: '路由地址不能为空'}]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="form.getFieldValue('menuType') === menuType.M">
            <a-form-item label="目录路径" v-bind="inlineFormItemlayout">
              <a-input
                v-decorator="[
                  'directoryPath',
                  {
                    initialValue: (detail && detail.directoryPath) || undefined,
  
                  }
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12" v-if="form.getFieldValue('menuType') === menuType.C">
            <a-form-item label="组件路径" v-bind="inlineFormItemlayout">
              <a-input
                placeholder=""
                v-decorator="[
                  'component',
                  {
                    initialValue: (detail && detail.component) || undefined
                  }
                ]"
              />
              <!-- <a-auto-complete
                v-decorator="[
                  'component',
                  {
                    initialValue: (detail && detail.component) || undefined
                  }
                ]">
                <template slot="dataSource">
                  <a-select-option
                    v-for="item in layoutList"
                    :key="item.value"
                    :value="item.value">{{ item.label }}</a-select-option>
                </template>
              </a-auto-complete> -->
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="form.getFieldValue('menuType') === menuType.C || form.getFieldValue('menuType') === menuType.F">
            <a-form-item label="权限标识" :help="form.getFieldValue('menuType') === menuType.C || form.getFieldValue('menuType') === menuType.F ? '' : '填写后台请求的url地址'" v-bind="inlineFormItemlayout">
              <a-input
                v-decorator="[
                  'perms',
                  {
                    initialValue: (detail && detail.perms) || undefined
                  }
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <template v-if="form.getFieldValue('menuType') === menuType.C">
          <a-form-item label="是否低代码">
            <a-radio-group
              :options="isLowcodeOptions"
              v-decorator="[
                'isLowcode',
                {
                  initialValue: (detail && detail.isLowcode) || '0'
                }
              ]"
            />
          </a-form-item>
          <a-row :gutter="24" v-if="form.getFieldValue('isLowcode') === '1'">
            <a-col :span="12">
              <a-form-item label="低代码菜单类别" v-bind="inlineFormItemlayout">
                <a-select
                  placeholder="请选择"
                  style="width: 100%"
                  allow-clear
                  v-decorator="[
                    'lowcodeType',
                    {
                      initialValue: (detail && detail.lowcodeType) || undefined
                    }
                  ]">
                  <a-select-option v-for="(m, index) in lowcodeMenuTypeOptions" :key="index" :value="m.value">{{
                    m.label
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="组件pageId" v-bind="inlineFormItemlayout">
                <a-input
                  v-decorator="[
                    'pageId',
                    {
                      initialValue: (detail && detail.pageId) || undefined
                    }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </template>
        <a-form-item label="菜单状态">
          <a-radio-group :options="menuVisableOptions"
            v-decorator="[
              'visible',
              {
                initialValue: (detail && detail.visible) || '0',
                rules: [{required: true, message: '请选择状态'}]
              }
            ]"
          />
        </a-form-item>
        <div class="drawer-footer">
          <div class="footer-fixed">
            <a-button type="primary" @click="submitForm">
              保存
            </a-button>
            <a-button type="dashed" @click="onClose">
              取消
            </a-button>
          </div>
        </div>
      </a-form>
    </a-drawer>
  </template>
  
  <script>
  import IconSelector from '@/components/IconSelector'
  import { getMenu, updateMenu } from '@/api/system/menu'
  import menuType from '@/constants/menuType'
  import lowcodeMenuType from '@/constants/lowcodeMenuType'
  
  const defaultForm = {
    parentId: undefined,
    menuType: menuType.M,
    systemCode: undefined,
    icon: undefined,
    menuName: undefined,
    orderNum: 0,
    isFrame: '0',
    path: undefined,
    component: undefined,
    perms: undefined,
    isLowcode: '0',
    lowcodeMenuType: undefined,
    pageId: undefined,
    visible: '0'
  }
  export default {
    name: 'CreateForm',
    props: {
      orgTree: {
        type: Array,
        required: true
      }
    },
    components: {
      IconSelector
    },
    data() {
      return {
        open: false,
        form: this.$form.createForm(this),
        formItemLayout: {
          labelCol: {
            span: 4
           },
          wrapperCol: {
            span: 20
          }
        },
        inlineFormItemlayout: {
          labelCol: {
            span: 8
          },
          wrapperCol: {
            span: 16
          }
        },
  
        formTitle: '',
        detail: undefined,
        menuTypeOptions: [
          { label: '系统', value: menuType.S},
          { label: '目录', value: menuType.M },
          { label: '菜单', value: menuType.C },
          { label: '按钮/资源', value: menuType.F }
        ],
        isFrameOptions: [
          { label: '是', value: '1' },
          { label: '否', value: '0' }
        ],
        isLowcodeOptions: [
          { label: '是', value: '1' },
          { label: '否', value: '0' }
        ],
        menuVisableOptions: [
          { label: '显示', value: '0' },
          { label: '隐藏', value: '1' }
        ],
        lowcodeMenuTypeOptions: [
          { label: 'Dashboard', value: lowcodeMenuType.DASHBOARD },
          { label: '表单', value: lowcodeMenuType.FORM }
        ],
        layoutList: [
          {
            label: 'PageView',
            value: 'PageView'
          },
          {
            label: 'PageFrame',
            value: 'PageFrame'
          },
          {
            label: 'RouteView',
            value: 'RouteView'
          }
        ],
  
        menuType: menuType
      }
    },
    methods: {
      onClose() {
        this.open = false
        this.form.resetFields()
      },
      handleAdd(row) {
        this.formTitle = '添加菜单'
        this.form.setFieldsValue({ ...defaultForm, parentId: row?.menuId })
        this.detail = { parentId: row?.menuId }
        this.$nextTick(() => {
          this.open = true
        })
      },
      handleCopy(row) {
        this.formTitle = '添加菜单'
        this.form.setFieldsValue({ ...row })
        this.detail = { ...row, menuId: undefined }
  
        this.$nextTick(() => {
          this.open = true
        })
      },
      handleUpdate(row) {
        const menuId = row.menuId
        getMenu(menuId).then((response) => {
          this.detail = response.result
          this.form.setFieldsValue({ ...response.result })
          this.formTitle = '修改菜单'
  
          this.$nextTick(() => {
            this.open = true
          })
        })
      },
      submitForm() {
        this.form.validateFields((errors, values) => {
          if (!errors) {
            const params = {
              ...values,
              parentId: values.parentId ?? '0',
              menuId: this.detail?.menuId,
              component: values.menuType !== menuType.C ? undefined : (values.component ?? 'RouteView')
            }
            updateMenu(params).then(() => {
              this.$message.success(this.detail ? '修改成功' : '新增成功', 3)
              this.open = false
              this.$emit('refresh-list')
            })
          }
        })
      }
    },
  }
  </script>
  
  <style lang="less" scoped>
  /deep/ .ant-form .ant-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  </style>