<!-- 挂牌大厅-我的求购-我要求购 -->
<template>
    <app-drawer title="我要求购" :width="960" v-model:show="show" :loading="loading" :refresh="refresh">
        <el-form ref="formRef" class="el-form--horizontal" label-width="100px" :model="formData" :rules="formRules">
            <el-form-item label="商品分类" prop="ZSCategory">
                <el-select v-model="formData.ZSCategory">
                    <el-option :label="item.label" :value="item.value" v-for="(item, index) in enums.categoryList"
                        :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="货币类型" prop="ZSCurrencyType">
                <el-radio-group v-model="currencyId" @change="currencyChange">
                    <el-radio :label="item.value" v-for="(item, index) in enums.currencyTypeList" :key="index">
                        {{ item.label }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="履约方式" prop="PerformanceTemplateID">
                <component :is="components.performance" v-model="performanceId" />
            </el-form-item>
            <el-form-item label="尺寸" prop="Size">
                <div class="el-form-item--col">
                    <el-input-number v-model="formData.Size[0]" :precision="2" :controls="false" />
                    <span>-</span>
                    <el-input-number v-model="formData.Size[1]" :precision="2" :controls="false" />
                </div>
            </el-form-item>
            <el-form-item class="el-form-item--row" label="晶型" prop="ZSCrystalType"
                v-if="formData.ZSCategory === Category.Rough">
                <app-multiple class="el-form-item--col" :data-list="enums.crystalTypeList"
                    v-model="formData.ZSCrystalType" checkbox />
            </el-form-item>
            <el-form-item class="el-form-item--row" label="形状" prop="ZSShapeType" v-else>
                <app-multiple class="el-form-item--col" :data-list="enums.shapeTypeList" v-model="formData.ZSShapeType"
                    checkbox />
            </el-form-item>
            <el-form-item label="净度" prop="ZSClarityType">
                <app-multiple class="el-form-item--col" :data-list="enums.clarityTypeList"
                    v-model="formData.ZSClarityType" />
            </el-form-item>
            <el-form-item label="彩钻颜色" prop="ZSCZColor1Type" v-if="formData.ZSCategory === Category.Fancy">
                <app-multiple class="el-form-item--col" :data-list="enums.fancyColorType1List"
                    v-model="formData.ZSCZColor1Type" />
            </el-form-item>
            <el-form-item label="颜色" prop="ZSColorType" v-else>
                <app-multiple class="el-form-item--col" :data-list="enums.colorTypeList"
                    v-model="formData.ZSColorType" />
            </el-form-item>
            <template v-if="formData.ZSCategory !== Category.Rough">
                <el-form-item label="对称" prop="ZSSymmetryType">
                    <app-multiple class="el-form-item--col" :data-list="enums.symmetryTypeList"
                        v-model="formData.ZSSymmetryType" />
                </el-form-item>
                <el-form-item label="切工" prop="ZSCutType" v-if="formData.ZSCategory !== Category.Fancy">
                    <app-multiple class="el-form-item--col" :data-list="enums.cutTypeList"
                        v-model="formData.ZSCutType" />
                </el-form-item>
                <el-form-item label="抛光" prop="ZSPolishType">
                    <app-multiple class="el-form-item--col" :data-list="enums.polishTypeList"
                        v-model="formData.ZSPolishType" />
                </el-form-item>
            </template>
            <el-form-item label="荧光" prop="ZSFluorescenceType">
                <app-multiple class="el-form-item--col" :data-list="enums.fluorescenceTypeList"
                    v-model="formData.ZSFluorescenceType" />
            </el-form-item>
            <el-form-item label="原产地" prop="Origin" v-if="formData.ZSCategory === Category.Rough">
                <el-input v-model="formData.Origin" />
            </el-form-item>
            <el-form-item class="el-form-item--row" label="款式" prop="ZSStyleType"
                v-if="formData.ZSCategory === Category.Jewelry">
                <app-multiple class="el-form-item--col" :data-list="enums.styleTypeList" v-model="formData.ZSStyleType"
                    checkbox />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="onCancel(false)" plain>取消</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useBuyOrderListing } from '@/business/trade/listing'
import { Category } from '@/constants/diamond'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppMultiple from '@pc/components/base/multiple/index.vue'

const components = {
    performance: defineAsyncComponent(() => import('@pc/components/modules/performance/index.vue')),
}

const { loading, performanceId, currencyId, formData, enums, formSubmit } = useBuyOrderListing()
const show = ref(true)
const refresh = ref(false)
const formRef = ref<FormInstance>()

const formRules: FormRules = {
    ZSCategory: [{ required: true, message: '请选择商品分类' }],
    PerformanceTemplateID: [{
        required: true,
        validator: (rule, value, callback) => {
            if (performanceId.value) {
                callback()
            } else {
                callback(new Error('请选择履约方式'))
            }
        }
    }],
    ZSCurrencyType: [{
        required: true,
        validator: (rule, value, callback) => {
            if (currencyId.value) {
                callback()
            } else {
                callback(new Error('请选择货币类型'))
            }
        }
    }],
    Size: [{
        validator: (rule, value, callback) => {
            const size = [value[0], value[1]]
            if (size.every((val: number) => (val ?? '').toString() === '')) {
                callback()
            } else if (size.every((val: number) => val)) {
                if (size[0] > size[1]) {
                    callback(new Error('尺寸应该从小到大'))
                } else {
                    callback()
                }
            } else {
                callback(new Error('尺寸不能小于 0'))
            }
        }
    }],
    ZSClarityType: [{
        validator: (rule, value, callback) => {
            if (value.every((val: number) => Boolean(val + ''))) {
                callback()
            } else {
                callback(new Error('请选择净度'))
            }
        }
    }],
    ZSColorType: [{
        validator: (rule, value, callback) => {
            if (value.every((val: number) => Boolean(val + ''))) {
                callback()
            } else {
                callback(new Error('请选择颜色'))
            }
        }
    }],
    ZSCZColor1Type: [{
        validator: (rule, value, callback) => {
            if (value.every((val: number) => Boolean(val + ''))) {
                callback()
            } else {
                callback(new Error('请选择彩钻颜色'))
            }
        }
    }],
    ZSSymmetryType: [{
        validator: (rule, value, callback) => {
            if (value.every((val: number) => Boolean(val + ''))) {
                callback()
            } else {
                callback(new Error('请选择对称'))
            }
        }
    }],
    ZSCutType: [{
        validator: (rule, value, callback) => {
            if (value.every((val: number) => Boolean(val + ''))) {
                callback()
            } else {
                callback(new Error('请选择切工'))
            }
        }
    }],
    ZSPolishType: [{
        validator: (rule, value, callback) => {
            if (value.every((val: number) => Boolean(val + ''))) {
                callback()
            } else {
                callback(new Error('请选择抛光'))
            }
        }
    }],
    ZSFluorescenceType: [{
        validator: (rule, value, callback) => {
            if (value.every((val: number) => Boolean(val + ''))) {
                callback()
            } else {
                callback(new Error('请选择荧光'))
            }
        }
    }],
}

// 选择货币类型
const currencyChange = (value: number) => {
    if (value) {
        formData.ZSCurrencyType = [value]
    } else {
        formData.ZSCurrencyType = []
    }
}

const onCancel = (isRefresh = false) => {
    show.value = false
    refresh.value = isRefresh
}

const onSubmit = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            formSubmit().then(() => {
                ElMessage.success('提交成功')
                onCancel(true)
            }).catch((err) => {
                ElMessage.error('提交失败：' + err)
            })
        }
    })
}
</script>