<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务质量明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <el-card shadow="hover"> -->
    <el-tabs type="border-card" v-model="activeTab" @tab-click="tabChange">
      <el-tab-pane label="客诉明细" name="1">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery1">
          <el-form-item label="城市">
            <el-select v-model="listQuery1.city" clearable placeholder="请选择城市" @change="cityChange1" multiple>
              <el-option v-for="(item, index) in hmCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery1.serviceStation" clearable placeholder="请选择服务站">
              <el-option v-for="(item, index) in stationList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务人员">
            <el-input v-model="listQuery1.serverName" placeholder="请输入服务人员" clearable></el-input>
          </el-form-item>
          <el-form-item label="客诉类型">
            <el-select v-model="listQuery1.claimType" clearable>
              <el-option value="1" label="咨询" />
              <el-option value="2" label="投诉" />
            </el-select>
          </el-form-item>

          <el-form-item label="客诉等级">
            <el-select v-model="listQuery1.customerClaimLevel" clearable>
              <el-option value="1" label="一般" />
              <el-option value="2" label="严重" />
              <el-option value="3" label="S级-非常严重" />
            </el-select>
          </el-form-item>
          <el-form-item label="客诉状态">
            <el-select v-model="listQuery1.claimStatus" placeholder="请选择客诉状态" clearable>
              <el-option value="1" label="处理中" />
              <el-option value="2" label="已完成" />
              <el-option value="3" label="已作废" />
              <el-option value="99" label="超48小时未完成" />
            </el-select>
          </el-form-item>

          <el-form-item label="客诉编号">
            <el-input v-model="listQuery1.ticketSn" placeholder="请输入客诉工单编号" clearable></el-input>
          </el-form-item>

          <el-form-item label="咨询项目">
            <el-cascader placeholder="请选择咨询内容" v-model="consultValue" :options="ticketConsults" :props="{
              expandTrigger: 'hover',
              value: 'id',
              label: 'name',
              children: 'child',
              multiple: true,
            }" @change="cascaderChange" clearable :show-all-levels="false"></el-cascader>
          </el-form-item>
          <el-form-item label="客诉时间">
            <el-date-picker v-model="listQuery1.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>

          <el-form-item label="工单类型">
            <el-select v-model="listQuery1.bookType" clearable>
              <el-option value="自营" label="自营" />
              <el-option value="加盟" label="加盟" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch1">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadServiceQuality"
              v-per="'downloadServiceQuality'">导出
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData1" border style="width: 100%" class="table">
          <!--          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>-->
          <el-table-column prop="分类" label="分类" fixed="left"></el-table-column>
          <el-table-column prop="客诉单号" label="客诉单号"></el-table-column>
          <el-table-column prop="客户简称" label="客户简称"></el-table-column>
          <el-table-column prop="来源" label="来源"></el-table-column>
          <el-table-column prop="城市" label="城市"></el-table-column>
          <el-table-column prop="客诉工单类型" label="客诉工单类型"></el-table-column>
          <el-table-column prop="客诉状态" label="客诉状态">
            <template slot-scope="scope">
              <span v-if="scope.row['客诉状态'] == 1">处理中</span>
              <span v-if="scope.row['客诉状态'] == 2">已完成</span>
              <span v-if="scope.row['客诉状态'] == 3">已作废</span>
              <span v-if="scope.row['客诉状态'] == 99">超48小时未完成</span>
            </template>
          </el-table-column>
          <el-table-column prop="客诉判断" label="客诉判断"></el-table-column>
          <el-table-column prop="责任方" label="责任方"></el-table-column>
          <el-table-column prop="现金赔偿" label="现金赔偿"></el-table-column>
          <el-table-column prop="优惠券赔偿" label="优惠券赔偿"></el-table-column>
          <el-table-column prop="其他赔偿" label="其他赔偿"></el-table-column>
          <el-table-column prop="服务商品" label="服务商品"></el-table-column>
          <el-table-column prop="服务商" label="服务商"></el-table-column>
          <el-table-column prop="服务商罚款" label="服务商罚款"></el-table-column>
          <el-table-column prop="客诉类型" label="客诉类型"></el-table-column>
          <el-table-column prop="客诉等级" label="客诉等级">
            <template slot-scope="scope">
              <span v-if="scope.row['客诉等级'] == 1">一般</span>
              <span v-if="scope.row['客诉等级'] == 2">严重</span>
              <span v-if="scope.row['客诉等级'] == 3">S级-非常严重</span>
            </template>
          </el-table-column>
          <el-table-column prop="客诉一级" label="客诉一级"></el-table-column>
          <el-table-column prop="客诉二级" label="客诉二级"></el-table-column>
          <el-table-column prop="客诉描述" label="客诉描述" width="300px"></el-table-column>
          <el-table-column prop="处理结果" label="处理结果"></el-table-column>
          <el-table-column prop="创建时间" label="创建时间"></el-table-column>
          <el-table-column prop="创建人" label="创建人"></el-table-column>
          <el-table-column prop="盒马工单号" label="盒马工单号"></el-table-column>
          <el-table-column prop="预约时间" label="预约时间"></el-table-column>
          <el-table-column prop="一级分类" label="一级分类"></el-table-column>
          <el-table-column prop="二级分类" label="二级分类"></el-table-column>
          <!--          <el-table-column prop="服务者" label="服务者"></el-table-column>-->
          <el-table-column prop="商家编号" label="商家编号"></el-table-column>
          <el-table-column prop="姓名" label="姓名"></el-table-column>
          <el-table-column prop="服务时间" label="服务时间"></el-table-column>
          <el-table-column prop="服务站" label="服务站"></el-table-column>
          <el-table-column prop="更新时间" label="更新时间"></el-table-column>
          <el-table-column prop="最后操作人" label="最后操作人"></el-table-column>
          <el-table-column prop="技能组" label="技能组"></el-table-column>
          <el-table-column prop="投诉计数" label="投诉计数"></el-table-column>
          <el-table-column prop="xp编号" label="xp编号"></el-table-column>

        </el-table>

        <!-- 分页 -->
        <pagination :total="listQuery1.total" :page.sync="listQuery1.startPage" :limit.sync="listQuery1.limit"
          @pagination="querySearch1" />
      </el-tab-pane>
      <el-tab-pane label="投诉治理" name="2">
        <!--        <div style="font-size: 9px; color:darkcyan">tips: 可左右滑动查看更多指标</div>-->
        <el-form :inline="true" size="small" v-model="listQuery4">
          <el-form-item label="城市">
            <el-select v-model="listQuery4.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery4.serviceStation" clearable placeholder="请选择服务站">
              <el-option v-for="(item, index) in stationList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="月份">
            <el-date-picker v-model="listQuery4.month" type="month" value-format="yyyy-MM"
              :picker-options={}></el-date-picker>
          </el-form-item>
          <el-form-item label="服务者">
            <el-input v-model="listQuery4.serverName" placeholder="请输入服务者姓名"></el-input>
          </el-form-item>
          <el-form-item label="盒马工单">
            <el-input v-model="listQuery4.hemaWorkOrder" placeholder="请输入盒马工单号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch4(false)">查询</el-button>
            <el-button icon="el-icon-download" type="primary" plan @click="querySearch4(true)">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData4" border style="width: 100%" class="table">
          <el-table-column prop="ticketSn" label="客诉单号" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="businessTime" label="投诉时间"></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="serviceType" label="客诉工单类型"></el-table-column>
          <el-table-column prop="ticketDec" label="投诉内容" width="260px"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column prop="subStatus" label="子状态"></el-table-column>
          <el-table-column prop="resParty" label="责任方"></el-table-column>
          <el-table-column prop="parterName" label="合作方"></el-table-column>
          <el-table-column prop="bookSn" label="盒马工单号"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="workerName" label="姓名"></el-table-column>
          <el-table-column prop="entryDay" label="入职天数"></el-table-column>
          <el-table-column prop="firstDecide" label="初步判定"></el-table-column>
          <el-table-column prop="firstFineAmount" label="罚款金额"></el-table-column>
          <el-table-column prop="isClaim" label="是否走保险"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="stationManager" label="站长"></el-table-column>
          <el-table-column prop="stationImprove" label="城市改善动作"></el-table-column>
          <el-table-column prop="stationImproveDes" label="城市改善动作描述"></el-table-column>
          <el-table-column prop="stationImproveFeedback" label="城市差评反馈"></el-table-column>
          <el-table-column prop="appealTime" label="申诉时间"></el-table-column>
          <el-table-column prop="appealMemo" label="申诉备注"></el-table-column>
          <el-table-column prop="secondTime" label="申诉处理时间"></el-table-column>
          <el-table-column prop="secondDecide" label="二次判定结果"></el-table-column>
          <el-table-column prop="userName1" label="二次判定人"></el-table-column>
          <el-table-column prop="stationBearAmount" label="城市承担金额"></el-table-column>
          <el-table-column prop="secondFineAmount" label="保洁师承担金额"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column prop="userName" label="最终处理人"></el-table-column>
          <el-table-column prop="ticketSource" label="工单来源"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination :total="listQuery4.total" :page.sync="listQuery4.pageNo" :limit.sync="listQuery4.pageSize"
          @pagination="querySearch4(false)" />
      </el-tab-pane>

      <el-tab-pane label="一键报备" name="3">
        <!--        <div style="font-size: 9px; color:darkcyan">tips: 可左右滑动查看更多指标</div>-->
        <el-form :inline="true" size="small" v-model="listQuery5">
          <el-form-item label="城市">
            <el-select v-model="listQuery5.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报备日期">
            <el-date-picker v-model="listQuery5.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch5(false)">查询</el-button>
            <el-button icon="el-icon-download" type="primary" plan @click="querySearch5(true)">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData5" border style="width: 100%" class="table">
          <el-table-column prop="ticketSn" label="工单编号" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="ticketTitle" label="工单标题"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="ticketLevel" label="工单等级"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column prop="result" label="处理结果"></el-table-column>
          <el-table-column prop="taskSource" label="工单来源"></el-table-column>
          <el-table-column prop="handleTime" label="处理时长"></el-table-column>
          <el-table-column prop="userName" label="最后处理人"></el-table-column>
          <el-table-column prop="updateTime" label="最后处理时间"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination :total="listQuery5.total" :page.sync="listQuery5.currentPage" :limit.sync="listQuery5.pageSize"
          @pagination="querySearch4(false)" />
      </el-tab-pane>
    </el-tabs>

    <!-- </el-card> -->
  </div>
