<template>
    <view class="c-width card-wrap">
        <view
            v-if="item.desc"
            class="card-info"
        >
            {{ item.desc }}
        </view>
        <!--手机填写框-->
        <view class="phone-input-wrap">
            <input
                :type="keyboard"
                :placeholder="item.placeHolder"
                placeholder-style="color: #858585"
                :maxlength="maxlen"
                class="phone-input-item green"
                :value="value"
                :focus="iptfocus"
                :disabled="item.disabled"
                @input="phoneNumberInput"
                @focus.stop="onFocus"
            />
            <image
                v-if="item.phone || value"
                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"
            />
        </view>
        <view v-if="item.btns" class="c-font-medium btn-wrap-gap">
            <view
                v-for="(btn, index) in item.btns"
                :key="index"
                class="card-info-btn"
                :class="{'btn-disabled': btnDisabled}"
                @tap="tapBtn(btn)"
            >
                {{ btn.text }}
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 通用卡
 * @author quyang
 */
import {throttle} from '@utils/core';
import {isValidPhone} from '@utils/validate';
let phone = '';

export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        item: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            value: '',
            phone: phone,
            keyboard: 'text', // 初始化为text，因为rd传默认电话有'*'
            maxlen: 11,
            iptfocus: false,
            btnDisabled: false
        };
    },
    created() {
        if (this.item.phone) {
            this.value = this.item.phone;
        }
    },
    methods: {
        /**
         * 点击按钮
         */
        tapBtn: throttle(function (btn = {}) {
            // 验证手机号是否合法或者用户没有修改手机号直接提交
            if (isValidPhone(this.value) || (this.value && this.value === this.item.phone)) {
                this.$emit('onSubmit', btn, this.value);
            } else {
                /* global getApp */
                this.$api.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none'
                });
            }
            return;
        }, 1000),
        phoneNumberInput(e) {
            this.value = e.detail.value;
        },
        onFocus() {
            this.keyboard = 'number';
        },
        onClear() {
            this.iptfocus = true;
            this.value = '';
            this.keyboard = 'number';
        }
    }
};
</script>

<style lang="less" scoped>
.btn-wrap-gap {
    margin-top: .09rem;
}

.card-info {
    font-size: 16px;
    color: #525252;
    line-height: 25px;
    .btn-wrap {
        width: 2.52rem;
    }

    &-btn {
        height: .38rem;
        line-height: .38rem;
        font-size: .16rem;
        border-radius: .09rem;
        text-align: center;
        font-weight: bold;
        background-image: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
        color: #FFFFFF;
        &.btn-disabled {
            opacity: .6;
        }
    }
    .ipt-plcholder-radius {
        border-radius: 19px;
    }
    .submit-btn-wrap {
        border-radius: 19px;
        color: #fff;
        height: 38px;
        line-height: 38px;
        text-align: center;
        &.green {
            background: #00c8c8;
        }
        &.blue {
            background: #489AF6;
        }
        &-disabled {
            opacity: .5;
        }
    }
}

.phone-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 0 0;
    padding: 0 9px;
    background: #f6f6f6;
    border-radius: .09rem;
    height: 38px;
    .modal-cont-close {
        width:16px;
        height: 16px;
        flex-shrink: 0;
    }
}
.phone-input-item {
    outline: none;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #333;
    background: #f6f6f6;
    &.green {
        caret-color: #00c8c8;
    }
    &.blue {
        caret-color: #489AF6;
    }
}

.case-history-imgs {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: space-between;

    &-item {
        width: .7rem;
        height: .7rem;
        overflow: hidden;

        .case-history-img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>