<template>
    <el-table ref="guiptable" v-bind="$attrs" :data="tableData"  v-on="$listeners" :border="border" @selection-change="handleSelectionChange"
      :style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading">
      <!-- 多选 -->
      <template v-if="multiple">
        <el-table-column type="selection" width="55">
        </el-table-column>
      </template>
      <!-- 自定义header -->
      <slot></slot>
      <!-- 通过json数据遍历渲染 -->
      <template v-if="columns">
        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
          :width="column.width">
          <template #default="{ row }" v-if="column.popover">
            <el-popover :visible="row[`popoverVisible_${column.prop}`]" class="tablePopover" placement="top"
              trigger="click">
              <!-- 自定义内容插槽 -->
              <slot :name="`popover-content-${column.prop}`" :row="row" :column="column">
                <div>
                  <p>默认内容：{{ `popoverVisible_${column.prop}` }}</p>
                  <el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" />
                </div>
              </slot>
              <!-- 确定和取消按钮 -->
              <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
                <GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton>
                <GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton>
              </div>
              <!-- 单元格内容 -->
              <template #reference>
                <span style="cursor: pointer">{{ row[column.prop] }}</span>
              </template>
            </el-popover>
          </template>

        </el-table-column>
      </template>
      <template #empty>
        <el-empty :image="emptyImg"></el-empty>
      </template>
    </el-table>
</template>

<script>
import GuipButton from '@/components/GuipButton.vue';

export default {
  name: 'GuipTextarea',
  props: ['tableData', 'loading', 'width', 'height', 'autoColumn', 'columns', 'border', 'multiple'],
  data() {
    return {
      emptyImg:require('@/assets/table_empty.png')
      // loading:false
    }
  },
  components: {
    GuipButton,
  },
  mounted() {
  },
  methods: {
    handleSelectionChange(row) {
      // 获取的当前行信息
      console.log(row, '======');
      this.$emit('selectChange', row)
    },
    // 点击确定按钮
    handleConfirm(row, prop) {
      // 将编辑后的值同步到原始数据
      row[prop] = row[`edit_${prop}`];
      row[`popoverVisible_${prop}`] = false; // 关闭气泡框
      this.$emit('confirm', row, prop); // 触发确认事件
    },
    // 点击取消按钮
    handleCancel(row, prop) {
      // 恢复原始数据
      row[`edit_${prop}`] = row[prop];
      row[`popoverVisible_${prop}`] = false; // 关闭气泡框
      this.$emit('cancel', row, prop); // 触发取消事件
    },
  }
}
</script>
<style scoped>
.custom-empty {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-image {
  width: 160px;
  height: 160px;
}

.empty-text {
  color: #626573;
  letter-spacing: 0.08em;
  height: 18px;
  line-height: 18px;
}
.el-empty{
  padding: 0;
}
::v-deep .el-empty__description{
  line-height: 20px;
  margin-top: 0;
}
</style>