<template>
    <div class="flex w-100">
        <div class="flex1 flex">
            <el-input v-if="type === 'input'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
                :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" @blur="onBlur"
                :placeholder="getPlaceholder()" v-model="inputValue"
                @input="onInputChange" @change="onInputChange" />
            <el-input v-else-if="type === 'textarea'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
                :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" type="textarea" show-word-limit resize="none" @blur="onBlur"
                :rows="item.rows || 3" :placeholder="getPlaceholder()"
                v-model="inputValue" @input="onInputChange" @change="onInputChange" />
            <DecimalInput v-else-if="type === 'inputNumber'" @blur="onBlur" :maxlength="item.maxlength || 10"
                class="flex1" :disabled="getDisabled()" :controls="item.controls || false" :min="item.min || 0"
                :prepend = "item.prepend"
                :decimalDigits="item.precision" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"
                :placeholder="getPlaceholder()" v-model="inputValue"
                @input="onInputChange" @change="onInputChange" />
            <el-select v-else-if="type === 'select'" class="flex1" :multiple="item.multiple"
                :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue" :disabled="getDisabled()"
                :placeholder="getPlaceholder()" @change="onInputChange">
                <el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value">
                </el-option>
            </el-select>
            <el-date-picker v-else-if="type === 'dateTime'" type="datetime" class="flex1" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"
                v-model="inputValue" :disabled="getDisabled()" format="yyyy/MM/DD HH:mm:ss"
                value-format="yyyy/MM/DD HH:mm:ss"
                :placeholder="getPlaceholder()" @change="onInputChange">
            </el-date-picker>
            <div class="clickable" :class="getFillTypeStyle() + (getDisabled()?' disabled':'') + (orangeBg ? ' orange-bg' : '')" v-else-if = "item.type ==='clickable'" @click="handleClickable(item,$event)">
                <span v-if="value">{{ value }}</span>
                <span v-else class="default-placeholder-text">{{getPlaceholder()}}</span>
            </div>
        </div>
        <!-- qc才能操作 -->
        <div class="handle-row" v-if="isShowHandle()">
            <el-checkbox class="ml-5"></el-checkbox>
            <Question class="handle-icon" :class="getQuestionColor()" />
            <img v-if="getIsShowCopyIcon()" @click="onCopy" src="@/assets/images/copy-icon.svg" class="handle-icon"
                alt="" />
            <img src="@/assets/images/record-icon.svg" class="handle-icon" alt="" />
        </div>
    </div>
</template>

<script>
import Question from "./icons/Question.vue";
import DecimalInput from "./DecimalInput.vue";
export default {
    components: {
        Question,
        DecimalInput
    },
    props: {
        type: {//form类型  input/select等
            type: String,
            default: "input"
        },
        item: {
            type: Object,
            default: () => {
                return {
                    placeholder: "",
                    maxlength: 30,
                    label: "",
                    disabled: false,
                }
            }
        },
        // v-model 值
        value: {
            type: [String, Number, Array],
            default: ''
        },
        // 错误状态
        error: {
            type: Boolean,
            default: false
        },
        // 橙色背景状态
        orangeBg: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            inputValue: this.value
        }
    },
    watch: {
        value(newVal) {
            this.inputValue = newVal
        }
    },
    filters: {
        

    },
    methods: {
        getFillTypeStyle(type) {
            const {fillType} = this.item;
            const typeObj = {
                actFill: "orange-border",//实际填写的边框颜色
                green: "green-border",
                preFill: "blue-border",//预填写的边框颜色
            }
            // 如果有错误状态，返回红色边框样式，覆盖原有的边框颜色
            if (this.error) {
                return "error-border";
            }
            return typeObj[fillType] || ""
        },
        //获取question图标颜色
        getQuestionColor() {
            //gray 灰色 green 绿色 orange 橙色
            return "green"
        },
        // 统一处理输入变化
        onInputChange(val) {
            const value = val !== undefined ? val : this.inputValue;
            this.$emit('input', value);
            this.$emit('change', value);
            
            // 根据输入值判断是否显示错误状态
            const isEmpty = this.isValueEmpty(value);
            if (this.error && !isEmpty) {
                this.$emit('update:error', false);
            } else if (!this.error && isEmpty) {
                this.$emit('update:error', true);
            }
        },
        // 判断值是否为空
        isValueEmpty(value) {
            if (value === null || value === undefined || value === '') {
                return true;
            }
            if (typeof value === 'string' && value.trim() === '') {
                return true;
            }
            if (Array.isArray(value) && value.length === 0) {
                return true;
            }
            return false;
        },
        handleClickable(item,event){
            if(item.fillType !== 'actFill'){
                return
            }
            this.$emit("clickable",item)
        },
        //判断是否显示复制按钮
        getIsShowCopyIcon() {
            const { copyFrom } = this.item;
            const { templateStatus } = this.$store.state.template;
            return copyFrom && templateStatus === "actFill";
        },
        //判断是否显示操作按钮
        isShowHandle() {
            const { fillType } = this.item;
            const { templateStatus } = this.$store.state.template;
            //只有当模板状态是qc和实际填报时，才显示操作按钮
            return (templateStatus === "qc" || templateStatus === "actFill") && fillType === "actFill";
        },
        //判断是否禁用
        getDisabled() {
            const { item } = this;
            const { fillType } = item;
            if (item.hasOwnProperty("disabled")) {
                return item.disabled
            } else {
                const { templateStatus } = this.$store.state.template;
                if (fillType === "actFill") {//当模板状态是实际填写时，只有当fillType是actFill时才能填写
                    return templateStatus !== "actFill"
                } else if (fillType === "preFill") {//当模板状态是预填写时，只有当fillType是preFill才能填写
                    return templateStatus !== "preFill"
                } else {
                    return true
                }
            }
        },
        getPlaceholder() {
            const { placeholder,label } = this.item;
            const {type} = this;
            if(this.getDisabled()){
                return ""
            }
            if(type === "clickable"){
               return "请选择"
            }
            let prex = "请输入";
            if(type === "select"  || type === "dateTime"){
                prex = "请选择"
            }
            return placeholder ? placeholder : (prex + label)
            
        },
        onCopy() {
            this.$emit("copy")
        },
        onBlur(val) {
            // 根据输入值判断是否显示错误状态
            const isEmpty = this.isValueEmpty(this.inputValue);
            if (this.error && !isEmpty) {
                this.$emit('update:error', false);
            } else if (!this.error && isEmpty) {
                this.$emit('update:error', true);
            }
            this.$emit("blur", val)
        },
    },
}
</script>

