<script lang="ts" setup>
/**
 * @Name: index.vue
 * @Description: 商品监控
 * @Author: Cheney
 */

import { RefreshLeft, Search } from '@element-plus/icons-vue';
import VerticalDivider from '/src/components/VerticalDivider/index.vue';
import { useResponse } from '/@/utils/useResponse';
import * as api from './api';
import { useTemplateRef } from 'vue';
import { DictionaryStore } from '/@/stores/dictionary';
import { useCustomHeight } from '/@/utils/useCustomHeight';
import DataTable from './component/DataTable.vue';
import numberRange from '/@/components/RangeInput/index.vue'

defineOptions({
  name: 'ProductMonitor'
});

const { data: staticData } = DictionaryStore();

const baseHeight = {
  headerHeight: 50,
  dividerHeight: 32,
  toolbarHeight: 51,
  padding: 40
};
const heightObj = { titleContainer: 48, queryContainer: 116, ...baseHeight };
const { tableHeight } = useCustomHeight(heightObj);

const tableRef: Ref<any> = useTemplateRef('table');

const formInline = reactive<any>({
  country: '',
  brand: '',
  group: '',
  status: '',
  shop: '',
  asin: '',
  sku: '',
  platformId: '',

	minScore:null,
	maxScore:null,
	ScoreNumberRange:[],

	minScoreNumber:null,
	maxScoreNumber:null,
	ScorePeopleNumberRange:[],

	minCommentNumber:null,
	maxCommentNumber:null,
	CommentPeopleNumberRange:[],

	minAsinScore:null,
	maxAsinScore:null,
	AsinScoreNumberRange:[],

	minAsinCommentNumber:null,
	maxAsinCommentNumber:null,
	AsinCommentNumberRange:[],
});
provide('query-parameter', formInline);

const groupOptions = ref<any>([]);
const brandsOptions = ref<any>([]);
const shopsOptions = ref<any>([]);

provide('groupOptions', groupOptions);
provide('brandsOptions', brandsOptions);
provide('shopOptions', shopsOptions);

const statusOptions = [
  { label: '正常', value: 1 },
  { label: '失败', value: 2 },
  { label: '暂停', value: 3 },
  { label: '下架', value: 10 }
];

onBeforeMount(async () => {
  await fetchOptions(); // 确保选项数据加载完成
});

async function fetchOptions() {
  groupOptions.value = (await useResponse(api.getGroupOptions)).data;
  brandsOptions.value = (await useResponse(api.getBrandsOptions)).data;
  shopsOptions.value = (await useResponse(api.getShopsOptions)).data;
}

const btnLoading = ref(false);
const resetLoading = ref(false);

async function handleQuery() {
  btnLoading.value = true;
  await tableRef.value?.fetchList(true);
  btnLoading.value = false;
}

async function resetParameter() {
  for (const key in formInline) {
    formInline[key] = '';
  }
  resetLoading.value = true;
  await tableRef.value?.fetchList(true);
  resetLoading.value = false;
}
</script>

