<template>
  <m-form ref="form" class="mt-5" :items="formItems" v-model="formValues">
    <template #name_en>
      <v-btn color="primary" class="ml-3" @click="getTranslate" :loading="translateLoading">翻译</v-btn>
    </template>
    <template #tag>
      <div class="mb-6" style="border: 1px dashed #666; padding: 10px; border-radius: 5px; width: 100%;">
        <v-chip-group
          v-if="tagItems.length"
          v-model="formValues.tag"
          multiple
          column
          active-class="primary--text"
        >
          <v-chip v-for="tag in tagItems" :key="tag.id" filter :value="tag">
            {{ tag.name_zh }}
          </v-chip>
        </v-chip-group>
        <div v-else class="text-center" style="color: #999; padding: 10px;">暂无可选标签</div>
      </div>
    </template>
  </m-form>
</template>

<script>
import MForm from '@/components/MForm'
import {
  getTranslate
} from '@/api'

import { metadata } from '@/utils/dataGovernance'
import { api } from '@/api/dataGovernance'

export default {
  name: 'metadata-edit',
  components: { MForm },
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      translateLoading: false,
      formValues: {
        name_zh: null,
        name_en: null,
        category: 'DataOps',
        alias: null,
        affiliation: null,
        data_type: null,
        tag: [],
        describe: null,
        status: 1
      },
      pageInfo: {
        size: 50,
        current: 1
      },
      total: 0,
      loading: false,
      tagItems: []
    }
  },
  computed: {
    formItems () {
      return [
        {
          type: 'text',
          key: 'name_zh',
          label: '请输入中文名称 *',
          rules: [v => !!v || '请输入中文名称']
        },
        {
          type: 'text',
          key: 'name_en',
          label: '请输入英文名称 *',
          rules: [v => !!v || '请输入英文名称'],
          slotName: 'name_en'
        },
        {
          type: 'autocomplete',
          key: 'category',
          label: '请选择分类 *',
          col: 6,
          noAttach: true,
          rules: [v => !!v || '请选择分类'],
          items: [...metadata]
        },
        {
          type: 'text',
          key: 'data_type',
          label: '请输入数据类型 *',
          col: 6,
          rules: [v => !!v || '请输入数据类型']
        },
        {
          type: 'text',
          key: 'alias',
          label: '请输入别名'
        },
        {
          type: 'text',
          key: 'affiliation',
          label: '请输入制作单位'
        },
        {
          // type: 'autocomplete',
          slotName: 'tag',
          key: 'tag',
          // value: [],
          slotTitle: '请选择标签',
          slotTitleStyle: 'color: rgba(0, 0, 0, 0.6); padding: 5px'
          // label: '请选择标签',
          // returnObject: true,
          // multiple: true,
          // noAttach: true,
          // itemText: 'name_zh',
          // itemValue: 'id',
          // items: this.tagItems
        },
        {
          type: 'text',
          key: 'describe',
          label: '请输入描述'
        },
        {
          type: 'ifRadio',
          key: 'status',
          label: '启用',
          width: 120,
          items: [{ label: '是', value: true }, { label: '否', value: false }]
        }
      ]
    }
  },
  created () {
    this.init()
    if (!Object.keys(this.itemData).length) {
      return
    }
    this.formValues = this.formItems.reduce((acc, cur) => {
      acc[cur.key] = this.itemData[cur.key] ?? this.formValues[cur.key]
      return acc
    }, {})
  },
  methods: {
    async init () {
      try {
        this.loading = true
        try {
          const { data } = await api.getLabelList({
            ...this.pageInfo,
            category_filter: 'DataOps'
          })
          this.tagItems = data.records
          this.total = data.total
        } catch (error) {
          this.$snackbar.error(error)
        } finally {
          this.loading = false
        }
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async getTranslate () {
      if (!this.formValues.name_zh) {
        this.$snackbar.error('请输入名称')
        return
      }
      this.translateLoading = true
      try {
        const { data } = await getTranslate({
          node_name: this.formValues.name_zh
        })
        this.formValues.name_en = data.translated
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.translateLoading = false
      }
    },
    getValue () {
      if (!this.$refs.form.validate()) {
        return
      }
      const id = this.itemData.id
      return {
        ...this.formValues,
        id
      }
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
