<template>
  <form-list ref="form" class="mt-5" :items="formItems"></form-list>
</template>

<script>
import FormList from '@/components/Form/list'

import { metadata, metadataType } from '@/utils/dataGovernance'
import { api } from '@/api/dataGovernance'
const defaultOption = {
  value: null,
  outlined: true,
  dense: true
}
export default {
  name: 'metadata-edit',
  components: { FormList },
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      formItems: {
        options: [
          {
            type: 'text',
            key: 'name',
            label: '请输入中文名称 *',
            ...defaultOption,
            rules: [v => !!v || '请输入中文名称']
          },
          {
            type: 'text',
            key: 'en_name',
            label: '请输入英文名称 *',
            ...defaultOption,
            rules: [v => !!v || '请输入英文名称']
          },
          {
            type: 'autocomplete',
            key: 'category',
            label: '请选择分类 *',
            noAttach: true,
            ...defaultOption,
            rules: [v => !!v || '请选择分类'],
            items: metadata
          },
          {
            type: 'text',
            key: 'alias',
            label: '请输入别名',
            ...defaultOption
          },
          {
            type: 'text',
            key: 'affiliation',
            label: '请输入制作单位',
            ...defaultOption
          },
          {
            type: 'autocomplete',
            key: 'type',
            label: '请选择数据类型 *',
            col: 6,
            noAttach: true,
            ...defaultOption,
            rules: [v => !!v || '请选择数据类型'],
            items: metadataType
          },
          {
            type: 'autocomplete',
            key: 'tag',
            value: null,
            label: '请选择标签',
            col: 6,
            noAttach: true,
            outlined: true,
            dense: true,
            itemText: 'name',
            itemValue: 'id',
            items: []
          },
          {
            type: 'text',
            key: 'describe',
            label: '请输入描述',
            ...defaultOption
          },
          {
            type: 'ifRadio',
            key: 'status',
            value: 1,
            label: '启用',
            width: 120,
            items: [{ label: '是', value: 1 }, { label: '否', value: 0 }]
          }
        ]
      },
      pageInfo: {
        size: 50,
        current: 1
      },
      total: 0,
      loading: false
    }
  },
  created () {
    this.init()
    if (!this.itemData.id) {
      return
    }
    this.formItems.options.forEach(item => {
      item.value = this.itemData[item.key]
    })
  },
  methods: {
    async init () {
      try {
        this.loading = true
        try {
          const { data } = await api.dataLabelList({
            ...this.pageInfo
          })
          this.formItems.options.find(e => e.key === 'tag').items = data.records
          this.total = data.total
        } catch (error) {
          this.$snackbar.error(error)
        } finally {
          this.loading = false
        }
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    getValue () {
      if (!this.$refs.form.validate()) {
        return
      }
      const id = this.itemData.id
      return this.formItems.options.reduce((res, item) => {
        res[item.key] = item.value
        return res
      }, { id })
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
