<!--
 * @Author: wj 1454560336@qq.com
 * @Date: 2023-11-01 14:21:43
 * @LastEditors: wenjie 1454560336@qq.com
 * @LastEditTime: 2024-10-23 14:53:16
 * @FilePath: \admin-manage\src\views\operationManage\orderManage\orderDetail.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
    <div class="orderDetail app-container">
<div class="title">付款信息</div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="订单编号"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="paymentTime"
        align="center"
        label="付款时间"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
       {{ formatData(scope.row).paymentTime || '-'}}
      </template>

      </el-table-column>
      <el-table-column
        prop="payAmount"
        align="center"
        label="实付金额"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="paymentWay"
        align="center"
        label="支付方式"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
        {{ formatData(scope.row).paymentWay |filterPay}}
      </template>
      </el-table-column>
      <el-table-column
        prop="orderType"
        align="center"
        label="状态"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        {{scope.row.goodsList[0] | filterType}}
      </template>
      </el-table-column>
    </el-table>

    <div class="title">订单信息</div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="订单编号"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="下单时间"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{timeFormat(scope.row.createTime) }}
      </template>
      </el-table-column>
      <el-table-column
        prop="payAmount"
        align="center"
        label="订单金额"
        show-overflow-tooltip
      >

      </el-table-column>
      <el-table-column
        prop="discountAmount"
        align="center"
        label="使用优惠券"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="discountAmount"
        align="center"
        label="优惠金额"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>

    <div class="title">商品信息</div>

    <el-table
      :data="tableData[0].goodsList[0].goodsInfo.products"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
      v-if="tableData[0].goodsList[0].jobFlowMap == 'Kfc'"
    >
      <el-table-column
        prop="shopName"
        align="center"
        label="商品图"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        <img :src="scope.row.imageUrl" alt="" class="icon">

        <!-- <img src="@/assets/recharge.png" v-if="scope.row.goodsList[0].jobFlowMap == 'video2'" alt="" class="icon">
        <img v-else :src="scope.row.goodsList[0].goodsInfo.activityCover||scope.row.goodsList[0].goodsInfo.goodsPath" alt="" class="icon"> -->
      </template>
      </el-table-column>
      <el-table-column
        prop="shopName"
        align="center"
        label="商品名"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        {{scope.row.nameCn + '  x  ' + scope.row.quantity}}
      </template>
      </el-table-column>
      <el-table-column
        prop="goodsAmount"
        align="center"
        label="售价"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
        {{scope.row.sellPrice }}
      </template>
      </el-table-column>
       <el-table-column
        prop="createTime"
        align="center"
        label="商品类型"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
        {{formatData(tableData[0]).type }}
      </template>
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
      v-else
    >
      <el-table-column
        prop="shopName"
        align="center"
        label="商品图"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        <img :src="formatData(scope.row).icon" alt="" class="icon">

        <!-- <img src="@/assets/recharge.png" v-if="scope.row.goodsList[0].jobFlowMap == 'video2'" alt="" class="icon">
        <img v-else :src="scope.row.goodsList[0].goodsInfo.activityCover||scope.row.goodsList[0].goodsInfo.goodsPath" alt="" class="icon"> -->
      </template>
      </el-table-column>
      <el-table-column
        prop="shopName"
        align="center"
        label="商品名"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        {{formatData(scope.row).goodsName }}
      </template>
      </el-table-column>
      <el-table-column
        prop="goodsAmount"
        align="center"
        label="售价"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
        {{formatData(scope.row).price }}
      </template>
      </el-table-column>
       <el-table-column
        prop="createTime"
        align="center"
        label="商品类型"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
        {{goodsTypeObj[scope.row.goodsList[0].goodsInfo.goodsType]  || formatData(scope.row).type }}
      </template>
      </el-table-column>
    </el-table>

    <div class="title" v-if="isStudy">研学用户信息</div>
    <el-table
      :data="persons"
      tooltip-effect="dark"
      v-if="isStudy"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="类型"
        prop="label"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        align="center"
        label="名称"
        show-overflow-tooltip
      >
    
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        label="电话"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="idCard"
        align="center"
        label="身份证"
        show-overflow-tooltip
      >
      </el-table-column>
    
    </el-table>

    <template v-if="tableData[0].goodsList[0].verifyModel">

        <div class="title">核销信息</div>

      <el-table
        :data="tableData"
        tooltip-effect="dark"
        border
        v-loading="loading"
        style="width: 100%"
        >
          <el-table-column
            prop="payAmount"
            align="center"
            label="商品名称"
            show-overflow-tooltip
        >
        <template slot-scope="scope">
        {{formatData(scope.row).goodsName }}
        </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            align="center"
            label="核销时间"
            show-overflow-tooltip
        >
            <template slot-scope="scope">
            {{scope.row.goodsList[0].verifyModel&&scope.row.goodsList[0].verifyModel.checkTime? timeFormat(scope.row.goodsList[0].verifyModel.checkTime):'-' }}
        </template>
        </el-table-column>
        <el-table-column
            prop="payAmount"
            align="center"
            label="核销店铺"
            show-overflow-tooltip
        >
        <template slot-scope="scope">
            {{scope.row.goodsList[0].verifyModel.shopName }}
        </template>
        </el-table-column>
        <el-table-column
            prop="payAmount"
            align="center"
            label="核销人员"
            show-overflow-tooltip
        >
        <template slot-scope="scope">
            {{scope.row.goodsList[0].verifyModel.employeeName }}
        </template>
        </el-table-column>

        </el-table>
    </template>


        <div class="apply" v-if="tableData[0].goodsList[0].refundLog">
            <el-button class="btn" v-if="mode == 'refund'&&tableData[0].goodsList[0].goodsState!='REFUNDED'" size="small" @click="handleBtn">立即处理</el-button>
            <div class="top-info">
                <div class="sub-title">用户申请退款</div>
                <div class="time">申请时间： {{timeFormat(tableData[0].goodsList[0].refundLog.createTime) }}</div>
            </div>
            <div class="info">
                <div class="label">退款金额：</div>
                <div class="money">¥{{tableData[0].payAmount}}</div>
            </div>
            <div class="reason">
              {{tableData[0].goodsList[0].refundLog.remark}}
            </div>

            <div class="refuse-box" v-if="tableData[0].goodsList[0].refundLog.conclusion">
                <div class="sub-title">拒绝原因：</div>
                <div class="refuse-reason">{{tableData[0].goodsList[0].refundLog.conclusion}}</div>
            </div>
        </div>



     <!-- 退款处理 -->
    <el-dialog title="退款处理" width="470px" :visible.sync="dialogFormVisible">
    <el-form :model="query" label-width="140px" ref="query" :rules="rules">
        <el-form-item label="处理方案">
          <el-select v-model="query.type" size="small" class="item-width-200" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="购买店铺退款金额" prop="buyShopAmount">
            <el-input type="number" v-model="query.buyShopAmount" :disabled="query.type == 1" size="small" class="item-width-200" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="核销店铺退款金额" prop="useShopAmount">
            <el-input type="number" v-model="query.useShopAmount" :disabled="query.type == 1" size="small" class="item-width-200" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="平台退款金额" prop="platformAmount">
            <el-input type="number" v-model="query.platformAmount" :disabled="query.type == 1" size="small" class="item-width-200" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="用户总退款金额">
            <el-input v-model="total" disabled size="small" class="item-width-200" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button size="small" type="danger" :loading="btnLoading" @click="auditRefund(1)">拒绝</el-button>
        <el-button size="small" type="primary" :loading="btnLoading" @click="auditRefund(0)">确 定</el-button>
    </div>
    </el-dialog>

    </div>
