<template>
    <view>
        <wux-popup position="bottom" :visible="visible" @close="close" closable>
            <view class="popup-container">
                <view class="title">资源调度</view>
                <view class="screen">
                    <view class="screen-left">
                        <picker :range="options" range-key="label" v-model="typeIndex" @change="typeChange">
                            <view class="picker-type">
                                <text>{{ typeIndex >= 0 ? options[typeIndex].label : '' }}</text>
                                <image src="/static/images/statistics/down2.png" mode="widthFix" />
                            </view>
                        </picker>
                        <picker :range="subTypeOptions" range-key="label" v-model="subTypeIndex">
                            <view class="picker-type">
                                <text>{{ subTypeIndex >= 0 ? subTypeOptions[subTypeIndex].label : '' }}</text>
                                <image src="/static/images/statistics/down2.png" mode="widthFix" />
                            </view>
                        </picker>
                    </view>
                    <view class="btn" @tap="search">筛选</view>
                </view>

                <scroll-view scroll-y class="popup-content" @scrolltolower="scrolltolower">
                    <view class="resource-list">
                        <view class="resource-items" v-for="(item, index) in list" :key="index">
                            <view class="userInfo">
                                <view class="name">{{ item.name || item.principalName || item.contact }} {{ item.mobile || item.principalPhone || item.contactMobile }}</view>
                                <!-- <view class="status">巡查中</view> -->
                            </view>

                            <view class="address">
                                <view class="grid">{{ item.orgName || item.agencyName }}</view>
                                <!-- <view class="distance">1.5Km</view> -->
                            </view>

                            <view class="handle">
                                <view class="btn btn-green" @tap="handleViews" :data-obj="item">
                                    <image src="/static/images/statistics/views.png" mode="widthFix" />
                                    <text>查看</text>
                                </view>
                                <view class="btn btn-orange" @tap="handleDispatchOrder" data-id="1">
                                    <image src="/static/images/statistics/order.png" mode="widthFix" />
                                    <text>派单</text>
                                </view>
                                <view class="btn btn-blue" @tap="handleCallPhone" :data-mobile="item.mobile || item.principalPhone || item.contactMobile">
                                    <image src="/static/images/statistics/phone.png" mode="widthFix" />
                                    <text>拨打</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </wux-popup>
        <ResourceInfo :visible="isShowViews" :data="viewData" @close="viewsClose" />
    </view>
</template>

