<template>
    <view>
        <view
            v-if="item && item.type === 'input'"
            :style="customStyle"
            :class="['form-type-input', item.itemType && item.itemType === 'noTitle' ? 'c-gap-bottom' : '']"
        >
            <view
                v-if="item.question"
                class="text-left"
                :style="textStyle"
            >
                <text v-if="item.required && requireShow" class="c-color-mall c-gap-right-mini c-inline-block">*</text>
                {{ item.question }}
            </view>
            <view :class="item.itemType && item.itemType === 'noTitle' ? 'input-opt-wrap-complete' : 'input-opt-wrap'">
                <input
                    :class="item.itemType && item.itemType === 'noTitle' ? 'input-item-complete' : 'input-item'"
                    :placeholder-class="item.itemType && item.itemType === 'noTitle'
                        ? 'fb-input-ph-notitle' : 'fb-input-ph'"
                    :placeholder="item.placeHolder"
                    :type="item.keyboard || 'text'"
                    :maxlength="Number(item.maxlen) || 50"
                    :adjust-position="true"
                    :value="value"
                    :focus="iptfocus"
                    :cursor-spacing="80"
                    :style="inputStyle"
                    @input="onDataChange($event, item.qid)"
                    @blur="onBlur($event, item)"
                    @focus="onFocus"
                >
                <image
                    v-if="value && iptfocus && !useNewDelIcon"
                    class="modal-cont-close c-gap-left"
                    src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1132822068,1112251030&fm=179&app=35&f=PNG?w=48&h=48&s=BFAC7A23E0B5F1801DFC54C60000C0B1"
                    @tap.stop="onClear(item.qid)"
                />
                <!-- 使用新的删除图标 -->
                <view v-if="value && iptfocus && useNewDelIcon" class="c-inline-block c-gap-left">
                    <c-icon
                        name="remove"
                        font-size="16px"
                        color="#ddd"
                        @tap.stop="onClear(item.qid)"
                    />
                </view>
                <view v-if="item.rightText" class="c-gap-left-small">{{ item.rightText }}</view>
            </view>
        </view>
        <view
            v-if="inputTipsShow && inputTipsData"
            class="input-tips-con form-type-input c-gap-bottom"
        >
            <view :class="['input-tips', 'c-line-clamp1', 'input-opt-wrap-complete']">
                <view v-if="inputTipsData.leftText">
                    {{ inputTipsData.leftText }}
                </view>
                <view
                    v-if="inputTipsData.rightText && inputTipsData.updateUrl"
                    class="right-text c-gap-left-small"
                    @tap="updatePhys(inputTipsData)"
                >
                    {{ inputTipsData.rightText }}
                    <view v-if="inputTipsData.icon">
                        <c-icon
                            :name="inputTipsData.icon"
                            font-size="13px"
                            class="icon"
                        />
                    </view>
                </view>
            </view>
            <view class="triangle-up"/>
        </view>
    </view>
</template>

<script>
/**
 * @file 输入框
 * @author huanghongwei
 * @categories 业务组件
 * @tags [component]
 */
