<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <div class="Mall4j mod-prod-list app-container">
    <!-- 1.条件筛选 -->
    <div class="search-bar">
      <el-form
        ref="searchFormRef"
        :inline="true"
        :model="searchForm"
        @submit.prevent
      >
        <!-- 商品搜索 -->
        <el-form-item :label="$t('product.modifyPrice.productSearch') + '：'">
          <el-input
            v-model="searchForm.prodKey"
            :placeholder="$t('product.modifyPrice.productSearchTips')"
            maxlength="100"
            clearable
            style="width:220px"
          />
        </el-form-item>
        <!-- 调价时间 -->
        <el-form-item :label="$t('product.modifyPrice.priceAdjustmentTime') + '：'">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            :range-separator="$t('date.tip')"
            :start-placeholder="$t('date.start')"
            :end-placeholder="$t('date.end')"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            :default-time="defaultTime"
          />
        </el-form-item>
        <!-- 查询按钮 -->
        <el-button
          type="primary"
          @click="getPageData"
        >
          {{ $t('table.search') }}
        </el-button>
        <el-button
          plain
          @click="onResetSearch(searchFormRef)"
        >
          {{ $t('table.clear') }}
        </el-button>
      </el-form>
    </div>

    <div class="main-content">
      <!-- 商品展示表格 -->
      <div
        ref="closepopoverRef"
        class="table-con"
      >
        <el-table
          :data="pageData.list"
          header-cell-class-name="table-header"
          row-class-name="table-row"
          style="width: 100%"
          @sort-change="prodConditionSort"
        >
          <el-table-column
            :label="$t('product.productInfo')"
            prop="spuName"
            width="400"
          >
            <template #default="{ row }">
              <div class="table-cell-con">
                <div class="table-cell-image">
                  <ImgShow
                    :src="row.mainImgUrl"
                    :img-style="{width:'60px',height:'60px'}"
                  />
                </div>
                <div class="table-cell-text">
                  <el-popover
                    placement="top-start"
                    trigger="hover"
                    :content="row.spuName"
                  >
                    <template #reference>
                      <div class="prod-name">
                        {{ row.spuName }}
                      </div>
                    </template>
                  </el-popover>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('product.list.skuCode')"
            prop="partyCode"
            min-width="120"
          />
          <el-table-column
            :label="$t('product.modifyPrice.specifications')"
            prop="skuName"
            width="150"
          >
            <template #default="{ row }">
              {{ row.skuName ? row.skuName : '-' }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('product.modifyPrice.oriSupplyPrice')"
            prop="beforePrice"
            min-width="120"
            sortable="custom"
          />
          <el-table-column
            :label="$t('product.modifyPrice.newSupplyPrice')"
            prop="afterPrice"
            min-width="150"
            sortable="custom"
          />
          <el-table-column
            :label="$t('product.modifyPrice.difference')"
            prop="price"
            width="auto"
            sortable="custom"
          >
            <template #default="{ row }">
              <div class="table-cell-text">
                <span>{{ row.price > 0 ? '+' : '' }}{{ row.price }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('product.modifyPrice.priceAdjustmentTime')"
            prop="createTime"
            min-width="180"
          />
        </el-table>
      </div>
    </div>
    <!-- 分页条 -->
    <pagination
      v-show="pageData.total > 0"
      v-model:page="searchForm.pageNum"
      v-model:limit="searchForm.pageSize"
      style="text-align: right"
      :total="pageData.total"
      @pagination="getPageData"
    />
  </div>
</template>

<script setup>
import * as api from '@/api/product/price.js'
import Big from 'big.js'

const searchForm = reactive({
  pageSize: 10,
  pageNum: 1,
  prodKey: null,
  sort: null,
  createStartTime: null,
  createEndTime: null
})

const time = ref([])
const defaultTime = ref([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59)
])
// 返回参数
const pageData = ref({
  list: [], // 返回的列表
  total: 0, // 一共多少条数据
  pages: 0 // 一共多少页
})
onMounted(() => {
  getPageData()
})

// 获取列表数据
const getPageData = () => {
  searchForm.pageNum = 1
  if (time.value) {
    searchForm.createStartTime = time.value[0]
    searchForm.createEndTime = time.value[1]
  }
  api.page(searchForm).then(res => {
    res.list.forEach(item => {
      item.beforePrice = new Big(item.beforePrice).div(100).toFixed(2)
      item.afterPrice = new Big(item.afterPrice).div(100).toFixed(2)
      item.price = new Big(item.price).div(100).toFixed(2)
    })
    pageData.value.list = res.list
    pageData.value.pages = res.pages
    pageData.value.total = res.total
  })
}

/**
 * 条件排序
 * beforePrice:原供货价 3-正序 4-倒序
 * afterPrice:调整后供货价      5-正序 6-倒序
 * price:差价            7-正序 8-倒序
 * @param data
 */
const prodConditionSort = (data) => {
  const { order, prop: sortType } = data
  let sort = null
  searchForm.pageNum = 1
  if (sortType === 'beforePrice') {
    sort = order ? order === 'ascending' ? 3 : 4 : null
  } else if (sortType === 'afterPrice') {
    sort = order ? order === 'ascending' ? 5 : 6 : null
  } else if (sortType === 'price') {
    sort = order ? order === 'ascending' ? 7 : 8 : null
  }
  searchForm.sort = sort
  getPageData()
}
const searchFormRef = ref(null)
/**
 * 清空
 */
const onResetSearch = (formEl) => {
  searchForm.prodKey = null
  time.value = []
  searchForm.createStartTime = null
  searchForm.createEndTime = null
  formEl.resetFields()
}

</script>

<style lang="scss" scoped>
.mod-prod-list {
  // 1.筛选条件搜索
  .search-bar {
    padding: 20px;
    padding-bottom: 6px !important;
    background: #f9f9f9;
    :deep(.el-button) {
      margin-bottom: 18px;
    }
  }
  .main-content {
    .table-con {
      .table-cell-con {
        .table-cell-text {
          display: flex;
          justify-content: space-between;

          .prod-name {
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }
      .table-cell-text {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
