<script>
import BaseCard from "../../components/BaseCard.vue";
import DTFhead from "./components/detailHead.vue";
const { getProductType, setProductType } = require("@/server/utils/store");
const { remote } = require("electron");
const { Menu } = remote;
import dayjs from "dayjs";

export default {
  name: "dtfBatchDetail",
  components: { BaseCard, DTFhead },
  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 {
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 2
      },
      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 }
      },
      item: {},
      activeName: getProductType()
    };
  },
  mounted() {
    console.log(this.tableList);
  },
  methods: {
    tabClick(tab) {
      if (tab.name == "DTG")
        this.$router.push({
          name: "design"
        });
      setProductType(tab.name);
    },
    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: () => console.log("全部选择") },
        { label: "取消选择", click: () => console.log("取消选择") }
      ];
      const menu = Menu.buildFromTemplate(template);
      menu.popup({ x: e.clientX, y: e.clientY });
    },
    getItemTags(tagsId) {},
    handleViewDetail(tagsId) {},
    setProductMark(tagsId) {},
    parseImageAry(tagsId) {},
    openLogDialog(tagsId) {}
  }
};
</script>

<template>
  <div style="height:100%" @contextmenu.prevent="openMenu">
    <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="DTG生产" name="DTG"> /></el-tab-pane>
      <el-tab-pane label="DTF生产" name="DTF">
        <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="value in 20" :key="value">
                <BaseCard
                  style="cursor: pointer;"
                  :card-item="item"
                  :active="true"
                  :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
                        v-if="
                          item?.productMark === 'custom_normal' ||
                            item?.productMark === 'normal'
                        "
                        class="product-mark-badge"
                        :title="`类型:${setProductMark(item?.productMark)}类`"
                      >
                        {{ setProductMark(item?.productMark) }}
                      </div>
                      <div
                        v-if="item.customizedQuantity"
                        class="quantity-badge"
                        :class="
                          item.customizedQuantity === 1
                            ? 'single-quantity-badge-color'
                            : 'multiple-quantity-badge-color'
                        "
                        :title="
                          `类型:${
                            item.customizedQuantity === 1 ? '单面' : '双面'
                          }`
                        "
                      >
                        {{ item.customizedQuantity === 1 ? "单" : "多" }}
                      </div>
                      <el-icon
                        name="caozuorizhi"
                        style="width: 28px; height: 28px"
                        @click.stop="openLogDialog(item)"
                      >
                        <template #title>
                          <title>操作日志</title>
                        </template>
                      </el-icon>
                      <el-icon
                        name="chakanxiangqing"
                        @click.stop="handleViewDetail(item)"
                      >
                        <template #title>
                          <title>查看详情</title>
                        </template>
                      </el-icon>
                    </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-tab-pane>
    </el-tabs>
  </div>
</template>

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

::v-deep {
  .el-tabs {
    height: 100%;
    border-bottom: none;
  }
  .el-tabs__header {
    margin: 0;
    background-color: #c6c6c6;
    // height: 20px;
  }
  .el-tabs__header .el-tabs__item {
    font-size: 12px;
    line-height: 25px;
    height: 25px;
    // border-bottom: none;
  }
  .el-tabs--border-card > .el-tabs__content {
    padding: 0;
    height: 100%;
  }
  .el-tab-pane {
    height: 100%;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    border: none;
    background-color: #243151;
    color: #fff;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border: none;
  }
  .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:not(.is-disabled):hover {
    color: #fff;
    // background-color: #5b647c;
  }
}
.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 {
  background-color: #f56c6c;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.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>
