<template>
    <view>
        <van-popup position="bottom" :show="visible" @close="close" closable>
            <view class="popup-container">
                <view class="title">需求派单</view>
                <scroll-view scroll-y class="popup-content2">
                    <view class="card">
                        <view class="items">
                            <view class="label">需求类别：</view>
                            <view class="value">{{ detail.categoryName }}</view>
                        </view>
                        <view class="items">
                            <view class="label">需求标题：</view>
                            <view class="value">{{ detail.title }}</view>
                        </view>
                        <view class="items">
                            <view class="label">详细说明：</view>
                            <view class="value">
                                {{ detail.content }}
                            </view>
                        </view>
                    </view>
                    <view class="card">
                        <picker :range="serviceOptions" range-key="label" @change="getServiceuserList">
                            <view class="items">
                                <view class="label label-width">服务方类型：</view>
                                <view :class="'value text-right flex ' + (serviceIndex >= 0 ? '' : 'gray')">
                                    {{ serviceIndex >= 0 ? serviceOptions[serviceIndex].label : '请选择' }}
                                    <van-icon name="arrow" />
                                </view>
                            </view>
                        </picker>
                        <picker :range="serviceOptiondList" @change="serviceOptiondListChange" range-key="label">
                            <view class="items">
                                <view class="label label-width">服务方：</view>
                                <view :class="'value  text-right flex ' + (serviceOptiondIndex >= 0 ? '' : 'gray')">
                                    {{ serviceOptiondIndex >= 0 ? serviceOptiondList[serviceOptiondIndex].label : '请选择' }}
                                    <van-icon name="arrow" />
                                </view>
                            </view>
                        </picker>

                        <view class="items">
                            <view class="label label-width">通知服务方：</view>
                            <view class="value">
                                <van-checkbox-group :value="form.noticeApproches" @change="noticeApprochesChange">
                                    <view class="flex">
                                        <van-checkbox name="1">短信通知</van-checkbox>
                                        <view style="width: 40rpx"></view>
                                        <van-checkbox name="2">公众号通知</van-checkbox>
                                    </view>
                                </van-checkbox-group>
                            </view>
                        </view>
                        <view class="items" @tap="onShowService">
                            <view class="label label-width">服务范围：</view>
                            <view :class="'value  text-right flex ' + (fieldValue ? '' : 'gray')">
                                {{ fieldValue ? fieldValue : '请选择' }}
                                <van-icon name="arrow" />
                            </view>
                        </view>
                        <view class="items" @tap="onShowDate">
                            <view class="label label-width">服务时间：</view>
                            <view :class="'value  text-right flex ' + (date ? '' : 'gray')">
                                {{ date ? date : '请选择' }}
                                <van-icon name="arrow" />
                            </view>
                        </view>
                    </view>
                </scroll-view>

                <view class="bottom-btn">
                    <view class="btn btn-gray" @tap="close">取消</view>
                    <view class="btn btn-blue" @tap="sure">确定</view>
                </view>
            </view>

            <van-popup :show="showService" round position="bottom">
                <van-cascader
                    :field-names="orgField"
                    v-if="showService"
                    :value="cascaderValue"
                    title="请选择服务范围"
                    :options="orgOptions"
                    @close="onCloseService"
                    @finish="onFinishService"
                ></van-cascader>
            </van-popup>
            <van-calendar :show="showDate" type="range" @close="onCloseDate" @confirm="onConfirmDate" />
        </van-popup>
    </view>
</template>

