<template>
    <view>
        <wux-popup position="center" :visible="visible" @close="close" closable>
            <view class="popup-container">
                <view class="title">资源信息卡</view>
                <view class="popup-content">
                    <view class="items">
                        <view class="label">资源类型：</view>
                        <view class="value">{{ typeList[type] }}</view>
                    </view>
                    <block v-if="type === 2">
                        <view class="items">
                            <view class="label">单位名称：</view>
                            <view class="value">{{ detail.unitName }}</view>
                        </view>
                        <view class="items">
                            <view class="label">分类：</view>
                            <view class="value">{{ detail.typeName }}</view>
                        </view>
                        <view class="items">
                            <view class="label">服务事项：</view>
                            <view class="value">{{ detail.serviceMatterNameList }}</view>
                        </view>
                        <view class="items">
                            <view class="label">联系人：</view>
                            <view class="value">{{ detail.contact }}</view>
                        </view>
                        <view class="items">
                            <view class="label">联系电话：</view>
                            <view class="value">{{ detail.contactMobile }}</view>
                        </view>
                        <view class="items">
                            <view class="label">地理位置：</view>
                            <view class="value">{{ detail.address }}</view>
                        </view>
                    </block>
                    <block v-if="type === 3">
                        <view class="items">
                            <view class="label">组织名称：</view>
                            <view class="value">{{ detail.organizationName }}</view>
                        </view>
                        <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.serviceItem }}</view>
                        </view>
                        <view class="items">
                            <view class="label">联系人：</view>
                            <view class="value">{{ detail.principalName }}</view>
                        </view>
                        <view class="items">
                            <view class="label">联系电话：</view>
                            <view class="value">{{ detail.principalPhone }}</view>
                        </view>
                        <view class="items">
                            <view class="label">地理位置：</view>
                            <view class="value">{{ detail.address }}</view>
                        </view>
                    </block>

                    <block v-if="type === 4">
                        <view class="items">
                            <view class="label">姓名：</view>
                            <view class="value">{{ detail.name }}</view>
                        </view>

                        <view class="items">
                            <view class="label">联系电话：</view>
                            <view class="value">{{ detail.mobile }}</view>
                        </view>

                        <view class="items">
                            <view class="label">证件号：</view>
                            <view class="value">{{ detail.idCard }}</view>
                        </view>
                        <view class="items">
                            <view class="label">组织/部门：</view>
                            <view class="value">{{ detail.orgName }}</view>
                        </view>
                        <view class="items">
                            <view class="label">职位：</view>
                            <view class="value">
                                <text v-for="(item, index) in detail.szsqRoles" :key="index">
                                    {{ item }}

                                    <text v-if="index < detail.szsqRoles.length - 1">、</text>
                                </text>
                            </view>
                        </view>
                    </block>

                    <block v-if="type === 5 || type === 1">
                        <view class="items">
                            <view class="label">姓名：</view>
                            <view class="value">{{ detail.name }}</view>
                        </view>

                        <view class="items">
                            <view class="label">联系电话：</view>
                            <view class="value">{{ detail.mobile }}</view>
                        </view>

                        <view class="items">
                            <view class="label">年龄：</view>
                            <view class="value">{{ detail.age }}</view>
                        </view>
                        <view class="items">
                            <view class="label">学历：</view>
                            <view class="value">{{ education ? education.cultureLevelName : '' }}</view>
                        </view>

                        <!--            <view class="items">
                              <view class="label">状态：</view>
                              <view class="value">巡查中</view>
                            </view>-->

                        <view class="items">
                            <view class="label">所在位置：</view>
                            <view class="value">{{ detail && detail.houseInfo && detail.houseInfo.homeName ? detail.houseInfo.homeName : '' }}</view>
                        </view>
                        <view class="items">
                            <view class="label">兴趣爱好：</view>
                            <view class="value">{{ hobby && hobby.hobbyRemark ? hobby.hobbyRemark : '' }}</view>
                        </view>
                    </block>
                </view>
            </view>
        </wux-popup>
    </view>
</template>

<script>
// import wuxPopup from '../dist/popup/index';
import {
    communitySelfOrgDetail,
    getServiceTypeRelationByHobbyCode,
    icpartyunitDetail,
    residentEduInfo,
    residentHobbyInfo,
    staffdetailv2,
    volunteerDetail
} from '../../utils/statisticsApi';
export default {
    components: {
        wuxPopup
    },
    data() {
        return {
            detail: {
                unitName: '',
                typeName: '',
                serviceMatterNameList: '',
                contact: '',
                contactMobile: '',
                address: '',
                organizationName: '',
                categoryName: '',
                serviceItem: '',
                principalName: '',
                principalPhone: '',
                name: '',
                mobile: '',
                idCard: '',
                orgName: '',
                szsqRoles: [],
                age: '',

                houseInfo: {
                    homeName: ''
                }
            },
            education: {
                cultureLevelName: ''
            },
            hobby: {
                hobbyRemark: ''
            },
            typeList: {
                1: '志愿者',
                2: '联建单位',
                3: '社区自组织',
                4: '网格员',
                5: '公益岗'
            },
            id: '',
            type: '',
            rowData: ''
        };
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default: () => {}
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready: function () {},

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

        getData(type) {
            if (type === 1) {
                this.getVolunteer();
            }
            if (type === 2) {
                this.getCompany();
            }
            if (type === 3) {
                this.getCommunity();
            }
            if (type === 4) {
                this.getGridOperator();
            }
            if (type === 5) {
                this.getVolunteer();
            }
        },

        getAgeByDateOfBirth(birthDate) {
            var currentDate = new Date();
            var yearDiff = currentDate.getFullYear() - birthDate.getFullYear();
            var monthDiff = currentDate.getMonth() - birthDate.getMonth();
            var dayDiff = currentDate.getDate() - birthDate.getDate();
            if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
                yearDiff--;
            }
            console.log(yearDiff, 'yearDiff');
            return yearDiff;
        },

        // 志愿者 公益岗
        getVolunteer() {
            volunteerDetail(this.id).then(({ data }) => {
                data.age = data.birthday ? this.getAgeByDateOfBirth(new Date(data.birthday)) : '未知';
                this.setData({
                    detail: data || {}
                });
            });
            residentEduInfo(this.id).then(({ data }) => {
                this.setData({
                    education: data || {}
                });
            });
            residentHobbyInfo(this.id).then(({ data }) => {
                this.setData({
                    hobby: data || {}
                });
            });
        },

        // 单位
        getCompany() {
            icpartyunitDetail({
                id: this.id
            }).then(({ data }) => {
                data.serviceMatterNameList = data.serviceMatterNameList ? data.serviceMatterNameList.join('、') : '';
                this.setData({
                    detail: data || {}
                });
            });
        },

        // 社区
        getCommunity() {
            communitySelfOrgDetail(this.id).then(({ data }) => {
                this.setData({
                    detail: data || {}
                });
            });
        },

        // 网格
        getGridOperator() {
            staffdetailv2({
                staffId: this.id
            }).then(({ data }) => {
                this.setData({
                    detail: data || {}
                });
            });
        }
    },
    created: function () {},
    watch: {
        data: {
            handler: function ({ id, type, data }) {
                console.log(id, type, data);
                this.setData({
                    id,
                    type,
                    rowData: data
                });
                this.getData(type);
            },

            immediate: true,
            deep: true
        }
    }
};
</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-content {
    background: #fff;
    border-radius: 20px;
    padding: 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;
    min-width: 160rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tel {
    width: 126rpx;
    height: 62rpx;
    position: absolute;
    top: calc(50% - 31rpx);
    right: 0;
}
</style>