</template>
<script>
import moment from "moment";
import Pagination from "./common/Pagination";
import url from "@/script/baseUrl.js";
import Service from "../script/api/service";
import service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";

export default {
  components: { Pagination },
  data() {
    return {
      selfCityList: [],
      exportServiceQualityUrl:
        url.exportUrl +
        "/reportservice/report/dayCustomerClaimDetailExport?token=" +
        window.localStorage.getItem("token"),
      activeTab: "1",
      ticketConsults: [], //客诉类型
      consultValue: null,
      cityList: [],
      hmCityList: [],
      stationList: [],
      allStationList: [],
      listData1: [],

      listQuery1: {
        total: 0,
        limit: 50,
        startPage: 1,
        ticketSn: '',
        customerClaimLevel: '',
        claimStatus: "",
        city: [],
        serviceStation: '',
        serverName: "",
        customerClaimType: "",
        customerClaimA1: "",
        customerClaimA2: "",
        timePart: [],
        claimType: '',
        consultValue: [],
      },
      listData2: [],
      total2: 0,
      pageSize2: 50,
      currentPage2: 1, //当前页
      listData3: [],
      total3: 0,
      pageSize3: 50,
      currentPage3: 1, //当前页

      listData4: [],

      listQuery4: {
        citys: [],
        serviceStation: '',
        month: '',
        pageSize: 50,
        pageNo: 1,
        total: 0,
        hemaWorkOrder: '',
        serverName: '',
        ticketSn: '',
      },

      listData5: [],
      listQuery5: {
        total: 0,
        pageSize: 50,
        currentPage: 1,
        city: [],
        createTime: null,
      },

      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 * 15);
              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]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 1)
    );
    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 7)
    );
    this.$set(this.listQuery1, "createTime", [startDate, currentDate]);
    this.$set(this.listQuery5, "createTime", [startDate, currentDate]);
    // this.getCityStation();
    this.hmCityList = JSON.parse(window.localStorage.getItem("allHmCity"));
    this.selfCityList = JSON.parse(window.localStorage.getItem("allSelfCity"));
    let allSelfStation = JSON.parse(window.localStorage.getItem("allSelfStation"));
    allSelfStation.forEach(item => {
      this.stationList.push(item.station_name);
    });

    let allHmStation = JSON.parse(window.localStorage.getItem("allHmStation"));
    let allList = [];
    allHmStation.forEach(item => {
      let list = item.station_names.split(',');
      allList = allList.concat(list);
    });
    this.allStationList = allList;
    this.stationList = this.allStationList;
    this.stationList1 = this.allStationList;
    this.querySearch1();
    this.getTicketConsults();
  },
  activated() {
    this.activeTab = this.$route.query.activeTab
      ? this.$route.query.activeTab
      : "1";
    //console.info(this.activeTab);
    //this.tabChange();
  },
  methods: {
    cityChange(value) {
      this.listQuery1.station = '';
      this.listQuery4.station = '';
      if (value != null) {
        this.stationList = [];
      }
      let allSelfStation = JSON.parse(window.localStorage.getItem("allSelfStation"));
      if (value.length == 0) {
        this.stationList = allSelfStation.map(a => a.station_name);
      } else {
        let currentStation = allSelfStation.filter(item => value.includes(item.city));
        currentStation.forEach(item => {
          this.stationList.push(item.station_name);
        });
      }
    },
    getTicketConsults() {
      service.$axiosGetTicketConsultType().then((res) => {
        this.ticketConsults = res.data.data;
      });
    },
    getCityStation() {
      Service.$axiosGetUserAuthBuzData({
        userId: globalData.userInfo.id,
      }).then((res) => {
        if (res.data.errno == "0") {
          this.cityList = res.data.data.userCityDataList;
          this.listQuery1.city = res.data.data.userCityDataList[0].dataName;
          this.allStationList = res.data.data.userCityDataList;

          this.stationList = res.data.data.userCityDataList[0].subList;
          this.querySearch1();
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    cascaderChange(e) {
      this.listQuery1.consultValue = [];
      e.forEach((item) => {
        this.listQuery1.consultValue.push(item[1]);
      });
    },
    cityChange1(value) {
      this.listQuery1.serviceStation = '';
      let allHmStation = JSON.parse(window.localStorage.getItem("allHmStation"));
      if (value.length == 0) {
        this.stationList = this.allStationList;
      } else {
        let currentStation = allHmStation.filter(item => {
          return value.includes(item.city);
          ;
        });
        let allList = [];
        currentStation.forEach(item => {
          let list = item.station_names.split(',');
          allList = allList.concat(list);
        });
        this.stationList = allList;
      }


    },
    tabChange() {
      if (this.activeTab == "1" && this.listData1.length == 0) {
        this.querySearch1();
      } else if (this.activeTab == "2" && this.listData2.length == 0) {
        this.querySearch4();
      }
    },
    //查询
    dateChange(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          // this.$message.warning("选中时间范围不能超过一个月");
          // this.listQuery1.createTime = null;
        }
      }
    },
    querySearch1() {
      if (this.isEmptyObjVue(this.listQuery1.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }

      // let temp = {
      //   startPage: this.currentPage1,
      //   limit: this.pageSize1,
      //   city: this.listQuery1.city.join(','),
      //   serviceStation: this.listQuery1.serviceStation,
      //   serverName: this.listQuery1.serverName,
      //   customerClaimType: this.listQuery1.customerClaimType,
      //   customerClaimA1: this.listQuery1.customerClaimA1,
      //   customerClaimA2: this.listQuery1.customerClaimA2,
      //   startTime: this.listQuery1.createTime[0],
      //   endTime: this.listQuery1.createTime[1]
      // };
      //       this.listQuery1.startTime = this.listQuery1.createTime[0];
      // this.listQuery1.endTime = this.listQuery1.createTime[1];


      let temp = JSON.parse(JSON.stringify(this.listQuery1));
      temp.city = this.listQuery1.city.join(',');
      temp.startTime = this.listQuery1.createTime[0];
      temp.endTime = this.listQuery1.createTime[1];


      Service.$axiosDayCustomerClaimDetail(temp)
        .then((res) => {
          console.log(res);
          this.listData1 = res.data.data.list;
          this.listQuery1.total = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    querySearch2() {
      let temp = {
        pageNo: this.currentPage2,
        pageSize: this.pageSize2,
      };

      Service.$axiosSuperTicketDetail(temp)
        .then((res) => {
          // console.log(res);
          this.listData2 = res.data.data.list;
          this.total2 = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    querySearch3() {
      let temp = {
        pageNo: this.currentPage3,
        pageSize: this.pageSize3,
      };

      Service.$axiosAliveTwoDayTicketDetail(temp)
        .then((res) => {
          // console.log(res);
          this.listData3 = res.data.data.list;
          this.total3 = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    downloadServiceQuality() {
      if (this.isEmptyObjVue(this.listQuery1.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&city=${this.listQuery1.city.join(",")}&serviceStation=${this.listQuery1.serviceStation
        }&serverName=${this.listQuery1.serverName
        }&claimType=${this.listQuery1.claimType
        }&customerClaimLevel=${this.listQuery1.customerClaimLevel
        }&claimStatus=${this.listQuery1.claimStatus
        }&ticketSn=${this.listQuery1.ticketSn
        }&consultValue=${this.listQuery1.consultValue.join(',')
        }&startTime=${this.listQuery1.createTime[0]
        }&endTime=${this.listQuery1.createTime[1]}`;
      window.open(this.exportServiceQualityUrl + params);
    },
    querySearch4(value) {
      let list = this.listQuery4;
      let this_month = moment().format('YYYY-MM');
      if (this.isEmptyObjVue(list.month)) {
        this.listQuery4.month = this_month;
      }
      let temp = JSON.parse(JSON.stringify(list));
      if (this.listQuery4.month === this_month) {
        temp.startTime = moment().format('YYYY-MM-01');
        temp.endTime = moment().add(-1, "day").format('YYYY-MM-DD');
      } else {
        temp.startTime = moment(list.month).format('YYYY-MM-01');
        temp.endTime = moment(list.month).endOf('month').format('YYYY-MM-DD');
      }
      delete temp.month;
      temp.citys = list.city.join(',');
      temp.pageNo = list.pageNo;
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }

      if (value) {
        //需要导出*/
        delete temp.pageNo;
        delete temp.pageSize;
        Service.$axiosComplaintManagementExport(temp)
      } else {
        Service.$axiosComplaintManagement(temp)
          .then((res) => {
            console.log(res);
            this.listData4 = res.data.data.list;
            list.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    querySearch5(boo) {

      let req = {
        city: this.listQuery5.city.join(','),
        // startDate:this.listQuery5,
        // endDate:this.listQuery5,
        isExport: boo,
        pageNo: this.listQuery5.currentPage,
        pageSize: this.listQuery5.pageSize
      };

      if (null != this.listQuery5.createTime && this.listQuery5.createTime.length > 0) {
        req.startDate = this.listQuery5.createTime[0];
        req.endDate = this.listQuery5.createTime[1];
      }

      if (boo) {
        Service.$axiosOnceFilingTicketExport(req)
      } else {
        Service.$axiosOnceFilingTicket(req)
          .then((res) => {
            console.log(res);
            this.listData5 = res.data.data.dataList;
            this.listQuery5.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    }


  },
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>
