<script setup lang="ts">
import { reactive, ref } from 'vue'
import cardWrapper from './cardWrapper.vue'
const queryParams = reactive({
  name: "",
  sku: "",
  diy_sku: "",
  print_type: "",
  category_id: "",
});
const pager = reactive({
  page:1,
  size:100,
  loading: false ,
  count: 0,
  lists: [] ,
  extend: {}
})
const setCurrentImg = (item: any, val: string) => {
  item.img_url = val;
};

const categoryTree = ref([])


const resetPage = () => {

}
</script>

<template>
  <div class="product">
    <el-card>
      <el-form
        ref="formRef"
        class="searchForm"
        label-width="80px"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item label="商品名称">
          <el-input
            v-model="queryParams.name"
            clearable
            maxlength="40"
            style="width: 150px"
            show-word-limit
            placeholder="请输入商品名称"
          />
        </el-form-item>

        <el-form-item label="SKU">
          <el-input
            v-model="queryParams.sku"
            clearable
            style="width: 150px"
            placeholder="请输入sku"
          />
        </el-form-item>

        <el-form-item label="印花类型">
          <el-select
            v-model="queryParams.print_type"
            style="width: 150px"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in ['满印', '局部印']"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-cascader
            ref="categoryCascader"
            v-model="queryParams.category_id"
            :options="categoryTree"
            clearable
            style="width: 150px"
            :props="{
                  label: 'name',
                  value: 'id',
                  emitPath: false,
                }"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>

        </el-form-item>
      </el-form>
    </el-card>
    <div class="product-list">
      <el-card
        style="flex: 1; flex-shrink: 0; overflow: hidden"
        class="!border-none"
        shadow="never"
      >
        <div
          v-loading="pager.loading"
          class="eltable"
          element-loading-text="加载中..."
        >
          <div v-if="pager.lists.length > 0" id="shopline" class="card-mode">
            <div
              v-for="(item, index) in pager.lists"
              :key="index"
              class="card-item"
            >
              <card-wrapper
                :data="item"
                :index="index"
                is-show-home-sku="bottom"
                :is-sku-image-list="true"
                :has-width="true"
                :is-show-sku="false"
                :is-show-sales="false"
                :is-custom="true"
                @set-current-img="(val) => setCurrentImg(item, val)"
              >
                <template #operations>
<!--                  <img-->
<!--                    title="操作日志"-->
<!--                    width="24"-->
<!--                    height="24"-->
<!--                    src="@/assets/images/log.png"-->
<!--                    alt=""-->
<!--                    @click.stop="viewTheLog(item.id)"-->
<!--                  />-->
                  <img
                    title="编辑"
                    width="24"
                    height="24"
                    src="@/assets/images/edit.png"
                    alt=""
                    @click.stop="editInfo(item, 'edit')"
                  />

                </template>

                <template #price>
                    <span
                      style="margin: 0 5px"
                      class="price"
                      :title="'建议零售价' + item.sales_price"
                    >
                      {{ item.sales_price ? "¥" : ""
                      }}{{ item.sales_price }}&nbsp;
                    </span>
                </template>
                <template #level-time>
                  <div
                    class="create-time"
                    :title="`上架时间:${item.create_time}`"
                  >
                    <span>{{ item.create_time }}</span>
                  </div>
                </template>
                <template #synthesizeStatus>
                  <div title="印花状态" style="position: absolute; right: 0">
                    <el-tag :type="item.print_type == 0 ? '' : 'warning'">
                      {{ item.print_type == 0 ? "满印" : "局部印" }}
                    </el-tag>
                  </div>
                </template>
                <template #otherContent>
                  <div class="sds-keyid">
                    <div class="product-id" @click.stop="copy(item.id)">
                      <img
                        :title="'复制' + item.id"
                        width="20"
                        src="@/assets/images/id.png"
                        alt=""
                      />
                      <span :title="item.id">
                          {{ item.id }}
                        </span>
                    </div>
                    <div class="product-sku" @click.stop="copy(item.sku)">
                        <span :title="item.sku">
                          {{ item.sku }}
                        </span>
                    </div>
                  </div>
                </template>
              </card-wrapper>
            </div>
          </div>
          <div v-else class="empty">暂无数据</div>
        </div>
        <div class="flex justify-center mt-4">
          <div
            style="
                display: flex;
                align-items: center;
                margin-left: 20px;
                width: max-content;
              "
          >
            <span>一行展示</span>
            <el-input
              v-model="rowNumber"
              type="number"
              style="width: 80px; margin: 0 10px"
              placeholder="请输入"
              clearable
              @change="changeRowNumber"
            />
            <span>条</span>
          </div>
          &emsp;&emsp;&emsp;
          <pagination v-model="pager" @change="getLists" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.product{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.searchForm{
  ::v-deep(.el-form-item){
    margin-bottom: 0;
  }
}
.justify-center{
  display: flex;
  justify-content: center;
}
.product-list{
  flex: 1;
  margin-top: 10px;
  flex-shrink: 0;
  ::v-deep(.el-card){
    height: 100%;
    .el-card__body{
      display: flex;
      height: 100%;
      flex-direction: column;
      .eltable{
        flex: 1;
        flex-shrink: 0;
        overflow: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
