<template>
    <!-- 校验 -->
    <div>
        <div class="title">校验：</div>
        <el-checkbox v-model="verify.required" :disabled="verify.requiredFixed">必填</el-checkbox>
        <el-checkbox v-model="verify.startNow" v-if="startNow">不能选择历史时间</el-checkbox>
        <el-checkbox v-model="verify.onlyOne" v-if="onlyOne">仅允许上传单个文件</el-checkbox>
        <template v-if="onlyCamera">
            <el-checkbox v-model="verify.onlyCamera">仅允许拍照上传</el-checkbox>
            <div class="tips">拍照后图片会加上时间水印</div>
        </template>
        <verify-range :checkbox="checkbox" v-if="length"></verify-range>
    </div>
</template>

<script>
import { posInt } from '@/assets/utils/formatString.js'
export default {
    components: {
        VerifyRange: () => import('@/common/formDesign/components/formEdit/components/components/VerifyRange')
    },
    props: {
        startNow: { type: Boolean, default: false }, // 是否不能选择历史时间
        onlyOne: { type: Boolean, default: false }, // 是否仅允许上传单个文件
        onlyCamera: { type: Boolean, default: false }, // 是否仅允许拍照上传
        img: { type: Boolean, default: false }, // 是否图片选项
        length: { type: Boolean, default: false }, // 是否限定选择数量范围
        checkbox: { type: Boolean, default: false } // 是否是多选限定范围
    },
    data () {
        return {
            posInt,
            formItem: this.$store.state.form.formItem,
            verify: this.$store.state.form.formItem.verify || {}
        }
    },
    created () {
        this.formItem.verify ? this.verifyTips() : this.init()
    },
    methods: {
        // 初始化
        init () {
            const verify = { required: false }
            if (this.startNow) verify.startNow = false
            if (this.onlyOne) verify.onlyOne = false
            if (this.onlyCamera) {
                verify.limit = [1, 9]
                verify.onlyCamera = false
            }
            if (this.img) {
                // 新添加时无选项保存错误但不显示错误提示
                this.$set(this.formItem, 'optionError', false)
                this.$set(this.formItem, 'optionHideError', true)
            }
            if (this.length) {
                verify.length = false
                verify.lengthMin = ''
                verify.lengthMax = ''
                this.$set(this.formItem, 'lengthMinError', false)
                this.$set(this.formItem, 'lengthMaxError', false)
            }
            this.$set(this.formItem, 'verify', verify)
            this.verify = verify
        },
        // 初始化时提示文字的定位有误，需要重新刷新
        verifyTips () {
            // 选项为空
            if (this.formItem.optionHideError) {
                this.formItem.optionError = false
                this.$nextTick(() => {
                    this.formItem.optionError = true
                })
            }
            // 限定范围
            if (this.verify.length && this.formItem.lengthMinError) {
                this.setError('length', false)
                this.$nextTick(() => {
                    this.setError('length', true)
                })
            }
        },
        // 设置校验最大最小值错误
        setError (key, value) {
            this.formItem[key + 'MinError'] = value
            this.formItem[key + 'MaxError'] = value
        }
    }
}
</script>

<style lang="less" scoped>
.el-checkbox {
    display: block;
    margin-top: 10px;
    .el-input {
        width: 70px;
        margin: 0 5px;
        /deep/ input {
            padding: 0 5px;
            text-align: center;
        }
    }
}
.tips {
    color: #909399;
    padding-left: 25px;
    font-size: 12px;
    margin-top: 5px;
}
</style>
