<template>
  <Mask :height="560" :width="1056" :is-show="show" title="追溯码采集" @close="show = false" :show-footer="true">
    <template #default>
      <div class="detail">
        <el-input
            placeholder="请输入追溯码"
            v-model="inputIdCode"
            clearable
            @keydown.enter="openAssociationIdCode()"
            style="height: 42px;background: #FFFFFF;border-radius: 6px;border: 1px solid #EAEAEC;"
        >
          <template #prefix>
            <el-icon>
              <Monitor/>
            </el-icon>
          </template>
        </el-input>
        <div class="list">
          <el-table :data="list" :header-cell-style="{backgroundColor: '#F1F5FB'}">
            <el-table-column prop="name" label="发药项目" width="300" show-overflow-tooltip></el-table-column>
            <el-table-column label="产品标识码" show-overflow-tooltip>
              <template #default="scope">
                <IdCodeListShow :idCodeList="scope.row.idCode" v-if="scope.row.idCode&&scope.row.idCode.length>0"
                                @addTraceabilityCode="addTraceAbilityCodeHandler"/>
                <div v-else>未关联</div>
              </template>
            </el-table-column>
            <el-table-column label="发药数量" show-overflow-tooltip>
              <template #default="scope">
              {{scope.row.selectedNum}}{{scope.row.selectedUnit}}
              </template>
            </el-table-column>
            <el-table-column label="已采/应采" show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.traceAbilityCodeList ? scope.row.traceAbilityCodeList.length : 0 }}/{{ scope.row.shouldNumber }}
              </template>
            </el-table-column>
            <el-table-column label="追溯码" width="300">
              <template #default="scope">
                <TraceabilityCodeAdd :item="scope.row" @addTraceabilityCode="addTraceAbilityCodeHandler"/>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="bottom">
        <div class="default-btn" @click="show = false">关闭</div>
        <div class="default-btn" @click="saveRetail()" style="margin-left: 24px">确定</div>
      </div>
    </template>
  </Mask>
  <AssociationIdCode
      ref="associationIdCodeRef"
      @addIdCode="cleanInputIdCode"
      @addTraceabilityCode="addTraceAbilityCodeHandler"></AssociationIdCode>
</template>
<script setup lang="ts">
import Mask from "@/components/common/Mask.vue";
import {nextTick, ref} from "vue";
import IdCodeListShow from "@/components/charge/IdCodeListShow.vue";
import AssociationIdCode from "@/components/charge/AssociationIdCode.vue";
import TraceabilityCodeAdd from "@/components/charge/TraceabilityCodeAdd.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Monitor} from '@element-plus/icons-vue'


const show = ref(false)
const list = ref<any>()
const init = (data: any) => {
  list.value = data
  show.value = true
}
const close = () => {
  show.value = false
}
defineExpose({init, close})
const emit = defineEmits(['confirm'])
const saveRetail = () => {
  if (!checkTraceCode()) {
    ElMessageBox.confirm(
        `追溯码采集未完成是否继续？`,
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
      close()
      emit('confirm')
    })
    return
  }
  emit('confirm')
}
const checkTraceCode = () => {
  for (let i = 0; i < list.value.length; i++) {
    const item = list.value[i];
    if (!item.traceAbilityCodeList || item.shouldNumber !== item.traceAbilityCodeList.length) {
      return false;
    }
  }
  return true;
}
const inputIdCode = ref()
const associationIdCodeRef = ref()
const openAssociationIdCode = () => {
  if (!inputIdCode.value || inputIdCode.value.length < 20) {
    ElMessage({
      message: '追溯码长度不足20位',
      type: 'info',
    })
    return
  }

  if (addTraceAbilityCode()) {
    return
  }
  nextTick(() => {
    associationIdCodeRef.value.init(inputIdCode.value, list.value)
  })
}
const addTraceAbilityCode = () => {
  for (let i = 0; i < list.value.length; i++) {
    let item = list.value[i];
    let idCode = inputIdCode.value.slice(0, 7);
    if (!item.idCode) break
    if (item.idCode.includes(idCode)) {
      addTraceabilityCodeDo(item, inputIdCode.value);
      return true
    }
  }
  return false

}

const addTraceabilityCodeDo = (item: any, inputStr: any) => {
  if (!item.traceAbilityCodeList) {
    item.traceAbilityCodeList = []
  }
  let traceAbilityCodeListList = item.traceAbilityCodeList.length
  if (!inputStr || inputStr.length < 20) {
    ElMessage({
      message: '追溯码长度不足20位',
      type: 'info',
    })
    return
  }

  if (traceAbilityCodeListList == item.shouldNumber) {
    ElMessage({
      message: '采集数量已满',
      type: 'warning',
    })
    return
  }
  const index = item.traceAbilityCodeList.findIndex((codeObj: any) => codeObj.code === inputStr);
  if (index != -1) {
    ElMessage({
      message: '该追溯码已采集',
      type: 'warning',
    })
    return
  }
  item.traceAbilityCodeList.push(inputStr)
  cleanInputIdCode()
}


const cleanInputIdCode = () => {
  inputIdCode.value = ''
}
const addTraceAbilityCodeHandler = (item: any, code: any) => {
  addTraceabilityCodeDo(item, code)

}
</script>
<style scoped lang="scss">
.header {
  font-size: 18px;
  font-weight: bold;
}

.detail {
  height: 100%;
  padding: 24px 24px 0;
  display: flex;
  flex-direction: column;

  .list {
    margin-top: 24px;
    flex: 1;
    min-height: 0;
    border-radius: 8px 8px 0 0;
    border: 1px solid #EAEAEC;
    border-bottom: none;

    .table {
      width: 100%;

      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: 240px;
          }

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

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

          &:nth-child(4) {
            width: 132px;
          }

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

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

        tr {
          height: 52px;
          font-size: 14px;
          color: #333333;

          td {
            &:first-child {
              width: 132px;
              padding-left: 25px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

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

      }
    }
  }
}

.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}

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

table {
  border: none;
}
</style>