<template>
  <Mask :height="560" :width="818" :is-show="show" @close="close" :show-footer="true" title="关联追溯码">
    <div class="panel">
      <div class="title">
        <div class="title-content">
          请勾选该追溯码关联的发药项目商品
        </div>
        <div class="code">
          <div class="before-code">
            {{ traceabilityCode.slice(0, 7) }}
          </div>
          <div class="after-code">
            {{ traceabilityCode.slice(7, traceabilityCode.length) }}
          </div>
        </div>
      </div>
     <div style="padding: 0 24px;flex: 1; min-height: 0;">
       <div class="list">
         <table class="table" style="border-spacing: 0">
           <thead style="background:#F1F5FB">
           <tr class="table-title" style="background: #f1f5fb">
             <th>选择</th>
             <th>发药项目</th>
             <th>产品标识码</th>
             <th>系统处理</th>
           </tr>
           </thead>
           <tbody class="table-body" style="height: 52px">
           <tr v-for="(item,index) in tableData">
             <td>
               <input class="blue-radio" type="radio" :value="item.id" v-model="selected"  @click="closeModal"/>
             </td>
             <td>{{ item.name }}</td>
             <td>
               <IdCodeListShow :idCodeList="item.idCode" v-if="item.idCode && item.idCode.length > 0"/>
               <div v-else>未关联</div>
             </td>
             <td style="width: 300px;">
               <template v-if="selected === item.id">
                 关联产品标识码，采集追溯码自动识别商品
               </template>
             </td>
           </tr>
           </tbody>
         </table>
       </div>
     </div>
    </div>
    <template #footer>
      <div class="bottom">
        <div class="default-btn" @click="close" type="primary">关闭</div>
        <div class="default-btn" @click="addIdCode" type="primary" style="margin-left: 24px">确定</div>
      </div>
    </template>
  </Mask>
</template>
<script setup lang="ts">

import Mask from "@/components/common/Mask.vue";
import {ref} from "vue"
import IdCodeListShow from "@/components/retail/IdCodeListShow.vue";
import CloseBtn from "@/components/CloseBtn.vue";
import {post} from "@/utils/request.ts";
import {ElMessage} from "element-plus";

interface TableItem {
  id: string;
  name: string;
  idCode?: string[] | undefined; // 可选属性，默认为 undefined
  gatherNumber?: number;
  retailNumber?: number;
  packagingUnit?: string;
  minPackagingUnit?: string;
  selectedUnit?: string;
  minPackagingNumber?: number;
  traceAbilityCodeList?: { code: string; number: number }[];
}


const show = ref(false);
const traceabilityCode = ref("");
const tableData = ref<TableItem[]>([]);
const init = (newIdCode: any, newTableDate: any) => {
  traceabilityCode.value = newIdCode;
  tableData.value = newTableDate;
  show.value = true;
}
const selected = ref()
defineExpose({init})
const addIdCode = () => {
  if (traceabilityCode.value == "") {
    return;
  }
  let idCode = traceabilityCode.value.slice(0, 7);
  post("goods/goods/addIdCode", {goodsId: selected.value, idCode: idCode}).then((res: any) => {
    show.value = false;
    for (let subItem of tableData.value) {
      if (subItem.id === selected.value) {
        if (subItem.idCode == null) {
          subItem.idCode = [];
        }
        subItem.idCode?.push(idCode);
        break
      }
    }
  })
  const selectedItem = tableData.value.find((item: any) => item.id === selected.value);
  if (!selectedItem) {
    return
  }
  addTraceabilityCodeDo(selectedItem)

}

const emit = defineEmits(["addIdCode", "addTraceabilityCode"])
const addTraceabilityCodeDo = (item: any) => {
  emit("addTraceabilityCode", item, traceabilityCode.value)
}
const showRadio=ref<any>(false)
const closeModal = () => {
  showRadio.value = false
  selected.value=null

}
const close = () => {
  show.value= false
  closeModal()
}
</script>
<style scoped lang="scss">
.panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    height: 126px;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #F9FAFC;
    margin-bottom: 24px;

    .title-content {
      font-weight: 500;
      font-size: 20px;
      color: #666666;
      font-style: normal;
    }

    .code {
      font-weight: 800;
      font-size: 30px;
      color: #333333;
      font-style: normal;
      display: flex;

      .before-code {
        color: #999999;
      }

      .after-code {
        margin-left: 10px;
      }
    }
  }

}
.list {
  height: 100%;
  border-radius: 8px 8px 0 0;
  width: 100%;
  border: 1px solid #EAEAEC;
  border-bottom: none;
  .table {

    th {
      background: none !important;
    }
    .table-title {
      width: 100%;
      height: 52px;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      padding: 0 25px;

      th {
        text-align: left;

        &:first-child {
          padding-left: 25px;
          width: 122px;
        }

        &:nth-child(2) {
          width: 215px;
        }

        &:nth-child(3) {
          width: 140px;
        }

        &:last-child {
          padding-right: 25px;
        }
      }
    }
    .table-body {
      height: 52px;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      font-style: normal;
      tr{
        height: 52px;
        font-size: 14px;
        color: #333333;
        td {
          height: 52px;
          &:first-child {
            width: 132px;
            padding-left: 35px;
          }

          &:last-child {
            padding-right: 25px;
          }
        }
      }

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

table {
  border: none;
}
.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}
</style>