<template>
  <form-list ref="configForm" class="pt-5" :items="formConfig">
    <template #parentId="{ item }">
      <v-menu offset-y nudge-top="20" ref="menu" attach>
        <template v-slot:activator="{ on, attrs }">
          <div v-bind="attrs" v-on="on" style="flex: 1">
            <v-text-field
              :value="item.choose?.label ?? item.value"
              v-bind="item"
            ></v-text-field>
          </div>
        </template>
        <div class="white" style="max-height: 300px; overflow-y: auto; min-width: 300px;">
          <v-treeview
            activatable
            dense
            hoverable
            :active="[item.choose]"
            :open="open"
            item-text="label"
            item-disabled="mark"
            selection-type="independent"
            return-object
            :items="items"
            @update:active="$e => handleUpdate($e, item)"
          >
            <template #label="{ item }">
              <div style="cursor: pointer;">
                {{ item.label }}
              </div>
            </template>
          </v-treeview>
        </div>
      </v-menu>
    </template>
  </form-list>
</template>

<script>
import FormList from '@/components/Form/list'
import { getRoutersDetail } from '@/api/menu'
const defaultConfig = {
  outlined: true,
  dense: true
}
export default {
  name: 'menu-edit',
  components: {
    FormList
  },
  props: {
    items: {
      type: Array,
      default: () => []
    },
    menuList: {
      type: Array,
      default: () => []
    },
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      formConfig: {
        options: [
          {
            slotName: 'parentId',
            key: 'parentId',
            choose: {
              label: '根菜单'
            },
            // disabled: true,
            readonly: true,
            isShow: [0, 1, 2, 3],
            value: 0,
            label: '父节点ID[parentId]（顶级菜单ID为0） *',
            ...defaultConfig
          },
          {
            type: 'autocomplete',
            key: 'type',
            value: 0,
            label: '请选择类型',
            items: this.menuList,
            ...defaultConfig,
            rules: [v => v !== null || '请输入模板'],
            change: this.typeHandleChange
          },
          {
            type: 'text',
            key: 'name',
            isShow: [0, 1, 3],
            value: '',
            label: '请输入路由名称[name] *',
            ...defaultConfig,
            rules: [v => !!v || '请输入路由名称']
          },
          {
            type: 'text',
            key: 'component',
            isShow: [0, 1],
            value: '',
            label: '请输入模板[component]',
            ...defaultConfig
          },
          {
            type: 'text',
            key: 'label',
            isShow: [0, 1, 2, 3],
            value: '',
            label: '请输入名字[label] *',
            ...defaultConfig,
            rules: [v => !!v || '请输入标题']
          },
          {
            type: 'text',
            key: 'code',
            isShow: [2],
            isMetaData: true,
            hide: true,
            value: '',
            label: '请输入标识[code] *',
            ...defaultConfig,
            rules: [v => !!v || '请输入标识']
          },
          {
            type: 'text',
            key: 'enName',
            isShow: [0, 1, 3],
            isMetaData: true,
            hide: true,
            value: '',
            label: '请输入英文标题[enName] *',
            ...defaultConfig,
            rules: [v => !!v || '请输入英文标题']
          },
          {
            type: 'text',
            key: 'icon',
            isShow: [0, 1, 3],
            value: '',
            label: '请输入mdi图标[icon]',
            ...defaultConfig
          },
          {
            type: 'text',
            key: 'path',
            isShow: [0, 1],
            value: '',
            label: '请输入路由地址[path] *',
            ...defaultConfig,
            rules: [v => !!v || '请输入路径']
          },
          {
            type: 'text',
            key: 'remark',
            isShow: [0, 1, 2],
            value: '',
            label: '请输入备注[remark]',
            ...defaultConfig
          },
          {
            type: 'number',
            key: 'sort',
            isShow: [0, 1, 2, 3],
            value: '',
            label: '请输入排序序号[sort]',
            ...defaultConfig
          },
          {
            type: 'ifRadio',
            key: 'allowClick',
            isMetaData: true,
            isShow: [0, 1],
            value: false,
            label: '面包屑允许点击',
            items: [
              { label: '是', value: true },
              { label: '否', value: false }
            ]
          },
          {
            type: 'ifRadio',
            key: 'keepAlive',
            isMetaData: true,
            isShow: [1],
            hide: true,
            value: false,
            label: '使用keep-alive',
            items: [
              { label: '是', value: true },
              { label: '否', value: false }
            ]
          },
          {
            type: 'ifRadio',
            key: 'hidden',
            isShow: [0, 1, 2],
            hide: false,
            label: '隐藏',
            value: 0,
            items: [
              { label: '是', value: 1 },
              { label: '否', value: 0 }
            ]
          },
          {
            type: 'ifRadio',
            key: 'editModules',
            isMetaData: true,
            isShow: [1],
            hide: true,
            value: false,
            label: '允许编辑组件',
            items: [
              { label: '是', value: true },
              { label: '否', value: false }
            ]
          },
          {
            type: 'ifRadio',
            key: 'fullScreen',
            isMetaData: true,
            isShow: [1],
            hide: true,
            value: false,
            label: '取消模板',
            items: [
              { label: '是', value: true },
              { label: '否', value: false }
            ]
          },
          {
            type: 'ifRadio',
            key: 'active',
            isShow: [3],
            hide: true,
            value: '1',
            label: '是否激活',
            items: [
              { label: '是', value: '1' },
              { label: '否', value: '0' }
            ]
          },
          {
            type: 'ifRadio',
            key: 'target',
            isShow: [0, 1, 3],
            isMetaData: true,
            value: false,
            label: '打开新页面',
            items: [
              { label: '是', value: true },
              { label: '否', value: false }
            ]
          },
          {
            type: 'ifRadio',
            key: 'dataPermission',
            isShow: [1],
            isMetaData: true,
            value: false,
            label: '受数据权限管控',
            items: [
              { label: '是', value: true },
              { label: '否', value: false }
            ]
          }
        ]
      }
    }
  },
  computed: {
    active () {
      return [this.formConfig.options.find(e => e.key === 'parentId').value]
    },
    open () {
      return [this.items[0]]
    }
  },
  created () {
    this.typeHandleChange(0)
    if (!Object.keys(this.itemData).length) {
      return
    }
    const metaStr = JSON.parse(this.itemData.metastr)
    this.typeHandleChange(this.itemData.type)
    this.formConfig.options.forEach(item => {
      const oItem = item.isMetaData ? metaStr : this.itemData
      if (!Object.prototype.hasOwnProperty.call(oItem, item.key)) {
        // item.value = item.default
        return
      }
      if (item.key === 'parentId' && this.itemData.parentId) {
        this.initParentId(item)
        return
      }
      item.value = oItem[item.key]
    })
  },
  methods: {
    async initParentId (item) {
      try {
        const { data } = await getRoutersDetail({ id: this.itemData.parentId })
        item.choose = data
        item.value = this.itemData.parentId
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    typeHandleChange (val) {
      this.formConfig.options.forEach(item => {
        if (item.key === 'type' || !item.isShow) return
        if (item.isShow.includes(val)) item.hide = false
        else item.hide = true
      })
    },
    handleUpdate (arr, item) {
      item.value = arr[0].id
      item.choose = arr[0]
    },
    getQuery () {
      if (!this.$refs.configForm.$refs.form.validate()) {
        return
      }
      // const obj = {
      //   meta: {}
      // }
      const obj = this.formConfig.options.reduce((res, item) => {
        if (item.noQuery || item.hide) {
          return res
        }
        if (item.isMetaData) {
          res.meta[item.key] = item.value
        }
        res[item.key] = item.value
        return res
      }, { meta: {} })
      obj.meta.title = obj.label
      if (this.itemData.id) {
        obj.id = this.itemData.id
      }
      return obj
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
