<template>
  <el-dialog
    :visible.sync="visible"
    width="92%"
    top="5vh"
    :before-close="handleClose"
    :show-close="true"
  >
    <div class="order-detail-container" style="display: flex; gap: 32px;">
      <!-- 左侧图片区域 -->
      <div class="left-img" style="width: 36%; text-align: center;">
        <p style="font-size: 22px; font-weight: bold; margin: 0 0 10px;">B</p>
        <div style="background-color: #f9f7ee; padding: 45px 20px;">
          <img :src="imgUrl" alt="成衣图片" style="width: 85%;" />
        </div>
      </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>
            <span style="color: #606266;">客户：</span>
            <span style="color: #f56c6c; font-size: 18px; font-weight: bold;">{{
              info.customer
            }}</span>
          </div>
          <div>
            <span style="color: #606266;">订单号：</span>
            <span style="color: #f56c6c; font-size: 18px; font-weight: bold;">{{
              info.orderNo
            }}</span>
          </div>
        </div>

        <!-- 操作单信息区块 -->
        <div
          class="op-info-box"
          style="border: 1px solid #e4e7ed; padding: 18px 22px; margin-bottom: 26px;"
        >
          <h4 style="margin: 0 0 18px; font-size: 16px;">操作单信息</h4>
          <div
            style="display: grid; grid-template-columns: 1fr 1fr; row-gap: 14px;"
          >
            <div>
              <span style="color: #909399;">操作单号：</span>{{ info.opNo }}
            </div>
            <div>
              <span style="color: #909399;">生产工艺：</span>{{ info.tech }}
            </div>
            <div>
              <span style="color: #909399;">基版：</span>{{ info.basePlate }}
            </div>
            <div>
              <span style="color: #909399;">变体SKU：</span>{{ info.sku }}
            </div>
            <div><span style="color: #909399;">数量：</span>{{ info.num }}</div>
            <div>
              <span style="color: #909399;">尺寸：</span>{{ info.size }}
            </div>
            <div>
              <span style="color: #909399;">店铺单号：</span>{{ info.shopNo }}
            </div>
            <div>
              <span style="color: #909399;">创建时间：</span
              >{{ info.createTime }}
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div style="text-align: right;">
          <el-button type="primary" size="medium">下载素材</el-button>
          <el-checkbox
            v-model="scanDownloadCheck"
            label="扫码下载素材"
            style="margin-left: 10px;"
          />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "OrderDetailDialog",
  props: {
    // 弹窗显示控制
    show: {
      type: Boolean,
      default: false
    },
    // 图片地址
    imgUrl: {
      type: String,
      default: ""
    },
    // 订单详情数据
    info: {
      type: Object,
      default: () => ({
        customer: "",
        orderNo: "",
        opNo: "",
        tech: "",
        basePlate: "",
        sku: "",
        num: "",
        size: "",
        shopNo: "",
        createTime: ""
      })
    }
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      }
    }
  },
  data() {
    return {
      scanDownloadCheck: true
    };
  },
  methods: {
    handleClose() {
      this.$emit("update:show", false);
    }
  }
};
</script>
