<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>预约核销</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane label="当日预约率">
        <!-- 查询和其他操作 -->
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery">
            <el-form-item label="下单时间">
              <el-date-picker v-model="timeArray" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                :picker-options="pickerOptions" />
            </el-form-item>
            <el-form-item label="订单渠道">
              <el-select v-model="listQuery.orderChannel" clearable placeholder="请选择销售渠道">
                <el-option v-for=" object in orderChannelMap" :key="object.id" :label="object.name" :value="object.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="filter-item" type="primary" icon="el-icon-search"
                @click="getSalesList(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getSalesList(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">此报表数据延迟一天</div>
          </el-form>
        </div>

        <!-- 查询结果 -->
        <el-table :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="下单日期" prop="createTime" />
          <el-table-column align="center" label="渠道" prop="orderChannel" />
          <el-table-column align="center" label="订单数量" prop="orderNum" />
          <el-table-column align="center" label="当日预约数据" prop="drYyNum" />
          <el-table-column align="center" label="当日预约率" prop="yyl" />
          <el-table-column align="center" label="预约后退款" prop="yyhTkNum" />
          <el-table-column align="center" label="预约订单数量" prop="yyNum" />
          <el-table-column align="center" label="服务已完成" prop="wcNum" />
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
          @pagination="getSalesList(false)" />
      </el-tab-pane>
      <el-tab-pane label="预约后退款(订单维度)">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery2">
            <el-form-item label="下单时间">
              <el-date-picker v-model="timeArray2" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="访问开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
            </el-form-item>
            <el-form-item label="订单渠道">
              <el-select v-model="listQuery2.orderChannel" clearable placeholder="请选择销售渠道">
                <el-option v-for=" object in orderChannelMap" :key="object.id" :label="object.name" :value="object.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="filter-item" type="primary" icon="el-icon-search"
                @click="getSalesTotalList(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getSalesTotalList(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">此报表数据延迟一天,其中 预约后退款=[预约后1小时退款]+[预约后1-4小时退款]+[约后4小时以上退款]</div>
          </el-form>
        </div>
        <el-table :data="list2" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="下单日期" prop="createTime" />
          <el-table-column align="center" label="渠道" prop="orderChannel" />
          <el-table-column align="center" label="订单数量" prop="orderNum" />
          <el-table-column align="center" label="预约订单数量" prop="yyNum" />
          <el-table-column align="center" label="服务已完成" prop="wcNum" />
          <el-table-column align="center" label="退款总数" prop="tkNum" />
          <el-table-column align="center" label="预约后退款" prop="yyhTkNum" />
          <el-table-column align="center" label="预约后1小时退款" prop="tkO" />
          <el-table-column align="center" label="预约后1-4小时退款" prop="tkT" />
          <el-table-column align="center" label="预约后4小时以上退款" prop="tkTh" />
          <el-table-column align="center" label="服务开始后退款" prop="tkF" /> 
          <el-table-column align="center" label="服务开始前4小时内退款" prop="fwInTh" />
          <el-table-column align="center" label="服务开始前4小时外退款" prop="fwOutTh" />
          <el-table-column align="center" label="前一晚21点后申请的次日早单的退款" prop="fwTom" />
        </el-table>

        <pagination v-show="total2 > 0" :total="total2" :page.sync="listQuery2.page" :limit.sync="listQuery2.limit"
          @pagination="getSalesTotalList(false)" />
      </el-tab-pane>
      <el-tab-pane label="预约后退款(预约维度)">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery6">
            <el-form-item label="预约日期">
              <el-date-picker v-model="timeArray6" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="访问开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
            </el-form-item>
            <el-form-item label="订单渠道">
              <el-select v-model="listQuery6.orderChannel" clearable placeholder="请选择销售渠道">
                <el-option v-for=" object in orderChannelMap" :key="object.id" :label="object.name" :value="object.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="filter-item" type="primary" icon="el-icon-search"
                @click="getQuery6List(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getQuery6List(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">
              此报表数据延迟一天,其中 预约后退款=[预约后1小时退款]+[预约后1-4小时退款]+[约后4小时以上退款] 
            </div>
          </el-form>
        </div>
        <el-table :data="list6" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="预约日期" prop="bookDate" />
          <el-table-column align="center" label="城市" prop="city" />
          <el-table-column align="center" label="渠道" prop="orderChannel" />
          <el-table-column align="center" label="加盟商" prop="fraName" />
          <el-table-column align="center" label="预约次数" prop="yyNum" />
          <el-table-column align="center" label="服务已完成" prop="wcNum" />
          <el-table-column align="center" label="服务已取消" prop="cancelNum" />
          <el-table-column align="center" label="退款总数" prop="tkNum" /> 
          <el-table-column align="center" label="预约后退款" prop="yyhTkNum" />
          <el-table-column align="center" label="预约后1小时退款" prop="tkO" />
          <el-table-column align="center" label="预约后1-4小时退款" prop="tkT" />
          <el-table-column align="center" label="预约后4小时以上退款" prop="tkTh" />
          <el-table-column align="center" label="服务开始后退款" prop="tkF" />
        </el-table>

        <pagination v-show="total6 > 0" :total="total6" :page.sync="listQuery6.page" :limit.sync="listQuery6.limit"
          @pagination="getQuery6List(false)" />
      </el-tab-pane>
      <el-tab-pane label="核销率周报">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQueryMT">
            <el-form-item label="下单时间">
              <!--              <el-date-picker v-model="timeArray3" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="下单开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />-->
              <div class="block">
                <!--                        <span style="margin-right:10px">周期选择: </span>-->
                <el-date-picker v-model="value1" type="week" format="yyyy 第 WW 周" placeholder="选择周"
                  :picker-options="pickerOptions2" style="width: 180px" @change="changeDate">
                </el-date-picker>
                至
                <el-date-picker v-model="value2" type="week" format="yyyy 第 WW 周" placeholder="选择周"
                  :picker-options="pickerOptions2" style="width: 180px" @change="changeDate2">
                </el-date-picker>
                <span v-if="value1 && value2" style="margin-left: 10px">
                  {{ date1 }} <b>至</b> {{ date2 }}， 共 {{ weekNum }} 周
                </span>
              </div>
            </el-form-item>
            <el-form-item label="订单渠道">
              <el-select v-model="listQueryMT.orderChannel" clearable placeholder="请选择销售渠道">
                <el-option v-for=" object in orderChannelMap" :key="object.id" :label="object.name" :value="object.id" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search"
                @click="getMTSDList(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getMTSDList(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">此报表数据延迟一天</div>
          </el-form>
        </div>

        <el-table :data="listMT" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <!--          <el-table-column align="center" label="下单日期（周）" prop="createTime" width="200px" >
            <template slot-scope="scope">{{ dateCl(scope.row.createTime) }}</template>
          </el-table-column>-->
          <el-table-column align="center" label="下单日期（周）" prop="createTime" />
          <el-table-column align="center" label="日期范围" prop="dateRange" />
          <el-table-column align="center" label="渠道" prop="orderChannel" />
          <el-table-column align="center" label="订单数量" prop="orderNum" />
          <el-table-column align="center" label="预约订单数量" prop="yyNum" />
          <el-table-column align="center" label="T+7服务已完成" prop="wcNumS" />
          <el-table-column align="center" label="T+7核销率" prop="hxlS" />
          <el-table-column align="center" label="T+15服务已完成" prop="wcNumF" />
          <el-table-column align="center" label="T+15核销率" prop="hxlF" />
          <el-table-column align="center" label="T+30服务已完成" prop="wcNumT" />
          <el-table-column align="center" label="T+30核销率" prop="hxlT" />
          <el-table-column align="center" label="大于T+30服务已完成" prop="wcNumB" />
          <el-table-column align="center" label="大于T+30核销率" prop="hxBT" />
        </el-table>

        <pagination v-show="total3 > 0" :total="total3" :page.sync="listQueryMT.page" :limit.sync="listQueryMT.limit"
          @pagination="getMTSDList(false)" />
      </el-tab-pane>
      <el-tab-pane label="核销率月报">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery4">

            <el-form-item label="下单时间">
              <el-date-picker v-model="timeArray4" type="monthrange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="下单开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item label="订单渠道">
              <el-select v-model="listQuery4.orderChannel" clearable placeholder="请选择销售渠道">
                <el-option v-for=" object in orderChannelMap" :key="object.id" :label="object.name" :value="object.id" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search"
                @click="getCouponSummary(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getCouponSummary(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">此报表数据延迟一天</div>
          </el-form>
        </div>

        <!-- <div>注：只含有服务已完成的订单</div> -->
        <el-table :data="couponSummaryList" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="下单日期(月)" prop="createTime" />
          <el-table-column align="center" label="渠道" prop="orderChannel" />
          <el-table-column align="center" label="订单数量" prop="orderNum" />
          <el-table-column align="center" label="预约订单数量" prop="yyNum" />
          <el-table-column align="center" label="7天内服务已完成" prop="wcNumS" />
          <el-table-column align="center" label="7天内核销率" prop="hxlS" />
          <el-table-column align="center" label="8-15天内服务已完成" prop="wcNumF" />
          <el-table-column align="center" label="8-15天内核销率" prop="hxlF" />
          <el-table-column align="center" label="16-30天内服务已完成" prop="wcNumT" />
          <el-table-column align="center" label="16-30天内核销率" prop="hxlT" />
          <el-table-column align="center" label="大于30天服务已完成" prop="wcNumB" />
          <el-table-column align="center" label="大于30天核销率" prop="hxBT" />
        </el-table>

        <pagination v-show="totalCouponSummary > 0" :total="totalCouponSummary" :page.sync="listQuery4.page"
          :limit.sync="listQuery4.limit" @pagination="getCouponSummary(false)" />
      </el-tab-pane>
      <el-tab-pane label="核销明细(加盟商)">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery7">

            <el-form-item label="预约日期">
              <el-date-picker v-model="timeArray7" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="下单开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item label="订单渠道">
              <el-select v-model="listQuery7.orderChannel" clearable placeholder="请选择销售渠道">
                <el-option v-for=" object in orderChannelMap" :key="object.id" :label="object.name" :value="object.id" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search"
                @click="getVerifyDetailByFraId(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getVerifyDetailByFraId(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">此报表数据延迟一天，预约次数包括取消和退款</div>
          </el-form>
        </div>
 
        <el-table :data="list7" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="预约日期" prop="bookDate" />
          <el-table-column align="center" label="订单渠道" prop="orderChannel" />
          <el-table-column align="center" label="订单类型" prop="orderType" />
          <el-table-column align="center" label="订单来源" prop="orderSource" />
          <el-table-column align="center" label="城市" prop="city" />
          <el-table-column align="center" label="加盟商" prop="fraName" />
          <el-table-column align="center" label="服务商品Id" prop="goodsId" />
          <el-table-column align="center" label="服务商品" prop="goodsName" />
          <el-table-column align="center" label="预约次数" prop="yyNum" />
          <el-table-column align="center" label="退款次数" prop="refundNum" />
          <el-table-column align="center" label="取消次数" prop="cancelNum" />
          <el-table-column align="center" label="用户改约取消" prop="changeDateNum" />
          <el-table-column align="center" label="暂时不预约取消" prop="pauseNum" />
          <el-table-column align="center" label="服务力不足取消" prop="lackNum" />
          <el-table-column align="center" label="客户失联取消" prop="disconnectNum" />
          <el-table-column align="center" label="退款取消" prop="refundCancelNum" />
          <el-table-column align="center" label="其他取消" prop="otherNum" />
          <el-table-column align="center" label="服务已完成" prop="wcNum" />
          <el-table-column align="center" label="核销金额" prop="amount" /> 
          <el-table-column align="center" label="待服务次数" prop="waitNum" />
        </el-table>

        <pagination v-show="listTotal7 > 0" :total="listTotal7" :page.sync="listQuery7.page"
          :limit.sync="listQuery7.limit" @pagination="getVerifyDetailByFraId(false)" />
      </el-tab-pane>
      <el-tab-pane label="核销明细(达人)">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery8">

            <el-form-item label="预约日期">
              <el-date-picker v-model="timeArray8" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="下单开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item label="订单渠道">
              <el-select v-model="listQuery8.orderChannel" clearable placeholder="请选择销售渠道">
                <el-option v-for=" object in orderChannelMap" :key="object.id" :label="object.name" :value="object.id" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search"
                @click="getVerifyDetail(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getVerifyDetail(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">此报表数据延迟一天</div>
          </el-form>
        </div>
 
        <el-table :data="list8" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="预约单编号" prop="detailId" />
          <el-table-column align="center" label="预约单创建时间" prop="createTime" />
          <el-table-column align="center" label="预约日期" prop="bookDate" />
          <el-table-column align="center" label="客户Id" prop="cusId" />
          <el-table-column align="center" label="订单Id" prop="orderId" />
          <el-table-column align="center" label="订单支付时间" prop="payTime" />
          <el-table-column align="center" label="订单支付金额" prop="payAmount" />
          <el-table-column align="center" label="订单渠道" prop="orderChannel" />
          <el-table-column align="center" label="订单类型" prop="orderType" />
          <el-table-column align="center" label="订单来源" prop="orderSource" /> 
          <el-table-column align="center" label="服务城市" prop="city" /> 
          <el-table-column align="center" label="服务商品Id" prop="goodsId" />
          <el-table-column align="center" label="服务商品" prop="goodsName" />
          <el-table-column align="center" label="预约状态" prop="status" />
          <el-table-column align="center" label="客户取消预约原因" prop="cancelReasonCus" />
          <el-table-column align="center" label="商家取消预约原因" prop="cancelReasonBus" />  
          <el-table-column align="center" label="是否改约取消" prop="changeCancel" />  
          <el-table-column align="center" label="服务商" prop="provider" />
          <el-table-column align="center" label="视频或直播间ID" prop="itemId" />
          <el-table-column align="center" label="带货达人账号" prop="tanletId" />
          <el-table-column align="center" label="达人名称" prop="tanletName" /> 
          <el-table-column align="center" label="核销金额" prop="amount" /> 
        </el-table>

        <pagination v-show="listTotal8 > 0" :total="listTotal8" :page.sync="listQuery8.page"
          :limit.sync="listQuery8.limit" @pagination="getVerifyDetail(false)" />
      </el-tab-pane>
      <el-tab-pane label="核销预约明细">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery9">

            <el-form-item label="预约日期">
              <el-date-picker v-model="timeArray9" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="下单开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item label="订单渠道">
              <el-select v-model="listQuery9.orderChannel" clearable placeholder="请选择销售渠道">
                <el-option v-for=" object in orderChannelMap" :key="object.id" :label="object.name" :value="object.id" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="工单状态">
              <el-select v-model="listQuery9.status" clearable multiple placeholder="请选择工单状态">
                <el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search"
                @click="getList9(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getList9(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">此报表数据延迟一天</div>
          </el-form>
        </div>
 
        <el-table :data="list9" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="预约单编号" prop="detailId" />
          <el-table-column align="center" label="预约单创建时间" prop="createTime" />
          <el-table-column align="center" label="预约日期" prop="bookDate" /> 
          <el-table-column align="center" label="预约状态" prop="status" />
          <el-table-column align="center" label="订单编号" prop="orderSn" />
          <el-table-column align="center" label="订单支付时间" prop="payTime" />
          <el-table-column align="center" label="订单支付金额" prop="payAmount" />
          <el-table-column align="center" label="订单渠道" prop="orderChannel" />
          <el-table-column align="center" label="订单类型" prop="orderType" />
          <el-table-column align="center" label="订单来源" prop="orderSource" /> 
          <el-table-column align="center" label="服务城市" prop="city" />  
          <el-table-column align="center" label="服务商品" prop="goodsName" />
          <el-table-column align="center" label="需服务次数" prop="serviceCnt" />
          <el-table-column align="center" label="服务加盟商" prop="fraName" />
          <el-table-column align="center" label="服务GMv" prop="amount" /> 
          <el-table-column align="center" label="补差服务GMv" prop="amountPlug" /> 
        </el-table>

        <pagination v-show="listTotal9 > 0" :total="listTotal9" :page.sync="listQuery9.page"
          :limit.sync="listQuery9.limit" @pagination="getList9(false)" />
      </el-tab-pane>

      <el-tab-pane label="待联系工单跟进表">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQueryCouponDetail">

            <el-form-item label="下单时间">
              <el-date-picker v-model="timeArray5" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="下单开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
            </el-form-item>

            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search"
                @click="getCouponDetail(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getCouponDetail(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">此报表数据延迟一天</div>
          </el-form>
        </div>

        <!-- <div>注：只含有服务已完成的订单</div> -->
        <el-table :data="couponDetailList" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="下单日期" prop="createTime" />
          <el-table-column align="center" label="加盟商" prop="fraName" />
          <el-table-column align="center" label="分配数量" prop="dlszs" />
          <el-table-column align="center" label="转预约数" prop="yys" />
          <el-table-column align="center" label="转化率" prop="zyl" />
          <el-table-column align="center" label="已跟进" prop="ygj" />
          <el-table-column align="center" label="未处理" prop="wcl" />
          <el-table-column align="center" label="有预期" prop="yyq" />
          <el-table-column align="center" label="暂不预约" prop="zbyy" />
          <el-table-column align="center" label="已退款" prop="ytk" />
        </el-table>

        <pagination v-show="totalCouponDetail > 0" :total="totalCouponDetail" :page.sync="listQueryCouponDetail.page"
          :limit.sync="listQueryCouponDetail.limit" @pagination="getCouponDetail(false)" />
      </el-tab-pane>

      <el-tab-pane label="预约汇总(加盟商)">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery10">
 
            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search"
                @click="getList10(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getList10(true)">导出</el-button>
            </el-form-item>
            <div style="color:red;font-size: 12px;">此报表数据延迟一天</div>
          </el-form>
        </div>
 
        <el-table :data="list10" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="加盟商" prop="fraName" />
          <el-table-column align="center" label="入驻时间" prop="createTime" />
          <el-table-column align="center" label="城市" prop="city" />
          <el-table-column align="center" label="订单渠道" prop="channel" />
          <el-table-column align="center" label="预约总数（包括待履约、已服务、取消、退款）" prop="total" />
          <el-table-column align="center" label="待履约" prop="needed" />
          <el-table-column align="center" label="已服务" prop="provided" />
          <el-table-column align="center" label="已取消" prop="cancel" />
          <el-table-column align="center" label="已退款" prop="refund" />
          <el-table-column align="center" label="匹配中" prop="matching" /> 
          <el-table-column align="center" label="待联系" prop="contact" />  
        </el-table>

        <pagination v-show="listTotal10 > 0" :total="listTotal10" :page.sync="listQuery10.page"
          :limit.sync="listQuery10.limit" @pagination="getList10(false)" />
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import Pagination from "./../common/Pagination";
import service from "../../script/api/service";
import "@/script/table2excel";
import moment from "moment";