import {request} from '../../utils/request';
import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 组件数据
         */
        item: {
            type: Object,
            default: () => ({})
        },
        requireShow: {
            type: Boolean,
            default: false
        },
        customStyle: {
            type: Object,
            default: () => ({})
        },
        questionId: {
            type: [Number, String],
            default: ''
        },
        textStyle: {
            type: Object,
            default: () => ({})
        },
        inputStyle: {
            type: Object,
            default: () => ({})
        },
        // 使用新的删除图标
        useNewDelIcon: {
            type: Boolean,
            default: false
        }
    },
    components: {
        CIcon
    },
    data() {
        return {
            value: '',
            iptfocus: false,
            inputTips: null,
            inputTipsShow: false,
            inputTipsData: null,
            // 首次编辑
            firstEdit: false
        };
    },
    lifetimes: {
        attached() {
            this.value = this.item.defaultValue || '';
            /**
             * 数据改变
             */
            this.$emit('datachange', this.item.qid, this.value);
        }
    },
    methods: {
        onDataChange(e, qid) {
            this.value = e.detail.value || '';
            if (qid === 'idcard') {
                this.value = this.value.toUpperCase();
            }
            // 适配phone中需要要*出现占位
            if (qid === 'phone') {
                // 第一次编辑则清空默认值 (利用this.item.defaultValue判断是新增还是编辑)
                if (!this.firstEdit && this.item.defaultValue) {
                    this.firstEdit = true;
                    this.value = '';
                }
                else {
                    if (process.env.MARS_ENV === 'swan') {
                        // 小程序直接清空，解决输入框闪烁问题
                        this.value = this.value.replace(/\D/g, '');
                    }
                    else {
                        // h5先清空数据渲染，再在下一次渲染时候异步重新赋值，解决输入变化视图不变问题
                        let prevValue = this.value.replace(/\D/g, '');

                        this.value = '';
                        this.$mpUpdated(() => {
                            this.value = prevValue;
                            this.$emit('datachange', qid, this.value);
                        });
                    }
                }
            }
            /**
             * 数据改变
             */
            this.$emit('datachange', qid, this.value);
        },
        onClear(qid) {
            // 小程序中点击叉号触发失焦事件引起清除失效，加上计时器解决
            setTimeout(() => {
                this.value = '';
            }, 50);
            this.iptfocus = true;
            /**
             * 数据改变
             */
            this.$emit('datachange', qid, '');
            this.$emit('clean', this.item);
        },
        onBlur(e, item) {
            this.value = e.detail.value || '';
            if (item.qid === 'idcard' && this.value.length === 18 && this.item.idCheckCallback) {
                let patientInfoformData = this.$api.getStorageSync('patientInfoformData');
                request({
                    method: 'POST',
                    url: this.item.idCheckCallback,
                    data: {
                        question_id: this.questionId,
                        name: patientInfoformData.name || '',
                        idCard: this.value
                    },
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    isNeedLogin: true,
                    isFirstScreen: false
                }).then(resp => {
                    if (resp.data.inputTipsData && resp.data.inputTipsData.inputTipsShow) {
                        this.inputTipsData = resp.data.inputTipsData;
                        this.inputTipsShow = true;
                    }
                    else {
                        this.inputTipsShow = false;
                    }
                });
            }
            else {
                this.inputTipsShow = false;
            }
            /**
             * 失去焦点
             */
            this.$emit('blur', item, this.value);
        },
        onFocus() {
            this.iptfocus = true;
        },
        // 切换就诊人
        updatePhys(info) {
            if (info.updateUrl) {
                this.$emit('updatePhys', {updateUrl: info.updateUrl});
            }
        }
    }
};
</script>
<style lang="less" scoped>
.form-type-input {
    padding: 0 13px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
    overflow: hidden;
}

.input-opt-wrap {
    display: flex;
    width: 100%;
    margin-left: 15px;
}

.input-opt-wrap-complete {
    display: flex;
    align-items: center;
    padding: 0 11px;
    width: 100%;
    height: 44px;
    background: #f8f8f8;
    border-radius: 6px;
}

.input-item-complete {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    font-size: 14px;
    color: #252525;
    caret-color: #00c8c8;
    background: #f8f8f8;

    &::-webkit-input-placeholder {
        color: #b8b8b8;
    }
}

.input-item {
    height: 80%;
    width: 100%;
    outline: none;
    border: none;
    font-size: 14px;
    color: #252525;
    text-align: right;
    caret-color: #00c8c8;

    &::-webkit-input-placeholder {
        color: #b8b8b8;
    }
}

.fb-input-ph {
    font-size: 14px;
    line-height: 47px;
    color: #b8b8b8;
    letter-spacing: 0;
    text-align: right;
}

.fb-input-ph-notitle {
    font-size: 14px;
    line-height: 47px;
    color: #b8b8b8;
    letter-spacing: 0;
}

.modal-cont-close {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.text-left {
    font-family: PingFangSC-Medium;
    color: #1f1f1f;
    white-space: nowrap;
}

.input-tips-con {
    position: relative;
    overflow: visible;
}

.input-tips {
    color: #fd503e;
    background: #fff4ed;
    justify-content: space-between;

    .right-text {
        display: flex;
    }
}

.triangle-up {
    position: absolute;
    top: -6px;
    left: 44px;
    width: 0;
    height: 0;
    border-left: 0.07rem solid transparent;
    border-right: 0.07rem solid transparent;
    border-bottom: 0.06rem solid #fff4ed;
}
</style>
