<template>
    <view>
        <view class="complete-info">
            <view class="content">
                <view class="personal-info">
                    <view class="basic-info">
                        <view class="item">
                            <view class="field">
                                <text class="must">*</text>
                                <view class="field-text">处理方式</view>
                            </view>
                            <view class="value">
                                <radio-group class="radio-group" @change="handleChangeType">
                                    <radio :checked="true" value="0" color="#4193fe" class="radio small-radio" style="font-size: 12px">回复</radio>
                                    <radio :checked="tabVal === '5'" value="5" color="#4193fe" class="radio small-radio" style="font-size: 12px">指派</radio>
                                    <radio :checked="tabVal === '6'" value="6" color="#4193fe" class="radio small-radio" style="font-size: 12px">完成并回复</radio>
                                </radio-group>
                            </view>
                        </view>
                        <view class="item">
                            <view class="field">
                                <text class="must">*</text>
                                <view class="field-text">事件分类</view>
                            </view>
                            <view class="value-dl" @tap="onOpen1">
                                <view class="di-name">{{ category ? category : '请选择' }}</view>
                                <image class="di-but" src="/static/images/right.png" mode="aspectFit" />
                            </view>
                        </view>

                        <view class="item" v-if="tabVal == 5">
                            <view class="field">
                                <text class="must">*</text>
                                <view class="field-text">处理部门</view>
                            </view>
                            <view class="value-dl" @tap="onOpen2">
                                <view :class="orgName ? 'di-name' : 'di-name1'">{{ orgName ? orgName : '请选择' }}</view>

                                <image class="di-but" src="/static/images/right.png" mode="aspectFit" />
                            </view>
                        </view>

                        <view class="add-issue">
                            <view class="issue-content">
                                <view class="item">
                                    <view class="field">
                                        <text class="must">*</text>
                                        <view class="field-text">{{ tabVal === '5' ? '转办意见' : '回复内容' }}</view>
                                    </view>
                                </view>
                                <textarea
                                    maxlength="500"
                                    :value="form.content"
                                    @blur="bindTextareaInput"
                                    @input="bindTextareaInput"
                                    @focus="bindTextareaFocus"
                                    placeholder="请输入事件描述(不超过500字)"
                                ></textarea>
                            </view>
                        </view>
                        <!-- 上传附件 -->
                        <view class="item" v-if="tabVal == 5 || tabVal == 6">
                            <view class="field">
                                <text class="must"></text>
                                <view class="field-text">附件</view>
                            </view>
                            <view>
                                <van-uploader :file-list="fileList" @delete="deleteFile" max-count="4" @after-read="afterRead" multiple />
                            </view>
                        </view>

                        <view class="item" v-if="tabVal == 0 || tabVal == 5" @tap="openCalendar1">
                            <view class="field">
                                <text class="must">*</text>
                                <view class="field-text">办结时限</view>
                            </view>
                            <view :class="'value flex ' + (form.timeLimit ? '' : 'gray')">
                                {{ form.timeLimit ? form.timeLimit : '请选择' }}
                                <van-icon name="arrow" />
                            </view>
                        </view>

                        <view class="item" v-if="tabVal == 5">
                            <view>
                                <van-checkbox-group @change="sendMsgChange" :value="form.sendMsgArray">
                                    <view class="flex">
                                        <van-checkbox name="1">短信通知部门负责人</van-checkbox>
                                    </view>
                                </van-checkbox-group>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="submit-button">
                <button @tap="submitEventReplyInfo" hover-class="hover-submit">保存</button>
            </view>
        </view>

        <van-popup :show="visible1" round position="bottom">
            <van-cascader v-if="visible1" :default-value="value1" title="事件分类" :options="casOptions" @close="onClose1" @finish="onConfirm1" :field-names="catField" />
        </van-popup>

        <van-popup :show="visible2" round position="bottom">
            <van-cascader
                v-if="visible2"
                :default-value="value2"
                title="处理部门"
                :options="orgOptions"
                @close="onClose2"
                @finish="onConfirm2"
                @change="onChange2"
                :field-names="orgField"
            />
        </van-popup>

        <wux-date-picker
            :visible="showDate"
            controlled
            mode="datetime"
            :value="currentDate"
            lang="zh_CN"
            :minDate="minDate"
            :maxDate="maxDate"
            @confirm="onConfirmDate"
            @cancel="onCloseDate"
        />
    </view>
