<style>
  .zanTotalTop {
    padding: 18px 20px;
    background: #fff;
    border-bottom: 1px solid #EBEEF5;
  }

  .mallIndex_Second {
    background-color: #fff;
    position: relative;
    padding-bottom: 50px;
    margin: 10px 0;
    border: 1px solid #EBEEF5;
  }

  .searchDiv {
    display: flex;
    flex-direction: row;
    padding: 15px;
    overflow: hidden;
  }

  .searchDiv .el-date-editor .el-range-separator {
    width: 6%;
  }

  .mallIndex .el-input__inner {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
  }

  .mallIndex .el-input__icon {
    line-height: 32px;
  }

  .searchDiv>div {
    margin-right: 5px;
  }

  .mallIndex .mallIndex_Second .el-tabs__nav-scroll {
    width: 120px;
    margin-left: 30px;
  }

  .mallIndex .mallIndex_Second .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #E4E7ED;
    z-index: 1;
    height: 1px;
  }

  .mallIndex .el-tabs__item {
    height: 32px;
    line-height: 32px;
  }

  .mallIndex .clean {
    color: #92959B;
    margin-left: 30px;
    cursor: pointer;
    font-size: 15px;
  }

  .searchDiv>div:last-child {
    height: 32px;
    line-height: 32px;
  }

  .num-info {
    display: flex;
    width: 100%;
    height: 60px;
    font-size: 28px;
    color: #303133;
  }

  .num-info .num-info-item:first-of-type {
    border-left: 0;
  }

  .num-info .num-info-item:first-of-type {
    border-left: 0;
  }

  .info-item-name {
    font-size: 16px;
    color: #92959B;
  }

  .num-info .num-info-item {
    text-align: center;
    width: 20%;
    border-left: 1px dashed #EFF1F7;
  }

  .mallIndexThrid {
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 4px;
    overflow: hidden;
  }

  .el-card_header {
    position: relative;
    padding: 18px 20px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .tab-pay {
    position: absolute;
    bottom: -15px;
    right: 50px;
  }

  .tab-pay .el-tabs__item {
    height: 56px;
    line-height: 56px;
  }

  .el-tabs__nav-wrap::after {
    background-color: transparent;
  }

  .mallIndex .el-card__body {
    padding: 20px;
  }

  .pay-info {
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
  }

  .pay-info .pay-info-item.active {
    border: 1px solid #3399FF;
  }

  .info-item-name {
    font-size: 16px;
    color: #92959B;
  }

  .pay-info .pay-info-item {
    padding-top: 45px;
    width: 22%;
    margin: 0 1.5%;
    text-align: center;
    font-size: 26px;
    border: 1px solid #EBEEF5;
    border-radius: 10px;
    height: 150px;
    position: relative;
    cursor: pointer;
  }

  .pay-info .pay-info-item.active img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }

  .pay-info .pay-info-item img {
    display: none;
  }

  .zantable-area {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }

  .zantable-area .el-card {
    width: 49.5%;
    color: #303133;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 4px;
    overflow: hidden;
  }

  .el-mallIndex_btmheader {
    padding: 14px 20px;
  }

  .el-mallIndex_btmheader span {
    /* float:left; */
    height: 32px;
    line-height: 32px;
  }

  .ZexportBtn {
    padding: 0 10px;
    float: right;
  }

  .table_Inner {
    padding: 20px;
  }

  .rankIng {
    padding: 0 10px;
    text-align: center;
  }

  .table_Inner table th {
    background: rgb(243, 245, 246);
    color: rgb(48, 49, 51);
    padding-left: 10px;
    border-bottom: 1px solid #EBEEF5;
  }

  .text-omit {
    min-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table_Inner .el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
  }

  .table_Inner .el-table_1_column_1 {
    text-align: center;
  }

  .table_Inner .el-table_1_column_2 {
    padding-left: 0;
  }

  .table2 .is-leaf:first-child {
    text-align: center;
  }

  .UserInfoContent {
    display: flex;
    justify-content: flex-start;
  }

  .Zheader_image {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }

  .Zheader_image img {
    width: 100%;
    height: 100%;
  }

  .nameList {
    height: 32px;
    line-height: 32px;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .zantable-area .el-table__row {
    height: 63px;
  }

  .echarts-title {
    color: #92959B;
    display: flex;
    font-size: 16px;
    margin-left: 45px;
  }

  .echarts-title-item {
    margin-right: 45px;
    display: flex;
    align-items: center;
  }

  .echarts-title-item .echarts-title-icon {
    height: 16px;
    width: 16px;
    margin-right: 10px;
    background-color: #3399ff;
  }

  .el-mallIndex_btmheader .el-radio__inner {
    height: 14px !important;
    line-height: 14px !important;
  }

</style>
<template>
  <div class="mallIndex" v-loading="loading">
    <div class="zanTotalTop">数据概况</div>
    <div class="mallIndex_Second">
      <div class="searchDiv">
        <div>
          <el-select v-model="basicQMsg.Source" class="w120" @change="getChange">
            <el-option label="全部平台" :value='0'></el-option>
            <el-option label="微信" :value='1'></el-option>
            <el-option label="支付宝" :value='2'></el-option>
            <el-option label="抖音/头条" :value='3'></el-option>
            <el-option label="百度" :value='4'></el-option>
          </el-select>
        </div>
        <div style="margin-right:50px;">
          <el-date-picker class="indataPicker" type="daterange" v-model="dateStr" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="getChange" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick" @change="getChange">
            <el-tab-pane label="7日" name="first"></el-tab-pane>
            <el-tab-pane label="30日" name="second"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <span class="clean" @click="ClearMsg()" @change="getChange">清空筛选</span>
        </div>
      </div>
      <div class="num-info">
        <div class="num-info-item">
          <div>{{basicData.UserTotalNum}}</div>
          <div class="info-item-name">
            <span>用户数</span>
            <el-tooltip class="item" effect="dark" content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </div>
        <div class="num-info-item">
          <div>{{basicData.GoodsTotalNum}}</div>
          <div class="info-item-name">商品数</div>
        </div>
        <div class="num-info-item">
          <div>{{basicData.TotalOrderNum}}</div>
          <div class="info-item-name">订单数</div>
        </div>
        <div class="num-info-item">
          <div>{{basicData.NoSendOrderNum}}</div>
          <div class="info-item-name">待发货订单数</div>
        </div>
        <div class="num-info-item">
          <div>{{basicData.ActivistOrderNum}}</div>
          <div class="info-item-name">维权订单数</div>
        </div>
      </div>
    </div>
    <div class="mallIndexThrid">
      <div class="el-card_header">
        <div>
          <span>销售情况</span>
        </div>
        <div class="tab-pay">
          <el-tabs v-model="activeSell" @tab-click="handleSellClick">
            <el-tab-pane label="今日" name="today"></el-tab-pane>
            <el-tab-pane label="昨日" name="first"></el-tab-pane>
            <el-tab-pane label="7日" name="second"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="el-card__body">
        <div class="pay-info">
          <div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()">
            <img src="../assets/img/active.png" alt="" />
            <div style="color:#3399ff">{{salesData.OrderCount}}</div>
            <div class="info-item-name">支付订单数</div>
          </div>
          <div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()">
            <img src="../assets/img/active.png" alt="" />
            <div style="color:rgb(255, 163, 96)">{{salesData.Income}}</div>
            <div class="info-item-name">支付金额</div>
          </div>
          <div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()">
            <img src="../assets/img/active.png" alt="" />
            <div style="color:rgb(75, 194, 130)">{{salesData.UserCount}}</div>
            <div class="info-item-name">支付人数</div>
          </div>
          <div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()">
            <img src="../assets/img/active.png" alt="" />
            <div style="color:rgb(255, 133, 133)">{{salesData.GoodCount}}</div>
            <div class="info-item-name">支付件数</div>
          </div>
        </div>
        <div class="echarts-title">
          <div class="echarts-title-item" v-if="isShowOrder">
            <div class="echarts-title-icon"></div>
            <div>支付订单数</div>
          </div>
          <div class="echarts-title-item" v-if="isShowMoney">
            <div class="echarts-title-icon" style="background-color: rgb(255, 163, 96);"></div>
            <div>支付金额</div>
          </div>
          <div class="echarts-title-item" v-if="isShowPay">
            <div class="echarts-title-icon" style="background-color: rgb(75, 194, 130);"></div>
            <div>支付人数</div>
          </div>
          <div class="echarts-title-item" v-if="isShowPayNum">
            <div class="echarts-title-icon" style="background-color: rgb(255, 133, 133);"></div>
            <div>支付件数</div>
          </div>
        </div>
        <div style="overflow-x:auto;">
          <div class="myecharts" ref="myecharts" style="height:18rem;width:98%;"></div>
        </div>
      </div>
    </div>
    <div class="zantable-area">
      <div class="el-card">
        <div class="el-mallIndex_btmheader">
          <span>商品购买力TOP排行</span>
          <el-button type="primary" class="ZexportBtn" size="mini" @click="DownLoadSalesGoods">导出TOP100</el-button>
        </div>
        <div class="table_Inner">
          <el-table :data="saleIncomeData" style="width: 100%" @sort-change='getSort'>
            <el-table-column label="排名" width="60">
              <template slot-scope="scope">
                <div class="rankIng" style="text-align:center;">
                  <template v-if="scope.$index+1<4">
                    <img v-if="scope.$index==0" src="../assets/img/first.png" />
                    <img v-if="scope.$index==1" src="../assets/img/sec.png" />
                    <img v-if="scope.$index==2" src="../assets/img/third.png" />
                  </template>
                  <template v-else>
                    <span>{{getNumber(scope.$index+1)}}</span>
                  </template>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="GoodsName" label="商品" min-width="180">
              <template slot-scope="scope">
                <div class="text-omit">
                  {{scope.row.GoodsName}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="Income" label="销售额" sortable width="120">
              <template slot-scope="scope">
                <div style="padding-left:10px;">
                  {{scope.row.Income}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="SaleCount" sortable label="销量" width="100">
              <template slot-scope="scope">
                <div style="padding-left:10px;">
                  {{scope.row.SaleCount}}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="el-card">
        <div class="el-mallIndex_btmheader">
          <span>用户购买力TOP排行</span>
          &nbsp;&nbsp;
          <el-radio v-model="basicQMsg.UserType" @change="getChange" :label="-1"
            v-if="mall_userInfo.TenantId==1 &&  mall_userInfo.MallBaseId==1">普通用户
          </el-radio>
          <el-radio v-model="basicQMsg.UserType" @change="getChange" :label="1"
            v-if="mall_userInfo.TenantId==1 &&  mall_userInfo.MallBaseId==1">领队导游
          </el-radio>
          <el-button type="primary" class="ZexportBtn" size="mini" @click="DownLoadSalesUser">导出TOP100</el-button>
        </div>
        <div class="table_Inner table2">
          <el-table :data="saleUserData" style="width: 100%" @sort-change='getSort'>
            <el-table-column label="排名" width="60">
              <template slot-scope="scope">
                <div class="rankIng">
                  <template v-if="scope.$index+1<4">
                    <img v-if="scope.$index==0" src="../assets/img/first.png" />
                    <img v-if="scope.$index==1" src="../assets/img/sec.png" />
                    <img v-if="scope.$index==2" src="../assets/img/third.png" />
                  </template>
                  <template v-else>
                    <span>{{getNumber(scope.$index+1)}}</span>
                  </template>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="UserName" label="用户" min-width="190">
              <template slot-scope="scope">
                <div class="UserInfoContent">
                  <div class="Zheader_image">
                    <template v-if="scope.row.Photo">
                      <img :src="scope.row.Photo" alt="" />
                    </template>
                    <template v-else>
                      <img src="../assets/img/id-card.png" alt="" />
                    </template>
                  </div>
                  <div class="nameList"> {{scope.row.UserName}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="Income" label="支付金额" sortable width="120">
              <template slot-scope="scope">
                <div style="padding-left:10px;">
                  {{scope.row.Income}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="SaleCount" sortable label="支付件数" width="110">
              <template slot-scope="scope">
                <div style="padding-left:10px;">
                  {{scope.row.SaleCount}}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //加载
        loading: false,
        //基础数据
        activeName: '',
        //销售情况
        activeSell: 'today',
        //过滤支付订单数
        isShowOrder: true,
        //过滤支付金额
        isShowMoney: true,
        //过滤支付人数
        isShowPay: true,
        //过滤支付件数
        isShowPayNum: true,
        dateStr: [], //日期
        //查询数据
        basicQMsg: {
          Source: 0, //来源
          StartDate: "", //开始时间
          EndDate: "", //结束时间
          SalesTimeType: 0, //默认今日
          OrderBy: '',
          UserType: -1, //0-普通用户,1-领队导游
        },
        basicData: {}, //基础数据
        salesData: {}, //销售数据
        saleIncomeData: [], //商品购买力TOP排行
        saleUserData: [], //用户购买力TOP排行
        mall_userInfo: {}, //用户信息
      };
    },
    created() {
      localStorage.removeItem("uploadInfo");
      this.mall_userInfo = JSON.parse(localStorage.mall_userInfo);
      //获取上传配置
      this.getUpConfig();
    },
    methods: {
       //登录后获取上传配置
      getUpConfig(){
        this.apipost("/api/MallBase/GetDefaultFileStore", {}, res => {
          if(res.data.resultCode == 1){
            var upData = res.data.data;
            localStorage.uploadInfo = JSON.stringify(upData);
          }else{
            this.Error(res.data.message);
          }
        })
      },  
      //清空选择
      ClearMsg() {
        this.basicQMsg.Source = 0;
        this.dateStr = [];
        this.basicQMsg.StartDate = "";
        this.basicQMsg.EndDate = "";
        this.activeName = "";
        this.getChange();
      },
      //数据改变
      getChange() {
        this.getBasicData();
      },
      //基础数据日期切换
      handleClick(tab, event) {
        this.dateStr = [];
        //7日
        if (tab.name == 'first') {
          this.dateStr.push(this.$commonUtils.AddDay('', -7));
        }
        //30日
        else if (tab.name == "second") {
          this.dateStr.push(this.$commonUtils.AddDay('', -30))
        }
        this.dateStr.push(this.$commonUtils.AddDay('', -0));
        this.getChange();
      },
      //获取基础数据
      getBasicData() {
        this.loading = true;
        if (this.dateStr && this.dateStr.length > 0) {
          this.basicQMsg.StartDate = this.dateStr[0];
          this.basicQMsg.EndDate = this.dateStr[1];
        } else {
          this.basicQMsg.StartDate = '';
          this.basicQMsg.EndDate = '';
        }
        this.apipost("/api/Tenant/MallIndexStatistics", this.basicQMsg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            //基础数据统计
            this.basicData = res.data.data.basicData;
            //销售情况统计
            this.salesData = res.data.data.salesData;
            //商品购买力TOP排行
            var saleGoodsArray = res.data.data.saleIncomeData;
            if (saleGoodsArray) {
              if (saleGoodsArray.length <= 2) {
                this.saleIncomeData = saleGoodsArray;
              } else {
                this.saleIncomeData = saleGoodsArray.slice(0, 15);
              }
            }
            //用户购买力TOP排行
            var saleUserArray = res.data.data.saleUserData;
            if (saleUserArray) {
              if (saleUserArray.length <= 2) {
                this.saleUserData = saleUserArray;
              } else {
                this.saleUserData = saleUserArray.slice(0, 15);
              }
            }
            this.initMap();
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //销售情况统计切换
      handleSellClick(tab, event) {
        //昨日
        if (tab.name == 'first') {
          this.basicQMsg.SalesTimeType = 1;
        }
        //7日
        else if (tab.name == "second") {
          this.basicQMsg.SalesTimeType = 7;
        } else if (tab.name == "today") {
          this.basicQMsg.SalesTimeType = 0;
        }
        this.getChange();
      },
      //数字加0
      getNumber(num) {
        let str = '';
        if (num < 10) {
          str = '0' + num
        } else {
          str = num;
        }
        return str;
      },
      //过滤支付订单数
      filterOrder() {
        this.isShowOrder = !this.isShowOrder;
        this.initMap();
      },
      //过滤支付金额
      filterMoney() {
        this.isShowMoney = !this.isShowMoney;
        this.initMap();
      },
      //过滤支付人数
      filterPay() {
        this.isShowPay = !this.isShowPay;
        this.initMap();
      },
      //过滤支付件数
      filterPayNum() {
        this.isShowPayNum = !this.isShowPayNum;
        this.initMap();
      },
      //初始化图标
      initMap() {
        var myChart = this.$echarts.init(this.$refs.myecharts);
        var xData = []; //x轴数据
        var xDataList = [];
        var orderArray = []; //订单数量
        var orderIncome = []; //支付金额
        var userArray = []; //支付人数
        var goodArray = []; //商品件数
        //今日
        var now = new Date();
        var year = now.getFullYear(); //年
        var month = now.getMonth() + 1; //月
        var day = now.getDate(); //日
        var nowDay = year + '-' + month + '-' + day;

        //昨日
        now.setTime(now.getTime() - 24 * 60 * 60 * 1000);
        var yesDay = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();

        if (this.salesData && this.salesData.subList && this.salesData.subList.length > 0) {
          this.salesData.subList.forEach(item => {
            if (this.activeSell == 'today') {
              xData.push(nowDay + ' ' + item.TimeStr + '时');
            }
            if (this.activeSell == 'first') {
              xData.push(yesDay + ' ' + item.TimeStr + '时');
            }
            xDataList.push(item.TimeStr);
            orderArray.push(item.OrderCount);
            orderIncome.push(item.Income)
            userArray.push(item.UserCount);
            goodArray.push(item.GoodCount);
          });
        }
        var seriesData = [];
        seriesData.push({
          name: '',
          type: 'line',
          stack: '',
          color: '',
          data: xData
        });
        if (this.isShowOrder) {
          seriesData.push({
            name: '支付订单数',
            type: 'line',
            stack: '总量',
            color: '#3399ff',
            data: orderArray
          });
        }
        if (this.isShowMoney) {
          seriesData.push({
            name: '支付金额',
            type: 'line',
            stack: '总量',
            color: 'rgb(255, 163, 96)',
            data: orderIncome
          });
        }
        if (this.isShowPay) {
          seriesData.push({
            name: '支付人数',
            type: 'line',
            stack: '总量',
            color: 'rgb(75, 194, 130)',
            data: userArray
          })
        }
        if (this.isShowPayNum) {
          seriesData.push({
            name: '支付件数',
            type: 'line',
            stack: '总量',
            color: 'rgb(255, 133, 133)',
            data: goodArray
          });
        }

        var option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
            // axisPointer: {
            //   type: "cross",
            //   crossStyle: {
            //     color: "#999"
            //   },
            // },
            axisPointer: 'none',
            formatter: function (params) {
              // var res=params[0].name;
              var res = ''
              if (params.length > 4) {
                for (var i = 0; i < params.length; i++) {
                  if (i == 0) {
                    if (params[i].data == 0) {
                      res += '<br/>' + params[i].name;
                    } else {
                      res += '<br/>' + params[i].data;
                    }
                  } else {
                    res += '<br/>' + params[i].marker + params[i].seriesName + '：' + params[i].data
                  }
                }
              } else {
                for (var i = 0; i < params.length; i++) {
                  res += '<br/>' + params[i].marker + params[i].seriesName + '：' + params[i].data
                }
              }
              return res;
            },
          },
          grid: {
            left: '0',
            right: '1%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xDataList
          },
          yAxis: [{
              type: "value",
              name: "金额",
              min: 0,
              axisLine: {
                lineStyle: {
                  // 设置y轴颜色
                  color: "#252D48",
                }
              },
              nameTextStyle: {
                color: '#000',
              },
              axisLabel: {
                // formatter: '{value}k',
                textStyle: {
                  color: "#252D48"
                },
                padding: [10, 0, 10, 0]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: "#30374E"
                }
              }
            },
            {
              type: "value",
              name: "笔数",
              min: 0,
              // max: 100,
              // interval: 10,
              axisLine: {
                // 设置y轴颜色
                lineStyle: {
                  color: "#252D48"
                }
              },
              nameTextStyle: {
                color: '#000',
              },
              axisLabel: {
                textStyle: {
                  color: "#252D48"
                },
                padding: [0, 0, 10, 0]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: "#30374E"
                }
              }
            }
          ],
          series: seriesData
        };
        myChart.setOption(option, true);
      },
      //商品购买力TOP排行
      DownLoadSalesGoods() {
        this.GetLocalFile(
          "/api/Export/DownLoad",
          this.basicQMsg,
          "商品购买力TOP排行.xls",
          "getSalesGoodTop"
        );
      },
      //用户购买力TOP排行
      DownLoadSalesUser() {
        this.GetLocalFile(
          "/api/Export/DownLoad",
          this.basicQMsg,
          "用户购买力TOP排行.xls",
          "getSalesUserTop"
        );
      },
      getSort(val) {
        if (val.prop == 'Income') {
          if (val.order == 'ascending') {
            this.basicQMsg.OrderBy = 'Income asc'
          } else if (val.order == 'descending') {
            this.basicQMsg.OrderBy = 'Income desc'
          } else {
            this.basicQMsg.OrderBy = ''
          }
        } else if (val.prop == 'SaleCount') {
          if (val.order == 'ascending') {
            this.basicQMsg.OrderBy = 'SaleCount asc'
          } else if (val.order == 'descending') {
            this.basicQMsg.OrderBy = 'SaleCount desc'
          } else {
            this.basicQMsg.OrderBy = ''
          }
        }
        this.getBasicData()
      },

    },
    mounted() {
      this.getChange();
    }
  };

</script>
