<style lang="scss">
//.el-dialog__title{color: #fff}
.tableBox {
  th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }

  td {
    padding: 0 !important;
    height: 45px;
    line-height: 45px;
  }
}

.bottom_input {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
<style lang="scss" scoped>
.app-list-content {
  position: relative;

  .right_box {
    float: right;
    width: 20%;
    // margin-top: 40px;
    // background: #ffffff;
    // border: 1px solid #ebeef5;
    box-sizing: border-box;
    vertical-align: top;
    margin-left: -1px;
  }

  .left_box {
    //float: left;
    width: 90%;
    margin: 0 auto;
    vertical-align: top;

    .tor {
      line-height: 40px;
      color: #999;
      padding-left: 10px;
      font-size: 16px;
      span{
        margin-right: 60px;
      }
    }
  }
  .seek-list-box{
    position: absolute;
    bottom: 70px;
    right: 20%;
    width: 70%;
    max-height: 310px;
    overflow: hidden;
    //overflow-y: scroll;
  }
  .bottom_input {
    position: absolute;
    bottom: 18px;
    right: 6%;
    // transform: translateX(-50%);
    .allPrice {
      margin-left: 80px;
      // color: #606266;
      font-size: 16px;
      font-weight: 700;
      &.active{
        margin-left: 200px;
      }
    }
  }
  .el-dialog-center{
    display: flex;
    align-items: center;
    justify-content: center;
    span{
      padding: 0 20px;
    }

  }
  .accounts-list{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding-bottom: 20px;
    .accounts-center{
      width: 80%;
    }
  }
  .remark{
    margin-top: 20px;
    text-align: center;
    color: #999999;
    font-size: 14px;
  }
  .flex{display: flex;align-items: center;}
  .flex-center{display: flex;align-items: center;justify-content: center;}
  .flex-center{display: flex;align-items: center;justify-content: space-between;}
  .print-html {
    position: fixed;
    left: 0;
    top: 9990px;
  }
}
</style>
<template>
  <div class="app-list-content">
    <div class="left_box">
      <p class="tor">
        <span>全屏：F11</span>
        <span>结账：F9</span>
        <span>改价：F8</span>
        <span>数量加：+</span>
        <span>数量减：-</span>
        <span>删除：Delete</span>
        <span>删除所有：Page Down</span>
        <span>聚焦至商品输入框：Ctrl + Q</span>
      </p>
      <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%" border :header-cell-style="{background:'#fdfdfd', color: '#666', fontWeight: 400}" class="tableBox active">
        <el-table-column prop="index" label="编号" width="120" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" width="180" align="center"></el-table-column>
        <el-table-column prop="lv" label="等级" width="180" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" width="120" align="center"></el-table-column>
        <el-table-column prop="count" label="数量" align="center"></el-table-column>
        <el-table-column prop="price" label="单价" align="center"></el-table-column>
        <el-table-column prop="commodityMoney" label="金额" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="seek-list-box" v-if="seekList!=''">
      <el-table ref="seekList" :data="seekList" highlight-current-row style="width: 100%" border :header-cell-style="{background:'#fdfdfd', color: '#666'}" class="tableBox active">
        <el-table-column prop="itemName" label="名称" width="180" align="center"></el-table-column>
        <el-table-column prop="stock" label="库存" width="180" align="center"></el-table-column>
        <el-table-column prop="bigUnit" label="单位" align="center"></el-table-column>
        <el-table-column prop="price" label="单价" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="bottom_input">
<!--      <el-form ref="form" label-width="80px" style="display: inline-block">-->
<!--        <el-form-item label="花材" style="font-weight: 700;">-->
<!--          <el-input style="width: 280px;font-size:13px" @keyup.enter.native="enterSeekFun()" placeholder="请输入名称，支持拼音首字母，按Esc取消" type="text" ref="commodityInput" v-model="seekVal"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
      <span style="margin-right:10px;font-weight: 700;">花材</span>
      <el-input style="width: 280px;font-size:13px" @keyup.enter.native="enterSeekFun()" placeholder="请输入名称，支持拼音首字母，按Esc取消" type="text" ref="commodityInput" v-model="seekVal"></el-input>

      <div style="display: inline-block;" class="allPrice">总金额: {{ totalMoney.toFixed(2) }}</div>
      <div style="display: inline-block;" class="allPrice">总数量: {{tableData.length}}</div>
      <div style="display: inline-block;" class="allPrice active">
        <el-checkbox v-model="checked"></el-checkbox>
        结账后自动打印
        <el-input style="width: 50px;" type="text" v-model="printAmount"></el-input>
        份
      </div>
    </div>
    <el-dialog title="选择花材" v-if="isSelectNumber" :visible.sync="isSelectNumber" width="30%" center>
      <div class="el-dialog-center">
        <span>{{ seekList[seekListIndex].itemName }}</span>
        <el-input ref="bigInput" style="width: 130px;margin-left: 15px" placeholder="0" @keyup.key-backspace.native="backspaceFun('big')" @keyup.enter.native="enterFun()" type="number" v-model="big"></el-input>
        <span>{{seekList[seekListIndex].bigUnit}}</span>
        <el-input style="width: 130px;margin-left: 15px" placeholder="0" @keyup.key-backspace.native="backspaceFun('small')" @keyup.enter.native="enterFun()" type="number" v-model="small"></el-input>
        <span>{{ seekList[seekListIndex].smallUnit }}</span>
      </div>
      <div class="remark">Enter 确定，数字键 改数量，Backspace 清0，Enter 确定，Esc 取消</div>
    </el-dialog>

    <el-dialog title="改价" v-if="isAmendPrice" :visible.sync="isAmendPrice" width="30%" center>
      <div class="el-dialog-center">
        <el-input ref="priceInput" style="width: 130px;margin-left: 15px" type="number" placeholder="0" @keyup.enter.native="amendPrice" @keyup.key-backspace.native="priceAmend = ''" v-model="priceAmend"></el-input>
      </div>
    </el-dialog>

    <el-dialog title="结账" v-if="isAccounts" :visible.sync="isAccounts" width="573px" center>
      <div class="">
        <div class="accounts-list">
          客户
          <el-select ref="selectShopListInput" style="width: 80%" v-model="selectShopListVal" filterable placeholder="请选择" :visible-change="true">
            <el-option
                v-for="item in allShopList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="accounts-list">
          取货
          <div class="accounts-center">
            <el-button :type="type=='自提'?'primary':''" @keyup.enter.native="type='自提'" @click="type='自提'">自提</el-button>
            <el-button :type="type=='配送'?'primary':''" @keyup.enter.native="type='配送'" @click="type='配送'">配送</el-button>
          </div>
        </div>
        <div class="accounts-list" v-if="type=='配送'">
          运费
          <div class="accounts-center">
            <el-input placeholder="请填写运费，留空免运费" v-model="freight"></el-input>
          </div>
        </div>
        <div class="accounts-list">
          结算方式
          <div class="accounts-center">
            <el-button :type="payType=='欠款'?'primary':''" @keyup.enter.native="payType='欠款'" @click="payType='欠款'">欠款</el-button>
            <el-button :type="payType=='已收款'?'primary':''" @keyup.enter.native="payType='已收款'" @click="payType='已收款'">已收款</el-button>
          </div>
        </div>
        <div class="accounts-list">
          备注
          <div class="accounts-center">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容" v-model="remark">
            </el-input>
          </div>
        </div>
        <div class="accounts-list">
          {{ payType }}
          <div class="accounts-center">
            ￥{{ totalMoney.toFixed(2) }}
          </div>
        </div>
        <div class="accounts-list">
          <span></span>
          <div class="accounts-center">
            <el-button @click="isAccounts = false">取消（Esc）</el-button>
            <el-button type="primary" @click="createOrder">确认（Ctrl+Enter）</el-button>
          </div>
        </div>
        <p style="text-align: center;color: #999999;">按Tab切到下一个，按空格选中</p>
      </div>
    </el-dialog>

    <!-- 配送单 -->
    <div class="print-html">

      <table border="0" width="780" style="border:solid 1px #fff;border-collapse:collapse">
        <tr>
          <td style="padding: 10px;width: 260px;">客户：{{orderMsg.customName}}</td>
          <td style="padding: 10px;width: 260px;">单号：{{orderMsg.orderSn}}</td>
          <td style="padding: 10px;width: 260px;">日期：{{orderMsg.deadline}}</td>
        </tr>
      </table>
      <table border="1" width="780" style="border:solid 1px black;border-collapse:collapse">
        <tr>
          <td style="padding: 10px;width: 100px;text-align: center;">序号</td>
          <td style="padding: 10px;width: 100px;text-align: center;">名称</td>
          <td style="padding: 10px;width: 100px;text-align: center;">单位</td>
          <td style="padding: 10px;width: 100px;text-align: center;">数量</td>
          <td style="padding: 10px;width: 100px;text-align: center;">单价</td>
          <td style="padding: 10px;width: 100px;text-align: center;">金额</td>
          <td style="padding: 10px;width: 100px;text-align: center;">备注</td>
        </tr>
        <tr v-for="(res,i) in printSelectList">
          <td style="padding: 10px;width: 100px;text-align: center;">{{ i+1 }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;">{{ res.name }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;">{{ res.unit }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;">{{ res.count }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;">{{ res.price }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;">{{ res.money }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;"></td>
        </tr>
        <tr>
          <td style="padding: 10px;width: 100px;" colspan="2">合计：{{totalMoney.toFixed(2)}}</td>
          <td style="padding: 10px;width: 100px;" colspan="2">实收：{{payType=='已收款'?totalMoney.toFixed(2):'0.00'}}</td>
          <td style="padding: 10px;width: 100px;" colspan="2">欠款：{{payType=='欠款'?totalMoney.toFixed(2):'0.00'}}</td>
          <td style="padding: 10px;width: 100px;"></td>
        </tr>
        <tr>
          <td style="padding: 10px;width: 100px;">其他说明：</td>
          <td style="padding: 10px;width: 100px;" colspan="6">{{remark}}</td>
        </tr>
      </table>
      <table border="0" width="780" style="border:solid 1px #fff;border-collapse:collapse">
        <tr >
          <td style="padding: 10px;width: 260px;">开单：{{orderMsg.shopAdminName}}</td>
          <td style="padding: 10px;width: 260px;">配送：</td>
          <td style="padding: 10px;width: 260px;">打印时间：{{todays(1)}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { getLodop } from '@/utils/lodop';
export default {
  name: 'order-add',
  data() {
    return {
      printAmount:1,
      checked:true,
      type:'自提',//取货方式
      payType:'欠款',//结算方式
      isSelectNumber:false,//选择扎和支的弹窗
      isAmendPrice:false,//修改单价弹窗
      isAccounts:false,//结账弹窗
      priceAmend:0,//修改单价弹窗
      isSeek:false,
      big:null,//大单位（扎）
      small:null,//小单位（支）
      totalMoney:0,//总价
      allList:'',//所有-可搜索数据
      seekVal:'',//搜索值
      seekOldVal:'',//旧-搜索值（上一次搜索值）
      seekListIndex:0,
      seekList:[],//搜索展示的列表
      tableDataIndex:0,
      tableData: [],// {index:'001',name:'测试1',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
      allShopList:[],
      selectShopListVal:'',
      freight:'',//运费
      remark:'',//备注
      printSelectList:'',
      orderMsg:'',
    };
  },
  created() {
    this.$nextTick(()=>{
      this.$refs['commodityInput'].focus();
    })

  },
  mounted() {
    this.getAllList()
    let self = this;
    document.onkeydown=function(e) {
      if(e && e.keyCode==13 && e.ctrlKey ){   //同时按下ctrl+enter
        if(self.isAccounts){
          self.isAccounts = false
          self.createOrder();
          console.log('ctrl+enter')
        }
        //要做的事情
      }
      if(e && e.keyCode==81 && e.ctrlKey ){   //同时按下ctrl+Q
        console.log('ctrl+Q')
        self.$refs['commodityInput'].focus();//选中
        //要做的事情
      }
      if( e && e.keyCode==38 ){   //按下上
        self.tableDataUp();
        //要做的事情
      }
      if( e && e.keyCode==40 ){   //按下下
        self.tableDataDown();
        //要做的事情
      }
      if( e && e.keyCode==107 ){   //按下+
        console.log('+')
        self.addSelectBig()
        //要做的事情
      }
      if( e && e.keyCode==109 ){   //按下-
        self.minusSelectBig()
        //要做的事情
      }
      if( e && e.keyCode==46 ){   //按下delete  删除选中
        self.tableData.splice(self.tableDataIndex, 1);
        self.$refs.singleTable.setCurrentRow(self.tableData[0]);
        //要做的事情
      }
      if( e && e.keyCode==34 ){   //按下pageDown  删除所有
        self.tableData = [];
        //要做的事情
      }
      if( e && e.keyCode==27 ){   //按下esc
        if(self.isAccounts){
          self.isAccounts = false;
          return;
        }
        self.escFun();
        //要做的事情
      }
      if( e && e.keyCode==119 ){   //按下f8 改价
        if(self.tableData!=''){
          self.isAmendPrice = true;
          self.priceAmend = 0;
          self.priceAmend = self.tableData[self.tableDataIndex].price;
          self.$nextTick(()=>{
            self.$refs['priceInput'].focus();
          })
        }
        //要做的事情
      }
      if( e && e.keyCode==120 ){   //按下f9
        self.orderMsg = '';
        if(self.$util.isEmpty(self.tableData)){
          self.$message({message: '请先选择花材！',type: 'warning'});
          return;
        }
        self.isAccounts = true;
        if(self.$util.isEmpty(self.allShopList)){
          self.getShopAll();
        }else{
          self.$nextTick(()=>{
            self.$refs['selectShopListInput'].focus();
          })
        }
        //要做的事情
      }
    }
  },
  methods: {
    todays(type) {
      var myDate = new Date();
      let todaty = '';
      if(type==1){
        todaty = myDate.getFullYear()+'-'+parseInt(myDate.getMonth()+1)+'-'+myDate.getDate()+' '+myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds()
      }else if(type=='time'){
        todaty = myDate.getHours()+':'+myDate.getMinutes();
      }else{
        let getDate = myDate.getDate()>9?myDate.getDate():'0'+myDate.getDate()
        let getDateMonth = parseInt(myDate.getMonth()+1)>9?parseInt(myDate.getMonth()+1):'0'+parseInt(myDate.getMonth()+1)
        todaty = myDate.getFullYear()+'-'+getDateMonth+'-'+getDate
      }
      return todaty
    },
    /**拿到所有数据*/
    getAllList(){
      this.$service.product.list().then(res => {
        this.allList = res.list;
      });
    },
    /**获取客户列表**/
    getShopAll(){
      this.$service.custom.shopListAll().then(res => {
        this.allShopList = res.list;
        this.$refs['selectShopListInput'].focus();
      });
    },
    /**生成订单**/
    createOrder(){
      const product = this.tableData.map(ele => {
        return { productId: ele.id, bigNum: ele.big, smallNum: ele.small };
      });
      let parameter = {
        customId:this.selectShopListVal,
        getType:this.type=='自提'?1:2,
        sendCost:this.freight,
        product:JSON.stringify(product),
        remark:this.remark,
        clearType:this.payType=='欠款'?1:2,
      }
      this.$service.order.orderCreate(parameter).then(res => {
        this.orderMsg = res;
        this.printSelectList = this.tableData;
        this.$nextTick(()=>{
          this.tableData = [];
          this.isAccounts = false;
          this.escFun();
        })
        this.printOrder();
      });
    },
    //打印
    printOrder() {

      this.$nextTick(() => {
        let LODOP = getLodop();

        LODOP.SET_PRINT_STYLE('FontSize', 20);
        LODOP.SET_PRINT_STYLE('Bold', 1);
        LODOP.ADD_PRINT_TEXT(150, 10, 790, 30, `纯彩花艺销售单`);
        LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);
        LODOP.SET_PRINT_STYLE('FontSize', 12);

        LODOP.ADD_PRINT_HTM(
            200,
            10,
            790,
            600,
            document.querySelector('.print-html').innerHTML
        );
        LODOP.PREVIEW();
        // LODOP.PRINT();
      });
    },
    /** 搜索--按键回车*/
    async enterSeekFun(){
      if(this.seekVal==''){this.isSeek = false;return;}
      if(this.seekVal==this.seekOldVal&&this.seekList!=''){
        // if(Number(this.seekList[this.seekListIndex].stock)==0){
        //   this.$message({message: '库存不足',type: 'warning'});
        //   return;
        // }
        this.isSeek = false;
        this.isSelectNumber = true;
        console.log(this.seekList[this.seekListIndex])
        this.$nextTick(()=>{
          this.$refs['bigInput'].focus();
        })
        console.log('两个值相同')
      }else{
        this.seekList = [];
        this.seekListIndex = 0;
        console.log('两个不相同，赋值')
        this.seekOldVal = this.seekVal;
        this.isSeek = true;
        let list = this.$util.copyObject(this.allList);
        let commonList = list;
        await commonList.forEach(ele => {
          let hasName = ele.itemName && ele.itemName.indexOf(this.seekVal) >= 0;
          let elePy = (ele.py && ele.py.toLocaleUpperCase()) || "";
          let hasPy = elePy.indexOf(this.seekVal.toLocaleUpperCase()) >= 0;
          if (hasName || hasPy) {
            this.seekList.push(ele);
          }
        });
        this.$refs.seekList.setCurrentRow(this.seekList[0]);
      }
    },
    /** 选择数量--按键回车*/
    enterFun(){
      let selectList = this.seekList[this.seekListIndex];
      let big = this.big;
      let small = this.small;
      big==null?Number(0):big;
      small==null?Number(0):small;
      console.log(big,small)
      if(big<=0 && small<=0){
        this.$message({message: '请先输入数量',type: 'warning'});
        return;
      }
      // if(Number(selectList.stock)<Number(big) + Number(small) / Number(selectList.ratio)){
      //   this.$message({message: '库存不足',type: 'warning'});
      //   return;
      // }
      let money = Number(selectList.price) * (Number(big) + Number(small) / Number(selectList.ratio))
      for (let i=0;i<this.tableData.length;i++){
        if(this.tableData[i].name==selectList.itemName){
          this.tableData.splice(i,1)
        }
      }
      this.tableData.push(
          {
            index:selectList.id,
            id:selectList.id,
            name:selectList.itemName,
            lv:selectList.rank,
            unit:selectList.bigUnit+'/'+selectList.smallUnit,
            count:Number(big)+'/'+Number(small),
            big:Number(big),
            small:Number(small),
            ratio:Number(selectList.ratio),
            stock:Number(selectList.stock),
            price:selectList.price,
            commodityMoney:money.toFixed(2),
            money:money,
          }
      )
      this.tableDataIndex = this.tableData.length-1;
      this.$refs.singleTable.setCurrentRow(this.tableData[this.tableData.length-1]);
      this.$nextTick(()=>{
        this.big = null;
        this.small = null;
      })
      this.escFun();
    },
    /**获取已选择的总金额**/
    getAllTableDataMoney(){
      let totalMoney = 0;
      this.tableData.forEach(ele => {
        totalMoney= totalMoney + ele.money
      })
      this.totalMoney = totalMoney;
    },
    /**关闭选择扎支弹窗-初始化**/
    escFun(){
      this.getAllTableDataMoney();
      // if(this.isSelectNumber){ }
      this.isAmendPrice = false;
      this.seekVal = '';
      this.seekList = [];
      this.isSelectNumber = false
      this.$nextTick(()=>{
        this.$refs['commodityInput'].focus();
      })

    },
    /**清空扎、支值**/
    backspaceFun(type){
      switch (type){
        case 'big':
          this.big = null;
          break;
        case 'small':
          this.small = null;
          break;
      }

    },
    /**改价-确定**/
    amendPrice(){
      if(this.priceAmend==''){
        this.$message({message: '请输入大于0的值',type: 'warning'});
        return;
      }
      let selectList = this.tableData[this.tableDataIndex];
      this.tableData[this.tableDataIndex].price = this.priceAmend;
      let money = Number(selectList.price) * (Number(selectList.big) + Number(selectList.small) / Number(selectList.ratio));
      this.tableData[this.tableDataIndex].money = money;
      this.tableData[this.tableDataIndex].commodityMoney = money.toFixed(2);
      this.priceAmend = 0;
      this.escFun();
    },
    /**增加数量**/
    addSelectBig(){
      let selectList = this.tableData[this.tableDataIndex];
      // if(Number(selectList.stock)<Number(selectList.big+1) + Number(selectList.small) / Number(selectList.ratio)){
      //   this.$message({message: '库存不足',type: 'warning'});
      //   return;
      // }
      this.tableData[this.tableDataIndex].big++
      let money = Number(selectList.price) * (Number(selectList.big) + Number(selectList.small) / Number(selectList.ratio));
      this.tableData[this.tableDataIndex].count = this.tableData[this.tableDataIndex].big+'/'+Number(this.tableData[this.tableDataIndex].small);
      this.tableData[this.tableDataIndex].money = money;
      this.tableData[this.tableDataIndex].commodityMoney = money.toFixed(2),
          this.getAllTableDataMoney();
      setTimeout(()=>{
        this.seekVal = '';
      },100)
    },
    /**减少数量**/
    minusSelectBig(){
      let selectList = this.tableData[this.tableDataIndex];
      if(this.tableData[this.tableDataIndex].big==1){
        setTimeout(()=>{
          this.seekVal = '';
        },100)
        return;
      }
      // if(Number(selectList.stock)<Number(selectList.big-1) + Number(selectList.small) / Number(selectList.ratio)){
      //   this.$message({message: '库存不足',type: 'warning'});
      //   return;
      // }
      this.tableData[this.tableDataIndex].big--
      let money = Number(selectList.price) * (Number(selectList.big) + Number(selectList.small) / Number(selectList.ratio));
      this.tableData[this.tableDataIndex].count = this.tableData[this.tableDataIndex].big+'/'+Number(this.tableData[this.tableDataIndex].small);
      this.tableData[this.tableDataIndex].money = money;
      this.tableData[this.tableDataIndex].commodityMoney = money.toFixed(2),
          this.getAllTableDataMoney();
      setTimeout(()=>{
        this.seekVal = '';
      },100)
    },
    /**向下移动**/
    tableDataDown(){
      if(this.isSeek){
        let tableDataLength = this.seekList.length-1;
        if(this.seekListIndex==5) return
        if(tableDataLength==this.seekListIndex){
          this.seekListIndex = tableDataLength
        }else{
          this.seekListIndex++;
        }
        this.$refs.seekList.setCurrentRow(this.seekList[this.seekListIndex]);
      }else{
        let tableDataLength = this.tableData.length-1;
        if(tableDataLength==this.tableDataIndex){
          this.tableDataIndex = tableDataLength
        }else{
          this.tableDataIndex++;
        }
        this.$refs.singleTable.setCurrentRow(this.tableData[this.tableDataIndex]);
      }

    },
    /**向上移动**/
    tableDataUp(){
      if(this.isSeek){
        if(this.seekListIndex==0){
          this.seekListIndex = 0
        }else{
          this.seekListIndex--;
        }
        this.$refs.seekList.setCurrentRow(this.seekList[this.seekListIndex]);
      }else{
        if(this.tableDataIndex==0){
          this.tableDataIndex = 0
        }else{
          this.tableDataIndex--;
        }
        this.$refs.singleTable.setCurrentRow(this.tableData[this.tableDataIndex]);
      }

    },
  }
};
</script>
