import { basePage } from './draw/base.js'
import FLD from './draw/FirstLevelDirectory.js'
import SLD from './draw/SecondLevelDirectory.js'
import Content from './draw/content.js'
import Details from './draw/details.js'

//import canvas from './libs/weapp-adapter.js'

var url = 'http://t6.9026.com/api/album/cat?parent_id=0&store_id=0'//初始顶级目录url
var FLDsource = []//顶级目录对象列表
var SLDsource = []//二级目录对象列表
var GoodsSource = []//商品对象列表
var GoodsDetail//商品详情
var flag1 = 0//通过flag1来判断现在处于哪一个顶级目录，然后利用flag1传参数获取该顶级目录下的二级目录信息
var flag2 = 0//通过flag1来判断现在处于哪一个二级目录，然后利用flag2传参数获取该顶级目录下的商品列表
var flag3 = 0//通过flag3来判断选择的是哪一个商品，然后获取它的的详情

//定义画布
//let canvas = wx.createCanvas()
let context = canvas.getContext('2d')
//获取手机屏幕大小信息
const screenWidth = window.innerWidth
const screenHeight = window.innerHeight
//中间商品列表显示区绘制辅助变量
const imgX = (screenWidth - 90) / 3
const imgY = screenHeight / 3

//定义按钮区域
//一级目录按钮区域
let FLDbtnArea = []
//二级目录按钮区域
let SLDbtnArea = []
//产品列表区域
const ContentbtnArea = [{ startX: 40, startY: 0, endX: 40 + imgX, endY: imgY, status: false }, { startX: 40 + imgX, startY: 0, endX: 40 + imgX + imgX, endY: imgY, status: false }, { startX: 40 + imgX + imgX, startY: 0, endX: screenWidth - 50, endY: imgY, status: false },
{ startX: 40, startY: imgY, endX: 40 + imgX, endY: imgY + imgY, status: false }, { startX: 40 + imgX, startY: imgY, endX: 40 + imgX + imgX, endY: imgY + imgY, status: false }, { startX: 40 + imgX + imgX, startY: imgY, endX: screenWidth - 50, endY: imgY + imgY, status: false }, { startX: 40, startY: imgY + imgY, endX: 40 + imgX, endY: screenHeight, status: false }, { startX: 40 + imgX, startY: imgY + imgY, endX: 40 + imgX + imgX, endY: screenHeight, status: false }, { startX: 40 + imgX + imgX, startY: imgY + imgY, endX: screenWidth - 50, endY: screenHeight, status: false }]
//详情界面按钮区域
const DetailbtnArea = [{ startX: screenWidth - 40, startY: 40, endX: screenWidth, endY: 80 }, { startX: screenWidth - 40, startY: 80, endX: screenWidth, endY: 120 }, { startX: screenWidth - 40, startY: 120, endX: screenWidth, endY: 160 }, { startX: screenWidth - 40, startY: 160, endX: screenWidth, endY: 200 }, { startX: screenWidth - 40, startY: screenHeight - 40, endX: screenWidth, endY: screenHeight }, { startX: screenWidth - 80, startY: screenHeight - 40, endX: screenWidth - 40, endY: screenHeight }]
//测试按钮
let testbtnArea = { startX: 0, startY: 40, endX: 40, endX: 80 }
//翻页按钮
const pageArea = { startX: screenWidth - 50, startY: screenHeight - 30, endX: screenWidth, endY: screenHeight }
//定义目录选中状态
let FLDstatus = false
let SLDstatus = false
//定义是否在详情界面状态
let Detailstatus = false
//定义当前页数
let page = 0