</template>

<script>
import {auditRefund,transfer,orderDetail,subOrdersConfirm,getReserve} from '@/api/order'
  import {timeFormat} from '@/utils/index'
    export default {
        data() {
            return {
                mode:'',
                loading:false,
                btnLoading:false,
                dialogFormVisible:false,
                query:{
                    "type":'1',
                    "orderType":'APPLY_REFUNDING',
                    "id": "",
                    "platformAmount": 0,
                    "refundAmount": 0,
                    "refundDesc": "",
                    "buyShopAmount": 0,
                    "useShopAmount": 0
                },
                rules: {
                    buyShopAmount: [
                    { required: true, message: "请输入商户退款金额", trigger: "blur" },
                    ],
                     useShopAmount: [
                    { required: true, message: "请输入商户退款金额", trigger: "blur" },
                    ],
                     platformAmount: [
                    { required: true, message: "请输入平台退款金额", trigger: "blur" },
                    ],
                },
                 options: [
                    {
                        value: "1",
                        label: "退还给用户",
                    },
                    {
                        value: "2",
                        label: "部分退款",
                    },
                ],
                tableData: [],
                goodsTypeObj:{},
                persons:[],
                isStudy:false
            }
        },
        computed: {
            total() {
                this.query.refundAmount = (this.query.useShopAmount*1000 + this.query.platformAmount*1000+ this.query.buyShopAmount*1000)/1000
                return this.query.refundAmount
            }
        },
        filters: {
            filterType: function(val) {
				if(val.refundLog&&val.refundLog.refund == 'REFUSAL_REFUND'&&!val.change){
					return '拒绝退款'
				}
                else if(val.jobFlowMap == 'Hotel'&&val.extend.orderInfo){
					return val.extend.orderInfo.orderStatus
				}
				else if(val.goodsState == 'APPLY_REFUND'){
					return '退款审核中'
				}else if(val.goodsState == 'CLOSE'){
					return '关闭订单'
				}else if(val.goodsState == 'REFUNDED'){
					return '已退款'
				}else if(val.goodsState == 'REFUSAL_REFUND'){
					return '拒绝退款'
				}else if(val.goodsState == 'APPLY_REFUNDING'){
					return '退款中'
				}else if(val.goodsState == 'USED'){
					if(val.jobFlowMap == 'YPP'){
						return '已出票'
					}else{
						return '订单已完成'
					}
				}else if(val.goodsState == 'WAIT_PAYMENT'){
					return '待付款'
				}else if(val.goodsState == 'WAIT_USE'){
					if(val.jobFlowMap == 'YPP'){
						return '出票中'
					}else{
						return '待使用'
					}
				}else{
					return ''
				}
			},
            // filterType: function(val) {
			// 	if(val.refundLog&&val.refundLog.refund == 'REFUSAL_REFUND'){
			// 		return '拒绝退款'
			// 	}
			// 	else if(val.jobFlowMap == 'Hotel'&&JSON.parse(val.extend).orderInfo){
			// 		return JSON.parse(val.extend).orderInfo.orderStatus
			// 	}
			// 	else if(val.goodsState == 'APPLY_REFUND'){
			// 		return '退款审核中'
			// 	}else if(val.goodsState == 'CLOSE'){
			// 		return '关闭订单'
			// 	}else if(val.goodsState == 'REFUNDED'){
			// 		return '已退款'
			// 	}else if(val.goodsState == 'REFUSAL_REFUND'){
			// 		return '拒绝退款'
			// 	}else if(val.goodsState == 'APPLY_REFUNDING'){
			// 		return '退款中'
			// 	}else if(val.goodsState == 'USED'){
			// 		return '订单已完成'
			// 	}else if(val.goodsState == 'WAIT_PAYMENT'){
			// 		return '待付款'
			// 	}else if(val.goodsState == 'WAIT_USE'){
			// 		return '待使用'
			// 	}else{
			// 		return ''
			// 	}
			// },
            filterPay(val){
                if(val == 'wx.unifiedOrder'){
                    return '微信支付'
                }else if(val == 'trade.create'){
                    return '支付宝支付'
                }else if(val == 'uac.miniOrder'){
                    return '云闪付支付'
                }else if(val == 'wx.miniPreOrder'){
                    return '银联支付'
                }else{
                    return '-'
                }
            }
        },
        methods: {
            formatType(row){
                if(row.goodsList[0].jobFlowMap == 'XiaoJu'){
                    return '加油充电'
                }else if(row.goodsList[0].jobFlowMap == 'Activity'){
                    return '活动报名'
                }else if(row.goodsList[0].jobFlowMap == 'Ticket'){
                    return '景区门票'
                }else if(row.goodsList[0].jobFlowMap == 'Hotel'){
                    return '酒店住宿'
                }else if(row.goodsList[0].jobFlowMap == 'YPP'){
                    return '电影票'
                }else if(row.goodsList[0].jobFlowMap == 'video2'){
                    return '视频会员'
                }else if(row.goodsList[0].jobFlowMap == 'video2'){
                    return '视频会员'
                }else{
                    return '-'
                }
            },
             formatData(row){
                if(row.goodsList[0].jobFlowMap == 'XiaoJu'){
                    if(row.goodsList[0].extend.hasOwnProperty('notifyOrderInfo')){
                        return {
                            type:'加油充电',
                            icon:row.goodsList[0].goodsInfo.goodsPath,
                            paymentTime:row.goodsList[0].extend.notifyOrderInfo.payTime,
                            paymentWay:'-',
                            price:(row.goodsList[0].goodsInfo.storePrice/100).toFixed(2) +'/L',
                            goodsName:row.goodsList[0].goodsInfo.goodsName,

                        }
                    }else{
                        return {
                            type:'加油充电',
                            icon:row.goodsList[0].goodsInfo.goodsPath,
                            paymentTime:'-',
                            paymentWay:'',
                            price:(row.goodsList[0].goodsInfo.storePrice/100).toFixed(2) +'/L',
                            goodsName:row.goodsList[0].goodsInfo.goodsName,

                        }
                    }
                }else if(row.goodsList[0].jobFlowMap == 'Activity'){
                    return {
                        type:'活动报名',
                        icon:row.goodsList[0].goodsInfo.activityCover,
                        paymentTime:row.payment?row.payment.paymentTime:'',
                        paymentWay:row.payment?row.payment.paymentWay:'',
                        price:row.goodsList[0].goodsInfo.price,
                        goodsName:row.goodsList[0].goodsInfo.activityName,

                    }
                }else if(row.goodsList[0].jobFlowMap == 'Ticket'){
                    return {
                        type:'景区门票',
                        icon:row.goodsList[0].goodsInfo.goodsPath,
                        paymentTime:row.payment?row.payment.paymentTime:'',
                        paymentWay:row.payment?row.payment.paymentWay:'',
                        price:row.goodsList[0].goodsInfo.salePrice,
                        goodsName:row.goodsList[0].goodsInfo.goodsName,

                    }
                }else if(row.goodsList[0].jobFlowMap == 'Hotel'){
                    return {
                        type:'酒店住宿',
                        icon:row.goodsList[0].goodsInfo.goodsPath,
                        paymentTime:row.payment?row.payment.paymentTime:'',
                        paymentWay:row.payment?row.payment.paymentWay:'',
                        price:row.goodsList[0].goodsInfo.totalPrice/row.goodsList[0].goodsInfo.numberofRooms,
                        goodsName:row.goodsList[0].goodsInfo.goodsName,

                    }
                }
                else if(row.goodsList[0].jobFlowMap == 'YPP'){
                    return {
                        type:'电影票',
                        icon:row.goodsList[0].goodsInfo.goodsPath,
                        paymentTime:row.payment?row.payment.paymentTime:'',
                        paymentWay:row.payment?row.payment.paymentWay:'',
                        price:row.goodsList[0].goodsInfo.originPrice,
                        goodsName:row.goodsList[0].goodsInfo.goodsName,

                    }
                }
                else if(row.goodsList[0].jobFlowMap == 'video2'){
                    return {
                        type:'视频会员',
                        icon:require('@/assets/recharge.png'),
                        paymentTime:row.payment?row.payment.paymentTime:'',
                        paymentWay:row.payment?row.payment.paymentWay:'',
                        price:row.goodsList[0].payAmount,
                        goodsName:row.goodsList[0].goodsInfo.goodsName,

                    }
                }
                else if(row.goodsList[0].jobFlowMap == 'QiuXiang'){
                    return {
                        type:'秋香代驾',
                        icon:row.goodsList[0].goodsInfo.goodsPath,
                        paymentTime:row.payment?row.payment.paymentTime:'',
                        paymentWay:row.payment?row.payment.paymentWay:'',
                        price:row.goodsList[0].goodsInfo.realPrice,
                        goodsName:row.goodsList[0].goodsInfo.goodsName,

                    }
                }
                else if(row.goodsList[0].jobFlowMap == 'Kfc'){
                    return {
                        type:'大牌点餐',
                        icon:row.goodsList[0].goodsInfo.goodsPath,
                        paymentTime:row.payment?row.payment.paymentTime:'',
                        paymentWay:row.payment?row.payment.paymentWay:'',
                        price:row.goodsList[0].goodsInfo.realPrice,
                        goodsName:row.goodsList[0].goodsInfo.goodsName,
                    }
                }
                else{
                    return {
                        type:'-',
                        icon:row.goodsList[0].goodsInfo.goodsPath,
                        paymentTime:row.payment?row.payment.paymentTime:'',
                        paymentWay:row.payment?row.payment.paymentWay:'',
                        price:row.goodsList[0].goodsInfo.realPrice,
                        goodsName:row.goodsList[0].goodsInfo.goodsName,

                    }
                }
            },
            timeFormat(val){
                return timeFormat(val)
            },
            handleBtn() {
                this.dialogFormVisible = true

                // if(this.tableData[0].payment.transferAll){
                //     this.dialogFormVisible = true
                // }else{
                //     this.$confirm('此订单未完成分账, 是否立即分账?（确认分账后，第二天00:00:00后可以退款）', '分账', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                //     }).then(() => {
                //         subOrdersConfirm({
                //             "goodId": this.tableData[0].goodsList[0].id,
                //             "useShop": this.tableData[0].shopId
                //             }).then(res=>{
                //             if(res.state == 'Success'){
                //                 this.orderDetail(this.$route.query.orderNo)
                //                 this.$notify({
                //                     title: "成功",
                //                     message: "操作成功",
                //                     type: "success",
                //                 });
                //             }
                //         })
                //     })
                // }
            },
            auditRefund(type){
                if(type){
                      this.$prompt('请输入拒绝原因', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern:/^[\s\S]*.*[^\s][\s\S]*$/,
                        inputErrorMessage: '请填写拒绝原因'
                        }).then(({ value }) => {
                            let query = JSON.parse(JSON.stringify(this.query))
                            query.orderType = 'REFUSAL_REFUND'
                            query.refundDesc = value
                            this.btnLoading = true
                            auditRefund(query).then(res=>{
                               this.btnLoading = false
                               if(res.state == 'Success'){
                                   this.dialogFormVisible = false
                                    this.$notify({
                                       title: "成功",
                                       message: "操作成功",
                                       type: "success",
                                   });
                               }
                           })
                        }).catch(() => {
                            this.dialogFormVisible = false

                        });
                    
                }else{

                    this.$refs.query.validate((v) => {
                       if (v) {
                           this.btnLoading = true
                           this.query.platformAmount = Number(this.query.platformAmount)
                           this.query.buyShopAmount = Number(this.query.buyShopAmount)
                           this.query.useShopAmount = Number(this.query.useShopAmount)
                           auditRefund(this.query).then(res=>{
                               this.btnLoading = false
                               if(res.state == 'Success'){
                                   this.dialogFormVisible = false
                                    this.$notify({
                                       title: "成功",
                                       message: res.content,
                                       type: "success",
                                   });
                               }
                           })
                       }
                    })
                }
            },
             transfer(orderNo){
                transfer(orderNo).then(res=>{
                    if(res.state == 'Success'){
                        this.query.platformAmount = res.content.platform
                        this.query.buyShopAmount = res.content.buyShop
                        this.query.useShopAmount = res.content.useShop
                    }
                })
            },
            orderDetail(id){
                this.loading = true
                orderDetail(id).then(res=>{
                    this.loading = false
                     if(res.state == 'Success'){
                        this.tableData = [res.content];
                        
                         // 判断是否为研学订单
                        if(res.content?.goodsList[0]?.goodsInfo?.isStudy){
                            getReserve(id).then(res=>{
                            this.persons.push({
                                label:'预定人',
                                userName:res.content.reserveName,
                                phone:res.content.reservePhone,
                                idCard:'/'
                            })
                            this.persons = this.persons.concat(res.content.persons.map(e=>{
                                e.label = '出游人'
                                return e
                            }))
                            this.isStudy = true
                            })
                        }
                    }
                })
            }
        },
        created () {
            this.goodsTypeObj = JSON.parse(sessionStorage.getItem('goodsTypeObj'))
            // this.tableData = [JSON.parse(localStorage.getItem("orderItem"))];
            this.query.id = this.$route.query.id
            this.mode = this.$route.query.mode
            this.orderDetail(this.$route.query.orderNo)
            if(this.$route.query.mode == 'refund'){
                this.transfer(this.$route.query.id)
            }
        },
    }
