<template>
    <div class="container">
        <img src="../assets/logo.png" class="logo" alt="">
        <div class="content">
            <div class="item" v-for="(item,key) in input">
                <div class="title">{{item.name}}</div>
                <div class="val">
                    <input :type="item.type" v-model="item.val" @keydown="content(key)" @focus="item.focus=true" @blur="item.focus=false" :placeholder="item.placeholder" :maxlength="item.maxlength">
                    <img v-if="item.val&&item.focus" @click="item.val=''" src="@/assets/list_icon_del.png" alt="">
                </div>
            </div>
        </div>

        <div class="btn-content">
            <gm-button type='primary' @click="click">提交信息</gm-button>
        </div>
    </div>
</template>
<script>
import GmButton from '@/components/Button'
import { mapState } from "vuex";
export default {
    data() {
        return {
            input: {
                name: {
                    val: '',
                    focus: false,
                    maxlength: 10,
                    type: 'text',
                    placeholder: "请输入您的姓名",
                    name: '姓名'
                },
                phone: {
                    val: '',
                    focus: false,
                    maxlength: 11,
                    type: 'number',
                    placeholder: "请输入您的联系方式",
                    name: '联系方式'
                },
                address: {
                    val: '',
                    focus: false,
                    maxlength: 30,
                    type: 'text',
                    placeholder: "请输入房屋区域",
                    name: '房屋区域'
                },
                addressDetail: {
                    val: '',
                    focus: false,
                    maxlength: 30,
                    type: 'text',
                    placeholder: "请输入具体位置",
                    name: '具体位置'
                }
            }
        }
    },
    watch: {

    },
    created() {


    },
    computed: {
        ...mapState(["userInfo"])
    },
    methods: {
        click() {
            if (!this.checkPhone(this.input.phone.val)) {
                this.$modal.info({ msg: '手机号格式错误', duration: 1500 })
                return
            }
            this.$store.commit('updateLoading', true)
            this.$http.post({
                url: '/housingTrust/save',
                data: {
                    userName: this.userInfo.nickname,
                    userId: this.userInfo.id,
                    realName: this.input.name.val,
                    telephone: this.input.phone.val,
                    address: this.input.address.val,
                    addressDetail: this.input.addressDetail.val
                }
            }).then(res => {
                this.$store.commit('updateLoading', false)
                if (res.success) {
                    this.$alert({ title: '', content: '感谢您的信任，平台将尽快与您联系', showCancel: false, }, () => {
                        history.back()
                    })
                } else {
                    this.$modal.info({ msg: '失败', duration: 1500 })
                }
            })
        },
        content(name) {

            if (this.input[name].type == 'number') {
                console.log(this.input[name].val.slice(0, 11))
                setTimeout(() => {
                    this.input[name].val = this.input[name].val.slice(0, 11)
                }, 100)
            }
        }
    },
    components: { GmButton }
}
</script>
<style lang="less" scoped>
.container {
    background: rgba(242, 242, 242, 1);
    .logo {
        width: 4.12rem;
        height: 1.48rem;
        margin: 0.6rem auto;
        display: block;
    }
    .content {
        margin: 0 0.3rem 0.3rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.12rem;
        padding: 0 0.3rem;

        .item {
            .title {
                font-size: 0.36rem;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                line-height: 0.5rem;
                margin: 0.4rem 0 0;
            }

            .val {
                font-size: 0.28rem;
                color: rgba(0, 0, 0, 1);
                display: flex;

                input {
                    font-size: 0.36rem;
                    font-weight: bold;
                    color: rgba(51, 51, 51, 1);
                    flex-grow: 1;
                    height: 1.32rem;
                    border: 0;
                    outline: none;
                    min-width: 0;

                    &::-webkit-input-placeholder {
                        font-weight: normal;
                        font-size: 0.28rem;
                        color: rgba(170, 172, 173, 1);
                    }
                }

                img {
                    width: 0.6rem;
                    height: 0.6rem;
                    align-self: center;
                    min-width: 0.6rem;
                }
            }

            &:not(:last-child) {
                border-bottom: 0.02rem solid #f2f4f5;
            }
        }
    }

    .btn-content {
        padding: 0.8rem 0.3rem 0.5rem;
    }
}
</style>


