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

    <v-row>
      <v-col cols="6">
        <MCard title="候选元数据">
          <template #title>
            <div style="width: 200px; font-weight: normal;">
              <v-text-field
                v-model="candidate.search"
                placeholder="请输入名称"
                outlined
                hide-details
                dense
                clearable
                append-icon="mdi-magnify"
                @click:append="handleCandidateSearch"
                @keyup.enter="handleCandidateSearch"
                @click:clear="handleCandidateSearch"
              ></v-text-field>
            </div>
          </template>
          <table-list
            ref="candidateTable"
            :loading="candidate.loading"
            :headers="candidate.headers"
            :items="candidate.items"
            :total="candidate.total"
            :height="candidate.items.length > 0 ? '400px' : '490px'"
            :select-item="true"
            fixed-header
            :page-info="candidate.pageInfo"
            :is-tools="false"
            :show-select="true"
            :disable-sort="true"
            @pageHandleChange="pageHandleChange"
            @selected="handleCandidateSelected"
          >
          </table-list>
        </MCard>
      </v-col>
      <v-col cols="6">
        <MCard title="选中元数据">
          <table-list
            :loading="false"
            :headers="candidate.headers"
            :items="candidate.selected"
            :is-tools="false"
            :disable-sort="true"
            height="490px"
            fixed-header
            :show-page="false"
            :show-select="false"
          >
          </table-list>
        </MCard>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import { api } from '@/api/dataGovernance'
import { getDatasourceList } from '@/api/dataOrigin'
import { metadata } from '@/utils/dataGovernance'
import { getTranslate } from '@/api'

import MForm from '@/components/MForm'
import MCard from '@/components/MCard'
import TableList from '@/components/List/table'
export default {
  name: 'combinationPage',
  components: { MForm, MCard, TableList },
  data () {
    return {
      translateLoading: false,
      formValues: {
        name_zh: null,
        name_en: null,
        type: null,
        category: null,
        tag: null,
        describe: null,
        data_source: null
      },
      pageInfo: {
        size: 999,
        current: 1
      },
      tagItems: [],
      dataSourceItems: [],
      candidate: {
        total: 0,
        loading: false,
        pageInfo: {
          size: 10,
          current: 1
        },
        search: null,
        items: [],
        selected: [],
        headers: [
          { text: '中文名称', value: 'name_zh' },
          { text: '英文名称', value: 'name_en' },
          { text: '数据类型', value: 'data_type' }
        ]
      }
    }
  },
  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: 'data_source',
          label: '请选择数据源',
          col: 6,
          noAttach: true,
          itemText: 'name_zh',
          itemValue: 'id',
          items: this.dataSourceItems
        },
        {
          type: 'autocomplete',
          key: 'category',
          label: '请选择分类',
          col: 6,
          items: metadata
        },
        {
          type: 'text',
          key: 'type',
          col: 6,
          label: '请输入类型'
        },
        {
          type: 'text',
          key: 'describe',
          col: 6,
          label: '请输入描述'
        },
        {
          slotName: 'tag',
          key: 'tag',
          value: [],
          slotTitle: '请选择标签',
          slotTitleStyle: 'color: rgba(0, 0, 0, 0.6); padding: 5px'
        }
      ]
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        const { data } = await api.getLabelList({
          ...this.pageInfo,
          category_filter: 'DataOps'
        })
        this.tagItems = data.records
        const { data: dataSource } = await getDatasourceList({})
        this.dataSourceItems = dataSource.data_source
        // 获取候选元数据列表
        this.getCandidate()
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    // 获取候选元数据列表
    async getCandidate () {
      this.candidate.loading = true
      try {
        const { data } = await api.getMetaDataList({
          ...this.candidate.pageInfo,
          name_zh: this.candidate.search
        })
        this.candidate.items = data.records || []
        this.candidate.total = data.total || 0
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.candidate.loading = false
      }
    },
    pageHandleChange (index) {
      this.candidate.pageInfo.current = index
      this.getCandidate()
    },
    handleCandidateSearch () {
      this.candidate.pageInfo.current = 1
      this.getCandidate()
    },
    // 处理候选列表选中
    handleCandidateSelected (selectedItems) {
      this.candidate.selected = selectedItems
    },
    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 () {
      const valid = this.$refs.form.validate()
      if (!valid) {
        this.$snackbar.warning('请将表单内容填写完整!')
        return
      }
      return {
        ...this.formValues,
        status: true,
        id_list: this.candidate.selected.map(item => item.id)
      }
    }
  }
}
</script>