<script>
// import wuxPopup from '../dist/popup/index';
import ResourceInfo from '../ResourceInfo/ResourceInfo';
import { communityselforganizationlist, getGridMemberListByAgencyId, icpartyunitList, publicWelfarePost, volunteer } from '../../utils/statisticsApi';
const app = getApp();
export default {
    components: {
        wuxPopup,
        ResourceInfo
    },
    data() {
        return {
            options: [
                {
                    label: '人资源',
                    children: [
                        {
                            label: '网格员',
                            value: 'staffGrid'
                        },
                        {
                            label: '公益岗',
                            value: 'publicWelfareNum'
                        },
                        {
                            label: '志愿者',
                            value: 'volunteer'
                        },
                        {
                            label: '社区自组织',
                            value: '4'
                        },
                        {
                            label: '联建单位',
                            value: '5'
                        }
                        /*    {
  label: "15分钟生活圈商家",
  value: "6",
  }*/
                    ]
                },
                {
                    label: '物资源',
                    children: []
                },
                {
                    label: '场所资源',
                    children: []
                }
            ],

            typeIndex: 0,
            subTypeOptions: [],
            subTypeIndex: 0,
            isShowViews: false,
            pageNo: 1,
            viewData: {},
            list: [],
            total: '',
            label: ''
        };
    },
    options: {
        styleIsolation: 'shared'
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready: function () {
            this.typeChange();
            this.getList();
        },

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

        typeChange() {
            this.setData({
                subTypeIndex: 0,
                subTypeOptions: this.options[this.typeIndex].children
            });
        },

        handleViews(e) {
            let data = e.currentTarget.dataset.obj;
            let peopleType = this.subTypeOptions[this.subTypeIndex].value;
            let type =
                peopleType === 'volunteer' ? 1 : peopleType === '5' ? 2 : peopleType === '4' ? 3 : peopleType === 'staffGrid' ? 4 : peopleType === 'publicWelfareNum' ? 5 : '';
            this.setData({
                viewData: {
                    type,
                    id: type === 3 ? data.orgId : data.id,
                    data
                },
                isShowViews: true
            });
        },

        handleDispatchOrder(e) {
            let data = e.currentTarget.dataset.obj;
            this.$emit('dispatchOrder', {
                detail: data
            });
        },

        handleCallPhone(e) {
            uni.makePhoneCall({
                phoneNumber: e.currentTarget.dataset.mobile
            });
        },

        viewsClose() {
            this.setData({
                isShowViews: false
            });
        },

        search() {
            this.setData({
                pageNo: 1,
                list: []
            });
            this.getList();
        },

        getList() {
            console.log(this.subTypeIndex);
            let subTypeIndex = this.subTypeOptions[this.subTypeIndex].value;
            if (subTypeIndex === 'staffGrid' || subTypeIndex === 'publicWelfareNum' || subTypeIndex === 'volunteer') {
                this.getGridList();
            }
            if (subTypeIndex === '4') {
                this.getsqzz();
            }
            if (subTypeIndex === '5') {
                this.getljdw();
            }
        },

        getsqzz() {
            communityselforganizationlist({
                agencyId: this.agencyId || app.globalData.user.agencyId,
                pageNo: this.pageNo,
                pageSize: 5
            }).then((res) => {
                this.setData({
                    list: this.list.concat(res.data.list),
                    total: res.data.total
                });
            });
        },

        getljdw() {
            icpartyunitList({
                agencyId: this.agencyId || app.globalData.user.agencyId,
                pageNo: this.pageNo,
                pageSize: 5
            }).then((res) => {
                this.setData({
                    list: this.list.concat(res.data.list),
                    total: res.data.total
                });
            });
        },

        getGridList() {
            getGridMemberListByAgencyId({
                orgId: this.agencyId || app.globalData.user.agencyId,
                level: 'agency',
                personnelType: this.subTypeOptions[this.subTypeIndex].value
            }).then((res) => {
                this.setData({
                    list: res.data.personnelInfoVOList
                });
            });
        },

        scrolltolower() {
            let subTypeIndex = this.subTypeOptions[this.subTypeIndex].value;
            if (subTypeIndex === '4' || subTypeIndex === '5') {
                if (this.list.length < this.total) {
                    this.setData({
                        pageNo: this.pageNo + 1
                    });
                    this.getList();
                }
            }
        }
    },
    created: function () {}
};
</script>
<style>
.wux-popup__content {
    background: none !important;
}
.wux-popup__content .wux-popup__hd {
    padding: 0 !important;
}
.wux-popup__bd {
    padding: 0 !important;
}
.popup-container {
    padding: 32rpx 20rpx 50rpx;
    background: linear-gradient(180deg, #dbeeff 0%, #f4faff 100%);
    border-radius: 30rpx 30rpx 0px 0px;
}

.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;
}

.screen {
    display: flex;
    justify-content: space-between;
    padding: 18rpx 22rpx;
}
.screen .screen-left {
    display: flex;
}

.screen .picker-type image,
.screen .picker image {
    width: 48rpx;
    height: 48rpx;
}

.screen .picker-type text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - 24rpx);
}
.screen .picker-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    margin-right: 10rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    font-weight: 500;
    color: #c1c1c1;
    line-height: 56rpx;
    text-align: center;

    width: 221rpx;
    height: 65rpx;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 31rpx;
}

.screen .btn {
    width: 120rpx;
    height: 65rpx;
    line-height: 65rpx;
    background: #3a80e7;
    border-radius: 33rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}
.popup-content {
    background: #fff;
    height: 50vh;
    border-radius: 20px;
    margin-top: 30rpx;
}

.resource-list {
    padding: 0 30rpx;
}
.resource-list .resource-items {
    border-bottom: 1px solid #eaeaea;
    padding: 36rpx 0;
}
.resource-list .resource-items .userInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
}
.resource-list .resource-items .userInfo .name {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
}
.resource-list .resource-items .userInfo .status {
    font-size: 28rpx;
    font-weight: 500;
    color: #13c8bd;
}
.resource-list .resource-items .address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;
}
.resource-list .resource-items .address .grid {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
}
.resource-list .resource-items .address .distance {
    font-size: 26rpx;
    font-weight: 500;
    color: #c1c1c1;
}
.resource-list .resource-items .handle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resource-list .resource-items .handle .btn {
    background: #ffffff;
    border-width: 2rpx;
    border-style: solid;
    border-radius: 30rpx;
    width: 180rpx;
    height: 60rpx;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resource-list .resource-items .handle .btn image {
    flex: 0 0 30rpx;
    width: 30rpx;
    height: 30rpx;
    margin-right: 20rpx;
}
.resource-list .resource-items .handle .btn.btn-green {
    border-color: #13c8bd;
    color: #13c8bd;
}
.resource-list .resource-items .handle .btn.btn-orange {
    border-color: #ff783c;
    color: #ff783c;
}
.resource-list .resource-items .handle .btn.btn-blue {
    border-color: #3a80e7;
    color: #3a80e7;
}
</style>
