<template>
  <view class="order-manage-view">
    <u-navbar
      back-icon-color="#333333"
      background="#FFFFFF"
      title="订单管理"
      titleColor="#333333"
      :border-bottom="false"
      title-bold
    ></u-navbar>
    <view class="body-view">
      <view class="header-view">
        <view class="title-view">工作数据</view>
        <view class="time-view">
          <u-tabs
            height="56"
            activeColor="#2272FF"
            bg-color="none"
            inactive-color="#999"
            bar-height="4"
            bar-width="44"
            :offset="offset"
            :list="timeTypeTexts"
            :current="current"
            @change="change"
            :is-scroll="false"
            font-size="26"
            bold
          ></u-tabs>
        </view>
      </view>
      <view class="line-view"></view>
      <view class="content-view">
        <view
          v-for="(item, index) in detailLabels"
          :key="index"
          class="item-view"
        >
          <view
            class="left-view"
            @click="handleClick(index)"
            hover-class="u-hover-class"
          >
            <view
              :class="[
                'count-view',
                { active: currentClicks[current][item.type] },
              ]"
              >{{ info[item.key] || 0 }}</view
            >
            <view
              >{{ item.label
              }}<u-icon
                class="arrow-icon"
                name="arrow-right"
                color="#cccccc"
              ></u-icon
            ></view>
          </view>
        </view>
      </view>
      <view>
        <u-toast ref="uToast" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      info: {},
      offset: [0, 0],
      current: 0,
      currentClicks: [],
    }
  },
  computed: {
    timeTypeTexts() {
      return [
        { name: '今日' },
        { name: '昨日' },
        { name: '本周' },
        { name: '本月' },
      ]
      // return { today: '今日', yesterday: '昨日', week: '本周', month: '本月' }
    },
    detailLabels() {
      return [
        { label: '已接单', type: 'take', key: 'acceptedCount' },
        { label: '已签到', type: 'checkin', key: 'checkedCount' },
        { label: '已提交完工', type: 'finish', key: 'finishedCount' },
      ]
    },

    params() {
      var date = new Date()
      var timestamp = date.getTime()
      var today = this.$u.timeFormat(timestamp, 'yyyy-mm-dd')
      var yesterday = this.$u.timeFormat(date.setDate(date.getDate() - 1))
      date = new Date()
      var weekDays = [6, 0, 1, 2, 3, 4, 5]
      var week = this.$u.timeFormat(
        date.setDate(date.getDate() - weekDays[date.getDay()])
      )
      date = new Date()
      var month = this.$u.timeFormat(date.setDate(1))
      return [
        { start: today, end: today },
        { start: yesterday, end: yesterday },
        { start: week, end: today },
        { start: month, end: today },
      ]
    },
    currentParam() {
      return this.params[this.current]
    },
    clicks() {
      return { take: false, checkin: false, finish: false }
    },
  },
  onLoad() {
    this.currentClicks = this.clicks
  },
  onShow() {
    this.getOrderCount()
  },
  methods: {
    // 获取订单数量
    getOrderCount() {
      this.$u.api.manageOrderCount(this.currentParam).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.info = res.data || {}
          }
        } else {
          console.log(res.message, '获取订单数量失败！')
        }
      })
    },
    change(index) {
      this.current = index
      this.getOrderCount()
    },
    handleClick(index) {
      var item = this.detailLabels[index]
      this.currentClicks = [
        { ...this.clicks },
        { ...this.clicks },
        { ...this.clicks },
        { ...this.clicks },
      ]

      this.currentClicks[this.current][item.type] = true
      if (this.info[item.key] > 0) {
        this.$u.route({
          url: 'pages/mine/order/list',
          params: {
            orderType: item.type,
            title: this.timeTypeTexts[this.current].name + '-' + item.label,
            ...this.currentParam,
          },
        })
      } else {
        this.$refs.uToast.show({
          title: '暂无数据',
          type: 'warning',
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.order-manage-view {
  .body-view {
    background-color: #ffffff;
    margin: 20rpx 30rpx;
    border-radius: 12rpx;
    padding: 20rpx 30rpx;
    .header-view {
      display: flex;
      justify-content: space-between;
      .title-view {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
        display: flex;
        align-items: center;
      }
      .time-view {
        width: 300rpx;
      }
    }
    .line-view {
      width: 100%;
      background-color: #f4f5f7;
      height: 2rpx;
      margin: 30rpx 0;
    }
    .content-view {
      display: flex;
      align-self: center;
      justify-content: space-around;
      padding: 54rpx 0;
      .item-view {
        display: flex;
        align-items: center;
        justify-content: center;
        .left-view {
          text-align: center;
          color: #666666;
          font-size: 28rpx;
          width: 180rpx;

          .count-view {
            font-weight: bold;
            font-size: 52rpx;
            margin-bottom: 20rpx;
            color: #333333;
            &.active {
              color: #2272ff;
            }
          }
          .arrow-icon {
            margin-left: 4rpx;
          }
        }
      }
    }
  }
}
</style>
