<template>
  <el-dialog
    v-model="dialogVisible"
    :title="fastKey === 'detail' ? '查看详情' : '快捷生产'"
    top="140px"
    :fullscreen="true"
    :close-on-click-modal="false"
    @opened="onOpened"
    @close="emit('close')"
  >
    <div class="detail-div">
      <div class="detail-content">
        <div class="left">
          <div class="left-images">
            <el-carousel
              v-if="detail?.imgList.length > 0"
              style="height: 100%"
              :autoplay="false"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(item, index) in detail?.imgList"
                :key="index"
                style="height: 100%"
              >
                <div class="left-image">
                  <b v-show="item?.title && item?.url">
                    {{ item?.title }}
                    <span
                      v-if="item?.id"
                      style="
                        text-decoration: underline;
                        cursor: pointer;
                        color: blue;
                      "
                    >
                      （DID：{{ item?.id }}）
                    </span>
                  </b>
                  <img :src="item.url" alt="" />
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="right">
          <div v-if="fastKey === 'fastProduction'" class="input">
            <el-input
              ref="trackingNumberRef"
              v-model="TrackingNumber"
              :placeholder="placeholderText"
              style="width: 660px; margin-right: 10px"
              clearable
              @keydown.enter="trackCodeInput()"
            ></el-input>
            <el-button type="primary" @click="trackCodeInput()">
              查询
            </el-button>
          </div>
          <div class="div-text">
            <div class="div-content">
              <div :title="String(detail?.userMark)" class="div-item">
                <span style="font-size: 18px">客户</span>
                <p style="color: red; font-size: 30px">
                  {{ detail?.userMark }}
                </p>
              </div>
              <div
                :title="String(detail?.factoryOrderNumber)"
                class="div-item"
                style="margin-top: 14px"
              >
                <span style="font-size: 18px">订单号</span>
                <p style="color: red; font-size: 22px">
                  {{ detail?.factoryOrderNumber }}
                </p>
              </div>
            </div>
          </div>
          <div class="div-text">
            <b>生产单信息</b>
            <div class="div-content">
              <div :title="detail?.factorySubOrderNumber" class="div-item">
                <span>生产单号</span>
                <p>
                  {{ detail?.factorySubOrderNumber }}
                </p>
              </div>
              <div :title="detail?.thirdSubOrderNumber || ''" class="div-item">
                <span>第三方生产单号</span>
                <p>
                  {{ detail?.thirdSubOrderNumber }}
                </p>
              </div>
              <div :title="String(detail?.craftName)" class="div-item">
                <span>生产工艺</span>
                <p>
                  {{ detail?.craftName }}
                </p>
              </div>
              <div :title="detail?.baseSku" class="div-item">
                <span>基版</span>
                <p>{{ detail?.baseSku }}</p>
              </div>

              <div :title="detail?.variantSku" class="div-item">
                <span>变体SKU</span>
                <p>{{ detail?.variantSku }}</p>
              </div>
              <div :title="String(detail?.num)" class="div-item">
                <span>数量</span>
                <p>{{ detail?.num }}</p>
              </div>

              <div :title="String(detail?.size)" class="div-item">
                <span>尺寸</span>
                <p>{{ detail?.size }}</p>
              </div>
              <div
                v-if="detail?.sizeType"
                :title="String(detail?.sizeType)"
                class="div-item"
              >
                <span>尺码类型</span>
                <p>
                  {{ sizeList.find((i) => i.value === detail.sizeType)?.name }}
                </p>
              </div>

              <div :title="detail?.shopNumber ?? ''" class="div-item">
                <span>店铺单号</span>
                <p>{{ detail?.shopNumber ?? '' }}</p>
              </div>

              <div :title="detail?.createTime" class="div-item">
                <span>创建时间</span>
                <p>{{ detail?.createTime }}</p>
              </div>
            </div>
          </div>

          <div class="btn">
            <div
              :style="{
                visibility: fastKey === 'fastProduction' ? 'visible' : 'hidden',
              }"
              class="btn-sure"
            >
              <el-button
                style="width: 100%; height: 100%; font-size: 18px"
                size="large"
                type="success"
                @click="changeStatus"
              >
                生产完成
              </el-button>
              <div class="check">
                <el-checkbox v-model="isAutoSure"> 自动完成上一单 </el-checkbox>
              </div>
            </div>
            <div class="btn-down">
              <div class="check">
                <el-checkbox v-model="isDownloadImage" size="large">
                  扫码下载素材
                </el-checkbox>
              </div>
              <el-button
                style="width: 100%; height: 100%; font-size: 18px"
                type="primary"
                size="large"
                @click="handleDownload"
              >
                下载素材
              </el-button>
            </div>
          </div>
          <div
            class="div-text"
            style="
              flex: 1;
              flex-shrink: 0;
              display: flex;
              flex-direction: column;
            "
          >
            <div v-if="detail?.note" style="height: 100%" class="div-content">
              <b style="position: absolute; top: -12px">客户留言信息</b>
              <div
                v-for="(item, index) in detail?.note"
                :key="index"
                class="div-item"
              >
                <span>{{ item.prop }}:</span>
                <p>
                  {{ item.value }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="tsx">
import {
  productionQueryApi,
  getSubOrderBySubOrderNumber,
  downloadMaterialApi,
} from '@/api/podCnOrder'
import { cardImages, PodOrderRes } from '@/types/api/podCnOrder'
import { showConfirm } from '@/utils/ui'
import { filePath } from '@/api/axios'
import { ref, watch, defineProps, defineEmits } from 'vue'
interface HistoryDataItem {
  orderNumber: string
  finished: boolean
}
const trackingNumberRef = ref()
const historyData = ref<HistoryDataItem[]>([])
const placeholderText = ref('')
const sendNum = ref(0)
const isDownloadImage = ref(false)
const isAutoSure = ref(false)
const detail = ref<PodOrderRes>({
  id: -1,
  podJomallOrderCnId: -1,
  imgList: [] as cardImages[],
})
const dialogVisible = ref(false)
// 尺码类型表
const sizeList = ref<{ name: string; value: number }[]>([
  { name: '正常码', value: 1 },
  { name: '大码', value: 2 },
])
// 通过import动态导入音频文件
const audios = {
  weight_warning: new URL('@/assets/audio/weight_warning.mp3', import.meta.url)
    .href,
  weight_success: new URL('@/assets/audio/weight_success.mp3', import.meta.url)
    .href,
  weight_repeat: new URL('@/assets/audio/weight_repeat.mp3', import.meta.url)
    .href,
  weight_search_error: new URL(
    '@/assets/audio/weight_search_error.mp3',
    import.meta.url,
  ).href,
  weight_search_success: new URL(
    '@/assets/audio/weight_search_success.mp3',
    import.meta.url,
  ).href,
}
const TrackingNumber = ref('')
const props = defineProps({
  type: {
    default: 0,
    type: Number,
  },
  detailVisible: {
    default: false,
    type: Boolean,
  },
  detailData: {
    default: null,
    type: Object,
  },
  fastKey: {
    default: '',
    type: String,
  },
})
const emit = defineEmits(['update:detailVisible', 'close', 'onSuccess'])

watch(
  () => props.detailVisible,
  (newVal: boolean) => {
    dialogVisible.value = newVal
    detail.value = { id: -1, podJomallOrderCnId: -1, imgList: [] }
    if (newVal) {
      const history = localStorage.getItem('historyCnData')
      historyData.value = history ? JSON.parse(history) : []

      const len = historyData.value
      if (len.length > 0 && props.fastKey === 'fastProduction') {
        confirmQuery(len, 0)
      }
      placeholderText.value =
        '扫描枪输入生产单号，录入下一单本单自动生产完成，最后一单扫两次完成生产'

      trackingNumberRef.value && trackingNumberRef.value.focus()

      TrackingNumber.value = ''
      isAutoSure.value = false
      sendNum.value = 0
    }
  },
)
watch(
  () => props.detailData,
  (newVal) => {
    detail.value = {
      id: -1,
      podJomallOrderCnId: -1,
      imgList: [],
    }
    if (newVal && Object.keys(newVal).length > 0) {
      const d = JSON.parse(JSON.stringify(newVal))
      if (d.note) {
        d.note = JSON.parse(d.note)
      } else {
        d.note = []
      }
      if (d.imageAry) {
        d.imgList = d.imageAry
      } else {
        d.imgList = []
      }
      detail.value = d
    }
  },
  { deep: true },
)
const confirmQuery = (len: HistoryDataItem[], i: number) => {
  const el = len[i]
  showConfirm(`生产单号 ${el.orderNumber} 未生产完成，取消则不提醒?`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      TrackingNumber.value = el.orderNumber
      await trackCodeInput()
      await setData(el.orderNumber)
      ElMessage.success('生产完成')
      if (len[i + 1]) {
        confirmQuery(len, i + 1)
      }
    })
    .catch(() => {
      const index = historyData.value.findIndex(
        (item: HistoryDataItem) => item.orderNumber === el.orderNumber,
      )
      if (index >= 0) {
        historyData.value.splice(index, 1)
        localStorage.setItem('historyCnData', JSON.stringify(historyData.value))
      }
      if (len[i + 1]) {
        confirmQuery(len, i + 1)
      }
      trackingNumberRef.value && trackingNumberRef.value.focus()
    })
}

