<template>
  <div class="work-order-gather">
    <van-nav-bar left-arrow left-text="返回" @click-left="goBack" title="师傅维修工单统计" />

    <div class="header" v-if="isHide">
      <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect">
        <template #reference>
          <van-button type="info" size="small">{{ role_typeText }} <span class="selectOrigin">></span></van-button>
        </template>
      </van-popover>
      <input @keyup.enter="keydownFn" v-model="keyword" type="text" class="inputClass" />
      <van-button @click="downLoadFn" type="info" size="small">下载报表 </van-button>
      <img @click="showFn" class="svgClass" src="@/assets/icon/hspIcon.svg" />
    </div>
    <div :class="isHide ? '' : 'widDiv'">
      <div @scroll="scrollFn" class="table_header" :style="isHide ? 'height: calc(100vh - 46px - 53.333px);' : ' height: 100vw;'">
        <div v-for="(item, index) in dataList" :key="index">
          <div class="header wrap" style="width:200px">{{ item.websit_name }}{{ item.websit_number }}</div>
          <div class="header wrap" style="width:150px">{{ item.name }}{{ item.number }}</div>
          <div class="header wrap">{{ item.appoint_today }}</div>
          <div class="header wrap">{{ item.completed_today }}</div>
          <div class="header wrap">{{ item.unfinished_today }}</div>
          <div class="header wrap">{{ item.no_appointment_all }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Notify } from 'vant'
import { getUrlKey, debounce, getBlob } from '@/utils/common'
export default {
  data() {
    return {
      finished: false,

      pageSize: 50,
      pageNum: 1,

      keyword: '',
      show: false,
      isHide: true,
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      showPopover: false,
      role_type: 'websit',
      role_typeText: '网点',
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: '师傅', value: 'worker' },
        { text: '网点', value: 'websit' }
      ],
      dataList: [
        {
          websit_name: '网点信息',
          websit_number: '',
          name: '师傅信息',
          number: '',
          appoint_today: '当日派工单量',
          completed_today: '当日完工单量',
          unfinished_today: '当日未完工单量',
          no_appointment_all: '未预约工单'
        }
      ]
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    resetFn() {
      this.dataList = [
        {
          websit_name: '网点信息',
          websit_number: '',
          name: '师傅信息',
          number: '',
          appoint_today: '当日派工单量',
          completed_today: '当日完工单量',
          unfinished_today: '当日未完工单量',
          no_appointment_all: '未预约工单'
        }
      ]
      this.pageNum = 1
      this.finished = false
      this.onLoad()
    },
    debounceChange: debounce(function(val, val2) {
      // console.log(val)
      if (val < 300 && val2 >= 0 && this.finished === false) {
        this.onLoad()
      }
    }, 500),
    scrollFn(value) {
      const aaa = value.target.scrollHeight - value.target.scrollTop - value.target.clientHeight
      const bbb = value.target.scrollLeft
      this.debounceChange(aaa, bbb)
    },
    onLoad() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      let params = {
        openid: getUrlKey('openid', window.location.href),
        role_type: 'worker',
        keyword_type: this.role_type,
        keyword: this.keyword,
        order_type: 'repair',
        export: '0',
        page: this.pageNum++,
        page_size: this.pageSize,
        token: JSON.parse(sessionStorage.getItem('mobileOfficeMiniTOKEN'))
      }
      this.postRequestPHP('/services/statistics/order_statistics/lists', params)
        .then(res => {
          this.dataList.push(...res.data.data)

          if (this.dataList.length >= res.data.total) {
            this.finished = true
            Notify({ type: 'primary', message: '已加载全部数据' })
          }
          Toast.clear()
        })
        .catch(err => {
          Notify({ type: 'danger', message: '参数错误' })
          Toast.clear()
        })
    },
    keydownFn() {
      this.resetFn()
    },
    downLoadFn() {
      //   this.getList()
      let params = {
        openid: getUrlKey('openid', window.location.href),
        role_type: 'worker',
        keyword_type: this.role_type,
        keyword: this.keyword,
        order_type: 'repair',
        page: 1,
        page_size: this.pageSize * this.pageNum,
        export: '1',
        token: JSON.parse(sessionStorage.getItem('mobileOfficeMiniTOKEN'))
      }
      this.postRequestPHP('/services/statistics/order_statistics/lists', params).then(res => {
        // window.open(res.data.filename.file)
        // getBlob({ url: res.data.filename.file, name: res.data.filename.name })
        // uni.postMessage({
        //   data: { url: res.data.filename.file, name: res.data.filename.name }
        // })
        uni.navigateTo({
          url: '/pages/master/mine/download?url=' + res.data.filename.file + '&&name=' + res.data.filename.name
        })
      })
    },
    // getList() {
    //   let params = {
    //     openid: getUrlKey('openid', window.location.href),
    //     role_type: this.role_type,
    //     keyword_type: this.role_type,
    //     keyword: this.keyword,
    //     order_type: 'repair',
    //     export: '0',
    //     token: JSON.parse(sessionStorage.getItem('mobileOfficeMiniTOKEN'))
    //   }
    //   this.postRequestPHP('/services/statistics/order_statistics/lists', params).then(res => {
    //     // console.log(res)
    //     let oneTitle = {
    //       websit_name: '网点信息',
    //       websit_number: '',
    //       name: '师傅信息',
    //       number: '',
    //       appoint_today: '当日派工单量',
    //       completed_today: '当日完工单量',
    //       unfinished_today: '当日未完工单量',
    //       no_appointment_all: '未预约工单'
    //     }
    //     this.dataList = [oneTitle, ...res.data]
    //   })
    // },
    showFn() {
      this.isHide = false
      // this.resetFn()
    },
    selectFn(value) {
      this.show = true
    },

    onSelect(value) {
      this.role_type = value.value
      this.role_typeText = value.text
      this.resetFn()
    },

    goBack() {
      if (this.isHide) {
        this.$router.back()
      } else {
        this.isHide = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.selectOrigin {
  display: inline-block;
  transform: rotate(90deg);
}
.svgClass {
  //   font-size: 20px;
  height: 24px;
  width: 24px;
}

.table_header {
  overflow: scroll;
  width: 100%;
  //   height: 100vw;
  border-top: 4px solid #efefef;
  white-space: nowrap;

  .header {
    overflow: hidden;
    border-right: 4px solid #efefef;
    display: inline-block;
    width: 100px;
    height: 50px;
    font-size: 14px;
    // background-color: #ce1919;
    // padding: 0;
  }
  .wrap {
    white-space: pre-wrap;
    width: 50px;
  }
}

.listTitle {
  font-weight: 700;
  font-size: 12px;
}

.widDiv {
  width: calc(100vh - 46px);
  height: calc(100vh - 46px);
  transform: rotate(90deg);
  transform-origin: 50vw 50vw;
}
.selectStyle {
  height: 30px;
  border-radius: 5px;
  border: 1px solid #dadada;
}
.inputClass {
  height: 30px;
  border: 1px solid #dddddd;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px;
}
</style>
