<!-- 钻石计算器 -->
<template>
    <app-drawer title="计算器" :width="800" v-model:show="show" :loading="loading">
        <el-form ref="formRef" label-width="70px" :model="formData" :rules="formRules">
            <el-form-item label="形状" prop="zsshape">
                <el-radio-group v-model="formData.zsshape">
                    <el-radio :label="1">圆形</el-radio>
                    <el-radio :label="2">异形</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="颜色" prop="zscolor">
                <el-radio-group v-model="formData.zscolor">
                    <el-radio :label="item" v-for="(item, index) in colors" :key="index">
                        {{ item }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="净度" prop="zsclarity">
                <el-radio-group v-model="formData.zsclarity">
                    <el-radio :label="item" v-for="(item, index) in claritys" :key="index">
                        {{ item }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="重量" prop="weight" style="width:50%">
                <el-input type="number" placeholder="请输入" v-model="formData.weight">
                    <template #append>(克拉)</template>
                </el-input>
            </el-form-item>
            <el-form-item label="汇率" prop="rate" style="width:50%">
                <el-input type="number" placeholder="请输入" v-model="formData.rate" />
            </el-form-item>
            <el-form-item label="折扣(%)" prop="discount" style="width:50%">
                <el-input type="number" placeholder="请输入" v-model="formData.discount">
                    <template #prepend>
                        <el-select v-model="operator" style="width: 60px">
                            <el-option label="+" :value="1" />
                            <el-option label="-" :value="2" />
                        </el-select>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="计算结果" v-if="priceData">
                <div class="el-form-item--col">
                    <span>美元: {{ priceData.dollar }}</span>
                    <span>人民币: {{ priceData.rmb }}</span>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="formSubmit">计算</el-button>
                <el-button @click="show = false">取消</el-button>
            </el-form-item>
        </el-form>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { priceCalc } from '@/services/api/common'
import AppDrawer from '@pc/components/base/drawer/index.vue'

const show = shallowRef(true)
const colors = ['D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']
const claritys = ['IF', 'VVS1', 'VVS2', 'VS1', 'VS2', 'SI1', 'SI2', 'SI3', 'I1', 'I2', 'I3']
const formRef = shallowRef<FormInstance>()
const loading = shallowRef(false)
const operator = shallowRef(1) // 运算符
const priceData = shallowRef<Ermcp.PriceCalcRsp>()

const formData = reactive<Partial<Ermcp.PriceCalcReq>>({
    zsshape: undefined, // 形状 - 1:BR(圆形) 2:PS(异形)
    zscolor: '', // 颜色(D-M)
    zsclarity: '', // 净度
    weight: undefined, // 重量
    rate: undefined, // 汇率
    discount: undefined, // 折扣(%), 方向(加:10, 减:-10 )
})

const formRules: FormRules = {
    zsshape: [{
        required: true,
        message: '请选择形状'
    }],
    zscolor: [{
        required: true,
        message: '请选择颜色'
    }],
    zsclarity: [{
        required: true,
        message: '请选择净度'
    }],
    weight: [{
        required: true,
        message: '请输入重量'
    }],
    rate: [{
        required: true,
        message: '请输入汇率'
    }],
}

const formSubmit = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            loading.value = true
            let discount = formData.discount
            if (discount && operator.value === 2) {
                discount = -discount
            }
            priceCalc({
                ...formData,
                discount
            }).then((res) => {
                if (res.data.length) {
                    priceData.value = res.data[0]
                }
            }).finally(() => {
                loading.value = false
            })
        }
    })
}
</script>