<template>
    <app-layout
        headerBackgroundColor="#F6F6F6"
        backgroundColor="#F6F6F6"
        :title="pageTitle"
        :customBtn="customBtn"
        textColor="dark"
        @onClickBtn="clickBackBtn"
    >
        <view class="step-desc">
            <text class="text active">发布需求</text>
            <text class="text normal">
                — 多位师傅报价/议价 — 选择师傅 — 师傅上门
            </text>
        </view>
        <view class="demand-container step-1" v-if="step == 1">
            <view class="tips-container">
                <widget-tips
                    backgroundColor="unset"
                    textColor="#FFA800"
                    text="如需钻孔上墙，为避免影响邻居，请提前与物业确认能否施工，再协商上门时间"
                />
            </view>
            <view class="form-container category">
                <view class="input-item">
                    <view class="title-box">
                        <text>选择分类</text>
                        <text class="desc">（可多选）</text>
                    </view>
                    <view class="input-box" @click="chooseCategory">
                        <view class="category-group">
                            <block
                                v-for="(item, index) in [
                                    { id: 1, name: '空调安装' },
                                    { id: 1, name: '空调安装' },
                                    { id: 1, name: '空调安装' },
                                ]"
                                :key="index"
                            >
                                <view
                                    class="category-item"
                                    @click.stop="delCategory(index)"
                                >
                                    <text class="text">{{ item.name }}</text>
                                    <text
                                        class="iconfont icon-guanbishixin"
                                    ></text>
                                </view>
                            </block>
                        </view>
                        <view class="more">
                            <text class="iconfont icon-jinru"></text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="form-container price">
                <view class="input-item price-type">
                    <view class="title-box">
                        <text>选择报价方式</text>
                    </view>
                    <view class="input-box">
                        <view class="checkbox">
                            <view
                                class="checkbox-item"
                                :class="[type == 1 ? 'active' : '']"
                                @click="type = 1"
                            >
                                <text>多位师傅报价</text>
                            </view>
                            <view
                                class="checkbox-item"
                                :class="[type == 2 ? 'active' : '']"
                                @click="type = 2"
                            >
                                <text>议价</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="form-container explain">
                <view class="textarea-item">
                    <view class="title-box">
                        <text>需求说明</text>
                    </view>
                    <view class="textarea-box">
                        <textarea
                            v-model="explain"
                            class="textarea"
                            placeholder="请您详细填写需求说明"
                            placeholder-class="form-input-placeholder"
                        />
                    </view>
                </view>
                <view class="upload-item">
                    <block v-for="(item, index) in uploadImages" :key="index">
                        <view class="image-box">
                            <image
                                class="image"
                                :src="item.src"
                                mode="aspectFill"
                            />
                        </view>
                    </block>
                    <view class="image-box upload" @click="chooseImage">
                        <text class="iconfont icon-shangchuantupian"></text>
                        <text class="text">上传图片</text>
                    </view>
                </view>
            </view>
            <view class="save-form-btn">
                <view class="btn" @click="toStep(2)">下一步</view>
            </view>
        </view>
        <view class="demand-container step-2" v-if="step == 2">
            <view class="tips-container">
                <widget-tips
                    backgroundColor="unset"
                    textColor="#FFA800"
                    text="选择上门时间，请确保货物在该时间段之前到家"
                />
            </view>
            <view class="step-2-main">
                <view class="form-container explain">
                    <view class="textarea-item">
                        <view class="title-box">
                            <text>需求说明</text>
                        </view>
                        <view class="textarea-box">
                            <text class="textarea">{{ explain }}</text>
                        </view>
                    </view>
                    <view class="upload-item">
                        <block
                            v-for="(item, index) in uploadImages"
                            :key="index"
                        >
                            <view class="image-box">
                                <image
                                    class="image"
                                    :src="item.src"
                                    mode="aspectFill"
                                />
                            </view>
                        </block>
                    </view>
                </view>
                <view class="form-container form-widget">
                    <view class="input-item">
                        <view class="form-widget-group">
                            <view class="title-box">
                                <text>选择报价方式</text>
                                <text class="desc">（隐私信息完全保密）</text>
                            </view>
                            <view class="input-box">
                                <view
                                    class="widget-item"
                                    @click="selectAddress"
                                >
                                    <text
                                        class="iconfont icon-dingwei icon"
                                    ></text>
                                    <text class="title limit-line clamp-1">
                                        {{
                                            addressText
                                                ? addressText
                                                : "请选择上门地址"
                                        }}
                                    </text>
                                    <text
                                        class="iconfont icon-jinru more"
                                    ></text>
                                </view>
                                <view class="widget-item">
                                    <text
                                        class="iconfont icon-shijian icon"
                                    ></text>
                                    <picker
                                        mode="date"
                                        :value="datetime"
                                        @change="bindDateChange"
                                        class="picker"
                                    >
                                        <text class="title limit-line clamp-1">
                                            {{
                                                datetime
                                                    ? datetime
                                                    : "选择期望上门时间"
                                            }}
                                        </text>
                                    </picker>
                                    <text
                                        class="iconfont icon-jinru more"
                                    ></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="form-container ext-box">
                    <view v-if="type == 2" class="custom-price">
                        <view class="title-box">
                            <text>需求价格</text>
                            <text class="desc">
                                请勿填写过低价格，避免无师傅接单
                            </text>
                        </view>
                        <text class="input-desc">
                            请填写您的心理价位，等待师傅接单
                        </text>
                        <view
                            class="custom-input-box"
                            @click="editPrice = true"
                        >
                            <text class="iconfont icon-bianji"></text>
                            <text class="price">¥ {{ parsePrice(price) }}</text>
                        </view>
                    </view>
                    <view class="insurance-box">
                        <service-insurance
                            padding="38rpx 30rpx"
                            :insurance="insurance"
                            @change="changeInsuranceState"
                        />
                    </view>
                </view>
                <view
                    class="bottom-components"
                    :style="{ bottom: config.safeAreaInsets.bottom + 'px' }"
                >
                    <text class="price">¥ {{ parsePrice(total) }}</text>
                    <view v-if="type == 1" class="btn" @click="submit">
                        <div class="text">立即发布</div>
                    </view>
                    <view v-if="type == 2" class="btn" @click="pay">
                        <div class="text">去支付</div>
                    </view>
                </view>
            </view>
        </view>
        <widget-modal
            :show="editPrice"
            title="输入心理价位"
            @close="editPrice = false"
        >
            <view class="price-box">
                <view class="price-input">
                    <view class="input-box">
                        <input
                            class="input"
                            type="number"
                            v-model="price"
                            placeholder="请输入心理价位"
                            placeholder-class="form-input-placeholder"
                        />
                        <text
                            class="iconfont icon-qingchu"
                            @click="price = 0"
                        ></text>
                    </view>
                    <text class="util">元</text>
                </view>
                <view class="submit-price" @click="editPrice = false">
                    <text>确认</text>
                </view>
            </view>
        </widget-modal>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WidgetTips from "@/components/widgets/tips";