</template>

<script>
import wuxDatePicker from '../../../../wxcomponents/dist/date-picker/index';
import { agencyGridDepttree, getCategoryTree, icEventOldReply } from '../../../../utils/statisticsApi';
const config = require('../../../../utils/config');
export default {
    components: {
        wuxDatePicker
    },
    data() {
        return {
            tabVal: '0',
            category: '',
            uploadImageList: [],

            //图片上传的数组
            visible1: false,

            visible2: false,
            orgOptions: [],
            casOptions: [],

            catField: {
                text: 'categoryName',
                value: 'id',
                children: 'children'
            },

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

            id: '',
            fileList: [],
            timeLimit: [],
            operationType: ['0'],
            categoryIds: '',
            currentDate: new Date().getTime(),
            minDate: new Date(2020, 0, 1).getTime(),
            maxDate: new Date(2030, 12, 31).getTime(),

            form: {
                operationType: '0',

                //处理方式[0:已回复 5、指派  6、完成并回复]
                content: '',

                //转办意见
                timeLimit: '',

                //办结时限
                categoryId: '',

                //事件分类
                deptId: '',

                //指派部门
                deptName: '',

                categoryList: [],
                files: [],

                //附件
                sendMsg: 1,

                // 这个存储选中值（整数1或0）
                // 默认选中，值为数组['1']
                sendMsgArray: ['1'],

                level: ''
            },

            categoryTreeData: [],
            orgName: '',
            showDate: false,
            showPopup: false,
            getData: '',
            value1: '',
            value2: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        if (options.id) {
            this.setData({
                id: options.id
            });
        }
        if (options.categoryIds) {
            this.setData({
                categoryIds: options.categoryIds
            });
        }
        this.getCategoryList();
        this.getOrgTreeList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        handleChangeType(e) {
            this.setData({
                tabVal: e.detail.value,
                'form.operationType': e.detail.value
            });
        },

        getCategoryList() {
            console.log('getCategoryList.......');
            let params = {};
            getCategoryTree(params).then((res) => {
                let treeDataNew = this.deepTree(res.data, 'children');
                // console.log('treeDataNew:'+JSON.stringify(treeDataNew))
                this.setData({
                    casOptions: this.deleteChildren(treeDataNew, 'children'),
                    categoryTreeData: treeDataNew
                });
                const ids = this.categoryIds.split(',');
                const categoryPath = this.getCategoryPath(treeDataNew, ids);
                console.log('ids:' + ids);
                console.log('categoryPath:' + categoryPath);
                this.setData({
                    casOptions: this.deleteChildren(treeDataNew, 'children'),
                    category: this.getCategoryPath(treeDataNew, ids)
                });
            });
        },

        getCategoryPath(tree, ids) {
            let path = [];
            const traverse = (node) => {
                // 如果当前节点的id在ids中，添加到路径数组
                if (ids.includes(node.id)) {
                    path.push(node.categoryName);

                    // 如果当前节点是最后一个id，返回路径
                    if (node.id === ids[ids.length - 1]) {
                        return true;
                    }
                }

                // 递归遍历子节点
                if (node.children) {
                    for (let child of node.children) {
                        if (traverse(child)) {
                            return true; // 找到路径后停止遍历
                        }
                    }
                }

                // 如果当前节点不匹配或者没有找到路径，从路径中移除该节点
                if (path[path.length - 1] === node.categoryName) {
                    path.pop();
                }
                return false;
            };

            // 遍历整个树结构，查找路径
            for (let node of tree) {
                if (traverse(node)) {
                    break; // 找到路径后停止遍历
                }
            }

            return path.join('/');
        },

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

        //重构树，去除网格
        deepTree(arr, children) {
            if (Array.isArray(arr) && arr.length > 0) {
                return arr.map((item) => {
                    return {
                        ...item,
                        [children]: (item[children] && item[children].length > 0 && this.deepTree(item[children], children)) || null
                    };
                });
            }
        },

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

        onOpen1() {
            this.setData({
                visible1: true
            });
        },

        onClose1() {
            this.setData({
                visible1: false
            });
            console.log('onClose1');
        },

        onConfirm1(e) {
            console.log('onConfirm1', e.detail);
            let data = e.detail;
            let params = data.selectedOptions[data.selectedOptions.length - 1];
            this.setData({
                'form.categoryId': params.id,
                'form.categoryList': {
                    ...params,
                    children: null
                },
                visible1: false
            });
            console.log('form.categoryId:' + this.form.categoryId);
            console.log('form.categoryList:' + JSON.stringify(this.form.categoryList));
            this.setData({
                category: data.selectedOptions.map((item) => item.categoryName).join('/')
            });
        },

        onOpen2() {
            this.setData({
                visible2: true
            });
        },

        onClose2() {
            this.setData({
                visible2: false
            });
        },

        onChange2(e) {
            let data = e.detail;
            let params = data.selectedOptions[data.selectedOptions.length - 1];
            this.setData({
                'form.deptId': params.agencyId,
                'form.deptName': params.agencyName,
                'form.level': params.level
            });
            this.setData({
                orgName: data.selectedOptions.map((item) => item.agencyName).join('/')
            });
        },

        onConfirm2(e) {
            let data = e.detail;
            let params = data.selectedOptions[data.selectedOptions.length - 1];
            this.setData({
                'form.deptId': params.agencyId,
                'form.deptName': params.agencyName,
                'form.level': params.level,
                visible2: false
            });
            this.setData({
                orgName: data.selectedOptions.map((item) => item.agencyName).join('/')
            });
        },

        afterRead(event) {
            const { file } = event.detail;
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            const files = Array.isArray(file) ? file : [file];
            files.forEach((fileItem) => {
                uni.uploadFile({
                    url: `${config.BASEURL()}oss/file/uploadvariedfile`,
                    name: 'file',
                    header: {
                        'Content-type': 'application/json;charset=UTF-8',
                        Authorization: uni.getStorageSync('token')
                    },
                    filePath: fileItem.url,
                    success: (res) => {
                        let data = JSON.parse(res.data);
                        console.log('data:' + JSON.stringify(fileItem));
                        const fileList = this.fileList;
                        fileList.push({
                            ...fileItem,
                            attachmentUrl: data.data.url,
                            attachmentName: fileItem.url.split('/').pop(),
                            attachmentFormat: fileItem.type,
                            attachmentType: fileItem.type
                        });
                        console.log(fileList);
                        this.setData({
                            fileList
                        });
                    }
                });
            });
        },

        deleteFile(e) {
            console.log(e);
            let index = e.detail.index;
            let fileList = this.fileList;
            fileList.splice(index, 1);
            this.setData({
                fileList
            });
        },

        openCalendar1() {
            console.log('openCalendar1.....');
            this.setData({
                showDate: true
            });
        },

        closePopup() {
            this.setData({
                showPopup: false
            });
        },

        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()
            }`;
        },

        onInput(event) {
            var date = new Date(event.detail);
            var year = date.getFullYear();
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var day = ('0' + date.getDate()).slice(-2);
            var hour = ('0' + date.getHours()).slice(-2);
            var minute = ('0' + date.getMinutes()).slice(-2);
            var second = ('0' + date.getSeconds()).slice(-2);
            var formattedDateTime = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
            this.setData({
                getData: formattedDateTime
            });
        },

        onConfirmDate(e) {
            this.setData({
                'form.timeLimit': e.detail.label + ':00',
                showDate: false
            });
        },

        // 双向绑定 内容输入框
        bindTextareaInput(e) {
            this.setData({
                'form.content': e.detail.value
            });
            console.log(this.fmData);
        },

        submitEventReplyInfo() {
            console.log('this.data.form:' + this.form.content);
            if (!this.category) {
                this.showToast('事件类型不能为空');
                return;
            }
            if (!this.form.content) {
                this.showToast('回复意见不能为空');
                return;
            }
            if (!this.form.timeLimit && (this.tabVal == 0 || this.tabVal == 5)) {
                this.showToast('办结时限不能为空');
                return;
            }
            if (!this.form.deptId && this.tabVal == 5) {
                this.showToast('指派部门不能为空');
                return;
            }
            let params = {
                ...this.form,
                files: this.fileList,
                icEventId: this.id,
                status: this.tabVal === '6' ? 'closed_case' : 'processing'
                // timeLimit: this.data.value1 && this.data.value1.length ? this.data.value1[0] : ""
            };

            icEventOldReply(params).then((res) => {
                uni.showToast({
                    icon: 'success',
                    title: '操作成功'
                });
                this.close();
            });
            console.log(params);
        },

        close() {
            this.$emit('close');
            setTimeout(() => {
                //返回上一级，关闭当前页面
                uni.navigateBack({
                    delta: 1
                });
            }, 1000); // 1000毫秒 = 1秒
        },

        // 代码简化，弹窗统一封装
        showToast(title) {
            uni.showToast({
                title: title,
                icon: 'none',
                duration: 2000
            });
        },

        sendMsgChange(e) {
            const selected = e.detail.length > 0; // 判断复选框是否选中
            this.setData({
                'form.sendMsg': selected ? 1 : 0,
                // 如果选中则值为1，否则为0
                'form.sendMsgArray': selected ? ['1'] : [] // 更新sendMsgArray
            });
        },

        bindTextareaFocus() {
            console.log('占位：函数 bindTextareaFocus 未声明');
        }
    }
};
</script>
<style>
page {
    width: 100%;
    height: auto;
    overflow-y: auto;
    background: #f7f7f7;
    padding-bottom: 20rpx;
    box-sizing: border-box;
}
.complete-info {
    width: 100%;
    height: 100%;
    background: #f7f7f7;
}

.content {
    width: 100%;
    min-height: calc(100vh - 500rpx);
}

.content-list {
    width: 100%;
    min-height: calc(100vh - 100rpx);
    margin-top: 100rpx;
    padding: 20rpx 20rpx 0rpx 20rpx;
    box-sizing: border-box;
}

/* 内容 */

.personal-info {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20rpx;
    overflow: hidden;
}

.basic-info {
    width: 100%;
    background: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    margin-top: 20rpx;
}

.border-bottom {
    border-bottom: 1rpx solid #eaeaea;
}
.no-border-bottom {
    border-bottom: 1rpx solid #fff !important;
}
.note {
    font-size: 22rpx;
    color: #999;
    line-height: 62rpx;
}

.add-issue {
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    box-sizing: border-box;
}

.add-issue .issue-content {
    width: 100%;
    height: auto;
    border-radius: 16rpx;
    background: #fff;
    box-sizing: border-box;
    /* padding: 0rpx 20rpx 45rpx; */
}
.add-issue .issue-content textarea {
    width: 100%;
    height: 298rpx;
    background-color: #f7f7f7;
    padding: 30rpx;
    font-size: 34rpx;
    color: #333;
    line-height: 50rpx;
    position: relative;
    box-sizing: border-box;
}
.add-issue .issue-content textarea .textarea-placeholder {
    font-size: 32rpx;
    color: #999;
    line-height: 50rpx;
    position: absolute;
    left: 0;
    top: 0;
}
/* ？？？？？？？？ */

.image-list {
    width: 100%;
    display: grid;
    grid-template-columns: 214rpx 214rpx 214rpx;
    grid-template-rows: 214rpx;
    grid-gap: 17rpx;
    height: 188rpx;
    margin-top: 60rpx;
}
.image-list-2 {
    height: 428rpx !important;
}
.image-list-3 {
    height: 642rpx !important;
}
.image-list-4 {
    height: 856rpx !important;
}
.image-list .image-item {
    width: 100%;
    height: 100%;
    position: relative;
}
.image-list image {
    /* width: 100%; */
    width: 180rpx;
    height: 180rpx;
    object-fit: cover;
    border-radius: 8rpx;
}
.image-list .image-item .loading {
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
}
.image-list .image-item .close {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 40rpx;
    height: 40rpx;
}
.add-issue .image-box {
    width: 100%;
    height: auto;
    border-radius: 16rpx;
    background: #fff;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 34rpx 24rpx;
    position: relative;
    /* display: flex;
    align-items: center; */
}
.image-box .image-list-label {
    position: absolute;
    top: 35rpx;
}
.yg-zp {
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
}
.yg-zp-1 {
    margin-top: 15rpx;
    font-size: 25rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #999;
}
.add-issue .image-box .add-icon {
    /* margin-top: 40rpx; */
    width: 80rpx;
    height: 80rpx;
    margin-right: 40rpx;
}
.sheet-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.6);
}

/* record start */
.record-actionsheet {
    height: 472rpx;
    width: 100%;
    background-color: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
    position: fixed;
    z-index: 999;
    bottom: 0;
    transition: all 0.2s linear;
}
.record-actionsheet-hide {
    bottom: -480rpx;
    transition: all 0.2s linear;
}
.record-actionsheet .top-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
}
.record-actionsheet .top-menu .button {
    width: 120rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
}
.record-actionsheet .top-menu .cancel {
    color: #5b5b5b;
}
.record-actionsheet .top-menu .confirm {
    color: #f61717;
}
.record-actionsheet .close-icon {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.record-actionsheet .close-icon image {
    width: 30rpx;
    height: 30rpx;
}
.record-actionsheet .text-status {
    color: #5b5b5b;
    text-align: center;
}
.record-actionsheet .status-icon {
    width: 100%;
    height: 210rpx;
    text-align: center;
    margin-top: 50rpx;
}
.record-actionsheet .status-icon .icon {
    width: 210rpx;
    height: 210rpx;
}
.record-actionsheet .text-tip {
    font-size: 26rpx;
    color: #9e9e9e;
    text-align: center;
}
/* record end */
.audio {
    width: 670rpx;
    height: 116rpx;
    background-color: #f3f3f3;
    border-radius: 10r;
    display: flex;
    position: relative;
    margin-top: 40rpx;
}
.audio .control-button {
    width: 100rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.audio .control-button image {
    width: 60rpx;
    height: 60rpx;
}
.audio .control-line {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.audio .control-line .control-slider {
    width: 500rpx;
    margin: 10rpx 36rpx;
}
.audio .control-line .line-time {
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.audio .control-line .line-time .time-text {
    color: #aaaaaa;
    font-size: 24rpx;
}
.audio .delete-audio {
    position: absolute;
    right: -20rpx;
    top: -20rpx;
}
.audio .delete-audio image {
    width: 60rpx;
    height: 60rpx;
}
/* audio end */

.add-issue .issue-location {
    width: 100%;
    height: 210rpx;
    border-radius: 16rpx;
    background: #fff;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 34rpx 18rpx 9rpx 25rpx;
}
.add-issue .issue-location {
    width: 100%;
    height: 210rpx;
    border-radius: 16rpx;
    background: #fff;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 34rpx 18rpx 9rpx 25rpx;
}
.add-issue .issue-location .address {
    width: 70%;
    height: 80rpx;
    display: flex;
    align-items: center;
}
.add-issue .issue-location textarea {
    width: 100%;
    height: 88rpx;
    color: #333;
    font-size: 34rpx;
    line-height: 46rpx;
}
.add-issue .issue-location .address-placeholder {
    font-size: 32rpx;
    color: #999;
}
.add-issue .issue-location .address image {
    width: 26rpx;
    height: 26rpx;
}
.add-issue .issue-location .address view {
    color: #999;
    font-size: 26rpx;
    margin-left: 14rpx;
}

/* 重新定位 */
.flexBox {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}
.refresh {
    margin-top: 20rpx;
    margin-left: 30rpx;
}
.refresh image {
    width: 34rpx;
    height: 34rpx;
    float: left;
    position: relative;
    top: 5rpx;
}

.refresh-name {
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(0, 179, 152, 1);
    float: left;
    margin-left: 10rpx;
}

.tip {
    margin-top: 20rpx;
    font-size: 22rpx;
    font-weight: 400;
    color: #bcbcbc;
}

.wux-actionsheet__button {
    font-size: 34rpx !important;
    color: #333 !important;
}

/* picker */
.item {
    border-bottom: 1rpx solid #e7eeee;
    padding: 25rpx 0;
    line-height: 60rpx;
    display: flex;
}
.item1 {
    padding: 25rpx 0;
    line-height: 60rpx;
    display: flex;
}
.field {
    position: relative;
    box-sizing: border-box;
    width: 180rpx;
    padding-left: 25rpx;
}

.field-d {
    width: 220rpx !important;
}
.value-d {
    width: 450rpx !important;
}
.field.mobile-field {
    width: 250rpx !important;
}
.field .must {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    color: #f61616;
    font-size: 30rpx;
}
.field .field-text {
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
}
.value {
    position: relative;
    width: 410rpx;
    display: flex;
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
    line-height: 60rpx;
}
.value-dl {
    position: relative;
    display: flex;
    font-size: 32rpx;
    color: #333;
    line-height: 60rpx;
    align-items: center;
    display: flex;
    justify-content: space-between;

    flex: 1;
}
.telInput {
    margin-left: 40rpx;
}

.di-name {
    margin-right: 14rpx;
    text-align: left;
    width: calc(100% - 30rpx);
    margin-left: 40rpx;
    font-family: 'PingFangSC-Regular', sans-serif;
}
.di-name1 {
    margin-right: 14rpx;
    text-align: left;
    width: calc(100% - 30rpx);
    margin-left: 40rpx;
    font-family: 'PingFangSC-Regular', sans-serif;
    color: #999;
}
.di-but {
    width: 30rpx;
    height: 34rpx;
}
.value input {
    text-align: right;
    font-size: 34rpx;
    color: #333;
    height: 100%;
    width: 100%;
}
.value .picker {
    position: relative;
    width: 100%;
    padding-right: 40rpx;
    text-align: right;
}
.value .picker .z-weak {
    color: #999;
}
.value .picker .menu-arrow {
    position: absolute;
    top: 20rpx;
    right: 0;
    width: 16rpx;
    height: 23rpx;
}
.value-mobile {
    position: relative;
    width: 410rpx;
    display: flex;
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
    line-height: 60rpx;
    display: flex;
    justify-content: flex-end;
    margin-left: 30rpx;
}
.value-mobile .get-code {
    padding: 0 15rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: linear-gradient(to right, #f40c0c, #ff4e4e);
    color: #fff;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin: 0;
    margin-left: 25rpx;
}
.value-mobile .button-hover {
    background: rgb(175, 1, 1);
}
.value-mobile input {
    text-align: right;
    font-size: 34rpx;
    color: #333;
    height: 100%;
    width: 55%;
}
.placeholder-style {
    font-size: 28rpx;
    color: #999;
}

.is-open {
    margin-top: 20rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 30rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    line-height: 30rpx;
}

.submit-button {
    width: 100%;
    height: 84rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80rpx 0 65rpx;
}
.submit-button button {
    height: 84rpx;
    line-height: 84rpx;
    width: 560rpx;
    padding: 0;
    text-align: center;
    color: #fff;
    font-size: 33rpx;
    border-radius: 84rpx;
    background: linear-gradient(to right, #82b4fd, #3e93fe);
}
/* .submit-button .hover-submit {
  background: rgb(175, 1, 1);
  } */

.radio-group {
    height: 100%;
    display: flex;
    align-items: center;
    color: #999;
    font-size: 28rpx;
    font-weight: 300;
}
.radio-group radio + radio {
    margin-left: 20rpx;
}

.small-radio {
    /* 确保文本不换行 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 如果文本过长，显示省略号 */
}

.tip_bg {
    position: absolute;
    overflow: hidden;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: auto;
    padding-bottom: 40rpx;
    box-sizing: border-box;
    /* background: rgba(0, 0, 0, 0.6); */
    background: #f7f7f7;
    /* display: flex;
    justify-content: center; */
}
/* 新样式 */
.tip-top {
    height: 433rpx;
    width: 100%;
}
.tip-top image {
    height: 433rpx;
    width: 100%;
}

.info-1 {
    width: 100%;
    /* margin-left: 20rpx; */
    height: auto;
    z-index: 9999;
    position: relative;
    margin-top: -20rpx;
    /* background: red; */
}

.info-2 {
    height: auto;
    width: calc(100% - 40rpx);
    margin-left: 20rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin-top: 20rpx;
    padding: 40rpx;
    box-sizing: border-box;
}

.info-2 .info-2-title {
    width: 100%;
    height: 54rpx;
}
.info-2 .info-2-title.top {
    margin-top: 54rpx;
}
.info-2 .info-2-name {
    font-size: 33rpx;
    font-weight: 800;
    color: #fefefe;
    line-height: 54rpx;
    position: absolute;
    margin-left: 24rpx;
}

.info-2 .info-2-title .tou {
    width: 380rpx;
    height: 54rpx;
}

.info-2 .info-2-info {
    margin-top: 38rpx;
    width: 100%;
    height: auto;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}
.list {
    display: flex;
}
.list-name {
    width: 40rpx;
}
.list-cont {
    width: calc(100% - 40rpx);
}
.end {
    /* position: absolute; */
    margin-top: 40rpx;
    width: 100%;
    height: 80rpx;
    bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.end .end-but {
    text-align: center;
    border-radius: 50rpx;
    width: 350rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    color: #fff;
}

.end .bg1 {
    background: #ffb2b5;
}
.end .bg2 {
    background: linear-gradient(to right, #f40f0f, #ff4c4c);
}

.info-1 image {
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
}

.info-1 .top-c {
    padding: 44rpx 40rpx;
    box-sizing: border-box;
    position: inherit;
    /* position: absolute; */
    z-index: 999;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
    z-index: 99;
    height: 285rpx;
}

/* end */
.tip-info {
    position: relative;
    border-radius: 10rpx;
    margin-top: 150rpx;
    z-index: 100;
    width: 80%;
    height: 950rpx;
    background: #fff;
    /* opacity: 1; */
}
.tip-info .title {
    padding: 30rpx 35rpx 10rpx 35rpx;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    line-height: 45rpx;
    font-size: 30rpx;
}

.tip-info .title .close {
    position: absolute;
    width: 60rpx;
    height: 60rpx;
    background: red;
    top: 10rpx;
    right: 20rpx;
}
.tip-info .tip-content {
    max-height: 650rpx;
    overflow-y: auto;
    width: 100%;
    height: auto;
    padding: 10rpx 30rpx;
    box-sizing: border-box;
}
.tip-info .tip-content .h1 {
    width: 100%;
    height: auto;
    font-size: 30rpx;
    line-height: 45rpx;
    font-weight: 600;
}
.tip-info .tip-content .h2 {
    width: 100%;
    height: auto;
    font-size: 26rpx;
    line-height: 45rpx;
}

.tip-info .tip-content .h3 {
    text-align: right;
    width: 100%;
    height: auto;
    font-size: 26rpx;
    line-height: 45rpx;
}

.sound-operate {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40rpx 0 30rpx 0;
}
.sound-operate-del,
.sound-operate-finish {
    width: 60rpx;
    height: 60rpx;
}
.sound-operate-del image,
.sound-operate-finish image {
    display: block;
    width: 100%;
    height: 100%;
}
.sound-operate-btn {
    margin: 0 60rpx;
}
.sound-circel {
    width: 160rpx;
    height: 160rpx;
    box-sizing: border-box;
    background: #e9f2fe;
    border-radius: 50%;
    overflow: hidden;
}
.sound-circle-bd {
    width: 124rpx;
    height: 124rpx;
    box-sizing: border-box;
    margin: 18rpx auto;
    border: 16rpx solid #5e9fff;
    background-color: #5e9fff;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.sound-circle-bg {
    background: #5d9fff;
}
@-webkit-keyframes list {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }

    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4);
    }
    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
}
@keyframes list {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }

    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4);
    }

    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
}
.sound-play {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.sound-cancle {
    padding: 20rpx;
    font-size: 24rpx;
    color: #999999;
    text-align: right;
}
.sound-wrapper {
    margin-top: 80rpx;
    font-family: Source Han Serif SC;
    font-weight: 500;
    text-align: center;
}
.sound-time {
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    color: #333333;
    line-height: 1;
    letter-spacing: 2rpx;
}
.sound-tips {
    font-size: 26rpx;
    color: #999999;
    text-align: center;
}

.sound-operate {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40rpx 0 30rpx 0;
}
.sound-operate-del,
.sound-operate-finish {
    width: 60rpx;
    height: 60rpx;
}

.sound-play .sound-play-item {
    background-color: #fff;
    width: 6rpx;
    height: 40rpx;
    border-radius: 6rpx;
    margin-right: 7rpx;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation: list 1s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
    -webkit-border-radius: 6rpx;
    -moz-border-radius: 6rpx;
    -ms-border-radius: 6rpx;
    -o-border-radius: 6rpx;
    -webkit-animation: list 1s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.sound-play .sound-play-item:nth-child(1) {
    -webkit-animation-delay: 0.1s !important;
    animation-delay: 0.1s !important;
}
.sound-play .sound-play-item:nth-child(2) {
    -webkit-animation-delay: 0.2s !important;
    animation-delay: 0.2s !important;
}
.sound-play .sound-play-item:nth-child(3) {
    -webkit-animation-delay: 0.3s !important;
    animation-delay: 0.3s !important;
}
.sound-play .sound-play-item:nth-child(4) {
    -webkit-animation-delay: 0.4s !important;
    animation-delay: 0.4s !important;
}
.sound-play-stop .sound-play-item {
    animation-play-state: paused;
}
.mkf-img {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 26rpx;
    font-family: PingFang SC;
    margin-top: 34rpx;
}
.mkf-img image {
    width: 46rpx;
    height: 46rpx;
    margin-right: 9rpx;
}
.audio-play {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90rpx;
    margin-top: 20rpx;
    border-radius: 20rpx;
}
.audio-play image {
    width: 44rpx;
    height: 44rpx;
}
.audio-play .audio-play-left {
    flex: 1;
    height: 100%;
    box-shadow: 1rpx 4rpx 20rpx 0rpx rgba(237, 237, 237, 0.89);
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-right: 21rpx;
}
.backC {
    background-color: #fff;
}
.audio-play .audio-play-left .audio-slider {
    width: 386rpx;
    margin: 0 auto;
}

.bto_btn {
    display: flex;
    margin-top: 20rpx;
    padding: 0 20rpx 30rpx;
}
.btn_blue,
.btn_yellow,
.btn_red {
    border-radius: 55rpx;
    box-sizing: border-box;
    color: #fff;
    width: fit-content;
    padding: 0rpx 80rpx;
    font-size: 23rpx;
    font-family: PingFang SC;
    font-weight: bold;
}

.btn_blue {
    background: linear-gradient(87deg, #81b5fb 0%, #3e92ff 100%);
}

.btn_yellow {
    margin-left: 20rpx !important;
    background: linear-gradient(87deg, #ecab8d 0%, #ecab8d 100%);
}

.btn_red {
    background: linear-gradient(87deg, #f1560e 0%, #f1560e 100%);
}

.flex {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
}

.popup-content {
    max-height: 60vh;
}
.popup-content .card {
    border-radius: 20px;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 30rpx;
}
</style>
