<template>
  <div class="pa-3 content d-flex flex-column">
    <slot name="head"></slot>
    <div class="content-table d-flex flex-column" ref="content">
      <v-simple-table fixed-header style="height: 100%" :height="height" ref="table">
        <template v-slot:default>
          <thead>
            <tr>
              <th class="text-left" style="background: #eee"></th>
              <th class="text-left" style="background: #eee">数据列</th>
              <th class="text-left" style="background: #eee">元数据</th>
              <th class="text-left" style="background: #eee">元数据英文名</th>
              <th class="text-left" style="background: #eee">数据类型</th>
              <!-- <th class="text-left" style="background: #eee">主数据</th> -->
              <th class="text-right" style="background: #eee">数据标准</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in value"
              :key="index"
            >
              <td class="pa-0">
                <v-btn icon color="error" @click="handleClose(index)">
                  <v-icon>mdi-minus</v-icon>
                </v-btn>
              </td>
              <td>{{ item.text }}</td>
              <td>
                <v-text-field
                  v-model.trim="item.map.name_zh"
                  label="元数据"
                  placeholder="请输入元数据"
                  dense
                  hide-details
                  outlined
                  class="my-3"
                ></v-text-field>
              </td>
              <td>
                <v-text-field
                  v-model.trim="item.map.name_en"
                  label="元数据英文名"
                  placeholder="请输入元数据英文名"
                  dense
                  hide-details
                  outlined
                  class="my-3"
                ></v-text-field>
              </td>
              <td>
                <v-text-field
                  v-model.trim="item.map.data_type"
                  label="数据类型"
                  placeholder="请输入数据类型"
                  dense
                  hide-details
                  outlined
                  class="my-3"
                ></v-text-field>
              </td>
              <td class="text-right">
                <m-editTable
                  :text="item?.map?.data_standard?.name_zh || '--'"
                  :init="standardInit"
                  item-label="name_zh"
                  item-value="id"
                  @use="$el => save($el, item)"
                >
                  <template #title>
                    [{{ item?.map?.name_zh }}] 数据标准选择
                  </template>
                </m-editTable>
                <v-btn color="error" icon v-if="item.map?.data_standard?.id" @click="standardClose(item)">
                  <v-icon>mdi-close</v-icon>
                </v-btn>
              </td>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import { api } from '@/api/dataGovernance'
// import { metadataType } from '@/utils/dataGovernance'
import MEditTable from '../../components/editTable'
const common = {
  pageInfo: {
    size: 20,
    current: 1
  },
  total: 0,
  loading: false,
  items: [],
  value: null,
  search: null
}
export default {
  name: 'edit-selected',
  components: {
    MEditTable
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      height: 0,
      standard: {
        ...common
      },
      metadata: {
        ...common
      },
      type: {
        ...common
      },
      openFn: undefined
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.height = this.$refs.table.$el.clientHeight
    })
  },
  methods: {
    standardInit (query) {
      return new Promise((resolve, reject) => {
        api.dataStandardList(query).then(({ data }) => {
          resolve({
            items: data.records,
            total: data.total
          })
        }).catch(error => {
          reject(error)
        })
      })
    },
    save (data, item) {
      item.map.data_standard = { id: data?.id, name_zh: data?.name_zh }
    },
    standardClose (item) {
      item.map.data_standard = null
    },
    handleClose (index) {
      const items = [...this.value]
      items.splice(index, 1)
      this.$emit('input', items)
    },
    getValue () {
      if (!this.$refs.form.validate()) {
        return
      }
      const obj = this.formItems.options.reduce((r, e) => {
        r[e.key] = e.value
        return r
      }, {})
      return {
        map: this.value,
        ...obj
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 0;
  flex: 1;
  &-table {
    height: 0;
    flex: 1;
    overflow-y: auto;
  }
}
</style>
