<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>
      <!-- <template #childrenId="{ item }">
        <search-nodes v-model="item.value" v-bind="item.options" :search-value="item.search"></search-nodes>
      </template> -->
    </m-form>
  </div>
</template>

<script>

import MForm from '@/components/MForm'
// import { combinationTagsPage } from '@/api/dataBook'
import { getTranslate } from '@/api'
import {
  metadata,
  frequency,
  sensitivity
} from '@/utils/dataGovernance'
import { getDatasourceList } from '@/api/dataOrigin'
import { api } from '@/api/dataGovernance'
// import SearchNodes from '../../components/searchNodes.vue'
export default {
  name: 'edit-base',
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    },
    names: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    MForm
    // SearchNodes
  },
  data () {
    return {
      formValues: {
        name_zh: '数据模型_' + new Date().getTime(),
        name_en: null,
        category: '应用类',
        organization: this.$store.getters.userInfo.username,
        leader: this.$store.getters.userInfo.username,
        // childrenId: [],
        frequency: '日',
        data_sensitivity: '低',
        tag: null,
        describe: null,
        status: true,
        data_source: null
      },
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0,
      loading: false,
      translateLoading: false,
      tagItems: [],
      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 || '请输入负责人'] },
        // {
        //   key: 'childrenId',
        //   slotName: 'childrenId',
        //   search: null,
        //   options: {
        //     label: '请选择数据来源',
        //     attach: true
        //   }
        // },
        {
          type: 'autocomplete',
          key: 'data_source',
          label: '请选择数据来源',
          noAttach: true,
          itemText: 'name_zh',
          itemValue: 'id',
          items: this.dataSourceItems
        },
        { type: 'autocomplete', key: 'frequency', label: '请选择更新频率 *', rules: [v => !!v || '请选择更新频率'], items: [...frequency] },
        { type: 'autocomplete', key: 'data_sensitivity', label: '请选择数据敏感度 *', rules: [v => !!v || '请选择数据敏感度'], items: [...sensitivity] },
        { type: 'autocomplete', key: 'tag', label: '请选择标签', 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.names).length) {
      this.formValues.name_zh = this.names?.name_zh
      this.formValues.name_en = this.names?.name_en
    }
    const val = this.itemData.data_model
    if (!val || !Object.keys(val).length) {
      return
    }
    // if (val.childrenId.length) {
    //   this.formValues.childrenId = val.childrenId.map(e => {
    //     return {
    //       value: e.id,
    //       text: e.name_zh
    //     }
    //   })
    // }
    this.formValues.tag = val.tag?.id ?? null
    this.formItems.forEach(item => {
      if (!Object.prototype.hasOwnProperty.call(val, item.key) || item.key === 'tag') {
        // if (!Object.prototype.hasOwnProperty.call(val, item.key) || item.key === 'childrenId' || item.key === 'tag') {
        return
      }
      this.formValues[item.key] = val[item.key]
    })
  },
  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
          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 = TextTrackCue
      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 { childrenId, ...obj } = this.formValues
      const { ...obj } = this.formValues
      return {
        ...obj
        // childrenId: childrenId.map(e => e.value)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