<script>
import { agencygridtree, commonDemand, dictlist, listServerOrg } from '../../utils/statisticsApi';
const app = getApp();
const config = require('../../utils/config');
export default {
    data() {
        return {
            agencyId: '',
            loading: true,

            form: {
                serviceType: '',
                serverId: '',
                noticeApproches: [],
                serviceScopeList: [],
                serviceTimeStart: '',
                serviceTimeEnd: '',
                serverOrgId: '',
                serverOrgType: ''
            },

            serviceOptions: [],
            serviceIndex: -1,
            serviceOptiondIndex: -1,
            serviceOptiondList: [],
            visible2: false,

            orgField: {
                text: 'agencyName',
                value: 'agencyId',
                children: 'subAgencyList'
            },

            orgName: '',
            orgOptions: [],
            showService: false,
            fieldValue: '',
            cascaderValue: '',
            showDate: false,
            date: ''
        };
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        detail: {
            type: Object,
            default: () => {}
        },
        id: {
            type: String,
            default: ''
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready: function () {
            dictlist({
                dictType: 'user_demand_service_type'
            }).then((res) => {
                this.setData({
                    serviceOptions: res.data
                });
            });
            if (!this.agencyId) {
                this.setData({
                    agencyId: app.globalData.user.agencyId
                });
            }
            this.getOrgTreeList();
        },

        onShowService() {
            this.setData({
                showService: true
            });
            console.log(111, this.showService);
        },

        onCloseService() {
            this.setData({
                showService: false
            });
        },

        onFinishService(e) {
            const { selectedOptions, value } = e.detail;
            const fieldValue = selectedOptions.map((option) => option.agencyName || option.agencyName).join('/');
            let serviceScopeList = selectedOptions[selectedOptions.length - 1];
            this.setData({
                fieldValue,
                showService: false,
                cascaderValue: value,
                'form.serviceScopeList': [
                    {
                        objectId: serviceScopeList.agencyId,
                        objectName: serviceScopeList.agencyName,
                        objectType: serviceScopeList.level
                    }
                ]
            });
        },

        getOrgTreeList() {
            let params = {
                agencyId: this.agencyId,
                purpose: 'query'
            };
            agencygridtree(params).then((res) => {
                let org = this.deleteChildren(res.data.subAgencyList);
                this.setData({
                    orgOptions: org
                });
            });
        },

        noticeApprochesChange(e) {
            this.setData({
                'form.noticeApproches': e.detail
            });
        },

        onShowDate() {
            this.setData({
                showDate: true
            });
        },

        onCloseDate() {
            this.setData({
                showDate: false
            });
        },

        formatDate(date) {
            date = new Date(date);
            return `${date.getFullYear()}-${date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)}-${
                date.getDate() > 10 ? date.getDate() : '0' + date.getDate()
            }`;
        },

        onConfirmDate(event) {
            const [start, end] = event.detail;
            this.setData({
                showDate: false,
                date: `${this.formatDate(start)} ~ ${this.formatDate(end)}`,
                'form.serviceTimeStart': `${this.formatDate(start)} 00:00:00`,
                'form.serviceTimeEnd': `${this.formatDate(end)} 00:00:00`
            });
        },

        serviceOptiondListChange(e) {
            this.setData({
                serviceOptiondIndex: e.detail.value,
                'form.serverOrgId': this.serviceOptiondList[e.detail.value].id
            });
        },

        getServiceuserList(e) {
            this.setData({
                serviceIndex: e.detail.value,
                'form.serverOrgType': this.serviceOptions[e.detail.value].value
            });
            let params = {
                serviceTypeId: this.detail.categoryCode[1],
                //上级ID
                serverOrgType: this.serviceOptions[e.detail.value].value,
                //选的类型
                businessType: 'resi_service'
            };

            // serviceOptiondIndex
            listServerOrg(params).then((res) => {
                this.setData({
                    serviceOptiondList: res.data || []
                });
            });
        },

        deleteChildren(node) {
            node.forEach((item) => {
                if ('subAgencyList' in item && !item.subAgencyList) {
                    delete item.subAgencyList;
                } else if ('subAgencyList' in item && item.subAgencyList.length) {
                    this.deleteChildren(item.subAgencyList);
                }
            });
            return node;
        },

        close() {
            this.$emit('close');
        },

        sure() {
            commonDemand({
                ...this.detail,
                assignFlag: 1,
                assignInfo: {
                    ...this.form
                }
                // demandRecId: this.data.detail.demandRecId
            }).then((res) => {
                uni.showToast({
                    icon: 'success',
                    title: '操作成功'
                });
                this.close();
            });
        }
    },
    created: function () {}
};
</script>
<style>
.wux-popup__content {
    background: none !important;
}

.popup-container {
    padding: 32rpx 20rpx 50rpx;
    background: linear-gradient(180deg, #dbeeff 0%, #f4faff 100%);
    border-radius: 30rpx;
}

.title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    margin-bottom: 39rpx;
    position: relative;
}

.title:before {
    content: '';
    display: block;
    width: 10rpx;
    height: 28rpx;
    background: #3a80e7;
    border-radius: 4rpx;
    margin-right: 20rpx;
}

.popup-content2 {
    max-height: 60vh;
    background: none !important;
}
.popup-content2 .card {
    border-radius: 20px;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 30rpx;
}
.items {
    display: flex;
    align-items: flex-start;
    text-align: left;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 29rpx;
    position: relative;
}

.items .label {
    white-space: nowrap;
    /*width: 160rpx;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.label-width {
    min-width: 160rpx;
}
.items .value {
    width: calc(100% - 160rpx);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 144rpx;
}

.tel {
    width: 126rpx;
    height: 62rpx;
    position: absolute;
    top: calc(50% - 31rpx);
    right: 0;
}
.textarea {
    width: 100%;
    height: 340rpx;
    background: #f7f7f7;
    border-radius: 20rpx;
    padding: 27rpx 31rpx;
}
.textarea-placeholder {
    font-size: 32rpx;
    font-weight: 500;
    color: #c1c1c1;
    line-height: 42rpx;
}

.bottom-btn {
    background: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 99rpx 20rpx;
    /*padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);*/
    width: 100%;
    box-sizing: border-box;
    z-index: 999;
    position: static;
}
.btn {
    width: 240rpx;
    height: 76rpx;
    border-radius: 38rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
}
.btn-blue {
    background: linear-gradient(87deg, #81b5fb 0%, #3e92ff 100%);
}
.btn-gray {
    background: #d9d9d9;
}
.checkbox .wux-cell-group__hd {
    padding-left: 0;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
}
.checkbox {
    text-align: left;
}
.gray {
    color: #999;
}
.text-right {
    text-align: right;
}
.flex {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
}
</style>
