<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="datetimerange" 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="listQuery.campaignId" style="width: 200px" class="filter-item" placeholder="请选择任务">
                <el-option v-for="(item, index) in campaignList" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 查询结果 -->
        <el-table :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="任务名" min-width="150" prop="campaignName" />
          <el-table-column align="center" label="坐席" prop="userName" />
          <el-table-column align="center" label="分配任务数" prop="total" />
          <el-table-column align="center" label="已拨打" prop="dialed" />
          <el-table-column align="center" label="未拨打" prop="noDialed" />
          <el-table-column align="center" label="成功" prop="dialedSuccess" />
          <el-table-column align="center" label="未接通" prop="noConnect" />
          <el-table-column align="center" label="拒访" prop="reject" />
          <el-table-column align="center" label="已建工单数" prop="tickets" />
        </el-table>

        <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
      </el-tab-pane>
      <el-tab-pane label="进电报表">
        <!-- 查询和其他操作 -->
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQueryIB">
            <el-form-item label="进电时间">
              <el-date-picker v-model="timeIBArray" type="datetimerange" 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 class="filter-item" type="primary" icon="el-icon-search" @click="getIBList">查找</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 查询结果 -->
        <el-table :data="listIB" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="坐席" min-width="150" prop="agentName" />
          <el-table-column align="center" label="接听日期" prop="createTime" />
          <el-table-column align="center" label="进电总数" prop="ibTotal" />
          <el-table-column align="center" label="接起总数" prop="connected" />
          <el-table-column align="center" label="未保存电访数" prop="noSaveResult" />
          <el-table-column align="center" label="小于20秒接起数" prop="less20s" />
          <el-table-column align="center" label="通话总时长" prop="talkTotal" />
          <el-table-column align="center" label="平均通话时长" prop="avgTalk" />
          <el-table-column align="center" label="响铃总时长" prop="ringTotal" />
          <el-table-column align="center" label="平均响铃时长" prop="avgRing" />
        </el-table>

        <!-- <pagination v-show="totalIB>0" :total="totalIB" :page.sync="listQueryIB.page" :limit.sync="listQueryIB.limit" @pagination="getIBList" /> -->
      </el-tab-pane>
      <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="timeTArray" type="datetimerange" 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="listQuery.campaignId" style="width: 200px" class="filter-item" placeholder="请选择任务">
                <el-option v-for="(item, index) in campaignList" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getTicketList">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="handleTicketReprotExport">导出</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 查询结果 -->
        <div id="output"></div>

      </el-tab-pane>
      <el-tab-pane label="电访拨打情况报表">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQueryCallResult">
            <el-form-item label="工单创建时间">
              <el-date-picker v-model="timeCallResultArray" type="datetimerange" 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="listQueryCallResult.campaigns" class="filter-item" placeholder="请选择任务" multiple>
                <el-option v-for="(item, index) in campaignList" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getCallResult">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="handleCallResultReprotExport">导出</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 查询结果 -->
        <div id="callResult"></div>
      </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-select v-model="listQuery6.city" clearable placeholder="请选择城市">
                <el-option v-for="(item, index) in cityList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker v-model="timeBoardArray" type="datetimerange" 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 class="filter-item" type="primary" icon="el-icon-search" @click="getListQuery6">查找</el-button>
            </el-form-item>
          </el-form>

          <div class="panel-group">
            <div class="card-panel" v-for="(item, index) in listData6" :key="index">
              <div class="card-title">{{ item.campaignName }} </div>
              <div class="card-data">
                <!-- <div class="card-item">
                  <span>创建时间：</span>
                  <span>2022-11-11</span>
                </div> -->
                <div class="card-item">
                  <span>任务数量：</span>
                  <span>{{ item.total }}</span>
                </div>
                <div style="display: flex;">
                  <div class="card-item">
                    <span>现已拨打：</span>
                    <span>{{ item.dialed }}</span>
                  </div>
                  <div class="card-item" style="margin-left:10px ;">
                    <span>拨打成功：</span>
                    <span>{{ item.dialedSuccess }}</span>
                  </div>
                </div>
                <div style="display:flex ;">
                  <div class="card-item" style="margin-top: 10px;" v-for="(iitem, iindex) in item.detailList"
                    :key="iindex">
                    <div class="card-sub-item">
                      <span class="title">负责人：{{ iitem.agentName == null ? "无" : iitem.agentName }}</span>
                      <div class="card-item">
                        <span>任务数量：</span>
                        <span>{{ iitem.total }}</span>
                      </div>
                      <div class="card-item">
                        <span>现已拨打：</span>
                        <span>{{ iitem.dialed }}</span>
                      </div>
                      <div class="card-item">
                        <span>拨打成功：</span>
                        <span>{{ iitem.success }}</span>
                      </div>
                      <div class="card-item">
                        <span>投诉工单：</span>
                        <span>{{ iitem.ticketComplain }}({{ iitem.ticketProcessing }}待处理)</span>
                      </div>
                      <div class="card-item">
                        <span>咨询工单：</span>
                        <span>{{ iitem.ticketConsult }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                查看详细
              </div>
            </div>
          </div>
        </div>

      </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-select v-model="listQuery7.city" clearable placeholder="请选择城市">
                <el-option v-for="(item, index) in cityList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker v-model="timeBoardArray" type="datetimerange" 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 class="filter-item" type="primary" icon="el-icon-search" @click="getListQuery7">查找</el-button>
              <el-button class="filter-item" type="primary" icon="el-icon-download" @click="exportqw">导出</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-table :data="listData7" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="城市" prop="城市" />
          <el-table-column align="center" label="回访方式" min-width="150" prop="回访方式" />
          <el-table-column align="center" label="作业单号" prop="作业单号" />
          <el-table-column align="center" label="服务时间" prop="服务时间" />
          <el-table-column align="center" label="回访方式" prop="回访方式" />
          <el-table-column align="center" label="回访时间" prop="回访时间" />
          <el-table-column align="center" label="回访结果" prop="回访结果" />
          <el-table-column align="center" label="备注" prop="备注" />
        </el-table>
        <Pagination2 :total="total7" :page.sync="listQuery7.pageNum" :limit.sync="listQuery7.pageSize"
          @pagination="getListQuery7" />
      </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="datetimerange" 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="listQuery8.users" class="filter-item" placeholder="请选择任务" multiple filterable clearable>
                <el-option v-for="(item, index) in users" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getListQuery8(false)">查找</el-button>
              <el-button class="filter-item" type="primary" icon="el-icon-download" @click="getListQuery8(true)">导出</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 查询结果 -->
        <el-table :data="listData8" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="任务名" min-width="150" prop="campaignName" />
          <el-table-column align="center" label="城市" min-width="100" prop="city" />
          <el-table-column align="center" label="坐席" prop="userName" />
          <el-table-column align="center" label="任务创建时间" prop="createTime" />
          <el-table-column align="center" label="任务拨打时间" prop="calledTime" />
          <el-table-column align="center" label="拨打结果" prop="result" />
          <el-table-column align="center" label="客户手机" prop="mobile" />
          <el-table-column align="center" label="回访备注" prop="callRemark" />
        </el-table>

        <pagination v-show="total8 > 0" :total="total8" :page.sync="listQuery8.pageNum"
          :limit.sync="listQuery8.pageSize" @pagination="getListQuery8(false)" />
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import Pagination from "./common/Pagination";
import Pagination2 from "./common/Pagination";
import service from "../script/api/service";
import "pivottable/dist/pivot.js";
import "pivottable/dist/pivot.css";
import "pivottable/dist/pivot.zh.js";
import "jquery-ui-dist/jquery-ui";
import "@/script/table2excel";
import url from "@/script/baseUrl.js";
import $ from "jquery";

export default {
  name: "callTask",
  components: { Pagination, Pagination2 },
  filters: {},
  data() {
    return {
      users:[],
      cityList: [],
      campaignList: [],
      listLoading: false,
      list: [],
      total: 0,
      timeArray: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),
      ],
      timeTArray: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),
      ],
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 50,
        campaignId: "",
        order: "desc",
      },
      timeIBArray: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),
      ],
      listIB: [],
      totalIB: 0,
      listQueryIB: {
        //ib进电的结果
        page: 1,
        limit: 50,
        campaignId: "",
        order: "desc",
      },
      listQueryT: {
        startTime: '',
        endTime: ''
      },
      listQueryCallResult: {
        startTime: '',
        endTime: '',
        campaigns: ''
      },
      listCallResult: [],
      timeCallResultArray: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),
      ],
      timeBoardArray: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),
      ],
      listQuery6: {//城市任务看板
        startTime: this.formateDay(new Date()),
        city: ''
      },
      total7:0,
      listQuery7: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      listData6: [],
      listData7: [],
      listData8:[],
      total8: 0,
      timeArray8: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),],
      listQuery8: {
        startTime: '',
        endTime: '',
        users: [],
        pageNum: 1,
        pageSize: 10
      },
      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]);
            },
          },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));
    this.getTaskName();
    this.getAllUser();
  },
  methods: {
    getTaskName() {
      service
        .$axiosGetCampaign()
        .then((response) => {
          this.campaignList = response.data.data;
          console.info(this.campaignList)
          if (this.campaignList != null && this.campaignList.length > 0)
            this.listQuery.campaignId = this.campaignList[0].id;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getList() {
      console.info(this.timeArray);
      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.listLoading = true;

      service
        .$axiosGetCallTask(this.listQuery)
        .then((response) => {
          this.list = response.data.data;
          this.total = 1;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    getIBList() {
      if (this.timeIBArray && this.timeIBArray.length === 2) {
        this.listQueryIB.startTime = this.timeIBArray[0];
        this.listQueryIB.endTime = this.timeIBArray[1];
      } else {
        this.listQueryIB.startTime = null;
        this.listQueryIB.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listLoading = true;

      service
        .$axiosGetCallIB(this.listQueryIB)
        .then((response) => {
          this.listIB = response.data.data;
          this.totalIB = 1;
          this.listLoading = false;
        })
        .catch(() => {
          this.listIB = [];
          this.totalIB = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleTicketReprotExport() {
      $("#output .pvtTable").table2excel({
        exclude: ".noExl",
        name: "ticket",
        filename: "ticket.xls", // do include extension
        preserveColors: false
      })
    },
    getListQuery6() {//获取城市任务看板
      if (this.listQuery6.city == '') {
        this.$message.warning("请先选择城市");
        return false;
      }

      if (this.timeBoardArray && this.timeBoardArray.length === 2) {
        this.listQuery6.startTime = this.timeBoardArray[0];
        this.listQuery6.endTime = this.timeBoardArray[1];
      } else {
        this.listQuery6.startTime = null;
        this.listQuery6.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listLoading = true;

      service
        .$axiosGetCallTaskBoard(this.listQuery6).then(res => {
          this.listData6 = res.data.data;
        })

    },
    getListQuery7() {
      if (this.timeBoardArray.length == 0) {
        this.$message.warning("请先选择日期范围再进行查询");
        return
      }

      let req = {
        city: this.listQuery7.city,
        pageNum: this.listQuery7.pageNum,
        pageSize: this.listQuery7.pageSize
      };

      req.startTime = this.timeBoardArray[0];
      req.endTime = this.timeBoardArray[1];
      req.export = false;

      service
        .$axiosGetQywxCall(req).then(res => {
          this.listData7 = res.data.data.list;
          this.total7 = res.data.data.total;
        })
    },
    getListQuery8(isExport) {
      if (this.timeArray8.length == 0) {
        this.$message.warning("请先选择日期范围再进行查询");
        return
      }
      if(this.listQuery8.users.length==0){
        this.$message.warning("请选择坐席");
        return
      }

      let req = {
        users: this.listQuery8.users,
        pageNum: this.listQuery8.pageNum,
        pageSize: this.listQuery8.pageSize,
        startTime: this.timeArray8[0],
        endTime: this.timeArray8[1],
        isExport: isExport
      };

     if(isExport==false)
      service
        .$axiosGetOBCallDetaliList(req).then(res => {
          this.listData8 = res.data.data.list;
          this.total8 = res.data.data.total;
        })
      else {
        service
        .$axiosGetOBCallDetaliExport(req);
      }
    },
    exportqw() {
      if (this.timeBoardArray.length == 0) {
        this.$message.warning("请先选择日期范围再进行导出");
        return
      }

      let openurl = url.exportUrl + "/reportservice/callTask/qywxCall?token=" + window.localStorage.getItem("token");

      let params = `&city=${this.listQuery7.city
        }&startTime=${this.timeBoardArray[0]}&endTime=${this.timeBoardArray[1]
        }&export=${true}`;
      window.open(openurl + params);

    },
    getCallResult() {
      let param = {};
      if (this.timeCallResultArray && this.timeCallResultArray.length === 2) {
        param.startTime = this.timeCallResultArray[0];
        param.endTime = this.timeCallResultArray[1];
      } else {
        param.startTime = null;
        param.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      if (this.listQueryCallResult.campaigns == '') {
        this.$message.warning("请先选择任务");
        return false;
      }
      param.campaigns = this.listQueryCallResult.campaigns.toString();
      this.listLoading = true;
      service.$axiosGetCallResult(param).then(res => {
        this.listLoading = false;
        this.listCallResult = res.data.data;
        $("#callResult").pivotUI(
          this.listCallResult,
          {
            rows: ["日期", "任务名称"],
            cols: ["城市", "类型"],
            aggregatorName: "求和后取整",
            vals: ["数量"],
            rendererName: "表格",
            rendererOptions: {
              table: {
                clickCallback: function (e, value, filters, pivotData) {
                  var names = [];
                  pivotData.forEachMatchingRecord(filters, function (record) {
                    names.push(record.Name);
                  });
                },
              },
            },
          },
          true,
          "zh"
        );

        $('#callResult .pvtUiCell').hide();
      });
    },
    handleCallResultReprotExport() {
      $("#callResult .pvtTable").table2excel({
        exclude: ".noExl",
        name: "callresult",
        filename: "callresult.xls", // do include extension
        preserveColors: false
      })
    },
    getAllUser() {
      service.$axiosGetAllUser().then(res => {
        this.users = res.data.data
      })

    },
    getTicketList() {
      if (this.timeTArray && this.timeTArray.length === 2) {
        this.listQueryT.startTime = this.timeTArray[0];
        this.listQueryT.endTime = this.timeTArray[1];
      } else {
        this.listQueryT.startTime = null;
        this.listQueryT.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listLoading = true;

      service.$axiosGetCallTicketConsultDetailList(this.listQueryT)
        .then((response) => {
          this.listLoading = false;
          this.list = response.data.data;
          $("#output").pivotUI(
            this.list,
            {
              rows: ["工单类型", "状态"],
              cols: ["咨询项1", "咨询项2", "咨询项"],
              aggregatorName: "求和后取整",
              vals: ["数量"],
              rendererName: "表格",
              rendererOptions: {
                table: {
                  clickCallback: function (e, value, filters, pivotData) {
                    var names = [];
                    pivotData.forEachMatchingRecord(filters, function (record) {
                      names.push(record.Name);
                    });
                  },
                },
              },
            },
            true,
            "zh"
          );
          // $('.pvtUiCell').hide();

        })
        .catch((res) => {
          this.list = [];
          // this.total = 0;
          this.listLoading = false;
          this.$message.warning(res.data.errmsg);
        });
    }
  },
};
</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>
