<script>
import BaseCard from "@/components/BaseCard.vue";
import DTFhead from "./components/detailHead.vue";
import DetailDialog from "@/components/detailDialog.vue";
const { remote } = require("electron");
import LogList from "@//components/LogList.vue";
const { Menu } = remote;
import dayjs from "dayjs";

export default {
  name: "dtf-batch-detail",
  components: { BaseCard, DTFhead, DetailDialog, LogList },
  props: {
    user: {
      default: () => ({
        avatar: "",
        factory: {}
      }),
      type: Object
    },
    factoryType: { type: String, default: "CN" },
    cardConfig: {
      imageSrc: "./src/assets/template-bg-1.jpg",
      title: "title",
      time: "time"
    }
  },
  data() {
    return {
      logVisible: false,
      detailVisible: false,
      logList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 2
      },
      cardList: Array.from({ length: 10 }, (_, index) => {
        const isDtg = index % 2 === 0;
        return {
          id: index + 1,
          batchNo: index + 1,
          status: index % 3 === 0 ? 0 : 1,
          img: isDtg ? "/static/dtg.jpg" : "/static/dtf.jpg",
          subOrderNumber: index % 4 !== 0,
          num: isDtg ? 120 + index * 2 : 86 + index,
          failedReason: "",
          active: false
        };
      }),
      detailRow: {
        name: { label: "批次号", value: 111 },
        name1: { label: "操作单数量", value: 111 },
        name2: { label: "素材数量", value: 111 },
        name3: { label: "工艺类型", value: 111 },
        name6: { label: "规范素材", value: 111 },
        name4: { label: "创建时间", value: 111 },
        name5: { label: "排版状态", value: 111 },
        name7: { label: "操作单状态", value: 111 }
      }
    };
  },
  mounted() {
    console.log(this.cardList);
  },
  methods: {
    loadData() {
      // 请求列表接口
    },
    handleSelect(rows) {
      console.log("选中行", rows);
    },
    handleSizeChange(size) {
      this.pageInfo.pageSize = size;
      this.pageInfo.pageNum = 1;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.pageInfo.pageNum = page;
      this.loadData();
    },
    copyText(text) {
      navigator.clipboard.writeText(text);
      // ElMessage.success("复制成功");
    },
    getOrderDelayText(createTime) {
      if (!createTime) return "--";
      const createAt = dayjs(createTime);
      if (!createAt.isValid()) return "--";
      const diffMinutes = Math.max(0, dayjs().diff(createAt, "minute"));
      const baseHours = Math.floor(diffMinutes / 60);
      const remainMinutes = diffMinutes % 60;
      const hours = baseHours + (remainMinutes > 30 ? 1 : 0);
      return `${hours}h`;
    },
    openMenu(e) {
      e.preventDefault();
      const template = [
        {
          label: "全部选择",
          click: () => {
            this.cardList.forEach(el => {
              el.active = true;
            });
          }
        },
        {
          label: "取消选择",
          click: () => {
            this.cardList.forEach(el => {
              el.active = false;
            });
          }
        }
      ];
      const menu = Menu.buildFromTemplate(template);
      menu.popup({ x: e.clientX, y: e.clientY });
    },
    getItemTags(tagsId) {},

    setProductMark(tagsId) {},
    parseImageAry(tagsId) {},
    openLogDialog(tagsId) {
      console.log(999);

      this.logVisible = true;
    },
    changeActive(item) {
      item.active = !item.active;
    },
    handleViewDetail(item) {
      try {
        this.detailVisible = true;
      } catch (e) {
        console.error(e);
      }
    }
  }
};
</script>