const changeStatus = async () => {
  if (!detail.value || Object.keys(detail.value).length <= 1) {
    return ElMessage.warning('请扫码生产单号')
  }
  showConfirm('确定生产完成？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    setData(detail.value.factorySubOrderNumber || '')
  })
}
const setData = async (orderNumber: string) => {
  if (!detail.value || detail.value?.id === -1) return
  try {
    const id = detail.value.id
    const podJomallOrderCnId = detail.value.podJomallOrderCnId
    await productionQueryApi(id, podJomallOrderCnId)

    if (orderNumber) {
      const index = historyData.value.findIndex(
        (el: HistoryDataItem) => el.orderNumber === orderNumber,
      )
      if (index >= 0) {
        // 扫单完成删除
        historyData.value.splice(index, 1)
        localStorage.setItem('historCnData', JSON.stringify(historyData.value))
      }
    }
    emit('onSuccess')
    playAudio('weight_success')
    detail.value = {
      id: -1,
      podJomallOrderCnId: -1,
      imgList: [] as cardImages[],
    }
    TrackingNumber.value = ''
    isDownloadImage.value = false
    trackingNumberRef.value && trackingNumberRef.value.focus()
  } catch (e) {
    console.error(e)
    detail.value = {
      id: -1,
      podJomallOrderCnId: -1,
      imgList: [] as cardImages[],
    }
    trackingNumberRef.value && trackingNumberRef.value.focus()
    playAudio('weight_search_error')
  }
}

