<template>
  <div class="auto clearfix">
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户编号</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <p class="text-left show-font">{{ model.f_userinfo_code }}</p>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户姓名</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="model.f_user_name" placeholder="请输入客户姓名">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-12 col-md-12">
      <div class="col-xs-4 col-sm-2 col-md-2">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户地址</span>
      </div>
      <div class="col-xs-8 col-sm-10 col-md-10">
        <input type="text" class="form-control show-font" v-model="model.f_address" placeholder="请输入客户地址">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户电话</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="number" class="form-control show-font" v-model="model.f_user_phone" placeholder="请输入电话号码">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">身份证号</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="model.f_idnumber" placeholder="请输入身份证号">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">保单号</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="number" class="form-control show-font"  v-model="model.f_ins_number" placeholder="请输入保单号">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">上期保费截至日期</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <p class="text-left show-font">{{ model.f_last_insexpiration_date }}</p>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">购买日期</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <datepicker
          readonly
          :value.sync="create_date"
          v-model="create_date"
          :format="'yyyy-MM-dd'"
          default="true"
          placeholder="购买日期" style="width: 60%">
        </datepicker>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">购买年限</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="number" placeholder="购买年限" style="width: 60%" class="form-control show-font" v-model="model.f_salecount">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">生效日期</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <datepicker
          :value.sync="model.f_ins_start_date"
          v-model="model.f_ins_start_date"
          :format="'yyyy-MM-dd'"
          placeholder="请选择生效日期" style="width: 60%">
        </datepicker>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">到期日期</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <datepicker
          :value.sync="model.f_expiration_date"
          v-model="model.f_expiration_date"
          :format="'yyyy-MM-dd'"
           placeholder="到期日期" style="width: 60%">
        </datepicker>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">金额</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="number" class="form-control show-font" v-model="model.f_money" placeholder="请输入金额">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">保险险种</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input-select
          class="select select_list"
          :value.sync="model.f_insurance_type"
          v-model="model.f_insurance_type"
          :options="insuranceTtype"
          :valueSingle="true"
        ></input-select>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">售卖人员</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input-select
          class="select select_list"
          :value.sync="model.f_sale_person"
          v-model="model.f_sale_person"
          :options="paymans"
          :valueSingle="true"
        ></input-select>
      </div>
    </div>
    <div class="row app-row col-xs-12">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;" alt="">
        <span class="text-left font">备注</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input class="form-control show-font" v-model="model.f_comments" placeholder="备注">
      </div>
    </div>
    <div class="col-xs-12 text-center  app-row">
      <button type="button" class="btn btn-lg btn-font btn-color" style="width: 22%;" @click="commitBefore()">确认</button>
    </div>
    <modal v-if="showmOrder" :show.sync="showmOrder" v-ref:modal :large="true"
           :backdrop="false" title="保险收费">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closeModel"><span>&times;</span></button>
        <h4 class="modal-title">保险收费</h4>
      </header>
      <article slot="modal-body" class="modal-body clearfix">
        <div  class="form-group col-sm-12 panel panel-info">
          <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">收款方式：</label>
            <div class="col-sm-8">
              <v-select :width="'100%'" :value.sync="payType" v-model="payType" :options='payTypes' placeholder='请选择'
                        close-on-select :value-single="true"></v-select>
            </div>
          </div>
        </div>
        <div v-if="zfCode" style="margin-top: 20px; text-align: center;">
          <div id="qrcode" style="margin-top: 25px;width: 266px;height: 266px"></div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-primary" :disabled="isSubmitting" @click="commitCharge()">
          {{ isSubmitting ? '确认中...' : '确认' }}
        </button>
      </footer>
    </modal>
  </div>
