<script setup lang="ts">
import { ref } from 'vue'
import addimg from '../images/default_add@2x.png'

const headerCoulumn = ref([
  {
    name: '字段名称',
    width: '13%'
  },
  {
    name: '数据类型',
    width: '13%'
  },
  {
    name: '描述',
    width: '56%'
  },
  {
    name: '示例数据',
    width: '13%'
  },
  {
    name: '操作',
    width: '5%'
  }
])

interface TypeItem {
  name: string
  type: string
  description: string
  exampledata: string
}
interface Props {
  tableDataList: TypeItem []
}
const props = withDefaults(defineProps<Props>(), {})

const tableData = ref(props.tableDataList)
watch(
  () => props.tableDataList,
  (current) => {
    tableData.value = current
    if(tableData.value == null) {
      tableData.value = []
    }
  }
)

const addNewTableColumn = () => {
  const item = {
    name: '',
    type: '',
    description: '',
    exampledata: '',
  }
  tableData.value.unshift(item)
}

// 展示全部字段
const isShowAll = ref(false)
const clickShowAll = () => {
  if(tableData.value.length > 3) {
    isShowAll.value = !isShowAll.value
  }
}

// 删除字段
const deleteitem = (item: any) => {
  tableData.value.splice(tableData.value.indexOf(item), 1)
}

defineExpose({
  addNewTableColumn
})
</script>
<template>
  <div class="tableconfiguration">
    <div class="table_header">
      <div class="header_item" v-for="(item,index) in headerCoulumn" :key="index" :style="{width: item.width}">{{ item.name }}</div>
    </div>
    <div class="table_content" :class="{ 'table_content_scroll': isShowAll }">
      <div class="empty" v-if="tableData.length === 0">
        <div>
          <div><img :src="addimg" width="100" /></div>
          <el-button @click="addNewTableColumn" class="el-button--main">+ 添加字段</el-button>
        </div>
      </div>
      <div v-else>
        <div v-for="(item,index) in tableData" :key="index" class="table-content-item">
          <div style="width: 13%;" class="table-content-item-input">
            <el-input v-model="item.name" type="textarea" placeholder="输入字段名称"></el-input>
          </div>
          <div style="width: 13%;" class="table-content-item-input">
            <el-input v-model="item.type" type="textarea" placeholder="选择数据类型"></el-input>
          </div>
          <div style="width: 56%;" class="table-content-item-input">
            <el-input v-model="item.description" type="textarea" placeholder="简要描述字段用途"></el-input>
          </div>
          <div style="width: 13%;" class="table-content-item-input">
            <el-input v-model="item.exampledata" type="textarea" placeholder="输入示例数据"></el-input>
          </div>
          <div style="width: 5%;padding-top: 8px;" class="table-content-item-input">
            <el-button @click="deleteitem(item)" class="el-button--blue" style="height: 24px;width: 24px;">
              <span class="font_family icon-icon_delete_b icon_dark"></span>
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="showall" @click="clickShowAll" v-if="isShowAll"><span class="font_family icon-icon_up_b icon_dark icon_down"></span></div>
  <div class="showall" @click="clickShowAll" v-else>展示全部字段<span class="font_family icon-icon_dropdown_b icon_dark icon_down"></span></div>
</template>

<style lang="css" scoped>
.tableconfiguration {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: 18px;
}
.table_header {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px 6px 0 0;
  background-color: var(--color-table-header-bg);
  border-bottom: 1px solid var(--color-border);
}
.header_item {
  border-right: 1px solid var(--color-border);
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: start;
  padding-left: 8px;
  font-size: 14px;
  font-weight: 700;
}
.header_item:last-child {
  border-right: none;
}
.table_content {
  max-height: 215px;
  overflow: hidden;
}
.table_content_scroll {
  min-height: 224px;
  max-height: 725px;
  overflow: scroll;
}
.empty {
  display: flex;
  margin-top: 30px;
  justify-content: center;
  height: 215px;
}
:deep(.el-button, .el-button.is-round) {
  padding: 8px 15px;
}
.el-button--main {
  margin-top: 10px;
}
.table-content-item {
  display: flex;
  height: 72px;
}
.table-content-item-input {
  padding: 4px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.table-content-item-input:last-child {
  border-right: none;
}
:deep(.el-textarea__inner) {
  height: 64px !important;
  box-shadow: none;
  border: 1px solid var(--color-border);
}
:deep(.el-select__wrapper) {
  height: 64px !important;
  box-shadow: none;
  border: 1px solid var(--color-border);
  align-items: baseline;
}
.showall {
  display: flex;
  justify-content: center;
  align-items: center;
}
.showall:hover {
  color: var(--color-theme);
  span {
    fill: var(--color-theme);
    color: var(--color-theme);
  }
  cursor: pointer;
}
</style>