const handleDownload = () => {
  if (
    !detail.value ||
    Object.keys(detail.value).length <= 1 ||
    detail.value.id == -1
  ) {
    return ElMessage.warning('请扫码生产单号')
  }
  download()
}
const download = async () => {
  if (detail.value && detail.value?.id != -1) {
    try {
      const id = detail.value.id
      if (id !== undefined) {
        try {
          const res = await downloadMaterialApi([id])
          if (res.code !== 200) return
          // window.open(filePath + res.message)
          const a = document.createElement('a')
          a.href = filePath + res.message
          a.download = res.message!
          a.target = '_blank'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        } catch (e) {
          console.error(e)
        }
      }
    } catch (e) {
      // showError(e)
      console.error(e)
    }
  }
}
type AudioKey = keyof typeof audios // 创建一个类型，确保 key 只能是 audios 对象的键之一
const playAudio = (key: AudioKey, message?: string) => {
  let text = ''
  switch (key) {
    case 'weight_search_success':
      text = ''
      break
    case 'weight_search_error':
      text = '请录入生产单号'
      break
    case 'weight_success':
      text = ''
      break
    case 'weight_repeat':
      text = '称重复录入'
      break
    default:
      text = '请录入跟踪号或重量'
      break
  }
  if (message || text) ElMessage.warning(message || text)
  const audio = new Audio()
  if (audios[key]) {
    audio.src = audios[key] // 获取对应 key 的音频路径
    audio.play().catch((err) => console.error('Audio play failed:', err)) // 捕获音频播放失败的错误
  } else {
    console.error(`No audio found for key: ${key}`)
  }
}