import WidgetModal from "@/components/widgets/modal";
import ServiceInsurance from "@/components/service/insurance";
import { mapState } from "vuex";
export default {
    name: "demand",
    data() {
        return {
            customBtn: false,
            pageTitle: "发布需求",
            step: 1,
            editPrice: false,
            total: 0,
            // 保存数据
            type: 1,
            explain: "这个就是需求内容",
            categoryIds: [1, 2, 3],
            uploadImages: [
                {
                    src: require("@/static/temp/cate/1.png"),
                },
                {
                    src: require("@/static/temp/cate/1.png"),
                },
                {
                    src: require("@/static/temp/cate/1.png"),
                },
                {
                    src: require("@/static/temp/cate/1.png"),
                },
            ],
            addressText: "",
            datetime: "",
            insurance: false,
            price: 0,
        };
    },
    components: {
        AppLayout,
        WidgetTips,
        ServiceInsurance,
        WidgetModal,
    },
    computed: {
        ...mapState({
            config: (state) => state.system.config,
        }),
    },
    onLoad() {
        // #ifdef MP-WEIXIN
        uni.enableAlertBeforeUnload({
            message: "需求尚未发布，确定离开？"
        });
        // #endif
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        toStep(step) {
            if (step == 1) {
                this.pageTitle = "发布需求";
                this.customBtn = false;
            } else if (step == 2) {
                this.pageTitle = "基本信息";
                this.customBtn = true;
            }
            this.step = step;
            uni.setNavigationBarTitle({
                title: this.pageTitle,
            });
        },
        clickBackBtn() {
            this.toStep(1);
        },
        chooseImage() {
            uni.chooseImage({
                sizeType: ["compressed"],
                sourceType: ["album"],
                success(res) {
                    console.log(JSON.stringify(res.tempFilePaths));
                },
            });
        },
        delCategory() {
            uni.showToast({
                title: "删除",
            });
        },
        chooseCategory() {
            uni.showToast({
                title: "选择",
            });
        },
        selectAddress() {
            const that = this;
            this.$utils.toPage(
                "/pages/address/address?openType=choose&id=" + that.addressId,
                {
                    events: {
                        setAddress(address) {
                            that.addressId = address.id;
                            that.addressText = address.address + address.detail;
                        },
                    },
                }
            );
        },
        bindDateChange(e) {
            this.datetime = e.detail.value;
        },
        changeInsuranceState(state) {
            this.insurance = state;
        },
        parsePrice(data) {
            let num = parseFloat(data);
            return num > 0 ? num.toFixed(2) : 0;
        },
        submit() {
            uni.showToast({ title: "发布成功" });
        },
        pay() {
            uni.showToast({ title: "支付成功" });
        },
    },
};
</script>

