<!-- 钻石搜索-钻石首饰 -->
<template>
    <app-view class="search-jewelry">
        <template #header>
            <el-form ref="formRef" label-width="80px" :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__list" v-if="dataList.length">
            <template v-for="(item,index) in dataList" :key="index">
                <el-card shadow="hover">
                    <div @click="openDetails(item)">
                        <h4>{{item.goodsno}}</h4>
                        <p>{{item.zsstyletypedisplay}}</p>
                    </div>
                    <el-checkbox v-model="item.checked" label="对比" @change="selectItem(index)" />
                </el-card>
            </template>
        </div>
        <div class="search-jewelry__comparebar" v-if="checkedItems.length > 1">
            <div>对比栏</div>
            <ul>
                <li v-for="(item,index) in checkedItems" :key="index">
                    <span>{{ index + 1 }}</span>
                    <span>{{item.goodsno}}</span>
                    <span>{{item.zsstyletypedisplay}}</span>
                </li>
                <li>
                    <el-button @click="openComponent('compare')">对比</el-button>
                </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 { useSearch } from '@/business/search'
import { Category } from '@/constants/diamond'
import { useComponent } from '@/hooks/component'
import AppMultiple from '@pc/components/base/multiple/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()
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')
}

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

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