<template>
    <div class="flex w-100">
        <div class="flex1 flex">
            <el-input v-if="type === 'input'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
                :class="item.fillType | getFillType" @blur="onBlur"
                :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" v-model="inputValue"
                @input="onInputChange" @change="onInputChange" />
            <el-input v-else-if="type === 'textarea'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
                :class="item.fillType | getFillType" type="textarea" show-word-limit resize="none" @blur="onBlur"
                :rows="item.rows || 3" :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)"
                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"
                :decimalDigits="item.precision" :class="item.fillType | getFillType"
                :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" v-model="inputValue"
                @input="onInputChange" @change="onInputChange" />
            <el-select v-else-if="type === 'select'" class="flex1" :multiple="item.multiple"
                :class="item.fillType | getFillType" v-model="inputValue" :disabled="getDisabled()"
                :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)" @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'" class="flex1" :class="item.fillType | getFillType"
                v-model="inputValue" :disabled="getDisabled()" format="yyyy/MM/DD HH:mm:ss"
                value-format="yyyy/MM/DD HH:mm:ss"
                :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)" @change="onInputChange">
            </el-date-picker>
        </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: ''
        },
    },
    data() {
        return {
            inputValue: this.value
        }
    },
    watch: {
        value(newVal) {
            this.inputValue = newVal
        }
    },
    filters: {
        getFillType(type) {
            const typeObj = {
                actFill: "orange-border",//实际填写的边框颜色
                green: "green-border",
                preFill: "blue-border",//预填写的边框颜色
            }
            return typeObj[type] || ""
        },

    },
    methods: {
        //获取question图标颜色
        getQuestionColor() {
            //gray 灰色 green 绿色 orange 橙色
            return "green"
        },
        // 统一处理输入变化
        onInputChange(val) {
            const value = val !== undefined ? val : this.inputValue;
            this.$emit('input', value);
            this.$emit('change', value);
        },
        //判断是否显示复制按钮
        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
                }
            }
        },
        onCopy() {
            this.$emit("copy")
        },
        onBlur(val) {
            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 {

    input,
    textarea {
        border-color: #f9c588;

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

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

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

}

.green-border {

    input,
    textarea {
        border-color: green;

        &:focus {
            border-color: green;
        }

        &:hover {
            border-color: green;
        }

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

}

.blue-border {

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

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

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

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

}
</style>