<template>
    <view class="page-css">
        <view class="info">
            <view class="info_title">基本信息</view>
            <view class="info_item">
                <text class="item_left_txt">单位名称：</text>
                <text class="item_right_txt">{{ detailForm.deptName }}</text>
            </view>
            <view class="info_item">
                <text class="item_left_txt">巡检内容：</text>
                <text class="item_right_txt">{{ detailForm.taskContent }}</text>
            </view>
        </view>
        <view class="info">
            <view class="info_title">巡检配置</view>
            <u-form labelPosition="left" ref="sendOrderForm" :model="detailForm" :label-width="200" class="repair_form">
                <u-form-item label="巡检内容:" prop="dispatchTime" :border-bottom="false">
                    <betone-new-input label="" v-model="detailForm.taskContent" placeholder="" :disabled="true" />
                </u-form-item>
                <u-form-item label="任务开始时间:" prop="dispatchTime" :border-bottom="false">
                    <betone-new-input label="" v-model="detailForm.startTime" placeholder="" :disabled="true" />
                </u-form-item>
                <u-form-item label="预约上门时间:" prop="customerOpinion" :border-bottom="false">
                    <u-input v-if="reservationDisabled" v-model="reservationTime" type="select"
                        @click="calendarShow = true" :border="true" placeholder="请选择时间" />
                    <view v-else>{{ detailForm.reservationTime }}</view>
                </u-form-item>
            </u-form>
        </view>
        <!-- 巡检任务 只查看-->
        <view class="info" v-if="reservationDisabled">
            <view class="info_title">巡检任务</view>
            <u-collapse :accordion="false">
                <u-collapse-item v-for="(item, index) in detailForm.details" :key="index">
                    <view slot="title">
                        <text class="collapse-title">实验室楼层：{{ item.floorName }}</text>
                    </view>
                    <view v-for="(v, vindex) in item.details" :key="vindex" class="collapse-room">
                        <view>房间名称：{{ v.deptName }}</view>
                        <view v-for="(s, sindex) in v.details" :key="sindex" class="n-box">
                            <u-tag :text="sindex + 1" type="info" class="left-tag" />
                            <view class="info_item">
                                <text class="item_left_txt">设备：</text>
                                <text class="item_right_txt">
                                    {{ s.deviceName }}
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">巡检内容：</text>
                                <text class="item_right_txt">
                                    {{ s.checkContent }}
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">工艺要求：</text>
                                <text class="item_right_txt">
                                    {{ s.craft }}
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">巡检周期：</text>
                                <text class="item_right_txt">
                                    {{ periodName(s.period) }}
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">开始时间：</text>
                                <text class="item_right_txt">
                                    {{ s.startTime }}
                                </text>
                            </view>
                        </view>
                    </view>
                </u-collapse-item>
            </u-collapse>
        </view>
        <!-- 填写内容 -->
        <view class="info" v-if="!reservationDisabled">
            <view class="info_title">巡检任务</view>
            <u-collapse :accordion="false">
                <u-collapse-item v-for="(item, index) in detailForm.details" :key="index">
                    <view slot="title">
                        <text class="collapse-title">实验室楼层：{{ item.floorName }}</text>
                    </view>
                    <view v-for="(v, vindex) in item.details" :key="vindex" class="collapse-room">
                        <view>房间名称：{{ v.deptName }}</view>
                        <view v-for="(s, sindex) in v.details" :key="sindex" class="n-box">
                            <u-tag :text="sindex + 1" type="info" class="left-tag" />
                            <!-- <u-tag text="已检" type="success" class="right-tag" /> -->
                            <view class="n-box-title"> {{ s.checkContent }}</view>
                            <view class="n-box-info"> {{ s.craft }}</view>
                            <view class="info_item">
                                <text class="item_left_txt">状态：</text>
                                <text class="item_right_txt">
                                    <u-radio-group v-model="s.status">
                                        <u-radio name="0">正常</u-radio>
                                        <u-radio name="1">异常</u-radio>
                                    </u-radio-group>

                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">现场照片：</text>
                                <text class="item_right_txt" v-if="s.picUrl == ''">

                                    <view class="btn" @click="uploadImg(index, vindex, sindex)">上传照片</view>
                                </text>
                                <text class="item_right_txt" v-else>
                                    <image @click="uploadImg(index, vindex, sindex)" class="item_right_img"
                                        :src="s.picUrl"></image>
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">使用人签字：</text>
                                <text class="item_right_txt">
                                    <betone-new-input v-model="s.signUrl" :placeholder="'请输入'"></betone-new-input>
                                    <!-- <image v-if="s.qianzi" :src="s.qianzi" style="width: 144px;height: 77rpx;"
                                        mode="widthFix" @click="toPop1(index, vindex, sindex)"></image>
                                    <view v-else class="btn" @click="toPop1(index, vindex, sindex)">签字</view> -->
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">备注：</text>
                                <text class="item_right_txt">
                                    <betone-new-input v-model="s.remark" type="textarea"
                                        :placeholder="'请输入'"></betone-new-input>
                                </text>
                            </view>
                            <!-- v-if="dataTypes == 4 && detailForm.repairStatus == 1" -->
                            <view class="info_item">
                                <text class="item_left_txt">价格：</text>
                                <text class="item_right_txt">
                                    <u-input v-model="s.price" type="number" :border="true" />
                                </text>
                            </view>
                            <view class="info_item" v-if="dataTypes == 1 && detailForm.repairStatus == 3">
                                <text class="item_left_txt">是否维修：</text>
                                <text class="item_right_txt">
                                    <u-radio-group v-model="s.isRepair">
                                        <u-radio name="1">是</u-radio>
                                        <u-radio name="0">否</u-radio>
                                    </u-radio-group>
                                </text>
                            </view>
                        </view>
                    </view>
                </u-collapse-item>
            </u-collapse>
        </view>
        <!-- 客户巡检任务  确认审批 -->
        <view class="info" v-if="dataTypes == 1 && detailForm.taskStatus == 3">
            <view class="info_title">巡检确认</view>
            <u-form labelPosition="left" ref="repairInfoForm" :model="approveInfo" :label-width="140"
                class="repair_form">
                <u-form-item label="结果:" prop="reportPeople" :border-bottom="false">
                    <betone-input-picker :label="''" :pickerData="approveType" :mode="'selector'" :keyName="'text'"
                        @changeSelect="changeApproveResult" v-model="approveInfo.approveText"></betone-input-picker>

                </u-form-item>
                <u-form-item label="意见:" prop="reportPeople" :border-bottom="false"
                    v-if="approveInfo.approveText == '未完成'">
                    <betone-new-input label="" v-model="approveInfo.approveRemark" placeholder="请输入" type="textarea"
                        :height="120" />
                </u-form-item>
            </u-form>
        </view>
        <!-- 维修负责人  巡检维修方案审批 -->
        <view class="info" v-if="dataTypes == 3 && detailForm.repairStatus == 2">
            <view class="info_title">维修方案审批</view>
            <u-form labelPosition="left" ref="repairInfoForm" :model="repairApproveInfo" :label-width="140"
                class="repair_form">
                <u-form-item label="审批结果:" prop="reportPeople" :border-bottom="false">
                    <betone-input-picker :label="''" :pickerData="repairApproveType" :mode="'selector'"
                        :keyName="'text'" @changeSelect="changeRepairApproveResult"
                        v-model="repairApproveInfo.approveText"></betone-input-picker>

                </u-form-item>
                <u-form-item label="审批意见:" prop="reportPeople" :border-bottom="false"
                    v-if="repairApproveInfo.approveText == '驳回'">
                    <betone-new-input label="" v-model="repairApproveInfo.approveRemark" placeholder="请输入"
                        type="textarea" :height="120" />
                </u-form-item>
            </u-form>
        </view>


        <view class="info" v-if="dataTypes == 1 && detailForm.repairStatus == 3">
            <view class="info_title">客户确认</view>
            <u-form labelPosition="left" ref="repairInfoForm" :model="customerApproveInfo" :label-width="140"
                class="repair_form">
                <u-form-item label="审批结果:" prop="reportPeople" :border-bottom="false">
                    <betone-input-picker :label="''" :pickerData="repairApproveType" :mode="'selector'"
                        :keyName="'text'" @changeSelect="changeCustomerApproveResult"
                        v-model="customerApproveInfo.approveText"></betone-input-picker>

                </u-form-item>
                <u-form-item label="审批意见:" prop="reportPeople" :border-bottom="false"
                    v-if="customerApproveInfo.approveText == '驳回'">
                    <betone-new-input label="" v-model="customerApproveInfo.approveRemark" placeholder="请输入"
                        type="textarea" :height="120" />
                </u-form-item>
            </u-form>
        </view>
        <!-- 维修人员接收任务单 -->
        <view class="repair-btn" style="margin-right: 32rpx;width:100%"
            v-if="dataTypes == 4 && detailForm.taskStatus == 1">
            <u-button size="medium" @click="endOrderCancel()">取消</u-button>
            <u-button size="medium" type="primary" @click="receiveQuest()">接单</u-button>
        </view>

        <!-- 维修人员提交巡检详情 -->
        <view class="repair-btn" style="margin-right: 32rpx;width:100%"
            v-if="dataTypes == 4 && detailForm.taskStatus == 2">
            <u-button size="medium" @click="endOrderCancel()">取消</u-button>
            <u-button size="medium" type="primary" @click="submitQuest()">提交</u-button>
        </view>
        <!-- 客户  确认巡检任务是否完成提交 -->
        <view class="repair-btn" style="margin-right: 32rpx;width:100%"
            v-if="dataTypes == 1 && detailForm.taskStatus == 3">
            <u-button size="medium" @click="endOrderCancel()">取消</u-button>
            <u-button size="medium" type="primary" @click="customerQuest()">提交</u-button>
        </view>

        <!-- 维修人员   提交维修方案 -->
        <view class="repair-btn" style="margin-right: 32rpx;width:100%"
            v-if="dataTypes == 4 && detailForm.repairStatus == 1">
            <u-button size="medium" @click="endOrderCancel()">取消</u-button>
            <u-button size="medium" type="primary" @click="solutionSubmit()">提交方案</u-button>
        </view>
        <!-- 维修主管审批 巡检  维修方案 -->
        <view class="repair-btn" style="margin-right: 32rpx;width:100%"
            v-if="dataTypes == 3 && detailForm.repairStatus == 2">
            <u-button size="medium" @click="endOrderCancel()">取消</u-button>
            <u-button size="medium" type="primary" @click="repairApproveSubmit()">提交</u-button>
        </view>
        <!-- 客户审批 巡检  维修方案  确认是否维修-->
        <view class="repair-btn" style="margin-right: 32rpx;width:100%"
            v-if="dataTypes == 1 && detailForm.repairStatus == 3">
            <u-button size="medium" @click="endOrderCancel()">取消</u-button>
            <u-button size="medium" type="primary" @click="customerApproveSubmit()">提交</u-button>
        </view>

        <u-calendar v-model="calendarShow" mode="date" @change="calendarChange" :min-date="minDate"
            :max-date="maxDate"></u-calendar>

        <betone-loading ref="BetLoading" />
    </view>
