<template>
    <app-layout title="工程安装">
        <view class="background">
            <image class="image" :src="background" mode="widthFix" />
        </view>
        <view class="common-form-container">
            <view class="input-item">
                <view class="title-box">
                    <text>工程类型</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="projectType"
                        placeholder="请输入工程的类型，例如：酒店"
                        placeholder-class="placeholder-style-3"
                    />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>产品类型</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="productType"
                        placeholder="请输入产品类型"
                        placeholder-class="placeholder-style-3"
                    />
                </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="placeholder-style-3" />
                </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="placeholder-style-3"
                    />
                </view>
            </view>
            <view class="input-item count-style">
                <view class="title-box">
                    <text>需要师傅数量</text>
                </view>
                <view class="input-box">
                    <widget-count-modify :min="1" :init="number" @change="changeNumber" />
                </view>
            </view>
            <view class="input-item carry-style">
                <view class="title-box">
                    <text>是否需要搬运</text>
                </view>
                <view class="input-box">
                    <view class="checkbox">
                        <view class="checkbox-item" :class="[needCarry == 1 ? 'active' : '']" @click="needCarry = 1">
                            <text>是</text>
                        </view>
                        <view class="checkbox-item" :class="[needCarry == 0 ? 'active' : '']" @click="needCarry = 0">
                            <text>否</text>
                        </view>
                    </view>
                </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="placeholder-style-3"
                    />
                </view>
            </view>
        </view>
        <view class="common-save-form-btn">
            <view class="btn" @click="submit">提交</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WidgetCountModify from "@/components/widgets/count-modify";
export default {
    name: "service-other-project",
    data() {
        return {
            background: require("@/static/temp/single/1.png"),
            projectType: "",
            productType: "",
            number: 1,
            name: "",
            mobile: "",
            needCarry: 1,
            content: "",
        };
    },
    components: {
        AppLayout,
        WidgetCountModify,
    },
    onLoad() {},
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        changeNumber(e) {
            this.number = e.value;
        },
        submit() {
            this.$models.service
                .projectApply({
                    types: this.projectType,
                    goods: this.productType,
                    name: this.name,
                    mobile: this.mobile,
                    count: this.number,
                    carry: this.needCarry,
                    desc: this.content,
                })
                .then((msg) => {
                    this.$utils.toast(msg, { icon: "success" }).then(() => {
                        this.$utils.toPage("/pages/order/order", {}, "switch");
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.background {
    z-index: 5;
    width: 100%;
    line-height: 0;
    .image {
        width: 100%;
    }
}
.common-form-container {
    z-index: 10;
    position: relative;
    margin-top: -130rpx;
    .title-box {
        font-weight: normal;
    }
}
.carry-style,
.count-style {
    .title-box {
        width: 200rpx;
    }
    .input-box {
        width: auto;
    }
}
.carry-style {
    .input-box {
        padding-left: 15rpx;
    }
}
.count-style {
    justify-content: space-between;
}
.common-save-form-btn {
    .btn {
        background-color: #ff7551;
    }
}
</style>