</template>
<script>
import { HttpResetClass } from 'vue-client'
import * as Util from '../../../components/Util'
import Vue from 'vue'
import QRCode from 'qrcodejs2'
import {getNextDayString} from "../../../components/Util";
export default {
  title: '手机单户抄表',
  data() {
    return {
      paymanshow:this.$appdata.getSingleValue('app增值收费售卖人员'),
      payType:'app二维码收款',
      paymans:[],
      orderinfo:{},
      f_user_type:'',
      insuranceTtype:[],
      payTypes: this.$appdata.getParam('移动端支付方式'),
      create_date:Util.getNowDate(),
      isCommit:false,
      order: {}, // 订单信息
      f_out_trade_no: '',
      showmOrder:false,
      zfCode:false,
      isSubmitting: false, // 添加防重复提交标志
      isSaveing:false,    // 添加防重复提交标志
      isCheckingOrder: false,
    }
  },
  props: {
    data: {
      type: Object,
      default: function () {
        return {
        }
      }
    },
    model: {
      type: Object,
      default: {}
    }
  },
  ready() {
    new HttpResetClass().load('post', `${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
      data: {
        items: 'tu.*',
        tablename: 't_userinfo ui left join t_userfees tu on tu.f_userinfo_id=ui.f_userinfo_id and tu.f_state = \'有效\' ',
        condition: `ui.f_userinfo_id  = '${this.model.f_userinfo_id}'`,
        orderitem: '1'
      }
    }).then(response => {
      if (response.data.length > 0) {
        this.model.f_last_insexpiration_date = response.data[0].f_expiration_date
      }
    })
    Vue.set(this.model, 'f_money', 0)
    Vue.set(this.model, 'f_fee_type', '保险收费')
    Vue.set(this.model, 'f_comments', '')
    Vue.set(this.model, 'f_salecount', 1)
    Vue.set(this.model, 'f_ins_number', '')
    // Vue.set(this.model, 'f_idnumber', '')
    Vue.set(this.model, 'f_ins_start_date', Util.getNextDayString())
    Vue.set(this.model, 'f_expiration_date', '')
    Vue.set(this.model, 'f_payment', 'app二维码收款')
    Vue.set(this.model, 'f_sale_person', Vue.user.name)
    this.getType()
    this.getEmp()
  },
  methods: {
    calculateExpiration() {
      try {
        const startDateStr = this.model.f_ins_start_date;
        const yearCount = parseInt(this.model.f_salecount, 10);

        console.log('【调试】输入值:', { startDateStr, yearCount });

        if (!startDateStr || isNaN(yearCount) || yearCount <= 0) {
          this.model.f_expiration_date = '';
          return;
        }

        // 1. 严格解析 YYYY-MM-DD 格式
        const match = startDateStr.match(/(\d{4})-(\d{2})-(\d{2})/);
        if (!match) {
          this.model.f_expiration_date = '';
          return;
        }

        const year = parseInt(match[1], 10);
        const month = parseInt(match[2], 10) - 1; // 转为JS月份索引 (0-11)
        const day = parseInt(match[3], 10);

        // 2. 使用 UTC 构建日期，防止时区偏移
        // 这样能确保拿到的就是界面上显示的日期，不会变成昨天
        let date = new Date(Date.UTC(year, month, day));

        // 3. 核心逻辑：使用 setFullYear (这是唯一能正确处理闰年的方法)
        // 注意：setFullYear 会自动处理闰年问题
        date.setFullYear(date.getFullYear() + yearCount);

        // 4. 减去 1 天 (如果业务需要)
        // 使用 setDate 来安全地减天，它会自动处理跨月/跨年
        date.setDate(date.getDate() - 1);

        // 5. 手动格式化为 YYYY-MM-DD (转换回本地时间显示)
        // toLocaleString 会自动根据用户时区转换
        const localDate = new Date(date.toLocaleString());

        const finalYear = localDate.getFullYear();
        const finalMonth = (localDate.getMonth() + 1).toString().padStart(2, '0');
        const finalDay = localDate.getDate().toString().padStart(2, '0');

        const resultStr = `${finalYear}-${finalMonth}-${finalDay}`;
        this.model.f_expiration_date = resultStr;

        console.log('【计算完成】',
          `${year}-${match[2]}-${match[3]}`, '+', yearCount, '年 =', resultStr
        );

      } catch (error) {
        console.error('计算出错:', error);
        this.model.f_expiration_date = '';
      }
    },
    getEmp () {
      let val = {source: 'this.getParentByType($organization$).getChildByName($销售人$).getUsers()',
        userid: `${Vue.user.id}`}
      let http = new HttpResetClass()
      http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/search`, {data: val}, {resolveMsg: null, rejectMsg: null}).then((res) => {
        res.data.forEach((item) => {
          this.paymans.push({label: item.name, value: item.name})
        })
      })
    },
    //获取保险类型
    async getType() {
      let data = {
        tablename: 't_userfiles',
        condition: `f_userinfo_id = '${this.model.f_userinfo_id}'`
      }
      let res = await new HttpResetClass().load('post', this.$androidUtil.getProxyUrl() + '/rs/sql/tel_singleTable', {data: data}, {
        resolveMsg: null,
        rejectMsg: '获取数据失败'
      })
      let str = res.data[0].f_gasproperties
      if (str === '居民用气') {
        this.insuranceTtype = this.$appdata.getParam('居民燃气意外险')
      }else {
        this.insuranceTtype = this.$appdata.getParam('非居民燃气意外险')
      }
    },
    closeModel(){
      this.showmOrder = false
      this.isSubmitting = false
      if (this.orderInterval) {
        clearTimeout(this.orderInterval)
        this.orderInterval = null
      }
    },
    commitBefore(){
      if (!this.model.f_money) {
        this.$showMessage('金额未填写，请填写后重新尝试。')
        return
      }else {
        //转为数字类型
        this.model.f_money = Number(this.model.f_money)
      }
      if (this.paymanshow && !this.model.f_sale_person) {
        return this.$showMessage(`请选择售卖人员！`)
      }
      if (!this.model.f_ins_start_date) {
        this.$showMessage('投保日期未选择，请选择后重新尝试。')
        return
      }
      if (!this.model.f_expiration_date) {
        this.$showMessage('到期日期未选择，请选择后重新尝试。')
        return
      }
      if (!this.model.f_insurance_type) {
        this.$showMessage('保险险种未填写，请填写后重新尝试。')
        return
      }
      this.showmOrder = true
    },
    async ConfirmCode() {
      let data2 = {
        tablename: 't_userfiles',
        condition: `f_userinfo_id = '${this.model.f_userinfo_id}'`
      }
      let res2 = await new HttpResetClass().load('post', this.$androidUtil.getProxyUrl() + '/rs/sql/tel_singleTable', {data: data2}, {
        resolveMsg: null,
        rejectMsg: '获取数据失败'
      })
      let data = {
        f_userinfo_id: this.model.f_userinfo_id,
        type: '保险收费',
        f_user_id: res2.data[0].f_user_id,
        f_userfiles_id: res2.data[0].f_userfiles_id,
        money: this.model.f_money,
        f_payment: this.payType,
        auth_code: '',
        filiale:Vue.user.orgid,
        body: Vue.user.orgs,
        f_operatorid: Vue.user.id,
        f_operator: Vue.user.name,
        f_orgname: Vue.user.orgs,
      }
      let res = await this.$resetpost(`${this.$androidUtil.getProxyUrl()}/api/af-revenue/logic/v4WeiXinPay`, data, {
        resolveMsg: null,
        rejectMsg: '服务器内部出错,'
      })
      res.data.f_payment = this.payType
      res.data.f_orgname =Vue.user.orgs
      console.log('二维码返回结果---', res.data)
      if (res.data.code === '0000') {
        this.order.body = {
          tradeNo: res.data.f_out_trade_no,
          url: res.data.payUrl
        }
        this.f_out_trade_no = res.data.f_out_trade_no
        if (this.f_out_trade_no) {
          this.zfCode=true
          this.showQrCode = true
          this.showButton=false
          console.log(this.order)
          this.$nextTick(() => {
            this.qrcode(this.order.body.url)
          })
          if (this.order.body.tradeNo) {
            this.$showAlert(`正在查询用户付款状态,请勿进行任何操作,耐心等待,如长时间未响应可手动取消`, 'warning', 3000)
            let self = this
            let times = 1
            this.timer1 = window.setInterval(async () => {
              times++
              let res1 = await self.$resetpost(`${this.$androidUtil.getProxyUrl()}/api/af-revenue/logic/V4WeiXinPayStatus`, res.data, {
                resolveMsg: null,
                rejectMsg: '付款码支付查询出错,'
              })
              res1 = res1.data
              // 支付成功关闭定时器
              if (res1.result_msg == '支付确认成功') {
                this.$showMessage('支付成功！！！')
                await this.commit()
                this.clearQrCode()
                this.closeModel()
                window.clearInterval(this.timer1)
                return
              }
              if (res1.result_msg == '支付失败') {
                self.zfCode= false
                self.showButton=true
                this.$showMessage(`支付失败, 请提醒用户重新付款`, 'warning', 3000)
                window.clearInterval(this.timer1)
              }
              if (times > 24) {
                console.log('多次查询未成功')
                self.zfCode= false
                self.showButton=true
                self.$showMessage(`多次查询未成功，请重新收费`, 'warning', 3000)
                window.clearInterval(this.timer1)
              }
            }, 5000)
          }
        } else {
          this.$showMessage('创建订单失败！')
        }
      }

    },

    async commitCharge() {
      // 防止重复提交
      if (this.isSubmitting) {
        return
      }
      if(this.payType =='' || !this.payType ){
        this.$showMessage('请选择支付方式。')
        return
      }
      this.isSubmitting = true // 设置提交状态
      try {
        console.error(Vue.user)
        if (this.payType.includes('二维码')) {
          if (Vue.user.orgs.includes('天长')){
            await this.ConfirmCode()
          }else {
            await this.openQrcode()
          }
        } else {
          await this.commit()
          this.isSubmitting = false // 非二维码支付时在这里重置
        }
      } catch (error) {
        console.error('提交失败:', error)
        this.$showMessage('提交失败')
        this.isSubmitting = false // 重置提交状态
      }
    },
    async getOrderInformation() {
      console.log('查询订单信息！！！')
      // 添加标志位，防止重复执行
      if (this.isCheckingOrder) {
        return;
      }
      try {
        this.isCheckingOrder = true;
        let http = new HttpResetClass()
        let res = await http.load('POST', `${this.$androidUtil.getProxyUrl()}/wx/rs/pay/microPayOrderStatus`, {
          "filiale": "siyang",
          "flag": "microPayRongHaoJsbc",
          "f_out_trade_no": `${this.f_out_trade_no}`,
          "posid": this.$androidUtil.getDeviceIEMI()
        }, {
          resolveMsg: null,
          rejectMsg: '订单查询失败！！！'
        })
        // 支付成功
        if (res.data.trade_state.includes('已支付')) {
          this.orderinfo = res.data
          clearTimeout(this.orderInterval)
          this.$showMessage('支付成功！！！')
          await this.commit()
          this.clearQrCode()
          this.closeModel()
        } else if (res.data.trade_state.includes("已退款")) {
          this.$showMessage("已退款，请重新下单支付！！！");
          this.clearQrCode();
          this.closeModel()
          if (this.orderInterval) {
            clearTimeout(this.orderInterval);
            this.orderInterval = null
          }
        }else{
          this.isCheckingOrder = false
          //重新查询订单状态
          this.orderInterval = setTimeout(() => {
            this.getOrderInformation()
          }, 3000)
        }
      } catch (error) {
        console.error("查询订单状态失败:", error);
        if (this.orderInterval) {
          clearTimeout(this.orderInterval);
          this.orderInterval = null
        }
        this.isCheckingOrder = false; // 发生错误时重置标志位
      } finally {
        // 确保在非轮询状态下重置标志位
        if (!this.orderInterval) {
          this.isCheckingOrder = false;
        }
      }
    },
    async openQrcode() {
      this.clearQrCode()
      let data = {
        tablename: 't_userfiles',
        condition: `f_userinfo_id = '${this.model.f_userinfo_id}'`
      }
      let res = await new HttpResetClass().load('post', this.$androidUtil.getProxyUrl() + '/rs/sql/tel_singleTable', {data: data}, {
        resolveMsg: null,
        rejectMsg: '获取数据失败'
      })
      let reqdata = {
        "filiale": "siyang",
        "flag": "microPayRongHaoJsbc",
        "money": this.model.f_money,
        "proinfo": "保险收费",
        "f_userinfo_id": this.model.f_userinfo_id,
        "f_userfiles_id": res.data[0].f_userfiles_id,
        "f_user_id": res.data[0].f_user_id,
        "posid": this.$androidUtil.getDeviceIEMI()
      }
      new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/wx/rs/pay/jsApiPay`, reqdata).then(res => {
        if (res.data.result_code.includes('SUCCESS')) {
          this.order = res.data
          this.f_out_trade_no = res.data.f_out_trade_no
          this.zfCode = true
          this.$nextTick(() => {
            this.qrcode(res.data.qr_code)
          })
          this.getOrderInformation()
        } else {
          this.$showMessage('网络异常。。。')
        }
      })
    },
    qrcode(url) {
      new QRCode('qrcode', {
        text: url, // 设置二维码内容或跳转地址
        width: 266, // 设置宽度，单位像素
        height: 266, // 设置高度，单位像素
        correctLevel: QRCode.CorrectLevel.L //容错率，L/M/Hs
      })
    },
    clearQrCode() {
      if (document.getElementById('qrcode')) {
        document.getElementById('qrcode').innerHTML = ''
      }
    },
    async commit() {
      try {
        let commit_data = this.model
        commit_data.f_sale_person = this.model.f_sale_person ? this.model.f_sale_person :Vue.user.name
        commit_data.f_buy_date = this.create_date
        commit_data.f_total_ins_charge = 0
        commit_data.f_operatorid = Vue.user.id
        commit_data.f_operator = Vue.user.name
        commit_data.f_operate_date = Util.toStandardTimeString()
        commit_data.f_state = '有效'
        commit_data.f_orgid = Vue.user.orgid
        commit_data.f_orgname = Vue.user.orgs
        commit_data.f_depid = Vue.user.depids
        commit_data.f_depname = Vue.user.deps
        commit_data.f_serial_id = this.orderinfo.f_out_trade_no
        commit_data.f_payment = this.payType || 'app二维码收款'
        commit_data.order=this.order
        const response = await new HttpResetClass().load('post', `${this.$androidUtil.getProxyUrl()}/api/af-revenue/logic/saveInsInfo`, { data: commit_data })
        this.$showMessage('提交成功')
        this.orderinfo = {}
        this.showmOrder = false
      } catch (error) {
        console.error('提交失败:', error)
        this.$showMessage('提交失败')
        this.showmOrder = false
      }
    },
  },
  watch: {
    'model.f_ins_start_date'(newDate) {
      if (newDate && this.model.f_salecount) {
        this.calculateExpiration();
      }
      else if (!newDate) {
        this.model.f_expiration_date = '';
      }
    },
    'model.f_salecount'(newCount) {
      const yearCount = parseInt(newCount, 10);
      if (yearCount > 0 && this.model.f_ins_start_date) {
        this.calculateExpiration();
      }
      else if (isNaN(yearCount) || yearCount <= 0) {
        this.model.f_expiration_date = '';
      }
    }
  }
}
</script>
<style scoped>
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}

.app-row-none-border {
  background-color: white;
  padding: 10px 10px 0 10px;
}

.font {
  font: 15px PingFang-SC-Medium;
  color: #666666;
}

.show-font {
  font: 15px PingFang-SC-Medium;
  color: #333333
}

.btn-font {
  font: 600 16px PingFang-SC-Bold;
  color: #499EDF;
}

.btn-color {
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #499EDF;
}
</style>