//绘制函数
function reStart() {
  console.log('reStartSuccess')//调用成功输出'reStartSuccess'
  reset()//清空之前屏幕上的绘制内容，减少缓存占用，及信息重叠
  //添加触摸响应事件
  canvas.addEventListener(
    'touchstart',
    touchEventHandler
  )
  if (Detailstatus == false) {
    //绘制两个侧边栏
    basePage(context)
    //绘制一级目录
    let dir1 = new FLD()
    for (let i = 0; i < FLDsource.length; i++) {
      let img = wx.createImage()
      img.src = FLDsource[i].pic_url
      dir1.drawFLD(context, img, FLDbtnArea[i].status, i, FLDsource[i].name)
    }

    //绘制二级目录
    let dir2 = new SLD()
    for (let i = 0; i < SLDbtnArea.length; i++) {
      dir2.drawSLD(context, SLDbtnArea[i].status, i, SLDsource[i].name)
    }
    //绘制内容
    let dir3 = new Content()
    if (GoodsSource.length < 10) {//当商品列表小于10的时候，无需翻页，直接绘制
      console.log('小于10')
      for (let i = 0; i < GoodsSource.length; i++) {
        let img = wx.createImage()
        img.src = GoodsSource[i].cover_pic
        dir3.drawContent(context, img, i, GoodsSource[i].name)
      }
    }
    else {//当商品列表大于9的时候，需要翻页，通过变量page来控制绘制
      console.log('大于9')
      for (let j = page * 9; j < (page + 1) * 9; j++) {
        let img = wx.createImage()
        img.src = GoodsSource[j].cover_pic
        dir3.drawContent(context, img, j % 9, GoodsSource[j].name)
      }
      // if (page > (GoodsSource.length - 1) % 9) break //如果页数大于实际页数的话，停止绘制,避免出现获取不到资源而报错
    }
  } else {//绘制详细内容
    let dt = new Details()
    console.log('进入详情')
    
    let img = wx.createImage()
    img.src = GoodsDetail.attr
    dt.showDetails(context, img, GoodsDetail.name, GoodsDetail.price)
  }

}
//触摸响应函数
function touchEventHandler(e) {
  try {
    e.preventDefault()
    var x = e.touches[0].clientX
    var y = e.touches[0].clientY
  } catch (evt) {
    console.log(evt.message)
  }
  if (Detailstatus == false) {//当不在详情界面时
    //一级目录控制
    for (let btn in FLDbtnArea) {
      if (x >= FLDbtnArea[btn].startX
        && x <= FLDbtnArea[btn].endX
        && y >= FLDbtnArea[btn].startY
        && y <= FLDbtnArea[btn].endY) {
        for (let x in FLDbtnArea) {//点击该按钮的时候，它变为活跃状态status=true，而其他所有按钮变为非活跃状态status=false
          FLDbtnArea[x].status = false
        }
        for (let x in ContentbtnArea) {//发生页面切换时所有商品详情均为不活跃状态
          ContentbtnArea[x].status = false
        }
        page = 0//发生页面切换时页数置0
        flag1 = btn
        flag2 = 0//发生一级目录切换时，二级目录选中第一个
        //FLDbtnArea[btn].status = true
        getFLDsource(callback1, url)//重绘
      }
    }
    //二级目录控制
    for (let btn in SLDbtnArea) {
      if (x >= SLDbtnArea[btn].startX
        && x <= SLDbtnArea[btn].endX
        && y >= SLDbtnArea[btn].startY
        && y <= SLDbtnArea[btn].endY) {
        for (let x in SLDbtnArea) {//点击该按钮的时候，它变为活跃状态status=true，而其他所有按钮变为非活跃状态status=false
          SLDbtnArea[x].status = false
        }
        for (let x in ContentbtnArea) {//发生页面切换时所有商品详情均为不活跃状态
          ContentbtnArea[x].status = false
        }
        page = 0//发生页面切换时页数置0
        flag2 = btn
        //SLDbtnArea[btn].status = true
        getSLDsource(callback2, FLDsource)//重绘
      }
    }
    //翻页控制
    if (x >= pageArea.startX
      && x <= pageArea.endX
      && y >= pageArea.startY
      && y <= pageArea.endY) {
      if (page < (GoodsSource.length - 1) % 9 + 1)//只有在当前页数小于实际页数的时候才能再往上+
        page++//点击翻页时页数+1
      console.log(page)
      //getFLDsource(callback1, url)//重绘
      reStart()
    }
    //内容点击进入详情控制
    for (let con in ContentbtnArea) {
      if (x >= ContentbtnArea[con].startX
        && x <= ContentbtnArea[con].endX
        && y >= ContentbtnArea[con].startY
        && y <= ContentbtnArea[con].endY) {
        Detailstatus = true
        for (let x in ContentbtnArea) {
          ContentbtnArea[x].status = false
        }
        ContentbtnArea[con].status = true//用于判断是否进入详情
        con = parseInt(con)
        flag3 = (page * 9) + con
        getGoodsDetail(callback4, GoodsSource)
        //reStart() //重绘
      }
    }

  }
  else {//在详情界面的时候
    //  点击返回按钮返回原来界面
    if (x >= DetailbtnArea[0].startX
      && x <= DetailbtnArea[0].endX
      && y >= DetailbtnArea[0].startY
      && y <= DetailbtnArea[0].endY) {
      Detailstatus = false
      reStart() //重绘
    }
    if (x >= DetailbtnArea[1].startX
      && x <= DetailbtnArea[1].endX
      && y >= DetailbtnArea[1].startY
      && y <= DetailbtnArea[1].endY) {

    }
    if (x >= DetailbtnArea[2].startX
      && x <= DetailbtnArea[2].endX
      && y >= DetailbtnArea[2].startY
      && y <= DetailbtnArea[2].endY) {

    }
    if (x >= DetailbtnArea[3].startX
      && x <= DetailbtnArea[3].endX
      && y >= DetailbtnArea[3].startY
      && y <= DetailbtnArea[3].endY) {
      let tel = '15228940449'
      makePhoneCall(tel)
      
    }
    if (x >= DetailbtnArea[4].startX
      && x <= DetailbtnArea[4].endX
      && y >= DetailbtnArea[4].startY
      && y <= DetailbtnArea[4].endY) {

    }
    if (x >= DetailbtnArea[5].startX
      && x <= DetailbtnArea[5].endX
      && y >= DetailbtnArea[5].startY
      && y <= DetailbtnArea[5].endY) {

    }
  }

}
//清除之前绘制内容
function reset() {
  console.log('resetSuccess')
  context.clearRect(0, 0, screenWidth, screenHeight)
}
//获取顶级目录列表
function getFLDsource(callback1, url) {
  wx.request({
    url: url,  //这里''里面填写你的服务器API接口的路径    
    data: {
    },  //这里是可以填写服务器需要的参数    
    method: 'GET', // 声明GET请求    
    // header: {}, // 设置请求的 header，GET请求可以不填    
    success: function (res) {
      let test = JSON.stringify(res.data)
      let tet = JSON.parse(test)
      FLDsource.splice(0, FLDsource.length)
      for (let i in tet.data.cats) {
        FLDsource.push(tet.data.cats[i])
      }
      callback1(FLDsource)//导出顶级目录列表
    }
  });
}
//在回调函数中通过顶级目录个数获得它的按钮区域
function callback1(res) {
  FLDbtnArea.splice(0, FLDbtnArea.length)//每次调用重新填充数据的时候清空之前数据
  for (let i = 0; i < res.length; i++) {//通过顶级目录个数获得它的按钮区域
    let s = false
    if (i == flag1) s = true
    let FLDobj = new Object()
    FLDobj.startX = screenWidth - 50
    FLDobj.startY = 50 * (i + 1)
    FLDobj.endX = screenWidth
    FLDobj.endY = 50 * (i + 2)
    FLDobj.status = s
    FLDbtnArea.push(FLDobj)
  }
  //console.log(FLDbtnArea)
  //console.log(FLDsource)
  getSLDsource(callback2, FLDsource)//获取二级目录信息
}
//根据获取第一个请求函数得到的顶级目录信息来获取二级目录信息
function getSLDsource(callback2, FLDsource) {
  //  通过flag1来判断现在处于哪一个顶级目录，然后利用flag1传参数获取该顶级目录下的二级目录信息
  let u = 'http://t6.9026.com/api/album/cat' + '?store_id=0&parent_id=' + FLDsource[flag1].id
  console.log(u)
  wx.request({
    url: u,
    data: {
    },
    method: 'GET',
    success: function (res) {
      let test = JSON.stringify(res.data)
      let tet = JSON.parse(test)
      SLDsource.splice(0, SLDsource.length)//每次调用重新填充数据的时候清空之前数据
      for (let i in tet.data.cats) {
        SLDsource.push(tet.data.cats[i])
      }
      callback2(SLDsource)//导出二级目录列表
    }
  })
}
//通过二级目录列表的长度来得到它的按钮区域列表
function callback2(res) {
  SLDbtnArea.splice(0, SLDbtnArea.length)//每次调用重新填充数据的时候清空之前数据
  for (let i = 0; i < res.length; i++) {
    let s = false
    if (i == flag2) s = true
    let SLDobj = new Object()
    SLDobj.startX = 0
    SLDobj.startY = 40 * i
    SLDobj.endX = 40
    SLDobj.endY = 40 * (i + 1)
    SLDobj.status = s
    SLDbtnArea.push(SLDobj)
  }
  //console.log(SLDsource)
  //console.log(SLDbtnArea)
  getGoodsSource(callback3, SLDsource)
}
function getGoodsSource(callback3, SLDsource) {
  let u = 'http://t6.9026.com/api/album/goods' + '?store_id=0&cat_id=' + SLDsource[flag2].id
  console.log(u)
  wx.request({
    url: u,
    data: {
    },
    method: 'GET',
    success: function (res) {
      let test = JSON.stringify(res.data)
      let tet = JSON.parse(test)
      GoodsSource.splice(0, GoodsSource.length)//每次调用重新填充数据的时候清空之前数据
      for (let i in tet.data.goods) {
        GoodsSource.push(tet.data.goods[i])
      }
      callback3(GoodsSource)//导出商品列表
    }
  })
}
function callback3(res) {
  reStart()
  console.log(GoodsSource)
}
function getGoodsDetail(callback4, GoodsSource) {
  console.log(flag3)
  console.log(GoodsSource[flag3].id)
  let u = 'http://t6.9026.com/api/album/goods-detail?store_id=0&agent_id=10&goods_id=' +  GoodsSource[flag3].id
  console.log(u)
  wx.request({
    url: u,
    data: {
    },
    method: 'GET',
    success: function (res) {
      let test = JSON.stringify(res.data)
      let tet = JSON.parse(test)
      GoodsDetail = tet.data.goods
      callback4(GoodsDetail)//导出商品列表
    }
  })
}
function callback4(res) {
  reStart()
}
function makePhoneCall(tel){
    wx.makePhoneCall({
      phoneNumber: tel,
      success: function(res) {
        console.log('成功拨打电话')
      },
      fail: function(res) {},
      complete: function(res) {},
    })
}

/*
主函数
*/
export default class Main {
  constructor() {
    getFLDsource(callback1, url)
    //let tel = '10086'
    //makePhoneCall(tel)
  }
}