<template>
    <app-layout
        headerBackgroundColor="#F6F6F6"
        title="联保"
        textColor="dark"
        backgroundColor="#F6F6F6"
    >
        <view class="background">
            <image class="image" :src="background" mode="widthFix" />
        </view>
        <view class="form-container">
            <view class="input-item">
                <view class="title-box">
                    <text>品牌</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="brand"
                        placeholder="请输入贵公司品牌"
                        placeholder-class="form-input-placeholder"
                    />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>产品类型</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="projectType"
                        placeholder="请输入产品类型"
                        placeholder-class="form-input-placeholder"
                    />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>联系人</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="name"
                        placeholder="请输入姓名"
                        placeholder-class="form-input-placeholder"
                    />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>联系手机</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="mobile"
                        placeholder="请输入联系手机号"
                        placeholder-class="form-input-placeholder"
                    />
                </view>
            </view>
            <view class="textarea-item">
                <view class="title-box">
                    <text>售后说明</text>
                </view>
                <view class="textarea-box">
                    <textarea
                        v-model="content"
                        class="textarea"
                        placeholder="请输入售后说明"
                        placeholder-class="form-input-placeholder"
                    />
                </view>
            </view>
        </view>
        <view class="save-form-btn">
            <view class="btn" @click="save">保存</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
export default {
    name: "single-after-market",
    data() {
        return {
            background: require("@/static/temp/single/3.png"),
            brand: "",
            projectType: "",
            name: "",
            mobile: "",
            content: "",
        };
    },
    components: {
        AppLayout,
    },
    onLoad() {},
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        save() {
            console.log("保存");
        },
    },
};
</script>

<style lang="less" scoped>
.background {
    z-index: 5;
    width: 100%;
    line-height: 0;
    .image {
        width: 100%;
    }
}
.form-container {
    z-index: 10;
    position: relative;
    margin-top: -85rpx;
    .title-box {
        font-weight: normal;        
    }
}
.save-form-btn {
    margin-top: 40rpx;
    padding-bottom: 100rpx;
}
</style>