<template>
    <app-layout title="设置服务信息">
        <view class="service-info-container">
            <view class="tips-box">
                <widget-tips text="完成入驻后，平台将会根据您所设置的服务信息推送消息" textColor="#ffa800" />
            </view>
            <view class="service-form-container">
                <view class="input-item">
                    <text class="title">*我的头像</text>
                    <!-- #ifdef H5 -->
                    <view class="headimg-box" @click="uploadHeadImg">
                        <image class="image" :src="avatar" mode="aspectFill" />
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <button open-type="chooseAvatar" @chooseavatar="uploadAvatar" class="headimg-box">
                        <image class="image" :src="avatar" mode="aspectFill" />
                    </button>
                    <!-- #endif -->
                    <text class="iconfont icon-jinru"></text>
                </view>
                <view class="input-item">
                    <text class="title">*服务区域</text>
                    <view class="select-widget" :class="{ active: currentAreaText.length > 0 }">
                        <view class="picker-view limit-line clamp-1" @click="selectAreaModal = true">
                            {{ currentAreaText ? currentAreaText : "请选择服务区域" }}
                        </view>
                    </view>
                    <text class="iconfont icon-jinru"></text>
                </view>
                <view class="input-item">
                    <text class="title">*服务分类</text>
                    <picker
                        mode="selector"
                        :range="serviceTypeList"
                        range-key="name"
                        @change="changeServiceType"
                        class="select-widget"
                        :class="{ active: serviceTypeText.length > 0 }"
                    >
                        <view class="picker-view limit-line clamp-1">
                            {{ serviceTypeText ? serviceTypeText : "请选择服务分类" }}
                        </view>
                    </picker>
                    <text class="iconfont icon-jinru"></text>
                </view>
                <view v-if="serviceType == 2 || serviceType == 3" class="input-item">
                    <text class="title">车辆类型</text>
                    <picker
                        mode="selector"
                        :range="carTypeList"
                        range-key="name"
                        @change="changeCarType"
                        class="select-widget"
                        :class="{ active: carTypeText.length > 0 }"
                    >
                        <view class="picker-view limit-line clamp-1">
                            {{ carTypeText ? carTypeText : "请选择车辆类型" }}
                        </view>
                    </picker>
                    <text class="iconfont icon-jinru"></text>
                </view>
                <view class="input-item">
                    <text class="title">*服务类型</text>
                    <view class="select-widget" :class="{ active: currentCateText.length > 0 }">
                        <view class="picker-view limit-line clamp-1" @click="selectCateModal = true">
                            {{ currentCateText ? currentCateText : "请选择服务类型" }}
                        </view>
                    </view>
                    <text class="iconfont icon-jinru"></text>
                </view>
                <view class="input-item-section">
                    <text class="title">*认证资料<text class="desc">请录入身份资料</text></text>
                    <view class="profile-box">
                        <input
                            class="username"
                            v-model="name"
                            placeholder="请输入您的姓名"
                            placeholder-class="placeholder-style-5"
                        />
                        <text class="upload-title">请上传您的身份证</text>
                        <view class="upload-idcard">
                            <view class="idcard-item" @click="uploadIdCardA">
                                <image v-show="idcardA" class="image" :src="idcardA" mode="aspectFill" />
                                <view v-show="!idcardA" class="icon">
                                    <text class="iconfont icon-shenfenzhengzhengmian"></text>
                                    <view class="text">上传身份证正面</view>
                                </view>
                            </view>
                            <view class="idcard-item" @click="uploadIdCardB">
                                <image v-show="idcardB" class="image" :src="idcardB" mode="aspectFill" />
                                <view v-show="!idcardB" class="icon">
                                    <text class="iconfont icon-shenfenzhengzhengmian"></text>
                                    <view class="text">上传身份证反面</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="input-item-section license noborder">
                    <text class="title">服务资质<text class="desc">电工相关服务分类必上传</text></text>
                    <view class="section-content-box">
                        <view class="upload-image" @click="uploadLicense">
                            <image v-if="license" class="icon" :src="license" mode="aspectFill" />
                            <view v-if="!license" class="icon">
                                <text class="iconfont icon-shangchuantupian"></text>
                                <view class="text">上传资质</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="input-item-section noborder">
                    <text class="title">*自我介绍<text class="desc">请输入个人的简要介绍</text></text>
                    <view class="section-content-box">
                        <textarea :maxlength="maxContentLength" class="textarea" v-model="content" />
                    </view>
                </view>
            </view>
            <view class="common-save-form-btn">
                <view class="btn" @click="submit">提交审核</view>
            </view>
        </view>
        <widget-modal title="选择服务区域" v-show="selectAreaModal" @close="selectAreaModal = false">
            <view class="current-modal">
                <view class="picker-box">
                    <uni-data-picker
                        :localdata="areaList"
                        placeholder="选择服务区域"
                        popup-title="选择服务区域"
                        @change="changeArea"
                    >
                        <view class="picker-view">点击添加服务区域</view>
                    </uni-data-picker>
                </view>
                <view class="current-list">
                    <view class="current-item" v-for="(item, index) in currentAreaList" :key="index" @click="delArea(index)">
                        {{ item }}
                    </view>
                </view>
                <view class="btn" @click="selectAreaModal = false">确定</view>
            </view>
        </widget-modal>
        <widget-modal title="选择服务类型" v-show="selectCateModal" @close="selectCateModal = false">
            <view class="current-modal">
                <view class="picker-box">
                    <picker mode="selector" :range="cateList" range-key="name" @change="selectCate">
                        <view class="picker-view limit-line clamp-1">点击添加服务类型</view>
                    </picker>
                </view>
                <view class="current-list">
                    <view class="current-item" v-for="(item, index) in currentCateList" :key="index" @click="delCate(index)">
                        {{ item.name }}
                    </view>
                </view>
                <view class="btn" @click="selectCateModal = false">确定</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 { mapState } from "vuex";
