<template>
    <div class="container">
        <div class="top">
            <largeGoodsItem :goodsInfo='info' :type='1'></largeGoodsItem>
        </div>
        <div class="list">
            <div class="item" @click="open">
                <div class="title">看房时间</div>
                <div class="val" :class="[date?'':'notSet']">{{date?date:'请选择您方便的时间'}}</div>
                <img src="../assets/icon_inter.png" alt="">
            </div>
            <div class="item">
                <div class="title">联系人</div>
                <input type="text" placeholder="请填写联系人" maxlength="20" v-model="userInfo.nickname">
            </div>
            <div class="item">
                <div class="title">电话</div>
                <input type="number" placeholder="请填写手机号码" v-model="userInfo.phone">
            </div>
            <div class="item" style="height:2rem">
                <textarea v-model="note" placeholder="如有其他需求请备注"></textarea>
            </div>
        </div>
        <div style="flex-grow:1"></div>
        <div class="btn-content">
            <gm-button type='primary' @click="click">提交</gm-button>
        </div>
        <yd-datetime ref="datetime" v-model="date" slot="right" style="display:none" :start-date="startTime"></yd-datetime>
    </div>
</template>
<script>
import GmButton from '@/components/Button'
import { mapState } from "vuex";
import largeGoodsItem from '@/components/LargeGoodsItem'
import moment from 'moment'
export default {
    data() {
        return {
            info: {},
            rentType: ['整租', '合租', '品牌公寓'],
            date: '',
            startTime: '',
            note: ''
        }
    },
    created() {
        this.$http.get({
            url: '/houseInfo/detail',
            data: {
                id: this.$route.query.id,
                statusFlag: 1
            }
        }).then(res => {
            if (res.success) {
                this.info = res.data

            }
        })
        this.startTime = moment().format('YYYY-MM-DD HH:mm')

    },
    computed: {
        ...mapState(["locationInfo", 'userInfo'])
    },
    methods: {
        open() {
            this.$refs.datetime.open();
        },
        click() {
            if (!this.date || !this.userInfo.nickname || !this.userInfo.phone) {
                this.$modal.info({ msg: "信息填写不全不能提交", duration: 1500 })
                return
            }
            if (!this.checkPhone(this.userInfo.phone)) {
                this.$modal.info({ msg: "手机号格式错误", duration: 1500 })
                return
            }
            this.$store.commit('updateLoading', true)
            console.log(this.date)
            console.log(moment(this.date,'YYYY-MM-DD HH:mm'))
            var data = {
                userId: this.userInfo.id,
                houseId: this.$route.query.id,
                housekeeper: this.info.housekeeper,
                contact: this.userInfo.nickname,
                telephone: this.userInfo.phone,
                leaveMessage: this.note,
                orderTime: Date.parse(new Date(moment(this.date,'YYYY-MM-DD HH:mm')))
            }
            console.log(data)
            this.$http.post({
                url: '/seeOrder/save',
                data: {
                    userId: this.userInfo.id,
                    houseId: this.$route.query.id,
                    housekeeper: this.info.housekeeper,
                    contact: this.userInfo.nickname,
                    telephone: this.userInfo.phone,
                    leaveMessage: this.note,
                    orderTime: Date.parse(new Date(moment(this.date,'YYYY-MM-DD HH:mm')))
                }
            }).then(res => {
                this.$store.commit('updateLoading', false)
                if (res.success) {
                    this.$alert({ title: '', content: '预约成功，管家会尽快与您联系', showCancel: false, }, () => {
                        history.back()
                    })
                } else {
                    this.$modal.info({ msg: res.error, duration: 1500 })
                }
            });
        }
    },
    components: { GmButton, largeGoodsItem }
}
</script>
<style lang="less" scoped>
.container {
    background: rgba(242, 242, 242, 1);
}
.top {
    margin: 0.1rem 0.3rem 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
}

.list {
    margin: 0.3rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    padding: 0 0.3rem;

    .item {
        display: flex;
        height: 1.2rem;
        align-items: center;

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

        .title {
            font-size: 0.3rem;
            color: rgba(0, 0, 0, 1);
            line-height: 0.42rem;
            min-width: 2.1rem;
        }

        .val {
            font-size: 0.32rem;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            line-height: 0.44rem;
            flex-grow: 1;

            &.notSet {
                font-size: 0.26rem;
                font-weight: normal;
                color: rgba(170, 172, 173, 1);
                line-height: 0.36rem;
            }
        }

        input {
            flex-grow: 1;
            align-self: stretch;
            outline: none;
            border: none;
            font-size: 0.32rem;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            &::-webkit-input-placeholder {
                font-weight: normal;
                color: rgba(170, 172, 173, 1);
                font-size: 0.26rem;
            }
        }
        textarea {
            flex-grow: 1;
            align-self: stretch;
            border: 0;
            outline: none;
            font-size: 0.32rem;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            margin: 0.3rem 0;
            &::-webkit-input-placeholder {
                font-weight: normal;
                color: rgba(170, 172, 173, 1);
                font-size: 0.26rem;
            }
        }

        img {
            width: 0.16rem;
            height: 0.28rem;
        }
    }
}
.btn-content {
    padding: 0.3rem;
}
</style>