</template>
<script>
import website from '@/utils/website'
import { dateFormat } from '@/utils/util.js'
export default {

    computed: {
        dataTypes() {
            return this.$store.state.dataType
        },
        reservationDisabled() {
            return (this.dataTypes == 4 && this.detailForm.taskStatus == 1) || (this.type == 'view') ? true : false
        },

    },
    data() {
        return {
            detailForm: {},
            orderId: '',//巡检任务id
            detailsType: '',//详情类型
            optionsType: '',//可操作类型
            reservationTime: '',//预约上门时间
            minDate: null,
            maxDate: null,
            calendarShow: false,//预约时间
            collapseData: [],
            approveInfo: {//维修负责人审批
                approvePerson: '',//审批人 id
                approveRemark: '',//审批备注
                approveResult: null,//1通过  0驳回
                approveText: '',//展示内容
                approveTime: '',//当前时间
            },
            approveType: [
                {
                    text: '已完成',
                    value: 1
                },
                {
                    text: '未完成',
                    value: 0
                },
            ],
            repairApproveInfo: {
                approvePerson: '',//审批人 id
                approveRemark: '',//审批备注
                approveResult: null,//1通过  0驳回
                approveText: '',//展示内容
                approveTime: '',//当前时间
            },
            repairApproveType: [
                {
                    text: '通过',
                    value: 1
                },
                {
                    text: '驳回',
                    value: 0
                },
            ],

            customerApproveInfo: {
                approvePerson: '',//审批人 id
                approveRemark: '',//审批备注
                approveResult: null,//1通过  0驳回
                approveText: '',//展示内容
                approveTime: '',//当前时间
            }
        }
    },
    onLoad(options) {
        this.optionsType = options.type
        this.orderId = options.id
        this.detailsType = options.details
        this.getDetails()
        this.initDate()
        this.userInfo = uni.getStorageSync("userinfo");
    },
    methods: {
        getDetails() {
            let query = {
                id: this.orderId
            }
            if (this.detailsType == 'task') {
                this.$u.api.getTaskDetail(query).then(res => {
                    if (res.code == 200) {
                        this.detailForm = res.data
                        this.collapseData = JSON.parse(JSON.stringify(res.data.details))
                    }
                })
            } else {
                this.$u.api.getRepairDetail(query).then(res => {
                    if (res.code == 200) {
                        this.detailForm = res.data
                        this.collapseData = JSON.parse(JSON.stringify(res.data.details))
                    }
                })
            }

        },
        endOrderCancel() {
            uni.navigateBack({
                delta: 1 // 默认值是1，表示回退一个页面
            })
        },
        // 维修人员接收
        receiveQuest() {
            let query = {
                id: this.detailForm.id
            }
            if (this.reservationTime == '') {
                uni.showToast({ title: "请选择上门时间", icon: "none" });
                return false
            }
            // // 接收成功之后更新上门时间
            this.$u.api.taskServicemanreceive(query).then(res => {
                if (res.code == 200) {
                    let query_ = {
                        id: this.detailForm.id,
                        reservationTime: this.reservationTime
                    }
                    this.$u.api.taskServicemanUpdateTime(query_).then(res => {
                        uni.showToast({ title: "接单成功", icon: "none" });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1 // 默认值是1，表示回退一个页面
                            })
                        }, 500)
                    })

                }
            })
        },
        uploadImg(index, vindex, sindex) {
            uni.chooseImage({
                count: 1, // 默认9
                sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                    this.BetLoading.show()
                    // 成功选择图片后的回调
                    const tempFilePaths = res.tempFilePaths;
                    this.uploadFile(tempFilePaths[0], index, vindex, sindex);
                },
            });
        },
        uploadFile(filePath, index, vindex, sindex) {
            const token = uni.getStorageSync("token")
            uni.uploadFile({
                url: website.baseUrl + "/blade-resource/oss/endpoint/put-file", // 服务器上传接口
                filePath: filePath,
                name: "file", // 必须填写，后台用来接收文件
                header: {
                    'Blade-Auth': 'bearer ' + token,
                    'Authorization': `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
                    'blade-requested-with': 'BladeHttpRequest' //自定义请求头
                },
                formData: {},
                success: (res) => {
                    let info = JSON.parse(res.data);
                    console.log("上传成功", info); // 上传成功后的操作
                    this.detailForm.details[index].details[vindex].details[sindex].picUrl = info.data.link
                    this.BetLoading.hide()
                },
                error: (uploadFileRes) => {
                    this.BetLoading.hide()
                },
            });
        },
        // 维修人员提交明细 
        submitQuest() {
            let newArr = this.handleData(this.detailForm.details)
            let status = newArr.every((item) => {
                return item.status != null
            })
            let signUrl = newArr.every((item) => {
                return item.signUrl !== ''
            })

            if (!status) {
                uni.showToast({ title: "请选择设备状态", icon: "none" });
                return false
            }
            if (!signUrl) {
                uni.showToast({ title: "请填写使用人", icon: "none" });
                return false
            }
            let queryData = []
            newArr.forEach(item => {
                // item.id=this.detailForm.id
                queryData.push({
                    id: this.detailForm.id,
                    status: item.status,
                    signUrl: item.signUrl,
                    remark: item.remark
                })
            })
            this.$u.api.updateDetaile(queryData).then(res => {
                if (res.code == 200) {
                    let query = {
                        id: this.detailForm.id,
                    }
                    this.$u.api.taskServicemanSubmit(query).then(res => {
                        if (res.code == 200) {
                            uni.showToast({ title: "提交成功", icon: "none" });
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 1 // 默认值是1，表示回退一个页面
                                })
                            }, 500)
                        }
                    })
                }
            })
        },
        // 客户确认巡检任务
        changeApproveResult(e) {
            this.approveInfo.approveText = this.approveType[e].text
            this.approveInfo.approveResult = this.approveType[e].value
        },
        customerQuest() {
            if (this.approveInfo.approveResult == null) {
                uni.showToast({ title: "请选择确认结果", icon: "none" });
                return false
            }
            if (this.approveInfo.approveResult == 0 && this.approveInfo.approveRemark == '') {
                uni.showToast({ title: "请填写未完成原因", icon: "none" });
                return false
            }
            if (this.approveInfo.approveResult == 1) {
                let query = {
                    id: this.detailForm.id
                }
                this.$u.api.taskCustomerConfirm(query).then(res => {
                    if (res.code == 200) {
                        uni.showToast({ title: "确认成功", icon: "none" });
                        setTimeout(() => {
                            this.endOrderCancel()
                        }, 500)
                    }
                })
            } else {
                let query = {
                    id: this.detailForm.id,
                    approvePerson: this.userInfo.user_id,
                    appproveResult: this.approveInfo.approveResult,
                    approveTime: dateFormat("yyyy-MM-dd hh:mm:ss", new Date()),//当前时间
                    approveRemark: this.approveInfo.approveRemark,//审批备注
                }
                this.$u.api.taskCustomerRefuse(query).then(res => {
                    if (res.code == 200) {
                        uni.showToast({ title: "确认成功", icon: "none" });
                        this.submitTaskShow = false
                        // 指派成功   刷新列表
                        this.getRecordsList()
                    }
                })
            }
        },

        // 提交
        solutionSubmit() {
            let newArr = this.handleData(this.detailForm.details)
            let price = newArr.every((item) => {
                return item.price > 0
            })
            if (!price) {
                uni.showToast({ title: "请填写正确的维修价格", icon: "none" });
                return false
            }
            // let queryData = []
            let query_ = {
                task: { id: this.detailForm.id },
                detailList: newArr,
            }
            this.$u.api.taskSolutionSave(query_).then(res => {
                if (res.code == 200) {
                    let query = {
                        id: this.detailForm.id,
                    }
                    this.$u.api.taskSolutionSubmit(query).then(res => {
                        if (res.code == 200) {
                            uni.showToast({ title: "提交成功", icon: "none" });
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 1 // 默认值是1，表示回退一个页面
                                })
                            }, 500)
                        }
                    })
                }
            })
        },

        // 维修主管审批
        changeRepairApproveResult(e) {
            this.repairApproveInfo.approveText = this.repairApproveType[e].text
            this.repairApproveInfo.approveResult = this.repairApproveType[e].value
        },
        // 主管审批
        repairApproveSubmit() {
            if (this.repairApproveInfo.approveResult == 1) {//通过
                let query = {
                    id: this.detailForm.id
                }
                this.$u.api.repairSolutionSupervisor(query).then(res => {
                    if (res.code == 200) {
                        uni.showToast({ title: "审批成功", icon: "none" });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1 // 默认值是1，表示回退一个页面
                            })
                        }, 500)
                    }
                })
            } else {//驳回
                let query_ = {
                    id: this.detailForm.id,
                    approvePerson: this.userInfo.user_id,
                    appproveResult: this.repairApproveInfo.approveResult,
                    approveTime: dateFormat("yyyy-MM-dd hh:mm:ss", new Date()),//当前时间
                    approveRemark: this.repairApproveInfo.approveRemark,//审批备注
                }
                this.$u.api.repairSolutionRefuse(query_).then(res => {
                    if (res.code == 200) {
                        uni.showToast({ title: "审批成功", icon: "none" });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1 // 默认值是1，表示回退一个页面
                            })
                        }, 500)
                    }
                })
            }
        },
        // 客户  审批
        changeCustomerApproveResult(e) {
            this.customerApproveInfo.approveText = this.repairApproveType[e].text
            this.customerApproveInfo.approveResult = this.repairApproveType[e].value
        },
        // 客户  确认维修方案 
        customerApproveSubmit() {
            let newArr = this.handleData(this.detailForm.details)
            let isRepair = newArr.every((item) => {
                return item.isRepair == -1
            })
            if (isRepair) {
                uni.showToast({ title: "请选择异常设备是否维修", icon: "none" });
                return false
            }
            if (this.customerApproveInfo.approveResult == null) {
                uni.showToast({ title: "请选择审核结果", icon: "none" });
                return false
            }
            if (this.customerApproveInfo.approveResult == 0 && this.customerApproveInfo.approveRemark == '') {
                uni.showToast({ title: "请填写驳回原因", icon: "none" });
                return false
            }

            if (this.customerApproveInfo.approveResult == 1) {//通过
                let query = {
                    task: {
                        id: this.detailForm.id
                    },
                    detailList: newArr
                }
                console.log(query)
                this.$u.api.repairSolutionCustomer(query).then(res => {
                    if (res.code == 200) {
                        uni.showToast({ title: "审核成功", icon: "none" });
                        setTimeout(() => {
                            this.endOrderCancel()
                        }, 500)
                    }
                })
            } else {//驳回
                let query_ = {
                    id: this.detailForm.id,
                    approvePerson: this.userInfo.user_id,
                    appproveResult: this.customerApproveInfo.approveResult,
                    approveTime: dateFormat("yyyy-MM-dd hh:mm:ss", new Date()),//当前时间
                    approveRemark: this.customerApproveInfo.approveRemark,//审批备注
                }
                // this.$u.api.repairCustomerRefuse(query_).then(res => {
                //     if (res.code == 200) {
                //         uni.showToast({ title: "审核成功", icon: "none" });
                //         setTimeout(() => {
                //             this.endOrderCancel()
                //         }, 500)
                //     }
                // })
            }

        },
        // 处理提交明细的数据
        handleData(arr) {
            let result = [];
            arr.forEach(subArray => {

                if (Array.isArray(subArray.details)) {
                    subArray.details.forEach(item => {

                        if (Array.isArray(item.details)) {
                            item.details.forEach(v => {
                                result = result.concat(v);
                            })
                            // 
                        } else {
                            result.push(item);
                        }
                    });
                }
            });
            return result;
        },
        // 巡检周期
        periodName(value) {
            if (value == 1) {
                return '月'
            }
            if (value == 2) {
                return '季度'
            }
            if (value == 3) {
                return '半年'
            }
        },
        // 设置最大可选择时间
        initDate() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            let minyear = year;
            this.minDate = minyear + "-" + month + "-" + day;
            //let maxyear = year + 1;
            this.maxDate = year + 1 + "-" + month + "-" + day; // 最大日期可选到一年后
            //this.maxDate = year  + '-'+ month +'-' + day; // 最大日期可选到今天
        },
        calendarChange(e) {
            this.reservationTime = e.result
        }
    }
}
</script>
<style lang="scss" scoped>
.page-css {
    width: 100%;
    padding: 0;
    padding-top: 26rpx;

    .info {
        margin: 0 24rpx 20rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        padding: 6rpx 0 34rpx;

        .info_title {
            line-height: 60rpx;
            color: rgba(0, 0, 0, 1);
            font-size: 32rpx;
            text-align: left;
            font-family: SourceHanSansSC-bold;
            margin: 18rpx 0 0rpx 20rpx;
            font-weight: bold;
        }

        .info_item {
            padding: 4rpx 20rpx 0;

            display: flex;
            align-items: center;
            justify-content: space-between;

            .item_left_txt {
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                text-align: left;
                font-family: SourceHanSansSC-regular;
                width: 210rpx;
                margin-right: 20rpx;
                line-height: 60rpx;
            }

            .item_right_txt {
                max-width: calc(100% - 220rpx);
                color: rgba(0, 0, 0, 1);
                font-size: 28rpx;
                // text-align: left;
                text-align: justify;
                font-family: SourceHanSansSC-regular;
            }

            .item_right_img {
                width: 100%;
                height: 200rpx;
            }
        }
    }

    .repair-btn {
        width: 100%;
        height: 150rpx;
        display: flex;
        justify-content: space-between;
        /* 水平均匀分布 */
        margin-top: 32rpx;
        padding: 0 32rpx;

        /deep/.u-btn {
            width: 48%;
        }
    }

    .repair_form {
        padding: 0 18rpx;
    }

    .collapse-room {
        margin: 0 32rpx 20rpx;
        color: rgba(0, 0, 0, 1);
    }

    // .collapse-major {
    //     margin: 0 32rpx 20rpx;
    //     color: rgba(0, 0, 0, 1);
    //     margin: 12rpx 24rpx 12rpx;

    .n-box {
        border: 1px solid rgba(239, 239, 239, 1);
        padding: 32rpx 54rpx 0;
        margin-top: 24rpx;
        margin-bottom: 24rpx;
        position: relative;

        .right-tag {
            position: absolute;
            right: 0;
            top: 0;
        }

        .left-tag {
            position: absolute;
            left: 0;
            top: 0;
            padding-left: 10rpx;
            padding-right: 10rpx;
        }

        .n-box-title {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            text-align: left;
        }

        .n-box-info {
            line-height: 32rpx;
            color: rgba(154, 154, 154, 1);
            font-size: 24rpx;
            padding-top: 12rpx;
            padding-bottom: 12rpx;
        }

        .info_item {
            width: 100%;
            display: flex;
            flex-direction: row;
            margin: 24rpx 0 24rpx;

            .item_left_txt {
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                text-align: left;
                width: 170rpx;
                margin-right: 20rpx;
                line-height: 60rpx;
            }

            .item_right_txt {
                flex: 1;
                max-width: calc(100% - 220rpx);
                color: rgba(0, 0, 0, 1);
                font-size: 28rpx;
                // text-align: left;
                text-align: justify;
                font-family: SourceHanSansSC-regular;

                /deep/.u-radio-group {
                    flex-wrap: nowrap;
                    padding-right: 48rpx;
                }

                .btn {
                    width: 260rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    border-radius: 8rpx;
                    background-color: rgba(255, 255, 255, 1);
                    color: rgba(58, 98, 215, 1);
                    font-size: 28rpx;
                    text-align: center;
                    border: 2rpx dashed rgba(58, 98, 215, 1);
                }
            }
        }
    }

    /deep/.u-collapse {
        padding: 0 16rpx;
    }

    /deep/.arrow {
        top: 12rpx;
    }
}
</style>