<template>
  <el-dialog
    :visible.sync="visible"
    width="92%"
    top="5vh"
    :before-close="handleClose"
    :show-close="true"
  >
    <div class="order-detail-container" style="display: flex;height: 800px;">
      <!-- 左侧图片区域 -->
      <div class="left-images" style="width: 50%; text-align: center;">
        <el-carousel
          v-if="parseImageAry(info.imageAry).length > 0"
          style="height: 100%"
          :autoplay="false"
        >
          <el-carousel-item
            v-for="(item, index) in parseImageAry(info.imageAry)"
            :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 class="right-info" style="flex: 1;">
        <!-- 客户+订单号栏 -->
        <div
          class="customer-order-row"
          style="display: flex; justify-content: space-between; border: 1px solid #e4e7ed; padding: 15px 20px; margin-bottom: 18px;"
        >
          <div class="text-label">
            <span>客户：</span>
            <span style="color: #f56c6c;font-size: 20px;font-weight: 700;">{{
              info.userMark
            }}</span>
          </div>
          <div class="text-label">
            <span>订单号：</span>
            <span style="color: #f56c6c;font-size: 20px;font-weight: 700;">{{
              info.factoryOrderNumber
            }}</span>
          </div>
        </div>

        <!-- 操作单信息区块 -->
        <div class="div-text"><b>操作单信息</b></div>
        <div
          class="info-box"
          style="border: 1px solid #e4e7ed; padding: 18px 22px; margin-bottom: 26px;"
        >
          <div
            style="display: grid; grid-template-columns: 1fr 1fr; row-gap: 14px;"
          >
            <div class="text-label">
              <span>操作单号：</span>{{ info.operationNo }}
            </div>
            <div class="text-label">
              <span>生产工艺：</span>{{ info.craftName }}
            </div>
            <div class="text-label"><span>基版：</span>{{ info.baseSku }}</div>
            <div class="text-label">
              <span>变体SKU：</span>{{ info.variantSku }}
            </div>
            <div class="text-label"><span>数量：</span>{{ info.quantity }}</div>
            <div class="text-label"><span>尺寸：</span>{{ info.size }}</div>
            <div class="text-label">
              <span>店铺单号：</span>{{ info.shopNumber }}
            </div>
            <div class="text-label">
              <span>创建时间：</span>{{ info.createTime }}
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div style="text-align: right;">
          <el-button type="primary" size="medium" @click="downloadFn"
            >下载素材</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import bus from "@/bus";
export default {
  name: "OrderDetailDialog",
  props: {
    // 弹窗显示控制
    show: {
      type: Boolean,
      default: false
    },
    // 订单详情数据
    info: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      }
    }
  },
  data() {
    return {
      scanDownloadCheck: true
    };
  },
  methods: {
    handleClose() {
      this.$emit("update:show", false);
    },
    parseImageAry(imageAry) {
      if (typeof imageAry !== "string" || !imageAry.trim()) return [];
      const trimmed = imageAry.trim();
      if (trimmed.startsWith("http")) {
        return trimmed
          .split(",")
          .map(url => ({ url: url.trim() }))
          .filter(item => item.url);
      }
      try {
        const parsed = JSON.parse(trimmed);
        if (!Array.isArray(parsed)) return [{ url: trimmed }];
        const result = [];
        for (const item of parsed) {
          if (typeof item === "string" && item) {
            result.push({ url: item });
          } else if (item && typeof item === "object" && "url" in item) {
            const url = item.url;
            if (url) {
              result.push({
                url,
                title: item.title
              });
            }
          }
        }
        return result;
      } catch {
        return [{ url: trimmed }];
      }
    },
    downloadFn() {
      bus.$emit("downLoadFile", this.info);
    }
  }
};
</script>
<style scoped lang="less">
.left-images {
  display: flex;
  width: 95%;
  height: 100%;
  flex-direction: column;

  b {
    color: black;
    text-align: center;
    margin-bottom: 15px;
  }
  .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;
    }
  }
}
.div-text {
  b {
    position: relative;
    background: white;
    top: 9px;
    left: 13px;
    padding: 0 10px;
    font-size: 22px;
    color: black;
    z-index: 3;
  }
}
.text-label {
  flex: 50%;
  font-size: 16px;
}
::v-deep.el-carousel {
  .el-carousel__container {
    height: 100% !important;
  }
}
</style>
