<template>
  <div>
    <el-dialog title="其他设置" :visible.sync="coffeeDiaLog" width="1000px" append-to-body >
      <el-tabs v-model="activeName" >
        <el-tab-pane label="咖啡机" name="first" >
          <div>
            
            <div class="mdo-box" >
              <span class="mdo-box-item"  v-for="(coffee,coffee_idx) in coffeeList" :key=coffee_idx > 
                {{coffee.name}}
              </span>              
            </div>

            <el-pagination    layout="prev, pager, next"  :total="total" :page-size="1" @current-change="handleCurrentChange"> </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="otherDialogCancel" >确定</el-button>
        <el-button @click="otherDialogCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getCoffeeList} from "@/api/machine/machineDetails";
export default { 
  data() {
    return {
      // 遮罩层
      loading: true,
      coffeeDiaLog:false,
      coffeeList:[],
      activeName:"first",
      total:3,
      pageCount:3,
      dataCount:15,
      pages : []
  
    };
  },
  created() {
   
  },

  methods: {
    //弹出机器页面
    handleOthDiaLog(row){
      this.machineId=row.id;
      
      this.getCoffeeList();

      this.coffeeDiaLog=true;
    },
    getCoffeeList(){
      this.loading = true;
      getCoffeeList(this.machineId).then((response) => {
        if(response.code==0){
         
          let pages = this.fillCofeeMenuList(response.data);
          this.pages = pages;
          this.coffeeList=pages[0].data;
          // console.log("this.pages ",pages);

          this.loading = false;
        }       
      }).catch((response) => {
                
          let pages = this.fillCofeeMenuList(response.data);
          this.pages = pages;
          this.coffeeList=pages[0].data;
          // console.log("this.pages ",pages);
          this.loading = false;
              
      })
    },
  
    /**将数据填充，当前默认是每页要显示15条，先将数据构造好 */
    fillCofeeMenuList(pdata){
      let pages = new Array(this.pageCount);      
      for(let j=0;j<pages.length;j++){
        let pageid = j+1;
        let pageData = this.findPage(pdata,pageid);
        pages[j] = pageData;        
      }    
      this.total = pages.length;  
      return pages;
    },
    findPageDataItemByProductId(pageDatas,product_id){
      // console.log("product_id",product_id);
      // console.log("pageDatas",pageDatas);
      let pageDataItem =  {
        "name": "   ",  
        "product_id": product_id  
      };
      for(let k=0;k<pageDatas.length;k++){
        if(pageDatas[k].product_id == product_id){
          pageDataItem = Object.assign({},pageDatas[k]);
        }
      }
      return pageDataItem;
    },
    findPage(pdata,pageId){
      let t_data = [];
      if(pdata){
        t_data = pdata ;
      }
      // console.log("pageId ",pageId);
      // console.log("pdata ",pdata);
      let pageData = {page:1,data:[]} ;

      let pageDatas =  new Array(this.dataCount);
      let t_pageDatas = [];
     
      for(let i=0;i<t_data.length;i++){
        if(pdata[i].page == pageId){
          t_pageDatas = pdata[i].data;
          pageData.page = pageId;

        }
      }

      // console.log("t_pageDatas ",t_pageDatas);
      //
      for(let i=0;i<pageDatas.length;i++){
        let product_id = (pageId-1)*this.dataCount+i+1;

        let pageDataItem = this.findPageDataItemByProductId(t_pageDatas,product_id);
        pageDatas[i] = pageDataItem;
      }
      pageData.data = pageDatas
      return pageData;
    },
    otherDialogCancel(){
      this.coffeeDiaLog=false;
    },
    handleCurrentChange(val){
      // console.log("val",val)
      this.coffeeList=this.pages[val-1].data;
      // console.log("this.coffeeList ",this.coffeeList);

    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
  .mdo-box {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction:row;
    flex-wrap:  wrap;
  }
  .mdo-box-item {
    width:20%;
    border-width: 1px;
    border-color: rgb(218, 214, 214);
    border-style: solid;
    height: 50px;
    text-align: center;
    align-items:center;
    display: flex;
    justify-content:center;
  }
</style>