<template>
  <div style="height:100%" @contextmenu.prevent="openMenu">
    <div class="page">
      <DTFhead :user="user" :factoryType="factoryType"></DTFhead>
      <div class="rowBox">
        <div class="rowItem" v-for="(item, index) in detailRow" :key="index">
          <div
            style="display: flex;
        flex-direction: column; align-items: center;"
          >
            <div>{{ item.label }}</div>
            <div>{{ item.value }}</div>
          </div>
        </div>
      </div>
      <div class="card-content">
        <div class="card-grid">
          <div
            class="card-grid-item"
            v-for="(item, index) in cardList"
            :key="index"
            @click.stop="changeActive(item)"
          >
            <BaseCard
              style="cursor: pointer;"
              :card-item="item"
              :active="item.active"
              :show-sku="false"
              :show-product-info="false"
              :image-field="'variantImage'"
              :padding-top="'100%'"
            >
              <template #bottom_left>
                <span
                  class="operation-number"
                  :title="`操作单号:${item.operationNo}`"
                  @click.stop="() => {}"
                >
                  {{ item.operationNo }}
                </span>
              </template>
              <template #top_left>
                <el-tooltip
                  v-if="item.outOfStock"
                  effect="light"
                  content="缺货"
                  placement="bottom"
                >
                  <div
                    style="
                    background-color: #f56c6c;
                    color: #fff;
                    padding: 2px 4px;
                    border-radius: 4px;
                    font-size: 12px;
                  "
                  >
                    缺
                  </div>
                </el-tooltip>
                <span v-if="item.tagsId" class="flex-row flex-row-gap6">
                  <el-tag v-for="tag in getItemTags(item.tagsId)" :key="tag.id">
                    {{ tag.name }}
                  </el-tag>
                </span>
              </template>

              <template #images>
                <div class="flex-between">
                  <div class="images-position">
                    <div class="images-container">
                      <div
                        v-for="(img, index) in parseImageAry(item.imageAry)"
                        :key="index"
                        :title="img.title"
                        class="item-image"
                      >
                        <el-image
                          :src="img.url"
                          height="50"
                          :preview-src-list="
                            parseImageAry(item.imageAry).map(i => i.url)
                          "
                          :initial-index="index"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="flex-row flex-row-gap15">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="'用户编码: ' + item?.userMark"
                      placement="bottom"
                    >
                      <span
                        style="
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: inline-block;
                      "
                        @click.stop="copyText(String(item?.userMark || ''))"
                      >
                        {{ item?.userMark || "AAAF" }}
                      </span>
                    </el-tooltip>
                    <img
                      v-if="item.platform"
                      :src="''"
                      style="width: 30px; height: 30px"
                    />
                  </div>
                </div>
              </template>
              <template #operations>
                <div class="flex-row flex-row-gap6">
                  <div
                    class="quantity-badge"
                    :class="
                      item.customizedQuantity === 1
                        ? 'single-quantity-badge-color'
                        : 'multiple-quantity-badge-color'
                    "
                    :title="
                      `类型:${item.customizedQuantity === 1 ? '单面' : '双面'}`
                    "
                  >
                    {{ item.customizedQuantity === 1 ? "单" : "多" }}
                  </div>
                  <i
                    class="el-icon-tickets quantity-badge"
                    style="background-color: #41c792;"
                    @click.stop="openLogDialog(item)"
                    title="操作日志"
                  >
                  </i>
                  <i
                    style="background-color: #2183fe;"
                    class="el-icon-search quantity-badge"
                    @click.stop="handleViewDetail(item)"
                    title="查看详情"
                  >
                  </i>
                </div>
              </template>
              <template #info>
                <div class="card-info-grid">
                  <div class="card-info-row full">
                    <span
                      class="info-value ellipsis"
                      :title="item.productName || ''"
                    >
                      {{ item.productName }}
                    </span>
                  </div>
                  <div class="card-info-row">
                    <span
                      class="info-value clickable ellipsis"
                      :title="`变体SKU:${item.variantSku || ''}`"
                      @click.stop="copyText(item.variantSku || '')"
                    >
                      {{ item.variantSku }}
                    </span>
                  </div>
                  <div class="card-info-row">
                    <span class="info-label">工艺：</span>
                    <span class="info-value">{{ item.craftName }}</span>
                  </div>
                  <div class="card-info-row">
                    <span
                      class="info-value clickable ellipsis"
                      :title="`库存SKU:${item.thirdSkuCode || ''}`"
                      @click.stop="copyText(item.thirdSkuCode || '')"
                    >
                      {{ item.thirdSkuCode }}
                    </span>
                  </div>
                  <div class="card-info-row">
                    <span class="info-label">店铺单号：</span>
                    <span
                      class="info-value clickable ellipsis"
                      :title="`店铺单号:${item.shopNumber || ''}`"
                      @click.stop="copyText(item.shopNumber || '')"
                      >{{ item.shopNumber }}</span
                    >
                  </div>
                  <div class="card-info-row">
                    <span class="info-label">款号：</span>
                    <span
                      class="info-value clickable ellipsis"
                      :title="`款号:${item.supplierProductNo || ''}`"
                      @click.stop="copyText(item.supplierProductNo || '')"
                      >{{ item.supplierProductNo }}</span
                    >
                  </div>
                  <div class="card-info-row">
                    <span class="info-label">客户单号：</span>
                    <span
                      class="info-value clickable ellipsis"
                      :title="`客户单号:${item.thirdOrderNumber || ''}`"
                      @click.stop="copyText(item.thirdOrderNumber || '')"
                      >{{ item.thirdOrderNumber }}</span
                    >
                  </div>
                  <div class="card-info-row">
                    <span class="info-label">批次号：</span>
                    <span
                      class="info-value clickable ellipsis"
                      :title="`批次号:${item.batchArrangeNumber || ''}`"
                      @click.stop="copyText(item.batchArrangeNumber || '')"
                      >{{ item.batchArrangeNumber }}</span
                    >
                  </div>
                  <div class="card-info-row" style="color: red">
                    <span class="info-label">状态：</span>
                    <span class="info-value">{{ item.statusName }}</span>
                  </div>
                  <div class="card-info-row full delay-time-row">
                    <span
                      class="delay-time-value"
                      :title="
                        `订单延期:${getOrderDelayText(item.orderCreateTime)}`
                      "
                    >
                      {{ getOrderDelayText(item.orderCreateTime) }}
                    </span>
                  </div>
                </div>
              </template>
            </BaseCard>
          </div>
        </div>
      </div>
      <div class="table-pagination">
        <el-pagination
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="logVisible"
      title="操作日志"
      width="1000px"
      :close-on-click-modal="false"
    >
      <LogList v-if="logList.length" :log-list="logList" />
      <div v-else class="empty-content">暂无数据</div>
    </el-dialog>
    <DetailDialog
      :show.sync="detailVisible"
      :img-url="''"
      :info="{}"
    ></DetailDialog>
  </div>
