<template>
  <view class="">
    <tabTitle
      :tabList="tabList"
      @change="tabList_change"
      :active="pickTabIndex"
    ></tabTitle>
    <view class="unit-wrap">
      <view class="item" @click="pickerOpen">
        <text>{{ lineCode.name }}</text>
        <u-icon size="24rpx" class="icon" name="arrow-down"></u-icon>
      </view>
      <view class="item"> 单位：月 </view>
    </view>
    <view class="charts">
      <canvas
        class="charts-box"
        canvas-id="canvasA"
        id="canvasA"
        @touchstart="touchstart"
        @touchmove="touchmove"
        @touchend="touchend"
      ></canvas>
    </view>
    <u-picker
      :defaultIndex="defaultIndex()"
      :show="show"
      ref="uPicker"
      :columns="option.lineCode"
      @close="pickerClose"
      :closeOnClickOverlay="true"
      @confirm="pickerConfirm"
      keyName="name"
    ></u-picker>
  </view>
</template>

<script>
import tabTitle from '@/pages/home/components/tabTitle.vue'
import uCharts from '@/plugins/stan-ucharts/u-charts/u-charts-2.js'
let uChartsInstance = {}
import { get } from '@/utils/api.js'
export default {
  name: 'TabMain',
  props: {
    tabList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    tabTitle
  },
  watch: {
    lineCode: function (nval) {
      this.getdata()
    }
  },
  data () {
    return {
      pickTabIndex: 0,
      cWidth: 750,
      cHeight: 400,
      lineCode: '',
      option: {
        lineCode: []
      },
      show: false
    }
  },
  async mounted () {
    await this.getlineCode()
    this.getavgRepairTimeCount()

    this.cWidth = uni.upx2px(750)
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(400)
  },
  methods: {
    tabList_change (val) {
      this.pickTabIndex = val
      this.getdata()
    },
    showDraw (id, data) {
      const ctx = uni.createCanvasContext(id, this)
      const newuCharts = new uCharts({
        type: 'line',
        context: ctx,
        //canvasId: id,
        enableScroll: true,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: '#FFFFFF',
        padding: [15, 15, 0, 5],
        touchMoveLimit: 24,
        legend: {
          show: false
        },
        dataLabel: false,
        xAxis: {
          disableGrid: true,
          scrollShow: true,
          itemCount: 4
        },
        yAxis: {
          splitNumber: 3,
          gridColor: '#eee',
          data: [
            {
              min: 0,
              max: 900,
              axisLine: false
            }
          ]
        },
        extra: {
          column: {
            type: 'group',
            width: 30,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08
          }
        }
      })
      this.$set(uChartsInstance, id, newuCharts)
    },

    canvasFn (e, name) {
      uChartsInstance[name].showToolTip(e, {
        format: function (item, category) {
          return item.data
        }
      })
    },
    getdata () {
      switch (this.pickTabIndex) {
        case 0:
          this.getavgRepairTimeCount()
          break
        case 1:
          this.getavgFailureIntervalTimeCount()
          break
        default:
          break
      }
    },
    // 请求平均修复时间图表数据
    getavgRepairTimeCount () {
      let param = {
        dateType: 2,
        lineCode: this.lineCode.code
      }
      get(this.apiUrl + '/home/page/operation/avgRepairTimeCount', param).then(
        res => {
          if (res.success) {
            let seriesData = {
              categories: [],
              series: [
                {
                  name: this.tabList[0],
                  color: '#319547',
                  data: []
                }
              ]
            }
            for (let item of res.data) {
              seriesData.categories.push(item.dateTime)
              seriesData.series[0].data.push(item.repairAvgTime)
            }
            this.showDraw('canvasA', seriesData)
          }
        }
      )
    },
    // 请求平均故障间隔时间
    getavgFailureIntervalTimeCount () {
      let param = {
        dateType: 2,
        lineCode: this.lineCode.code
      }
      get(
        this.apiUrl + '/home/page/operation/avgFailureIntervalTimeCount',
        param
      ).then(res => {
        if (res.success) {
          let seriesData = {
            categories: [],
            series: [
              {
                name: this.tabList[0],
                color: '#319547',
                data: []
              }
            ]
          }
          for (let item of res.data) {
            seriesData.categories.push(item.dateTime)
            seriesData.series[0].data.push(item.repairAvgTime)
          }
          this.showDraw('canvasA', seriesData)
        }
      })
    },
    // 请求产线
    getlineCode () {
      return get(this.apiUrl + '/base/line/getList').then(res => {
        if (res.success) {
          let list = res.data.map(item => {
            return {
              name: item.name,
              code: item.code
            }
          })
          this.option.lineCode = [list]
          this.lineCode = this.option.lineCode[0][0]
        }
      })
    },
    pickerConfirm (e) {
      this.lineCode = e.value[0]
      this.pickerClose()
    },
    // 打开弹窗
    pickerOpen () {
      this.show = true
    },
    // 关闭弹窗
    pickerClose () {
      this.show = false
    },
    // 默认值
    defaultIndex () {
      if (this.option.lineCode.length < 1) {
        return []
      }
      let index = this.option.lineCode[0].findIndex(n => {
        return n.code == this.lineCode.code
      })
      if (index !== -1) {
        return [index]
      } else {
        return []
      }
    },
    touchstart (e) {
      uChartsInstance[e.target.id].scrollStart(e)
    },
    touchmove (e) {
      uChartsInstance[e.target.id].scroll(e)
    },
    touchend (e) {
      uChartsInstance[e.target.id].scrollEnd(e)
      uChartsInstance[e.target.id].touchLegend(e)
      uChartsInstance[e.target.id].showToolTip(e)
    }
  }
}
</script>

<style lang="scss" scoped>
.charts {
  position: relative;
  width: 750rpx;
  height: 400rpx;

  .charts-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
  }

  canvas {
    width: 750rpx;
    height: 400rpx;
    background-color: #ffffff;
  }

  .z99 {
    z-index: 99;
  }
}

.unit-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20rpx 20rpx 0;
  background: #ffffff;

  .item {
    color: #999;
    font-size: 28rpx;
    display: flex;
    align-items: center;

    & + .item {
      margin-left: 30rpx;
    }

    .icon {
      margin-left: 10rpx;
      margin-top: 10rpx;
    }
  }
}
</style>