</script>

<style lang="scss" scoped>
.orderDetail{
    .form-label{
        margin-left: 80px;
    }
    .icon{
        width: 120px;
    }
    .apply{
        padding: 15px;
        border-radius: 4px;
        background: #F3F3F3;
        margin-bottom: 20px;
        position: relative;
        margin-top: 20px;
        .btn{
            position: absolute;
            top: 15px;
            right: 15px;
        }
        .top-info{
            display: flex;
            align-items: center;
            .sub-title{
                font-size: 14px;
                font-weight: bold;
            }
            .time{
               color:  #999;
               font-size: 12px;
               margin-left: 10px;
            }
        }
        .refuse-box{
            display: flex;
            align-items: center;
            .sub-title{
                font-size: 14px;
                font-weight: bold;
            }
            .refuse-reason{
               color:  red;
               font-size: 12px;
               margin-left: 10px;
            }
        }
        .info{
            display: flex;
            align-items: center;
            line-height: 34px;
            .label{
                font-size: 14px;
            }
            .money{
                font-size: 14px;
                color: #0052d9;
            }
        }
        .reason{
            font-size: 14px;
            line-height: 24px;
        }
    }
    .item{
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        font-size: 14px;
        .lable{
            white-space: nowrap;
        }
        .value{
            flex: 1;
        }
    }

    .title{
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 15px;
        margin-top: 30px;
        color: #666;
    }
}
</style>
