<template>
  <Mask  :height="600" :width="700" :is-show="show">
    <CloseBtn @click="show = false"></CloseBtn>
    <el-card>
      <div class="panel">
        <div class="header">
          请勾选该追溯码关联的发药项目商品
        </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 class="table">
          <table class="simple-table">
            <thead>
            <tr>
              <th>选择</th>
              <th>发药项目</th>
              <th>产品标识码</th>
              <th>系统处理</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(item,index) in tableData">
              <td><input class="blue-radio" type="radio" :value="item.id" v-model="selected"/></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>
      <template #footer>
        <el-button @click="addIdCode" type="primary">确定</el-button>
        <el-button @click="show = false" type="primary">关闭</el-button>
      </template>
    </el-card>
  </Mask>
</template>
<script setup lang="ts">

import Mask from "@/components/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){
          subItem.idCode?.push(idCode);
          break
        }
      }
  })
  const selectedItem = tableData.value.find((item: any) => item.id === selected.value);
  if(!selectedItem){
    return
  }
  addTraceabilityCode(selectedItem)

}

const emit = defineEmits(["addIdCode","addTraceabilityCode"])
const addTraceabilityCode = (item: any) => {
 emit("addTraceabilityCode",traceabilityCode)
}
</script>
<style scoped lang="scss">
.panel {
  height: 400px;
  .header {
    margin-top: 20px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .code {
    height: 50px;
    display: flex;
    font-size: 24px;
    justify-content: center;
    align-items: center;

    .before-code {
      color: #7a8794;

    }

    .after-code {
      margin-left: 10px;
    }
  }
  .table {
    .simple-table {
      .blue-radio {
        accent-color: #28addd;
      }
    }
  }
}

</style>