export default {
  name: "callTask",
  components: { Pagination },
  data() {
    return {
      orderChannelMap: [],
      statusMap: {
        1: '待履约',
        2: '服务中',
        3: '服务已提供',
        4: '服务已完成',
        5: '取消',
        6: '已退款',
        7: '匹配中',
        8: '待联系', 
      },
      listLoading: false,
      cityList: [],
      timeArray: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),
      ],
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        order: "desc"
      },
      timeArray2: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),
      ],
      list2: [],
      total2: 0,
      listQuery2: {
        //ib进电的结果
        page: 1,
        limit: 20,
        orderChannel: "",
        order: "desc",
      },
      listMT: [],
      listQueryMT: {
        page: 1,
        limit: 20,
        orderChannel: "",
        startDate: '',
        endDate: ''
      },
      timeArray3: [],
      timeArray4: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date())],
      timeArray5: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date())],
      timeArray6: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date())],
      timeArray7: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date())],  
      timeArray8: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date())], 
      timeArray9: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date())],
      total3: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: null,
      value2: null,
      date1: '',
      date2: '',
      pickerOptions2: {
        firstDayOfWeek: 1,
        shortcuts: [{
          text: '近1周',
          onClick: (picker) => {
            this.onWeekChange(picker, 1)
          }
        }, {
          text: '近4周',
          onClick: (picker) => {
            this.onWeekChange(picker, 4)
          }
        }/*, {
          text: '近12周',
          onClick: (picker) => {
            this.onWeekChange(picker, 12)
          }
        }*/]
      },
      //---优惠券
      listQuery4: {
        page: 1,
        limit: 20,
        orderChannel: '',
        isExport: false
      },
      totalCouponSummary: 0,
      couponSummaryList: [],
      listQueryCouponDetail: {
        page: 1,
        limit: 20,
        isExport: false
      },
      totalCouponDetail: 0,
      couponDetailList: [],
      list6: [],
      total6: 0,
      listQuery6: {
        page: 1,
        limit: 20,
        order: "desc"
      },
      list7: [],
      listTotal7: 0,
      listQuery7: {
        page: 1,
        limit: 20,
        order: "desc"
      },
      list8: [],
      listTotal8: 0,
      listQuery8: {
        page: 1,
        limit: 20,
        order: "desc"
      },
      list9: [],
      listTotal9: 0,
      listQuery9: {
        page: 1,
        limit: 20,
        order: "desc"
      }, 
      list10: [],
      total10: 0,
      listQuery10: {
        page: 1,
        limit: 20,
        orderChannel: "",
        startDate: '',
        endDate: ''
      },
    };
  },
  computed: {
    weekNum() {
      return Math.round((this.value2 - this.value1) / (24 * 60 * 60 * 1000 * 7)) + 1
    },
  },
  created() {
    this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));
    this.getOrderChannel();
  },
  methods: {
    getList9(isExport){//核销预约明细报表
      if (this.timeArray9 && this.timeArray9.length === 2) {
        this.listQuery9.startTime = this.timeArray9[0];
        this.listQuery9.endTime = this.timeArray9[1];
      } else {
        this.listQuery9.startTime = null;
        this.listQuery9.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQuery9.isExport = isExport;
      this.listLoading = true;
      let params = {
        page: this.listQuery9.page,
        limit: this.listQuery9.limit,
        startDate: this.listQuery9.startTime,
        endDate: this.listQuery9.endTime,
        isExport: isExport,
        orderChannel: this.listQuery9.orderChannel,
        status:this.listQuery9.status.join(',')
      }

      if (isExport == false) {
        let days = moment(this.timeArray9[1]).diff(moment(this.timeArray9[0]), "days");
        if (days > 31) {
          this.$message.warning("请调整日期范围，不能超过30天");
          return;
        }
        service
          .$axiosBookVerifyList(params)
          .then((response) => {
            this.list9 = response.data.data.list;
            this.listTotal9 = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list9 = [];
            this.listTotal9 = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosBookVerifyExport(params);
        this.listLoading = false;
      }
    },
    getList10(isExport){//预约汇总 by 加盟商
       
      this.listQuery10.isExport = isExport;
      this.listLoading = true;
      let params = {
        page: this.listQuery10.page,
        limit: this.listQuery10.limit, 
        isExport: isExport 
      }

      if (isExport == false) { 
        service
          .$axiosBookTotalListByFra(params)
          .then((response) => {
            this.list10 = response.data.data.list;
            this.listTotal10 = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list10 = [];
            this.listTotal10 = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosBookTotalListByFraExport(params);
        this.listLoading = false;
      }
    },
    getVerifyDetailByFraId(isExport){//核销明细报表--by fra
      if (this.timeArray7 && this.timeArray7.length === 2) {
        this.listQuery7.startTime = this.timeArray7[0];
        this.listQuery7.endTime = this.timeArray7[1];
      } else {
        this.listQuery7.startTime = null;
        this.listQuery7.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQuery7.isExport = isExport;
      this.listLoading = true;
      let params = {
        page: this.listQuery7.page,
        limit: this.listQuery7.limit,
        startDate: this.listQuery7.startTime,
        endDate: this.listQuery7.endTime,
        isExport: isExport,
        orderChannel: this.listQuery7.orderChannel
      }

      if (isExport == false) {
        let days = moment(this.timeArray7[1]).diff(moment(this.timeArray7[0]), "days");
        if (days > 31) {
          this.$message.warning("请调整日期范围，不能超过30天");
          return;
        }
        service
          .$axiosGetVerifyDetailByBookDate(params)
          .then((response) => {
            this.list7 = response.data.data.list;
            this.listTotal7 = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list7 = [];
            this.listTotal7 = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosGetVerifyDetailByBookDateExport(params);
        this.listLoading = false;
      }
    },
    getVerifyDetail(isExport){//核销明细报表--by 达人
      if (this.timeArray8 && this.timeArray8.length === 2) {
        this.listQuery8.startTime = this.timeArray8[0];
        this.listQuery8.endTime = this.timeArray8[1];
      } else {
        this.listQuery8.startTime = null;
        this.listQuery8.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQuery8.isExport = isExport;
      this.listLoading = true;
      let params = {
        page: this.listQuery8.page,
        limit: this.listQuery8.limit,
        startDate: this.listQuery8.startTime,
        endDate: this.listQuery8.endTime,
        isExport: isExport,
        orderChannel: this.listQuery8.orderChannel
      }

      if (isExport == false) {
        let days = moment(this.timeArray8[1]).diff(moment(this.timeArray8[0]), "days");
        if (days > 31) {
          this.$message.warning("请调整日期范围，不能超过30天");
          return;
        }
        service
          .$axiosGetVerifyDetailByTanlet(params)
          .then((response) => {
            this.list8 = response.data.data.list;
            this.listTotal8 = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list8 = [];
            this.listTotal8 = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosGetVerifyDetailByTanletExport(params);
        this.listLoading = false;
      }
    },
    getQuery6List(isExport){//预约后退款-预约维度
      if (this.timeArray6 && this.timeArray6.length === 2) {
        this.listQuery6.startTime = this.timeArray6[0];
        this.listQuery6.endTime = this.timeArray6[1];
      } else {
        this.listQuery6.startTime = null;
        this.listQuery6.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQuery6.isExport = isExport;
      this.listLoading = true;
      let params = {
        page: this.listQuery6.page,
        limit: this.listQuery6.limit,
        startDate: this.listQuery6.startTime,
        endDate: this.listQuery6.endTime,
        isExport: isExport,
        orderChannel: this.listQuery6.orderChannel
      }

      if (isExport == false) {
        let days = moment(this.timeArray6[1]).diff(moment(this.timeArray6[0]), "days");
        if (days > 31) {
          this.$message.warning("请调整日期范围，不能超过30天");
          return;
        }
        service
          .$axiosGetRefundAfterByBookDate(params)
          .then((response) => {
            this.list6 = response.data.data.list;
            this.total6 = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list6 = [];
            this.total6 = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosGetRefundAfterByBookDateExport(params);
        this.listLoading = false;
      }
    },
    getCouponDetail(isExport) {
      if (this.timeArray5 && this.timeArray5.length === 2) {
        this.listQueryCouponDetail.startDate = this.timeArray5[0];
        this.listQueryCouponDetail.endDate = this.timeArray5[1];
      } else {
        this.listQueryCouponDetail.startDate = null;
        this.listQueryCouponDetail.endDate = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }

      if (isExport == false) {
        this.listQueryCouponDetail.isExport = false;
        service
          .$axiosGetContactOrder(this.listQueryCouponDetail)
          .then((response) => {
            this.couponDetailList = response.data.data.list;
            this.totalCouponDetail = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.couponDetailList = [];
            this.totalCouponDetail = 0;
            this.listLoading = false;
          });
      }
      else {
        this.listQueryCouponDetail.isExport = true;
        service.$axiosGetContactOrderExport(this.listQueryCouponDetail);
        this.listLoading = false;
      }
    },
    getCouponSummary(isExport) {
      if (this.timeArray4 && this.timeArray4.length === 2) {
        /* this.listQuery4.startDate = this.timeArray4[0];
         this.listQuery4.endDate=this.timeArray4[1];*/
        let sDate = new Date(this.timeArray4[0]);
        let fDate = new Date(this.timeArray4[1]);
        if (this.monthDiff(sDate, fDate) > 12) {
          this.$message.warning("最多只能查询12个月的范围");
          return;
        }
        this.listQuery4.startDate = this.firstDay(sDate.getFullYear(), sDate.getMonth() + 1)
        this.listQuery4.endDate = this.getLastDay(fDate.getFullYear(), fDate.getMonth() + 1);
      } else {
        this.listQuery4.startDate = null;
        this.listQuery4.endDate = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      if (isExport == false) {
        this.listQuery4.isExport = false
        service
          .$axiosGetVerificationRateMonth(this.listQuery4)
          .then((response) => {
            this.couponSummaryList = response.data.data.list;
            this.totalCouponSummary = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.couponSummaryList = [];
            this.total3 = 0;
            this.listLoading = false;
          });
      }
      else {
        this.listQuery4.isExport = true;
        service.$axiosGetVerificationRateMonthExport(this.listQuery4);
        this.listLoading = false;
      }
    },

    getOrderChannel() {
      service
        .$axiosGetOrderChannel().then(res => [
          this.orderChannelMap = res.data.data
        ])
    },
    getMTSDList(isExport) {
      if (this.value1 && this.value2) {
        this.listQueryMT.startDate = this.date1;
        this.listQueryMT.endDate = this.date2;
      } else {
        this.listQueryMT.startDate = null;
        this.listQueryMT.endDate = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQueryMT.isExport = isExport;
      this.listLoading = true;

      if (isExport == false) {
        service
          .$axiosGetVerificationRateWeek(this.listQueryMT)
          .then((response) => {
            this.listMT = response.data.data.list;
            this.total3 = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.listMT = [];
            this.total3 = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosGetVerificationRateWeekExport(this.listQueryMT);
        this.listLoading = false;
      }
    },
    getSalesList(isExport) {
      console.info(this.timeArray);
      /* if (!this.listQuery.orderChannel) {
         this.$message.warning("请先选择销售渠道再进行查询");
         return false;
       }*/
      if (this.timeArray && this.timeArray.length === 2) {
        this.listQuery.startTime = this.timeArray[0];
        this.listQuery.endTime = this.timeArray[1];
      } else {
        this.listQuery.startTime = null;
        this.listQuery.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQuery.isExport = isExport;
      this.listLoading = true;
      let params = {
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        startDate: this.listQuery.startTime,
        endDate: this.listQuery.endTime,
        isExport: isExport,
        orderChannel: this.listQuery.orderChannel
      }

      if (isExport == false) {
        let days = moment(this.timeArray[1]).diff(moment(this.timeArray[0]), "days");
        if (days > 31) {
          this.$message.warning("请调整日期范围，不能超过30天");
          return;
        }
        service
          .$axiosGetOrderReservationRate(params)
          .then((response) => {
            this.list = response.data.data.list;
            this.total = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list = [];
            this.total = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosGetOrderReservationRateExport(params);
        this.listLoading = false;
      }

    },
    getSalesTotalList(isExport) {
      if (this.timeArray2 && this.timeArray2.length === 2) {
        this.listQuery2.startDate = this.timeArray2[0];
        this.listQuery2.endDate = this.timeArray2[1];
      } else {
        this.listQuery2.startDate = null;
        this.listQuery2.endDate = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQuery2.isExport = isExport;
      this.listLoading = true;

      if (isExport == false) {
        service
          .$axiosGetRefundAfterReservation(this.listQuery2)
          .then((response) => {
            this.list2 = response.data.data.list;
            this.total2 = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list2 = [];
            this.total2 = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosGetRefundAfterReservationExport(this.listQuery2);
        this.listLoading = false;
      }
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    onWeekChange(picker, k) { // 选中近k周后触发的操作
      this.value1 = moment().isoWeekday(-(5 + (k - 1) * 7)).toDate()
      this.value2 = moment().isoWeekday(-5).toDate()  //value2与k值无关，因为它总是为最近一周的周一
      this.$forceUpdate()   // 这里如果不强制更新视图，会出现value值改变而视图中的第几周和日期无变化的情况
    },
    changeDate() {
      //this.date1=this.getWeek(this.value1);
    },
    changeDate2() {
      //this.date2=this.getWeek(this.value2);
      console.log(this.date2)
      console.log(this.date1)
      if (this.date2 < this.date1) {
        this.value2 = "";
        this.$message.error('结束时间不能小于开始时间')
      }
    },
    getWeek(val) {
      let firstDay = new Date(val.getFullYear(), 0, 1)
      let dayOfWeek = firstDay.getDay() // 2020-01-01是周三  dayOfWeek==3
      let spendDay = 1
      if (dayOfWeek != 0) {
        spendDay = 7 - dayOfWeek + 1 // 5 离下周一还有5天
      }
      firstDay = new Date(val.getFullYear(), 0, 1 + spendDay) // 2020-01-06是2020年第一个周一，是2020年第二个周
      let d = Math.ceil((val.valueOf() - firstDay.valueOf()) / 86400000) // 当前时间距离2020-01-06有几天
      let result = Math.ceil(d / 7) // 换算成周为单位 2020-01-06result是0,但其实是第二个周，所以默认加2
      let week = result + 2 //如果使用的是默认为加2（如果将自然周设置为周一到周日则是加1）
      return (
        this.dataFomat(val.valueOf() - 86400000) +
        '~' +
        this.dataFomat(val.valueOf() + 5 * 86400000)
      )

    },
    dataFomat(time) {
      const date = new Date(time)
      const H = date.getFullYear()
      const M = (date.getMonth() + 1).toString().padStart(2, 0)
      const D = date.getDate().toString().padStart(2, 0)
      return `${H}年${M}月${D}日`
    },
    dateCl: function (date) {
      let arr = date.split("-");
      let weekArr = this.whichWeek(arr[0]);
      let result = weekArr[arr[1]];
      return date + "周" + "(" + result.year + "-" + result.month + "-" + result.date + " ~ " + result.last.year + "-" + result.last.month + "-" + result.last.date + ")"
    },
    //时间戳转年月日  参数是秒的时间戳 函数返回一个对象 对象里有年 月 日
    yearDay(long) {
      var time = new Date(long * 1000)
      var year = time.getFullYear();
      var month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
      var date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
      var yearday = { year, month, date }
      return yearday
    },
    //计算一年中的每一周都是从几号到几号
    //第一周为1月1日到 本年的 第一个周日
    //第二周为 本年的 第一个周一 往后推到周日
    //以此类推 再往后推52周。。。
    //如果最后一周在12月31日之前，则本年有垮了54周，反之53周
    //12月31 日不论是周几，都算为本周的最后一天
    //参数年份 ，函数返回一个数组，数组里的对象包含 这一周的开始日期和结束日期
    whichWeek(year) {
      var d = new Date(year, 0, 1);
      while (d.getDay() != 1) {
        d.setDate(d.getDate() + 1);
      }
      let arr = []
      let longnum = d.setDate(d.getDate())
      if (longnum > +new Date(year, 0, 1)) {
        let obj = this.yearDay(+new Date(year, 0, 1) / 1000)
        obj.last = this.yearDay(longnum / 1000 - 86400)
        arr.push(obj)
      }
      let oneitem = this.yearDay(longnum / 1000)
      oneitem.last = this.yearDay(longnum / 1000 + 86400 * 6)
      arr.push(oneitem)
      var lastStr
      for (var i = 0; i < 51; i++) {
        let long = d.setDate(d.getDate() + 7)
        let obj = this.yearDay(long / 1000)
        obj.last = this.yearDay(long / 1000 + 86400 * 6)
        lastStr = long + 86400000 * 6
        arr.push(obj)
      }
      if (lastStr < +new Date(year + 1, 0, 1)) {
        let obj = this.yearDay(lastStr / 1000 + 86400)
        obj.last = this.yearDay(+new Date(year + 1, 0, 1) / 1000 - 86400)
        arr.push(obj)
      } else {
        arr[arr.length - 1].last = this.yearDay(+new Date(year + 1, 0, 1) / 1000 - 86400)
      }
      return arr
    },
    getLastDay(year1, month1) {
      let lastDay = new Date(year1, month1, 0);
      let year = lastDay.getFullYear();
      let month = lastDay.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let day = lastDay.getDate();
      day = day < 10 ? '0' + day : day;
      return year + "-" + month + "-" + day;
    },
    firstDay(year1, month1) {
      let lastDay = new Date(year1, month1 - 1, 1) //这个月的第一天;
      let year = lastDay.getFullYear();
      let month = lastDay.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let day = lastDay.getDate();
      day = day < 10 ? '0' + day : day;
      return year + "-" + month + "-" + day;
    },
    monthDiff(d1, d2) {
      let months;
      months = (d2.getFullYear() - d1.getFullYear()) * 12;
      months -= d1.getMonth();
      months += d2.getMonth();
      return months <= 0 ? 0 : months;
    }
  },
  watch: {
    value1() {
      if (!this.value1) return
      if (this.value1 >= this.value2) {   // 保证value2大于value1
        this.value2 = this.value1
      }
      this.date1 = moment(this.value1.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
    },
    value2() {
      if (!this.value2) return
      this.date2 = moment(this.value2.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
    },

  }
};
</script>

<style>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.panel-group {
  display: flex;
  flex-flow: wrap;
}

.panel-group .card-panel {
  min-height: 130px;
  border-radius: 6px;
  padding: 10px 10px 0px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  -webkit-box-shadow: 2px 2px 10px rgb(0 0 0 / 10%);
  box-shadow: 2px 2px 10px rgb(0 0 0 / 10%);
  border-color: rgba(0, 0, 0, .05);
  margin: 10px
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  /*dashed*/
  padding: 10px 0;
}

.card-data {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

.card-item {
  display: flex;
  line-height: 20px;
  font-size: 13px;
}

.card-sub-item {
  margin-right: 20px;
  border-right: 1px dashed #ccc;
  width: 150px;
}

.card-sub-item .title {
  font-weight: 600;
}

.card-footer {
  height: 40px;
  line-height: 40px;
  border-top: 1px dashed #ccc;
  text-align: center;
  margin-top: 10px;
  color: #36a3f7;
}
</style>
