<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 #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>
  </div>
</template>

<script>

import { getTranslate } from '@/api'
import MForm from '@/components/MForm'
import {
  metadata,
  frequency
  // sensitivity
} from '@/utils/dataGovernance'
import { api } from '@/api/dataGovernance'
export default {
  name: 'edit-base',
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  components: { MForm },
  data () {
    return {
      formValues: {
        name_zh: null,
        name_en: null,
        category: '应用类',
        leader: 'system',
        organization: null,
        script_type: 'sql',
        update_mode: 'append',
        frequency: '月',
        // data_sensitivity: '低',
        tag: [],
        describe: null,
        status: 'active'
      },
      tagItems: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0,
      translateLoading: false,
      loading: false
    }
  },
  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: 'leader', label: '创建者 *', rules: [v => !!v || '请输入负责人'] },
        { type: 'text', key: 'organization', label: '请输入所属机构 *', rules: [v => !!v || '请输入所属机构'] },
        {
          type: 'autocomplete',
          key: 'script_type',
          label: '脚本类型 *',
          rules: [v => !!v || '请选择脚本类型'],
          items: [
            { label: 'SQL', value: 'sql' },
            { label: 'Python', value: 'python' },
            { label: 'PythonScript', value: 'python_script' },
            { label: 'SQLScript', value: 'sql_script' }
          ]
        },
        {
          type: 'autocomplete',
          key: 'update_mode',
          label: '更新模式 *',
          rules: [v => !!v || '请选择更新模式'],
          items: [
            { label: '追加', value: 'append' },
            { label: '全量更新', value: 'full_refresh' }
          ]
        },
        { type: 'autocomplete', key: 'frequency', label: '更新频率 *', rules: [v => !!v || '请选择更新频率'], items: [...frequency] },
        {
          // type: 'autocomplete',
          slotName: 'tag',
          key: 'tag',
          slotTitle: '请选择标签',
          slotTitleStyle: 'color: rgba(0, 0, 0, 0.6); padding: 5px'
          // label: '标签',
          // returnObject: true,
          // multiple: true,
          // itemText: 'name_zh',
          // itemValue: 'id',
          // items: this.tagItems
        },
        { type: 'text', key: 'describe', label: '描述' },
        {
          type: 'ifRadio',
          key: 'status',
          label: '启用',
          width: 120,
          items: [{ label: '是', value: 'active' }, { label: '否', value: 'inactive' }]
        }
      ]
    }
  },
  created () {
    this.init()
    // if (!Object.keys(this.itemData).length) {
    //   return
    // }
    // Object.keys(this.formValues).forEach(key => {
    //   if (!Object.prototype.hasOwnProperty.call(this.itemData, key)) {
    //     return
    //   }
    //   if (key === 'tag') {
    //     this.formValues[key] = this.itemData.tag
    //     return
    //   }
    //   this.formValues[key] = this.itemData[key]
    // })
  },
  methods: {
    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
      }
    },
    setValues (item) {
      this.formValues = {
        name_zh: item.name_zh,
        name_en: item.name_en,
        category: item.category,
        leader: item.leader,
        organization: item.organization,
        script_type: item.script_type,
        update_mode: item.update_mode,
        frequency: item.frequency,
        tag: item.tag,
        describe: item.describe,
        status: item.status
      }
    },
    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)
      }
    },
    getValue () {
      if (!this.$refs.form.validate()) {
        return
      }
      return this.formValues
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
