<template>
  <q-dialog v-model="dialog" maximized full-height seamless position="right">
    <q-card style="margin-top:61px;width:970px" class="no-border-radius classinfo_Dialog">
      <div class="drawerTop2 row">
        <div class="drawerTop-d">
          订
        </div>
        <div class="drawerTop-t">
          <span style="font-size: 16px;color: #000000;font-weight: bold">订单编号</span>
          <span style="font-size: 12px;color: #666666">{{Detail.OrderId}}</span>
        </div>
        <div
          style="background: rgba(2, 196, 153, 0.2);border-radius: 4px;text-align: center;padding: 2px 13px;margin-left: 30px">
          <span style="color: #02C499">{{Detail.OrderStateName}}</span>
        </div>
      </div>
      <div style="padding:20px 15px;" class="row wrap q-col-gutter-md">
        <div class="col-6 row">
          <span class="two-left">关联销售：</span>
          <span class="two-r">{{Detail.EnterName}}</span>
        </div>
        <div class="col-6 row">
          <span class="two-left">创建时间：</span>
          <span class="two-r">{{Detail.CreateTime}}</span>
        </div>
        <div class="col-6 row">
          <span class="two-left">应收总额：</span>
          <span class="two-r">{{getTwoWei(Detail.PreferPrice)}}</span>
        </div>
        <div class="col-6 row">
          <span class="two-left">待收金额：</span>
          <span class="two-r">{{getTwoWei(Detail.DueInMoney)}}</span>
        </div>
      </div>
      <div style="padding: 20px;">
        <q-tabs v-model="tab" align="left" class="qtabs">
          <q-tab name="1" label="订单详情" />
          <q-tab name="2" label="名单" />
          <q-tab name="3" label="备注" />
          <q-tab name="4" label="财务单据" />
          <q-tab name="5" label="日志" />
        </q-tabs>
        <div v-if="tab==1">
          <div class="col row" style="font-size: 14px;color:#000;align-items: center;margin-top: 20px">
            <div style="width: 3px;height: 12px;background: #3FC4FF;margin-right: 10px"></div>
            基本信息
          </div>
          <div style="padding:20px 15px;" class="row wrap q-col-gutter-md">
            <div class="col-6 row">
              <span class="two-left">人数：</span>
              <span class="two-r">{{Detail.GuestNum}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">
                <template v-if="Detail.OrderType==1">
                  班级信息
                </template>
                <template v-if="Detail.OrderType==2">
                  产品信息
                </template>
                ：</span>
              <span class="two-r">{{Detail.ClassName}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">单价：</span>
              <span class="two-r">{{getTwoWei(Detail.Class_Price)}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">成交单价：</span>
              <span class="two-r" style="color: #3FC4FF">{{getTwoWei(Detail.Unit_Price)}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">应收金额：</span>
              <span class="two-r">{{getTwoWei(Detail.PreferPrice)}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">实收金额：</span>
              <span class="two-r">{{getTwoWei(Detail.Income)}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">优惠金额：</span>
              <span class="two-r">{{getTwoWei(Detail.DiscountMoney)}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">退款总额：</span>
              <span class="two-r">{{getTwoWei(Detail.Refund)}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">待收总额：</span>
              <span class="two-r" style="color:#2961FE;">{{getTwoWei(Detail.DueInMoney)}}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tab==2" style="padding: 10px 20px">
        <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
          separator="none" :data="data" :columns="columns" row-key="name">

          <template v-slot:body-cell-Sex="props">
            <q-td :props="props">
              <span>{{props.row.Sex==1?'男':'女'}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-GuestName="props">
            <q-td :props="props" class="row" style="align-items: center">
              <div
                style="width: 34px;height: 34px;border-radius: 50%;background: rgba(41, 97, 254, 0.2);text-align: center;line-height: 34px;font-size: 14px;color: #2961FE;margin-right: 5px">
                {{props.row.GuestName.slice(0,1)}}
              </div>
              {{props.row.GuestName}}
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="pageCount"
              :input="true" @input="changePage" />
          </template>
        </q-table>
      </div>
      <div v-if="tab==3" style="padding: 10px 20px">
        <div class="row" style="justify-content: flex-end">
          <div class="row tis">
            <div class="tis-k" style="background: #2961FE"></div>
            <span>销售备注</span>
          </div>
          <div class="row tis">
            <div class="tis-k" style="background: #8175FB"></div>
            <span>教务备注</span>
          </div>
          <div class="row tis">
            <div class="tis-k" style="background: #F28C1D"></div>
            <span>校长备注</span>
          </div>
          <div class="row tis">
            <div class="tis-k" style="background: #F72E52"></div>
            <span>总经理备注</span>
          </div>
        </div>
        <div class="q-px-lg q-pb-md" style="padding:20px 0 50px 0;">
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in data2" :key="index" :color="activity.color" size="large">
              <div>
                <div class="row" style="font-size: 14px;color: #111111;margin-bottom:10px;">
                  <span>{{activity.CreateByName}}</span>
                  <span style="margin-left: 10px">{{activity.CreateTime}}</span>
                </div>
                <div
                  style="width: 100%;padding: 15px;line-height: 20px;background: #F0F5FB;border-radius: 4px;font-size: 12px;color: #333333">
                  {{activity.Content}}
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
          <q-pagination class="full-width justify-end" v-model="msg2.PageIndex" color="primary" :max="pageCount2"
            :input="true" @input="changePage2" />
        </div>
      </div>
      <div v-if="tab==4" style="padding:0 20px">
        <div class="row " style="align-items: center;margin-bottom: 20px;">
          <div style="width: 3px;height: 15px;background: #3FC4FF;margin-right: 10px"></div>收款单
        </div>
        <q-table :pagination="financiaMsg" :loading="floading" no-data-label="暂无相关数据" flat
          class="sticky-tow-column-table" :hide-pagination="true" :data="dataList" :columns="columnsf" row-key="name">
          <template v-slot:body-cell-FrID="props">
            <q-td :props="props" @click="goUrl('FinancialDocumentsDetail',props.row)">
              <span style="font-size: 14px;color: #2961FE;font-weight: bold;cursor: pointer;">{{props.row.FrID}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-CostTypeList="props">
            <q-td :props="props" v-for="(s,si) in props.row.CostTypeList" :key="si">
              <span
                style="background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #646464;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;margin-right: 4px;">{{s}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-TradeWayList="props">
            <q-td :props="props" class="row" style="align-items: center;height: auto">
              <div v-if="props.row.TradeWayList&&props.row.TradeWayList.length>0" class="my-table-details">
                <div v-for="(tw,twIn) in props.row.TradeWayList"
                  style="line-height: normal !important;padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;width:210px;display: flex;flex-direction: column;align-items: center">
                  <p><span style="font-weight: bold;color:#333333">{{tw.Alias}}</span><span class="_bank_name"
                      style="height:20px;;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;margin-letf:10px">{{props.row.TradeWayList[0].TypeName}}</span><span
                      style="height:20px;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;"
                      :style="{'background-color':tw.AccountType=='私'?'#2AAEF2':'#FF9C01'}">{{tw.AccountType==""?'无':tw.AccountType}}</span>
                  </p>
                  <p style="color:#333333">{{tw.BankNo}}</p>
                </div>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-zhaungt="props">
            <q-td :props="props">
              <i v-if="props.row.Status==1" class="iconfont icon-daiqueren" style="color: #4BCA81"></i>
              <i v-if="props.row.Status==4" class="iconfont icon-yiquxiao" style="color: #4BCA81"></i>
              <i v-if="props.row.Status==2" class="iconfont icon-yiqueren" style="color: #959595"></i>
              <i v-if="props.row.Status==3" class="iconfont icon-shenhebohui" style="color: #E95252"></i>
              <i v-if="props.row.Status==0" class="iconfont icon-zancun" style="color: #FF9C01"></i>
              <span style="cursor: pointer;"
                @click="Financial_post_GetFinancLogList(props.row.FrID)">{{props.row.StatusStr}}</span>
              <q-popup-proxy>
                <q-banner>
                  <div style="height: auto;max-height: 220px;background-color: #FFFFFF;width: 230px">
                    <div class="changLog">
                      <p class="_log_t">流程日志</p>
                      <ul style="padding-left: 20px;max-height: 180px;overflow: auto;" v-if="GetFinancLogList"
                        v-loading='LogLoading'>
                        <li
                          style="border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;"
                          v-for="(log,li) in GetFinancLogList">
                          <span
                            style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;"></span>
                          <p class="row" style="justify-content: space-between"> <span
                              class="_color_blue">{{log.EmName}}</span> <span
                              class="fr changLog_time">{{log.UpdateDate}}</span> </p>
                          <p class="_dtel">{{log.StartValue}}</p>
                        </li>
                      </ul>
                      <ul v-else>
                        <li>暂无修改日志</li>
                      </ul>
                    </div>
                  </div>
                </q-banner>
              </q-popup-proxy>
            </q-td>
          </template>
        </q-table>

        <!--        付款单-->
        <div class="row " style="align-items: center;margin: 20px 0;">
          <div style="width: 3px;height: 15px;background: #3FC4FF;margin-right: 10px"></div>付款单
        </div>
        <q-table :pagination="financiaMsg" style="padding-bottom:80px;" :loading="floading" no-data-label="暂无相关数据" flat
          class="sticky-tow-column-table" :hide-pagination="true" :data="dataListP" :columns="columnsf" row-key="name">
          <template v-slot:body-cell-FrID="props">
            <q-td :props="props" @click="goUrl('FinancialDocumentsDetail',props.row)">
              <span style="font-size: 14px;color: #2961FE;font-weight: bold;cursor: pointer;">{{props.row.FrID}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-CostTypeList="props">
            <q-td :props="props" v-for="(s,si) in props.row.CostTypeList" :key="si">
              <span
                style="background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #646464;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;margin-right: 4px;">{{s}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-TradeWayList="props">
            <q-td :props="props" class="row" style="align-items: center;height: auto">
              <div v-if="props.row.TradeWayList&&props.row.TradeWayList.length>0" class="my-table-details">
                <div v-for="(tw,twIn) in props.row.TradeWayList"
                  style="line-height: normal !important;padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;width:210px;display: flex;flex-direction: column;align-items: center">
                  <p><span style="font-weight: bold;color:#333333">{{tw.Alias}}</span><span class="_bank_name"
                      style="height:20px;;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;margin-letf:10px">{{props.row.TradeWayList[0].TypeName}}</span><span
                      style="height:20px;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;"
                      :style="{'background-color':tw.AccountType=='私'?'#2AAEF2':'#FF9C01'}">{{tw.AccountType==""?'无':tw.AccountType}}</span>
                  </p>
                  <p style="color:#333333">{{tw.BankNo}}</p>
                </div>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-zhaungt="props">
            <q-td :props="props">
              <i v-if="props.row.Status==1" class="iconfont icon-daiqueren" style="color: #4BCA81"></i>
              <i v-if="props.row.Status==4" class="iconfont icon-yiquxiao" style="color: #4BCA81"></i>
              <i v-if="props.row.Status==2" class="iconfont icon-yiqueren" style="color: #959595"></i>
              <i v-if="props.row.Status==3" class="iconfont icon-shenhebohui" style="color: #E95252"></i>
              <i v-if="props.row.Status==0" class="iconfont icon-zancun" style="color: #FF9C01"></i>
              <span style="cursor: pointer;"
                @click="Financial_post_GetFinancLogList(props.row.FrID)">{{props.row.StatusStr}}</span>
              <q-popup-proxy>
                <q-banner>
                  <div style="height: auto;max-height: 220px;background-color: #FFFFFF;width: 230px">
                    <div class="changLog">
                      <p class="_log_t">流程日志</p>
                      <ul style="padding-left: 20px;max-height: 180px;overflow: auto;" v-if="GetFinancLogList"
                        v-loading='LogLoading'>
                        <li
                          style="border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;"
                          v-for="(log,li) in GetFinancLogList">
                          <span
                            style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;"></span>
                          <p class="row" style="justify-content: space-between"> <span
                              class="_color_blue">{{log.EmName}}</span> <span
                              class="fr changLog_time">{{log.UpdateDate}}</span> </p>
                          <p class="_dtel">{{log.StartValue}}</p>
                        </li>
                      </ul>
                      <ul v-else>
                        <li>暂无修改日志</li>
                      </ul>
                    </div>
                  </div>
                </q-banner>
              </q-popup-proxy>
            </q-td>
          </template>
        </q-table>
      </div>
      <div v-if="tab==5" style="padding: 10px 20px">
        <div class="q-px-lg q-pb-md" style="padding-bottom: 50px;">
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in data3" :key="index" size="large">
              <div>
                <div class="row" style="font-size: 14px;color: #111111">
                  <span>{{activity.CreateByName}}</span>
                  <span style="margin-left: 10px">{{activity.CreateTime}}</span>
                </div>
                <div
                  style="width: 100%;padding: 15px;line-height: 20px;background: #F0F5FB;border-radius: 4px;font-size: 12px;color: #333333">
                  {{activity.LogContent}}
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
          <q-pagination class="full-width justify-end" v-model="msg3.PageIndex" color="primary" :max="pageCount3"
            :input="true" @input="changePage3" />
        </div>
      </div>
    </q-card>
    <div class="dialog-out-close" @click="closeSaveForm"
      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>

<script>
  import {
    getOrderGuestPageList,
    getClassOrderRemarkList, //获取备注列表
    getClassOrderLogList, //获取订单操作日志列表
    getClassOrderForDetail
  } from '../../api/sale/sale'
  export default {
    name: "myOrder-form",
    props: {
      saveObj: {
        type: Object,
        default: null,
        data: [],
        pageCount: 0,
      }
    },
    data() {
      return {
        dialog: true,
        tab: '1',
        columns: [{
            name: 'GuestName',
            label: '名称',
            // field: 'GuestName',
            align: 'left'
          },
          {
            name: 'Profession',
            field: 'Profession',
            label: '职业',
            align: 'left',

          },
          {
            name: 'Sex',
            label: '性别',

            align: 'left'
          },
          {
            name: 'Age',
            label: '年龄',
            field: 'Age',
            align: 'left'
          },
          {
            name: 'Mobile',
            label: '电话',
            field: 'Mobile',
            align: 'left'
          },
          {
            name: 'Basics',
            label: '日语基础',
            field: 'Basics',
            align: 'left'
          },
          {
            name: 'GuestSourceName',
            label: '客户来源',
            field: 'GuestSourceName',
            align: 'left'
          },
          {
            name: 'LearningGoalsName',
            label: '学日语目的',
            field: 'LearningGoalsName',
            align: 'left'
          },
        ],
        columnsf: [{
            name: 'FrID',
            label: '单号',
            align: 'left',
          },
          {
            name: 'CostTypeList',
            label: '费用类型',
            align: 'left',
          },
          {
            name: 'TradeWayList',
            label: '交易方式',
            align: 'left',
          },
          {
            name: 'Money',
            field: 'Money',
            label: '应收',
            align: 'left',
          },
          {
            name: 'PayMoney',
            field: 'PayMoney',
            label: '实收',
            align: 'left',
          },
          {
            name: 'Fee',
            field: 'Fee',
            label: '手续费',
            align: 'left',
          },
          {
            name: 'TradeDate',
            field: 'TradeDate',
            label: '交易日期',
            align: 'left',
          },
          {
            name: 'EmName',
            field: 'EmName',
            label: '制单人员',
            align: 'left',
          },
          {
            name: 'zhaungt',

            label: '当前状态',
            align: 'left',
          },
        ],

        msg: {
          PageIndex: 1,
          PageSize: 12,
          rowsPerPage: 12,
          OrderId: 0,
          ClassId: 0,
          GuestName: '',
          GuestState: 0,
        },
        loading: false,
        data2: [],
        pageCount2: 0,
        msg2: {
          PageIndex: 1,
          PageSize: 6,
          rowsPerPage: 6,
          OrderId: 0,
        },
        loading2: false,
        data3: [],
        pageCount3: 0,
        msg3: {
          PageIndex: 1,
          PageSize: 6,
          rowsPerPage: 6,
          SourceId: 0,
        },
        financiaMsg: {
          pageIndex: 1,
          pageSize: 999,
          rowsPerPage: 999,
          TCID: 0,
          OrderID: 0,
          Type: 1,
          IsSellOrderForm: 1,
          IsFormRecPayQuery: 1
        },
        dataList: [],
        dataListP: [],
        floading: false,
        LogLoading: false,
        GetFinancLogList: [],
        Detail: {},
      }
    },
    created() {
      if (this.saveObj.tab) {
        this.tab = (this.saveObj.tab).toString();
      }

      this.msg.OrderId = this.saveObj.OrderId;
      this.msg2.OrderId = this.saveObj.OrderId;
      this.msg3.SourceId = this.saveObj.OrderId;
      this.msg.ClassId = this.saveObj.ClassId;
      this.getOrderInfo()
      this.getRolelist()
      this.getRemarkList()
      this.OrderLogList()
    },
    methods: {
      Financial_post_GetFinancLogList: function (id) { // 获取单据日志
        this.LogLoading = true;
        this.apipost('Financial_post_GetFinancLogList', {
          ID: id,
          Type: 2
        }, res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data;
            data.forEach(x => {
              x.UpdateDate = this.$commonUtils.formatMsgTime(x.UpdateDate)
            })
            this.LogLoading = false;
            this.GetFinancLogList = data;
          }
        }, null)
      },
      getOrderInfo() {
        getClassOrderForDetail({
          OrderId: this.saveObj.OrderId
        }).then(res => {
          this.Detail = res.Data;
          this.getfinanciaALLPageList(1, this.Detail.ClassId, this.Detail.OrderId) //财务单据
        }).catch(() => {

        })
      },
      closeSaveForm() {
        this.$emit('close')
        this.dialog = false
      },
      //翻页
      changePage(val) {
        this.msg.PageIndex = val;
        this.getRolelist()
      },
      //翻页
      changePage2(val) {
        this.msg2.PageIndex = val;
        this.getRemarkList()
      },
      //翻页
      changePage3(val) {
        this.msg3.PageIndex = val;
        this.OrderLogList()
      },
      getRolelist() { //名单
        this.loading = true
        getOrderGuestPageList(this.msg).then(res => {
          this.data = res.Data.PageData
          this.pageCount = res.Data.PageCount
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      getRemarkList() {
        this.loading2 = true
        getClassOrderRemarkList(this.msg2).then(res => {
          this.data2 = res.Data.PageData
          this.pageCount2 = res.Data.PageCount;
          this.data2.forEach(x => {
            if (x.Type == 1) {
              x.color = '#2961FE'
            } else if (x.Type == 2) {
              x.color = '#8175FB'
            } else if (x.Type == 3) {
              x.color = '#F28C1D'
            } else if (x.Type == 4) {
              x.color = '#F72E52'
            }
          })
          this.loading2 = false
        }).catch(() => {
          this.loading2 = false
        })
      },
      OrderLogList() {
        getClassOrderLogList(this.msg3).then(res => {
          this.data3 = res.Data.PageData
          this.pageCount3 = res.Data.PageCount;
        }).catch(() => {

        })
      },
      getfinanciaALLPageList(Type, TCID, OrderID) {
        this.floading = true
        this.financiaMsg.TCID = TCID
        this.financiaMsg.OrderID = OrderID
        this.financiaMsg.Type = Type
        this.apipost('Financial_post_GetALLPageList', this.financiaMsg, res => {
          if (res.data.resultCode === 1) {
            let data = res.data.data.pageData.list;
            if (Type === 1) {
              this.dataList = data;
              this.getfinanciaALLPageList(2, TCID, OrderID)
            } else {
              this.dataListP = data;
              this.floading = false
            }
          } else {
            this.floading = false
            this.$message.error(res.data.message);
          }
        }, err => {})
      },
      goUrl(path, rowData, ) {
        this.$router.push({
          path: '/financial/financalDocument/' + path,
          query: {
            "id": rowData.FrID,
            blank: 'y',
            tab: '单据详情'
          }
        })
      },
      //返回2位小数
      getTwoWei(num) {
        if (num >= 0) {
          return num.toFixed(2);
        }
      }
    }
  }

</script>

<style scoped>
  .classinfo_Dialog .drawerTop2 {
    padding: 10px 20px;
    align-items: center;
  }

  .classinfo_Dialog .drawerTop-d {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(40, 96, 251, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #2860FB;
    font-weight: bold;
  }

  .classinfo_Dialog .drawerTop-t {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }

  .classinfo_Dialog .two-left {
    width: 70px;
    display: inline-block;
    font-size: 12px;
    color: #999999;

  }

  .classinfo_Dialog .two-r {
    font-size: 12px;
    color: #111111;
  }

  .classinfo_Dialog .qtabs {
    border-bottom: 1px solid #E2E2E2;
  }

  .classinfo_Dialog .tis {
    align-items: center
  }

  .classinfo_Dialog .tis .tis-k {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px
  }

  .classinfo_Dialog .tis span {
    font-size: 14px;
    color: #2D2D2D;
    font-weight: 600;
    margin-right: 20px
  }

  .classinfo_Dialog .my-table-details {
    max-width: 230px;
    white-space: normal;
    margin-bottom: 5px;
  }

  .classinfo_Dialog .my-table-details p {
    margin: 0
  }

  .classinfo_Dialog .q-px-lg {
    padding: 0
  }

</style>