const trackCodeInput = async () => {
  if (!TrackingNumber.value) {
    // ElMessage.warning('请扫描生产单号')
    playAudio('weight_search_error')
    trackingNumberRef.value && trackingNumberRef.value.focus()
    return
  }
  const item = historyData.value.find(
    (el: HistoryDataItem) => el.orderNumber === TrackingNumber.value,
  )
  if (!item) {
    // 记录扫单
    historyData.value.push({
      orderNumber: TrackingNumber.value,
      finished: false,
    })
    localStorage.setItem('historyCnData', JSON.stringify(historyData.value))
  }

  const orderNumber = TrackingNumber.value

  if (isAutoSure.value) {
    await setData(
      historyData.value[historyData.value.length - 1].orderNumber || '',
    )
  }

  try {
    const res = await getSubOrderBySubOrderNumber(orderNumber)
    if (!res.data) {
      return ElMessage.error('生产单不存在')
    }
    const d = JSON.parse(JSON.stringify(res.data))

    if (d.note) {
      d.note = JSON.parse(d.note)
    } else {
      d.note = []
    }
    if (d.imageAry) {
      d.imgList = JSON.parse(d.imageAry)
    } else {
      d.imgList = []
    }
    detail.value = d

    if (isDownloadImage.value) {
      download()
    }
    playAudio('weight_search_success')

    trackingNumberRef.value && trackingNumberRef.value.focus()
    TrackingNumber.value = ''
  } catch (e) {
    console.error(e)
    trackingNumberRef.value && trackingNumberRef.value.focus()
    TrackingNumber.value = ''
  }
}
const onOpened = () => {
  trackingNumberRef.value && trackingNumberRef.value.focus()
}
</script>
<style lang="scss" scoped>
.sure-btn {
  position: absolute;
  right: 62px;
  top: 14px;
}

.detail-div {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;

  .detail-images {
    .scroll-list {
      background: #ececec;
      display: flex;
      height: 100px;
      width: 100%;
      padding: 5px;

      .scroll-content {
        margin-left: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
        flex-shrink: 0;

        .scroll-item {
          height: 100%;
          min-width: 100px;
          background: white;
          margin-right: 5px;
        }
      }

      .img-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: white;
        padding: 10px;

        b {
          text-align: center;
          color: black;
          font-weight: bold;
          font-size: 16px;
          margin-bottom: 15px;
        }

        .id {
          display: flex;
          align-items: center;
          padding: 3px 5px;
          background: #ececec;
          justify-content: center;

          img {
            width: 15px;
            margin-right: 8px;
          }
        }
      }
    }
  }

  .detail-content {
    display: flex;
    width: 100%;
  }

  .right {
    width: 730px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .btn {
      margin: 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      width: 100%;

      .btn-sure,
      .btn-down {
        width: 49%;
        position: relative;

        .check {
          position: absolute;
          width: 144px;
          height: 100%;
          background: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
          right: 0;
          top: 1px;
        }
      }
    }

    .div-text {
      .div-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        padding: 15px 10px;
        box-sizing: border-box;

        .div-item {
          width: 50%;
          margin-bottom: 10px;
          display: flex;
          align-items: center;

          p {
            font-weight: 400;
            color: black;
          }

          span {
            display: inline-block;
            text-align: right;
            width: 120px;
          }

          span::after {
            content: ':';
            margin: 0 3px;
          }
        }
      }

      b {
        position: relative;
        background: white;
        top: 9px;
        left: 13px;
        padding: 0 10px;
        font-size: 18px;
        color: black;
        z-index: 3;
      }

      .div-content {
        position: relative;
        border: 1px solid #ececec;
      }
    }

    .input {
      display: flex;
      align-items: center;
      margin: 30px 0;
    }
  }

  .left {
    flex: 1;
    flex-shrink: 0;
    margin-right: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    .left-image {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: center;

      img {
        height: auto;
        width: 100%;
        max-height: 90%;
        object-fit: contain;
      }

      b {
        color: black;
        font-size: 18px;
        margin-bottom: 15px;
      }
    }

    .left-images {
      display: flex;
      width: 95%;
      height: 100%;
      flex-direction: column;

      b {
        color: black;
        text-align: center;
        margin-bottom: 15px;
      }
    }
  }
}

.left-images {
  :deep(.el-carousel__container) {
    height: 100%;
  }
  :deep(.el-dialog__title) {
    font-weight: bold;
    font-size: 37px;
    color: black;
    position: relative;
    left: 47%;
    top: 13px;
  }
}

.btn {
  position: relative;

  :deep(.el-button) {
    span {
      position: relative;
      left: -30px;
    }
  }

  .check {
    :deep(.el-checkbox__inner) {
      background-color: transparent !important;
      border-color: white !important;
      width: 12px;
      height: 12px;
    }

    :deep(.el-checkbox__inner::after) {
      left: 3px;
    }

    :deep(.el-checkbox__label) {
      padding-left: 5px;
      font-size: 12px;
      color: white !important;
    }
  }
}
.warning {
  font-size: 18px;
  font-weight: bold;
  color: #ff9900;
  margin-left: 10px;
  cursor: pointer;
}
</style>