<style lang="scss">
.flex {
    display: flex;
    align-items: center;
}

.flex1 {
    flex: 1;
}

.handle-row {
    margin-left: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.w-100 {
    width: 100%;
}

.handle-icon {
    width: 18px;
    height: 18px;
    margin-left: 5px;
}

.ml-5 {
    margin-left: 5px;
}

.orange {
    color: #f9c588;
}

.green {
    color: green;
}

.gray {
    color: #b2b2b2;
}

.orange-border {

    .el-input-group__prepend,input,
    textarea {
        border-color: #f9c588;

        &:focus {
            border-color: #f9c588;
        }

        &:hover {
            border-color: #f9c588;
        }

        &:disabled {
            border-color: #f9c588 !important;
        }
    }

}

.green-border {

    .el-input-group__prepend,input,
    textarea {
        border-color: green;

        &:focus {
            border-color: green;
        }

        &:hover {
            border-color: green;
        }

        &:disabled {
            border-color: green !important;
        }
    }

}

.blue-border {

    .el-input-group__prepend,input,
    textarea {
        border-color: #4ea2ff;

        &:focus {
            border-color: #4ea2ff;
        }

        &:hover {
            border-color: #4ea2ff;
        }

        &:disabled {
            border-color: #4ea2ff !important;
        }
    }

}

.error-border {

    .el-input-group__prepend,input,
    textarea,
    .el-select,
    .el-date-editor {
        border-color: #f56c6c;

        &:focus {
            border-color: #f56c6c;
        }

        &:hover {
            border-color: #f56c6c;
        }
    }

    // 为 el-select 和 el-date-picker 添加错误边框样式
    .el-select .el-input__inner,
    .el-date-editor .el-input__inner {
        border-color: #f56c6c;
    }

    // 处理 DecimalInput 组件的错误边框样式
    :deep(.el-input-number) {
        .el-input__inner {
            border-color: #f56c6c;
        }
    }
    
    // 为点击式表单项添加错误边框样式
    .clickable {
        border-color: #f56c6c;
    }
}

.orange-bg {
    background-color: #FFF1F1 !important; // 橙色背景，透明度适中
    
    input, textarea, .el-input__inner, .el-textarea__inner {
        background-color: #FFF1F1 !important;
    }
}

.clickable{
    cursor: pointer;
    width: auto;
    margin-left: 10px;
    min-width: 100px;
    height: 28px;
    border-radius: 4px;
    border:1px solid #4ea2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: normal;
    color: #606266;
    &.disabled{
        cursor: not-allowed;
        color: #c0c4cc;
        background-color: #f5f7fa;
    }
}
</style>