<style lang="less" scoped>
.step-desc {
    width: 710rpx;
    background: #ffffff;
    margin: 0 auto;
    text-align: center;
    padding: 22rpx 0;
    line-height: 0;
    .text {
        font-size: 26rpx;
        font-weight: bold;
        line-height: 26rpx;
    }
    .text.normal {
        color: #a0a0a0;
    }
    .text.active {
        color: #8b9beb;
        margin-right: 8rpx;
    }
}
.tips-container {
    width: 710rpx;
    margin: 0 auto;
}
.save-form-btn {
    margin-top: 70rpx;
}
.demand-container {
    padding-bottom: 120rpx;
}
.form-container {
    width: 100%;
    margin-top: 0;
}
.form-container.category {
    .input-item {
        display: block;
        height: auto;
        box-sizing: border-box;
        padding: 30rpx;
    }
    .title-box {
        width: 100%;
    }
    .input-box {
        position: relative;
        width: 100%;
        padding: 0;
        margin-top: 24rpx;
    }
    .more {
        position: absolute;
        right: 0;
        bottom: 8rpx;
        .iconfont {
            color: #a7a7a7;
            font-size: 36rpx;
        }
    }
}
.category-group {
    width: 650rpx;
    display: flex;
    flex-wrap: wrap;
    .category-item:nth-child(1),
    .category-item:nth-child(2),
    .category-item:nth-child(3) {
        margin-top: 0;
    }
    .category-item {
        padding: 10rpx 20rpx;
        background-color: #f7f7f7;
        border-radius: 10rpx;
        line-height: 30rpx;
        margin: 20rpx 20rpx 0 0;
        .text {
            font-size: 26rpx;
            color: #7b7b7b;
        }
        .iconfont {
            font-size: 30rpx;
            color: #d6d6d6;
            margin-left: 22rpx;
        }
    }
}
.form-container.price {
    margin-top: 25rpx;
}
.form-container.explain {
    margin-top: 25rpx;
    .textarea-box {
        border: none;
        .textarea {
            height: 190rpx;
            padding: 0;
            font-size: 26rpx;
            color: #666666;
        }
    }
}
.price-type {
    .title-box {
        width: 180rpx;
        flex-shrink: 0;
        margin-right: 30rpx;
    }
    .input-box {
        width: 100%;
        flex-shrink: 1;
    }
}
// 基本信息
.step-2-main,
.step-3-main {
    width: 710rpx;
    margin: 0 auto;
    .bottom-components {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 750px;
        width: 100%;
        height: 100rpx;
        margin: 0 auto;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 0 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .price {
            font-size: 40rpx;
            font-weight: bold;
            color: #ec7655;
        }
        .btn {
            width: 234rpx;
            height: 76rpx;
            background: #8b9beb;
            border: 2rpx solid #4b65ed;
            text-align: center;
            .text {
                font-size: 24rpx;
                color: #ffffff;
                line-height: 76rpx;
            }
        }
    }
}
.form-container.form-widget {
    margin-top: 22rpx;
    .input-item {
        height: auto;
        padding: 0;
        border-bottom: 0;
        line-height: unset;
    }
    .title-box {
        width: 100%;
        box-sizing: border-box;
        padding: 30rpx 0 0 30rpx;
    }
    .input-box {
        width: 100%;
        padding-bottom: 0;
    }
    .widget-item:first-child {
        border-bottom: 1rpx solid #e8e7e7;
    }
}
.form-container.ext-box {
    margin-top: 22rpx;
    .custom-price {
        padding: 30rpx;
        border-bottom: 2rpx solid #e8e7e7;
        .title-box {
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
            line-height: 30rpx;
        }
        .desc {
            font-size: 24rpx;
            font-weight: bold;
            color: #fdb62c;
            margin-left: 25rpx;
            line-height: 24rpx;
        }
        .input-desc {
            display: inline-block;
            font-size: 24rpx;
            font-weight: bold;
            color: #999999;
            line-height: 24rpx;
            margin: 24rpx 0 50rpx 0;
            line-height: 24rpx;
        }
    }
    .custom-input-box {
        width: 100%;
        .iconfont {
            font-size: 36rpx;
            color: #999999;
        }
        .price {
            font-size: 40rpx;
            font-weight: bold;
            color: #ec7655;
            line-height: 40rpx;
            margin-left: 30rpx;
        }
    }
}
.price-box {
    .submit-price {
        width: 100%;
        height: 68rpx;
        background: #7286f1;
        text-align: center;
        line-height: 68rpx;
        font-size: 32rpx;
        color: #ffffff;
    }
    .price-input {
        display: flex;
        justify-content: space-between;
        margin: 35rpx 0 50rpx 0;
        line-height: 72rpx;
        .input-box {
            display: flex;
        }
        .input {
            width: 450rpx;
            height: 72rpx;
            border: 2rpx solid #d8d8d8;
            box-sizing: border-box;
            padding: 4rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
            text-align: center;
        }
        .iconfont {
            margin-left: 18rpx;
        }
    }
}
</style>