<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>
      <table class="table" style="border-spacing: 0">
        <thead>
        <tr class="table-title">
          <th>追溯码</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody class="table-body">
        <tr v-for="(item,index) in item.traceAbilityCodeList" :key="index">
          <td>{{ item }}</td>
          <td>
            <div @click="removeTraceAbility(item)">
              <el-icon>
                <Delete/>
              </el-icon>
              删除
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </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; /* 明确设置边框 */
}

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