<template>
  <div>
    <m-form ref="form" :items="formItems" v-model="formValues">
      <template #name_en>
        <v-btn color="primary" class="ml-3" :loading="translateLoading" @click="getTranslate">翻译</v-btn>
      </template>
    </m-form>
  </div>
</template>

<script>
import MForm from '@/components/MForm'
import {
  metadata,
  frequency,
  sensitivity
} from '@/utils/dataGovernance'
import {
  getDatasourceList
} from '@/api/dataOrigin'
import { getTranslate } from '@/api'
import { api } from '@/api/dataGovernance'
export default {
  name: 'edit-base',
  props: {
    names: {
      type: Object,
      default: () => ({})
    },
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  components: { MForm },
  data () {
    return {
      formValues: {
        name_zh: '数据资源_' + new Date().getTime(),
        name_en: null,
        category: '应用类',
        organization: this.$store.getters.userInfo.username,
        leader: this.$store.getters.userInfo.username,
        frequency: '月',
        data_sensitivity: '低',
        chooseStorage: false,
        storage_location: '/',
        data_source: null,
        tag: null,
        describe: null,
        status: true
      },
      pageInfo: {
        size: 999,
        current: 1
      },
      loading: false,
      translateLoading: false,
      labelItems: [],
      dataSourceItems: []
    }
  },
  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: '请选择分类 *',
          rules: [v => !!v || '请选择分类'],
          items: [...metadata]
        },
        {
          type: 'text',
          key: 'organization',
          label: '请输入所属机构 *',
          rules: [v => !!v || '请输入所属机构']
        },
        {
          type: 'text',
          key: 'leader',
          label: '请输入负责人 *',
          rules: [v => !!v || '请输入负责人']
        },
        {
          type: 'autocomplete',
          key: 'frequency',
          label: '请选择更新频率 *',
          noAttach: true,
          rules: [v => !!v || '请选择更新频率'],
          items: [...frequency]
        },
        {
          type: 'autocomplete',
          key: 'data_sensitivity',
          label: '请选择数据敏感度 *',
          noAttach: true,
          rules: [v => !!v || '请选择数据敏感度'],
          items: [...sensitivity]
        },
        {
          type: 'ifRadio',
          key: 'chooseStorage',
          label: '使用数据源',
          width: 120,
          items: [{ label: '是', value: true }, { label: '否', value: false }]
        },
        {
          type: 'text',
          key: 'storage_location',
          hide: this.formValues.chooseStorage,
          slotTitle: '注: 根目录地址为 /data/upload',
          slotTitleStyle: 'color: #999; padding: 5px',
          prefix: '/data/upload',
          label: '请输入存储位置 *',
          rules: [v => !!v || '请输入存储位置']
        },
        {
          type: 'autocomplete',
          key: 'data_source',
          label: '请选择数据源',
          hide: !this.formValues.chooseStorage,
          noAttach: true,
          itemText: 'name_zh',
          itemValue: 'id',
          items: this.dataSourceItems
        },
        {
          type: 'autocomplete',
          key: 'tag',
          label: '请选择标签',
          noAttach: true,
          itemText: 'name_zh',
          itemValue: 'id',
          items: this.labelItems
        },
        {
          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) {
      this.formValues.name_zh = this.names?.name_zh
      this.formValues.name_en = this.names?.name_en
      return
    }
    Object.keys(this.formValues).forEach(key => {
      if (key === 'tag') {
        this.formValues[key] = this.itemData[key]?.id || null
        return
      }
      if (key === 'data_source') {
        this.formValues[key] = this.itemData[key] || null
        this.formValues.chooseStorage = !!this.itemData[key]
        return
      }
      if (Object.prototype.hasOwnProperty.call(this.itemData, key)) {
        this.formValues[key] = this.itemData[key]
      }
    })
  },
  methods: {
    async init () {
      try {
        this.loading = true
        try {
          const { data } = await api.getLabelList({
            ...this.pageInfo,
            category_filter: 'DataOps'
          })
          this.labelItems = data.records
          const { data: dataSource } = await getDatasourceList({})
          this.dataSourceItems = dataSource.data_source
        } 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 { chooseStorage, data_source: dataSource, storage_location: storageLocation, ...obj } = this.formValues
      if (chooseStorage) {
        return {
          ...obj,
          data_source: dataSource
        }
      }
      return {
        ...obj,
        storage_location: storageLocation
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