export default {
    name: "member-service-info",
    data() {
        return {
            maxContentLength: 300,
            selectAreaModal: false,
            selectCateModal: false,
            avatar: "",
            areaList: [],
            currentAreaText: "",
            currentAreaList: [],
            serviceType: 0,
            serviceTypeText: "",
            serviceTypeList: [
                { id: 1, name: "安装" },
                { id: 2, name: "配送" },
                { id: 3, name: "安装+配送" },
            ],
            cateList: [],
            currentCateText: "",
            currentCateList: [],
            carTypeId: 0,
            carTypeText: "",
            carTypeList: [],
            name: "",
            idcardA: "",
            idcardB: "",
            license: "",
            content: "",
        };
    },
    components: {
        AppLayout,
        WidgetTips,
        WidgetModal,
    },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.info,
            finishInfo: (state) => state.user.finishInfo,
        }),
    },
    onLoad() {},
    onShow() {},
    async onReady() {
        await this.$store.dispatch("user/info", true);
        if (this.finishInfo) {
            this.avatar = this.userInfo.worker.avatar;
            this.carTypeId = this.userInfo.worker.carTypeId;
            this.name = this.userInfo.worker.name;
            this.idcardA = this.userInfo.worker.idcardA;
            this.idcardB = this.userInfo.worker.idcardB;
            this.license = this.userInfo.worker.license;
            this.content = this.userInfo.worker.content;
            this.carTypeText = this.userInfo.worker.carTypeId;
            this.serviceType = this.userInfo.worker.serviceType;
            this.serviceTypeList.forEach((item) => {
                if (item.id === this.serviceType) {
                    this.serviceTypeText = item.name;
                }
            });
            let currentAreaList = this.userInfo.worker.area.split(",");
            currentAreaList.forEach((item) => {
                if (item) {
                    this.currentAreaList.push(item);
                }
            });
            this.updatecurrentAreaText();
        }
        this.areaList = this.$models.system.getCity();
        this.$models.service.getInstallCate().then((list) => {
            this.cateList = list;
            if (this.finishInfo) {
                let cateIds = this.userInfo.worker.cateIds.split(",");
                list.forEach((item) => {
                    if (cateIds.indexOf(item.id + "") >= 0) {
                        this.currentCateList.push({
                            id: item.id,
                            name: item.name,
                        });
                    }
                });
                this.updateCurrentCateText();
            }
        });
        this.$models.service.getCarType().then((list) => {
            this.carTypeList = list;
            if (this.finishInfo) {
                list.forEach((item) => {
                    if (item.id == this.userInfo.worker.carTypeId) {
                        this.carTypeText = item.name;
                    }
                });
            }
        });
    },
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 上传头像
         */
        uploadHeadImg() {
            this.$utils.chooseImage(1).then((tempFiles) => {
                tempFiles.forEach((item) => {
                    this.$models.system.upload(item.path).then((response) => {
                        this.avatar = response.img;
                    });
                });
            });
        },
        /**
         * 上传头像
         */
        uploadAvatar(e) {
            this.$models.system.upload(e.detail.avatarUrl).then((response) => {
                this.avatar = response.img;
            });
        },
        /**
         * 上传身份证
         */
        uploadIdCardA() {
            this.$utils.chooseImage(1).then((tempFiles) => {
                tempFiles.forEach((item) => {
                    this.$models.system.upload(item.path).then((response) => {
                        this.idcardA = response.img;
                    });
                });
            });
        },
        /**
         * 上传身份证
         */
        uploadIdCardB() {
            this.$utils.chooseImage(1).then((tempFiles) => {
                tempFiles.forEach((item) => {
                    this.$models.system.upload(item.path).then((response) => {
                        this.idcardB = response.img;
                    });
                });
            });
        },
        /**
         * 上传资质
         */
        uploadLicense() {
            this.$utils.chooseImage(1).then((tempFiles) => {
                tempFiles.forEach((item) => {
                    this.$models.system.upload(item.path).then((response) => {
                        this.license = response.img;
                    });
                });
            });
        },
        /**
         * 选择服务区域
         */
        changeArea(e) {
            let data = e.detail.value;
            let value = data[data.length - 1].text;
            if (!this.currentAreaList.includes(value)) {
                this.currentAreaList.push(value);
            }
            this.updatecurrentAreaText();
        },
        /**
         * 删除服务区域
         */
        delArea(index) {
            this.currentAreaList.splice(index, 1);
            this.updatecurrentAreaText();
        },
        updatecurrentAreaText() {
            let areaArr = [];
            this.currentAreaList.forEach((item) => {
                areaArr.push(item);
            });
            this.currentAreaText = areaArr.join();
        },
        /**
         * 选择服务分类
         */
        changeServiceType(e) {
            this.serviceTypeList.forEach((item, index) => {
                if (index == e.detail.value) {
                    this.serviceType = item.id;
                    this.serviceTypeText = item.name;
                }
            });
            if (this.serviceType == 1) {
                this.carTypeId = 0;
                this.carTypeText = "";
            }
        },
        /**
         * 选择服务
         */
        selectCate(e) {
            let id = this.cateList[e.detail.value].id,
                flag = false;
            this.currentCateList.forEach((item) => {
                if (item.id == id) {
                    flag = true;
                }
            });
            if (!flag) {
                this.currentCateList.push({
                    id: this.cateList[e.detail.value].id,
                    name: this.cateList[e.detail.value].name,
                });
                this.updateCurrentCateText();
            }
        },
        /**
         * 删除服务
         */
        delCate(index) {
            this.currentCateList.splice(index, 1);
            this.updateCurrentCateText();
        },
        updateCurrentCateText() {
            let cateArr = [];
            this.currentCateList.forEach((item) => {
                cateArr.push(item.name);
            });
            this.currentCateText = cateArr.join();
        },
        /**
         * 修改车型
         */
        changeCarType(e) {
            this.carTypeId = this.carTypeList[e.detail.value].id;
            this.carTypeText = this.carTypeList[e.detail.value].name;
        },
        /**
         * 提交
         */
        submit() {
            let cateIds = [];
            this.currentCateList.forEach((item) => {
                cateIds.push(item.id);
            });
            let saveData = {
                avatar: this.avatar,
                service: cateIds.join(","),
                area: this.currentAreaList.join(","),
                name: this.name,
                mobile: this.mobile,
                imga: this.idcardA,
                imgb: this.idcardB,
                imgc: this.license,
                desc: this.content,
                types: this.serviceType,
            };
            if (this.serviceType == 2 || this.serviceType == 3) {
                saveData.car = this.carTypeId;
            }
            this.$models.user
                .setServiceInfo(saveData)
                .then((message) => {
                    this.$store.dispatch("user/info", true);
                    this.$utils.toast(message).then(() => {
                        this.$utils.toPage("/pages/member/member", {}, "switch");
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.current-modal {
    .picker-box {
        width: 100%;
        border-bottom: 2rpx solid #d6d6d6;
        .picker-view {
            color: #666666;
            font-size: 28rpx;
            padding: 10rpx 0 20rpx 0;
            text-align: center;
        }
    }
    .current-list {
        margin: 30rpx 0 20rpx 0;
        .current-item {
            position: relative;
            display: inline-block;
            background-color: #ffa800;
            box-sizing: border-box;
            padding: 10rpx;
            color: #ffffff;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
            font-size: 28rpx;
            line-height: 28rpx;
        }
        .current-item::after {
            position: relative;
            top: -3rpx;
            display: inline-block;
            content: "x";
            color: #ebebeb;
            margin-left: 10rpx;
            font-size: 30rpx;
            text-align: center;
        }
    }
    .btn {
        width: 100%;
        height: 68rpx;
        background: #7286f1;
        font-size: 32rpx;
        line-height: 68rpx;
        text-align: center;
        color: #ffffff;
    }
}
.service-info-container {
    width: 710rpx;
    margin: 0 auto;
}
.service-form-container {
    width: 100%;
    margin-top: 14rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    background-color: #ffffff;
}
.input-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44rpx 0;
    border-bottom: 2rpx solid #e8e7e7;
    .title {
        font-size: 30rpx;
        color: #2d2d2d;
    }
    .iconfont {
        color: #a7a7a7;
    }
}
.select-widget {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    // display: flex;
    // align-items: center;
    font-size: 28rpx;
    color: #c9c9c9;
    box-sizing: border-box;
    padding: 44rpx 44rpx 44rpx 190rpx;
    .picker-view,
    /deep/.uni-data-tree-input {
        width: 100%;
    }
    /deep/.uni-data-tree-input {
        .preview {
            color: #666666;
        }
        .placeholder {
            color: #c9c9c9;
            font-size: 28rpx;
        }
        .input-value-border {
            border: 0;
        }
        .input-value {
            padding: 0;
            height: auto;
            font-size: 28rpx;
            line-height: 38rpx;
        }
        .arrow-area,
        .uniui-clear {
            display: none;
        }
    }
}
.select-widget.active {
    color: #666666;
}
.headimg-box {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding-right: 60rpx;
    .image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        overflow: hidden;
    }
}
button.headimg-box {
    background-color: unset;
}
button.headimg-box::after {
    border: unset;
}
.input-item-section {
    padding: 44rpx 0;
    border-bottom: 2rpx solid #e8e7e7;
    .title {
        position: relative;
        display: block;
        font-size: 30rpx;
        color: #2d2d2d;
    }
    .desc {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 28rpx;
        color: #c9c9c9;
        box-sizing: border-box;
        padding-left: 190rpx;
    }
}
.input-item-section.license {
    border-bottom: 0;
    padding-bottom: 0;
}
.profile-box {
    width: 100%;
    box-sizing: border-box;
    padding: 34rpx 10rpx 0 10rpx;
    .username {
        width: 100%;
        padding: 32rpx 0;
        font-size: 30rpx;
        color: #666666;
        line-height: 30rpx;
        border-bottom: 2rpx solid #e8e7e7;
    }
}
.upload-title {
    display: block;
    font-size: 30rpx;
    color: #666666;
    line-height: 30rpx;
    margin: 44rpx 0;
}
.upload-idcard {
    display: flex;
    justify-content: center;
    .idcard-item:first-child {
        margin-right: 22rpx;
    }
    .idcard-item {
        background: #f6f6f6;
        font-size: 0;
    }
    .image,
    .icon {
        width: 273rpx;
        height: 164rpx;
    }
    .icon {
        text-align: center;
        .iconfont {
            display: inline-block;
            width: 100%;
            font-size: 120rpx;
            color: #cccccc;
        }
        .text {
            font-size: 24rpx;
            color: #666666;
            line-height: 24rpx;
        }
    }
}
.section-content-box {
    margin-top: 40rpx;
    padding: 0 10rpx;
    .upload-image {
        display: inline-block;
        border: 1rpx solid #999999;
    }
    .image,
    .icon {
        width: 136rpx;
        height: 136rpx;
    }
    .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .iconfont {
            font-size: 60rpx;
            color: #999999;
            line-height: 60rpx;
        }
        .text {
            font-size: 24rpx;
            color: #999999;
            line-height: 24rpx;
            margin-top: 16rpx;
        }
    }
    .textarea {
        width: 100%;
        height: 164rpx;
        border: 2rpx solid #d8d8d8;
        box-sizing: border-box;
        padding: 10rpx;
        color: #666666;
        font-size: 30rpx;
    }
}
</style>