<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-container-lt">
        <el-form :inline="true" label-position="left" :model="listQuery">
          <el-form-item>
            <el-input clearable v-model="listQuery.productCode" placeholder="请输入SPU"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="getList()">搜索</el-button >
          <el-button type="primary" @click="productsSync()" icon="el-icon-refresh" :loading="productsSyncLoading">同步商品</el-button>
        </el-form>
      </div>
    </div>
    <div class="table-container">
      <el-table  style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id"
        stripe border fit highlight-current-row>
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="商品SPU" min-width="100" align="center" prop="productCode" />
        <el-table-column label="商品ID" min-width="100" align="center" prop="productId" />
        <el-table-column label="商品图片" min-width="100" align="center">
          <template slot-scope="scope">
            <p style="margin: 0;cursor: pointer;" v-if="scope.row.mainPicture && scope.row.mainPicture.length" @click="openGallery(scope.row)">
              <img style="max-width: 100px;"  :src="scope.row.mainPicture[0]"  alt="">
            </p>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" min-width="100" align="center" prop="productTitle" />
        <!-- <el-table-column label="价格" min-width="100" align="center" prop="createTime" /> -->
        <el-table-column label="更新时间" min-width="100" align="center" prop="updateTime" />
      </el-table>
    </div>
    <!-- 分页 -->
    <swPage v-if="total > 0" key="2" :listQuery="listQuery" :total="total" pos="btmRight" @retPage="retPage" />
  </div>
</template>

<script>
import waves from "@/directive/waves";
import swPage from "@/views/common/swPage";
import { auditStatus } from "@/constants/index";
import { getValueByKey } from "@/utils/index";
import { galleryProduct, pullGalleryProduct } from "@/api/productRepo";
import permission from "@/directive/permission";
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox.css";


export default {
  name: "productRepo",
  directives: {
    waves,
    permission
  },
  components: {
    swPage
  },
  computed: {
  },
  data() {
    return {
      auditStatus,
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      productsSyncLoading: false,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        productCode: null
      }
    };
  },
  //页面创建的时候执行
  created() {
    this.getList();
  },
  methods: {
    getValueByKey,
    getList() {
      this.listLoading = true;
      const params = {}
      for (const key in this.listQuery) {
        const value = this.listQuery[key]
        if (value !== null && value !== '' && value !== undefined) {
          params[key] = value
        }
      }
      galleryProduct(params).then(res => {
        if (200 == res.code) {
          this.total = res.data.total;
          this.list = res.data.rows;
        }
        this.listLoading = false;
      });
    },
    retPage() {
      //分页
      this.getList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    productsSync() {
      const params = this.listQuery ? { productCode: this.listQuery.productCode } : {}
      if (!this.listQuery.productCode) {
        this.$message.error("产品款号不能为空!");
        return;
      }
      this.productsSyncLoading = true;
      pullGalleryProduct(params).then(res => {
        if (200 == res.code) {
          this.$message.success(res.msg || "操作成功");
        }
        this.productsSyncLoading = false;
      }).finally(() => {
        this.productsSyncLoading = false;
      })
    },
    openGallery(row) {
      const images = row.mainPicture.slice(0, 5)
      Fancybox.show(
        images.map((src) => ({
          src,
          type: "image",
        })),
        {
          startIndex: 0,
        }
      );
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/styles/layout.scss";

.button {
  .el-button {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
