<!-- 钻石搜索-钻石首饰 -->
<template>
    <app-view class="search-jewelry">
        <template #header>
            <el-form ref="formRef" label-width="80px" size="small" :rules="formRules">
                <el-form-item label="款式">
                    <app-multiple :data-list="enums.styleTypeList" v-model="formData.zsstyletype" checkbox />
                </el-form-item>
                <el-form-item label="形状">
                    <app-multiple :data-list="enums.shapeTypeList" v-model="formData.zsshapetype" checkbox />
                </el-form-item>
                <el-form-item label="颜色">
                    <app-multiple :data-list="enums.colorTypeList" v-model="formData.zscolortype" checkbox />
                </el-form-item>
                <el-form-item label="净度">
                    <app-multiple :data-list="enums.clarityTypeList" v-model="formData.zsclaritytype" checkbox />
                </el-form-item>
                <el-form-item label="切工">
                    <app-multiple :data-list="enums.cutTypeList" v-model="formData.zscuttype" checkbox />
                </el-form-item>
                <el-form-item label="对称">
                    <app-multiple :data-list="enums.symmetryTypeList" v-model="formData.zssymmetrytype" checkbox />
                </el-form-item>
                <el-form-item label="抛光">
                    <app-multiple :data-list="enums.polishTypeList" v-model="formData.zspolishtype" checkbox />
                </el-form-item>
                <el-form-item label="荧光">
                    <app-multiple :data-list="enums.fluorescenceTypeList" v-model="formData.zsfluorescencetype" checkbox />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loading" @click="onSearch">搜索</el-button>
                    <el-button :disabled="loading" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </template>
        <div class="search-jewelry__goods" v-if="dataList.length">
            <ul class="list">
                <template v-for="(item, index) in dataList" :key="index">
                    <li class="list-item">
                        <div class="list-item__header" @click="openDetails(item)">
                            <app-image :width="200" :height="200" :src="getFileUrl(item.imagepath)" />
                        </div>
                        <div class="list-item__body" @click="openDetails(item)">
                            <div class="block block--price">
                                <span>{{ item.zscurrencytypedisplayunit + formatDecimal(item.price) }}</span>
                            </div>
                            <div class="block block--title">
                                <span>{{ item.zsstyletypedisplay }}</span>
                                <span>{{ item.goodsno }}</span>
                            </div>
                            <div class="block block--desc">
                                <span>{{ item.settingmaterial }}</span>
                            </div>
                        </div>
                        <div class="list-item__footer">
                            <el-checkbox v-model="item.checked" label="对比" @change="selectItem(index)" />
                        </div>
                    </li>
                </template>
            </ul>
        </div>
        <div class="search-jewelry__comparebar" v-if="checkedItems.length > 1">
            <ul class="list">
                <li class="list-item" v-for="(item, index) in checkedItems" :key="index">
                    <div class="list-item__index">
                        <span>{{ index + 1 }}</span>
                    </div>
                    <div class="list-item__image">
                        <app-image :width="48" :height="48" :src="getFileUrl(item.imagepath)" />
                    </div>
                    <div class="list-item__info">
                        <span>{{ item.zsstyletypedisplay }}</span>
                        <span>{{ item.goodsno }}</span>
                    </div>
                </li>
                <li class="list-btnbar">
                    <el-button type="danger" @click="openComponent('compare')">对比</el-button>
                    <span class="btn-clear" @click="clearCompare">清空</span>
                </li>
            </ul>
        </div>
        <component :is="componentMap.get(componentId)" v-bind="{ selectedRow, checkedItems }" @closed="closeComponent"
            v-if="componentId" />
    </app-view>
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getFileUrl, formatDecimal } from '@/filters'
import { useSearch } from '@/business/search'
import { Category } from '@/constants/diamond'
import { useComponent } from '@/hooks/component'
import AppMultiple from '@pc/components/base/multiple/index.vue'
import AppImage from '@pc/components/base/image/index.vue'

const componentMap = new Map<string, unknown>([
    ['details', defineAsyncComponent(() => import('@pc/views/warehousing/goods/components/details/index.vue'))], // 详情
    ['compare', defineAsyncComponent(() => import('./components/compare/index.vue'))], // 对比
])

const { componentId, openComponent, closeComponent } = useComponent(() => getSellOrderList())
const { loading, dataList, checkedItems, formData, enums, selectItem, getSellOrderList, onSearch, onReset } = useSearch(Category.Jewelry)
const selectedRow = ref<Ermcp.SellOrderSearchRsp>() // 当前选中的数据项
const formRef = ref<FormInstance>()
const formRules: FormRules = {}

// 打开详情
const openDetails = (item: Ermcp.SellOrderSearchRsp) => {
    selectedRow.value = item
    openComponent('details')
}

const clearCompare = () => {
    dataList.value.forEach((e) => e.checked = false)
}

getSellOrderList().catch((err) => ElMessage.error(err))
</script>

<style lang="less">
@import './index.less';
</style>