<template>
  <el-popover
      title=""
      placement="bottom-start"
      trigger="click"
      width="340px"
      popper-class="traceability"
  >
    <template #reference>
      <el-input
          placeholder="追溯码"
          clearable
          v-model="inputTraceabilityCode"
          style="width: 100%;"
          @keydown.enter="addTraceabilityCodeDo(props.item)"
      ></el-input>
    </template>
    <template #default>
      <div style="width: 100%;max-height: 20px">
        <el-table :data="item.traceAbilityCodeList" :max-height="300" style="width: 100%"
                  :header-cell-style="{background: '#F1F5FB'}">
          <el-table-column prop="value" label="追溯码" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template #default="scope">
            <span style="color: #ff0000" @click="removeTraceAbility(scope.row)">
              <el-icon>
                <Delete/>
              </el-icon>
              删除
            </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
  </el-popover>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {Delete} from "@element-plus/icons-vue"

interface TraceAbilityCode {
  code: string;
  number: number;
  showNumberInput?: boolean;
}

const props = defineProps({
  item: {
    type: Object as () => {
      id?: number | undefined;
      traceAbilityCodeList: TraceAbilityCode[];
      retailNumber: number;
      gatherNumber: number;
      selectedUnit: string;
      idCode: string[];
      packagingUnit: string;
      minPackagingUnit: string;
      minPackagingNumber: number;
    },
    default: () => ({
      traceAbilityCodeList: [],
      retailNumber: 0,
      gatherNumber: 0,
      selectedUnit: "",
      idCode: [],
      packagingUnit: "",
      minPackagingUnit: "",
      minPackagingNumber: 0,
    }),
  },
})
const inputTraceabilityCode = ref("");
const emit = defineEmits(["addTraceabilityCode"]);
const addTraceabilityCodeDo = (item: any) => {
  emit("addTraceabilityCode", item, inputTraceabilityCode.value)
  inputTraceabilityCode.value = ""
}

const removeTraceAbility = (code: any) => {
  const index = props.item.traceAbilityCodeList.findIndex(
      (codeObj: any) => codeObj === code
  );

  if (index !== -1) {
    props.item.traceAbilityCodeList.splice(index, 1); // 删除对应项
  }
}

</script>
<style scoped lang="scss">
.table {
  width: 100%;

  th {
    background: none !important;
  }

  .table-title {
    width: 100%;
    height: 36px;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    font-style: normal;
    padding: 0 25px;
    background: #F5FAFF;

    th {
      text-align: left;

      &:first-child {
        width: 270px;
        padding-left: 24px;
        overflow: hidden;
      }

      &:last-child {
        text-align: center;
        line-height: 36px;
      }
    }
  }

  .table-body {
    height: 52px;
    font-weight: 500;
    font-size: 14px;
    color: #666666;
    font-style: normal;
    padding: 0 25px;

    tr {
      height: 36px;
      font-size: 14px;
      color: #333333;
      font-weight: 500;
      font-style: normal;

      td {
        height: 36px;

        &:first-child {
          height: 100%;
          width: 132px;
          padding-left: 25px;
          white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 隐藏溢出的文本 */
          text-overflow: ellipsis; /* 显示省略号 */
        }

        &:last-child {
          height: 100%;
          text-align: center;
          color: #FF0000;
          line-height: 36px;
        }
      }
    }

  }
}

table, tbody, td {
  border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
  overflow: hidden;
}

table {
  width: 100%;
  border: none;
}
</style>