<template>
    <ie-form-picker :label="rule.label" :remark="rule.description">
        <view class="fx-row items-center gap-10" @click="$refs.picker.open()">
            <view class="text-right relative min-w-40" v-if="formModel[totalFieldName]">
                <text class="text-main break-all">{{ formModel[totalFieldName] }}</text>
                <view :class="replaceHolderClass" style="bottom: -13px; right: -3px">总分</view>
            </view>
            <text v-else class="text-light keep-all">总分</text>
            <uv-icon color="var(--light-color)" name="arrow-down"/>
        </view>
        <text>/</text>
        <view style="min-width: 20px" @click="handleShowKeyboard">
            <view class="text-right relative" v-if="formModel[rule.fieldName]">
                <text class="text-main break-all">{{ formModel[rule.fieldName] }}</text>
                <view :class="replaceHolderClass" style="bottom: -13px; right: -3px">{{ placeholder }}</view>
            </view>
            <text v-else class="text-light keep-all">{{ placeholder }}</text>
        </view>
    </ie-form-picker>
    <uv-keyboard ref="keyboard" :mode="keyboardMode" :dot-disabled="rule.dotDisable" :tips="localValue"
                 @confirm="handleValueConfirm" @change="handleValueChange" @backspace="handleValueDelete"/>
    <uv-picker ref="picker" :columns="[columns]" :default-index="[selectedIndex]" title="选择总分"
               close-on-click-overlay @confirm="handleConfirm"/>
</template>

<script>
import AiFormFieldNumber from "@/pagesOther/pages/ie/components/ai-form/items/templates/ai-form-field-number.vue";
import FormattedPickerMixin from "@/pagesOther/pages/ie/components/picker/FormattedPickerMixin";

export default {
    name: "ai-form-field-score",
    extends: AiFormFieldNumber,
    mixins: [FormattedPickerMixin],
    computed: {
        totalFieldName() {
            return this.rule.fieldName + 'Total'
        },
        placeholder() {
            return '得分'
        }
    },
    data() {
        return {
            replaceHolderClass: 'absolute keep-all text-light text-4xs bg-white px-5'
        }
    },
    methods: {
        initColumns() {
            this.columns = this.rule.options
        },
        handleConfirm({value: [item]}) {
            this.formModel[this.totalFieldName] = this.getValue(item)
            this.$refs.picker.close()
            this.clearValidate()
        }
    }
}
</script>

<style scoped>

</style>