<template>
  <div class="p-5">
    <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
      <div ref="titleContainer" class="text-xl font-semibold pb-5">商品监控</div>
      <!-- 查询条件 -->
      <div ref="queryContainer" class="flex justify-between">
        <div class="flex flex-1">
          <div class="w-full whitespace-nowrap">
            <el-row :gutter="20" style="margin-bottom: 12px;">
							<el-col :span="4" class="flex">
								<div class="flex items-center">
									<span class="mr-2">店 铺</span>
									<el-select v-model="formInline.shop" clearable placeholder="请选择店铺">
										<el-option v-for="item in shopsOptions" :key="item.id" :label="item.name" :value="item.id" />
									</el-select>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="flex items-center">
									<span class="mr-2">平台编号</span>
									<el-input v-model="formInline.platformId" clearable placeholder="请输入平台编号"></el-input>
								</div>
							</el-col>
              <el-col :span="4">
                <div class="flex items-center">
                  <span class="mr-2">国 家</span>
                  <el-select v-model="formInline.country" clearable placeholder="请选择国家">
                    <el-option v-for="item in staticData.country_code" :key="item.value" :label="item.label"
                               :value="item.value" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="flex items-center">
                  <span class="mr-2">品 牌</span>
                  <el-select v-model="formInline.brand" clearable placeholder="请选择品牌">
                    <el-option v-for="item in brandsOptions" :label="item.brand" :value="item.brand" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="flex items-center">
                  <span class="mr-2">分 组</span>
                  <el-select v-model="formInline.group" clearable placeholder="请选择分组">
                    <el-option v-for="item in groupOptions" :label="item.tag" :value="item.tag" />
                  </el-select>
                </div>
              </el-col>
							<el-col :span="4">
								<div class="flex items-center">
									<span class="mr-2">状 态</span>
									<el-select v-model="formInline.status" clearable placeholder="请选择状态">
										<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</div>
							</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 12px;">
              <el-col :span="6">
                <div class="flex items-center">
                  <span class="mr-2">ASIN</span>
                  <el-input v-model="formInline.asin" clearable placeholder="请输入ASIN"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="flex items-center">
                  <span class="mr-2">SKU</span>
                  <el-input v-model="formInline.sku" clearable placeholder="请输入SKU"></el-input>
                </div>
              </el-col>
							<el-col :span="6">
								<number-range
									v-model="formInline.ScoreNumberRange"
									v-model:min-value="formInline.minScore"
									v-model:max-value="formInline.maxScore"
									:valueRange="[0, 5]"
									precision="1"
								>
									<template #prepend>
										<span class="mr-2">亚马逊评分</span>
									</template>
								</number-range>
							</el-col>
							<el-col :span="6">
									<number-range
										v-model="formInline.ScorePeopleNumberRange"
										v-model:min-value="formInline.minScoreNumber"
										v-model:max-value="formInline.maxScoreNumber"
										:valueRange="[0, 100000000]">
										<template #prepend>
											<span class="mr-2">亚马逊评分人数</span>
										</template>
									</number-range>
							</el-col>
            </el-row>
            <el-row :gutter="20">
<!--							<el-col :span="6">-->
<!--								<number-range-->
<!--									v-model="formInline.CommentPeopleNumberRange"-->
<!--									v-model:min-value="formInline.minCommentNumber"-->
<!--									v-model:max-value="formInline.maxCommentNumber"-->
<!--									:valueRange="[0, 100000000]">-->
<!--									<template #prepend>-->
<!--										<span class="mr-2">亚马逊评论人数</span>-->
<!--									</template>-->
<!--								</number-range>-->
<!--							</el-col>-->
							<el-col :span="6">
								<number-range
									v-model="formInline.AsinScoreNumberRange"
									v-model:min-value="formInline.minAsinScore"
									v-model:max-value="formInline.maxAsinScore"
									:valueRange="[0, 100000000]">
									<template #prepend>
										<span class="mr-2">子ASIN评分人数</span>
									</template>
								</number-range>
							</el-col>
							<el-col :span="6">
								<number-range
									v-model="formInline.AsinCommentNumberRange"
									v-model:min-value="formInline.minAsinCommentNumber"
									v-model:max-value="formInline.maxAsinCommentNumber"
									:valueRange="[0, 100000000]">
									<template #prepend>
										<span class="mr-2">子ASIN评论人数</span>
									</template>
								</number-range>
							</el-col>
            </el-row>
          </div>
        </div>
        <VerticalDivider />
        <div class="flex flex-col items-end">
          <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
            查 询
          </el-button>
          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;"
                     @click="resetParameter">
            重 置
          </el-button>
        </div>
      </div>
      <el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
      <div :style="{ height: tableHeight + 'px' }">
        <DataTable ref="table" />
      </div>
    </el-card>
  </div>
</template>

<style scoped>

</style>