</template>

<style scoped lang="less">
.page {
  display: flex;
  flex-direction: column;
  height: calc(100% - 25px);
}
.table-pagination {
  margin: 10px 0;
  text-align: center;
}

.rowBox {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  justify-items: center;
  align-items: center;
  background-color: #f3f3f3;
  padding: 10px 0;
  .rowItem {
    width: 100%;
    border-right: 1px solid #c6c6c6;
    :nth-last-child {
      border: none;
    }
  }
}

.card-content {
  height: 100%;
  flex: 1;
  overflow-y: auto;
}
.card-pagination {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.card-selected-info {
  font-size: 14px;
  color: #606266;

  .highlight {
    color: red;
    font-weight: bold;
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: max-content;
  gap: 10px;
  padding: 5px;
}
.operation-number {
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.75);
  padding: 2px 6px;
  border-radius: 4px;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quantity-badge {
  width: 28px;
  height: 28px;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  margin-left: 5px;
}

.multiple-quantity-badge-color {
  background-color: #e6a23c;
}

.product-mark-badge {
  border: 2px solid #f56c6c;
  color: #f56c6c;
  font-weight: 700;
  height: 28px;
  width: 28px;
  text-align: center;
  border-radius: 6px;
  font-size: 16px;
}

.card-info-grid {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 4px;
  font-size: 12px;
  margin-top: 6px;

  .full {
    grid-column: 1 / -1;
  }
}

.card-info-row {
  display: flex;
  overflow: hidden;
}

.delay-time-row {
  justify-content: flex-end;
  margin-top: 2px;
}

.delay-time-value {
  color: red;
  font-weight: 600;
}

.info-label {
  flex-shrink: 0;
  color: #909399;
}

.info-value {
  flex: 1;
  min-width: 0;

  &.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.clickable {
    cursor: pointer;
    color: #409eff;

    &:hover {
      text-decoration: underline;
    }
  }
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: hidden;
  gap: 6px;

  .images-position {
    flex: 1;
    overflow: auto hidden;
    .images-container {
      width: 100%;
      display: flex;
      gap: 6px;
    }
    .item-image {
      width: 50px;
      min-width: 50px;
      height: 50px;
      border: 1px solid #eee;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  b {
    margin-right: 5px;
    font-size: 15px;
  }
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.flex-row-gap15 {
  gap: 15px;
}
.flex-row-gap6 {
  gap: 6px;
}
@media (max-width: 1920px) {
  .card-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media (max-width: 1750px) {
  .card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .card-info-grid {
    grid-template-columns: 1fr 180px;
  }
}
@media (max-width: 1550px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-info-grid {
    grid-template-columns: 1fr 200px;
  }
}
</style>
