<template>
  <div class="hw-element" @click.stop="inputClick"
       :style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
    <tool v-if="selectUuid === options.uuid" :options="options" />
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column :prop="i.key" :label="i.name" v-for="i in options.thTdMap">
          <template #default="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
            >
              修改
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import tool from './tool.vue';
import { inject } from 'vue';

defineOptions({
  name: 'hw-table'
});

const props = defineProps({
  options: Object
});
const { options } = toRefs(props);
const getOptions = inject('getOptions');
const tableData = ref(Array(5).fill({}));

const selectUuid = inject('selectUuid');
const getSelectUuid = inject('getSelectUuid');
const inputClick = () => {
  getOptions(options.value);
  getSelectUuid(options.value.uuid);
};
</script>
<style scoped lang="less">
.hw-element {
  margin: 2px;
  border: 1px solid #0000;
  position: relative;
  padding: 12px 2px 2px;

  &:hover {
    background-color: #0001;
    border: 1px solid #00afff;
  }
}
</style>



