<template>
    <view class="pd-24">
        <up-form class="p-rtv bg-#fff" labelPosition="top" :model="form" :rules="rules" labelWidth="auto"
            ref="upFormRef">
            <view>
                <image src="" mode="widthFix" />
            </view>
            <up-form-item label="打印规格" prop="printSpec" required>
                <ut-radio :options="specs" v-model="form.printSpec"></ut-radio>
            </up-form-item>
            <up-form-item :label="`打印数量：${printCount}`"></up-form-item>
        </up-form>
        <view>
            <up-button :disabled="!form.printSpec" @click="printClick" class="mb-24" type="primary">确认打印</up-button>
            <up-button @click="clickPrintTest" :disabled="!form.printSpec" class="mb-24" color="#18BECA">打印测试</up-button>
            <up-button @click="prevSteps" type="primary" plain>上一步</up-button>
        </view>
    </view>
</template>
<script lang="ts" setup>
const emit = defineEmits(['test',  'prev', 'print']);
const props = defineProps({
    info: {
        type: Object,
        required: true
    },
    nextStepValue: {
        type: String,
        default: 'print'
    },
    prevStepValue: {
        type: String,
        default: 'connect'
    },
    printCount: {
        type: Number,
        default: 1
    }
});
const specs = reactive([
    {
        label: '60 X 60',
        value: '60x60'
    },
    {
        label: '60 X 40',
        value: '60x40'
    },
    {
        label: '30 X 30',
        value: '30x30'
    }
])
const form = ref<any>({
    printSpec: '',
});
const rules = reactive({
    printSpec: [{ required: true, message: '请选择打印规格' }],
});
// 点击打印测试
const clickPrintTest = () => {
    if (!form.value.printSpec) {
        return uni.showToast({ icon: 'none', title: '请选择打印规格' });
    }
    emit('test', form.value)
}
const printClick = () => {
    if (!form.value.printSpec) {
        return uni.showToast({ icon: 'none', title: '请选择打印规格' });
    }
    emit('print', form.value)
};
const prevSteps = () => {
   emit('prev', {
      prevStepValue: props.prevStepValue || 'confirm',
   });
};
</script>