<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>
            </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>
                <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>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'edit-selected',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      height: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.height = this.$refs.table.$el.clientHeight
    })
  },
  methods: {
    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>
