<template>
  <zj-page-layout :isScroll="true" :refresherTriggered="refresherTriggered" @refresherrefresh="refresherrefresh">
    <template slot="header">
      <view class="search-container" v-if="isWorkerUser">
        <u-search
          shape="round"
          :showAction="false"
          placeholder="输入工单单号进行搜索"
          v-model="keyword"
          @search="searchData"
        >
        </u-search>
      </view>
    </template>

    <view class="all-container">
      <!-- <view class="order-container card">
        <view class="home-title">
          <view class="left">我的服务单</view>
          <view class="right" @tap="navToPage('/packageWorkorder/pages/userWorkorderList?tab=', 1)">
            <text class="text">全部服务单</text>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>
        <view class="list">
          <view
            class="item"
            v-for="(item, index) in workorderList"
            :key="index"
            @tap="navToPage(`/packageWorkorder/pages/userWorkorderList?tab=${item.key}`, 1)"
          >
            <view class="icon">
              <text class="iconfont" :class="item.icon"></text>
              <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
            </view>
            <view class="title">{{ item.title }}</view>
          </view>
        </view>
      </view> -->

      <block>
        <view class="data-container">
          <view class="common-title">我的工单</view>
          <view class="list">
            <view class="item" v-for="(item, index) in statsList" :key="index" @tap="clickItem(item)">
              <view class="num">{{ item.num }}</view>
              <view class="bottom">
                <text class="iconfont" :class="item.icon" :style="{ color: item.color }"></text>
                <text class="text">{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="schedule-container">
          <view class="common-title">我的日程</view>
          <view class="schedule-card">
            <view class="label">
              <view>星期</view>
              <view>日期</view>
              <view>待接单</view>
              <view>服务中</view>
            </view>
            <view class="days">
              <view class="item" v-for="(item, index) in scheduleList" :key="index">
                <view>{{ item.week }}</view>
                <view :class="index === 0 ? 'today' : ''">{{ index === 0 ? '今天' : item.day }}</view>
                <view>{{ item.djd || '' }}</view>
                <view>{{ item.fwz || '' }}</view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </zj-page-layout>
</template>

<script>
import { selectionChange } from '@/common/utils/util.js'

export default {
  data() {
    return {
      userInfo: {},
      refresherTriggered: false,
      keyword: '',

      statsList: [
        {
          name: '待接单',
          num: 0,
          icon: 'icon-daiyuyue',
          color: '#D8F6D8',
          url: '/packageWorkorder/pages/orderList?tab=DJD'
        },
        {
          name: '服务中',
          num: 0,
          icon: 'icon-daishangmen',
          color: '#FFEBDF',
          url: '/packageWorkorder/pages/orderList?tab=FWZ'
        },
        {
          name: '异常单',
          num: 0,
          icon: 'icon-daiwangong',
          color: '#D7F1FF',
          url: '/packageWorkorder/pages/orderList?tab=YCD'
        },
        {
          name: '待抢单',
          num: 0,
          icon: 'icon-daijiesuan',
          color: '#FFEED1',
          url: '/packageWorkorder/pages/orderList?tab=DQD'
        },
        {
          name: '今日完工',
          num: 0,
          icon: 'icon-tuojigongdan',
          color: '#D7F1FF',
          url: '/packageWorkorder/pages/orderList?tab=YWG&smallTab=1'
        },
        {
          name: '近半年完工',
          num: 0,
          icon: 'icon-bannianwangong',
          color: '#D8F6D8',
          url: '/packageWorkorder/pages/orderList?tab=YWG'
        },
        {
          name: '配件申请中',
          num: 0,
          icon: 'icon-bannianwangong',
          color: '#D8F6D8',
          url: '/packageMaterial/pages/partsApply/list?tab=ING'
        },
        {
          name: '配件已到货',
          num: 0,
          icon: 'icon-bannianwangong',
          color: '#D8F6D8',
          url: '/packageMaterial/pages/partsApply/list?tab=END'
        },
        {
          name: '待处理',
          num: 0,
          icon: 'icon-bannianwangong',
          color: '#D8F6D8',
          url: '/packageWorkorder/pages/orderList?tab=DCL'
        },
        {
          name: '难度费用',
          num: 0,
          icon: 'icon-bannianwangong',
          color: '#D8F6D8',
          url: '/packageWorkorder/pages/myNanDu'
        }
      ],

      scheduleList: [],

      orderList: [
        { title: '待付款', icon: 'icon-daifukuan', key: 'NOPAY', num: 0 },
        { title: '进行中', icon: 'icon-daifuwu', key: 'YFH', num: 0 },
        { title: '待评价', icon: 'icon-daipingjia1', key: 'OVER', num: 0 },
        { title: '售后/退款', icon: 'icon-shouhou', key: 'REFUND', num: 0 }
      ],

      workorderList: [
        { title: '待预约', icon: 'icon-daifukuan', key: 1, num: 0 },
        { title: '服务中', icon: 'icon-daifuwu', key: 2, num: 0 },
        { title: '待评价', icon: 'icon-daipingjia1', key: 3, num: 0 },
        { title: '已完成', icon: 'icon-shouhou', key: 4, num: 0 }
      ]
    }
  },

  computed: {
    isWorkerUser() {
      // 是否师傅
      return this.userInfo && this.userInfo.type === 'WORKER'
    }
  },

  onLoad() {
    this.crossPage.$on('refreshUserWorkorderList', data => {
      if (this.isWorkerUser) {
        this.getOrderStats()
        this.getWorkerApplyCount()
        this.getPartsStats()
        this.getSchedule()
      }
    })
  },

  async onShow() {
    selectionChange()

    this.userInfo = await this.$getUserInfo()

    if (this.isWorkerUser) {
      this.getOrderStats()
      this.getWorkerApplyCount()
      this.getPartsStats()
      this.getSchedule()
    }
  },

  onUnload() {
    this.crossPage.$off('refreshUserWorkorderList')
  },

  methods: {
    // 获取工单统计
    async getOrderStats() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/pg/order/base/status/count')
          .then(res => {
            this.statsList[0].num = res.data.djd
            this.statsList[1].num = res.data.fwz
            this.statsList[2].num = res.data.ycd
            this.statsList[3].num = res.data.dqd
            this.statsList[4].num = res.data.jrwg
            this.statsList[5].num = res.data.jbnwg
            this.statsList[8].num = res.data.wwg
          })
          .finally(res => {
            resolve(1)
          })
      })
    },

    async getWorkerApplyCount() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/workerApply/count')
          .then(res => {
            this.statsList[9].num = res.data.dsp || 0
          })
          .finally(res => {
            resolve(1)
          })
      })
    },

    // 获取配件申请统计
    async getPartsStats() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/material/parts/apply/count')
          .then(res => {
            this.statsList[6].num = res.data.partsIngCount
            this.statsList[7].num = res.data.partsEndCount
          })
          .finally(res => {
            resolve(1)
          })
      })
    },

    // 获取日程
    async getSchedule() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/pg/order/base/my/schedule')
          .then(res => {
            let list = []
            for (var i = 0; i < res.data.dayList.length; i++) {
              list.push({
                week: res.data.weekList[i],
                day: res.data.dayList[i],
                djd: res.data.djdList[i],
                fwz: res.data.fwzList[i]
              })
            }
            this.scheduleList = list
          })
          .finally(res => {
            resolve(1)
          })
      })
    },

    // 下拉刷新
    async refresherrefresh() {
      this.refresherTriggered = true
      if (this?.isWorkerUser && this?.type != 2) {
        await this.getOrderStats()
        await this.getWorkerApplyCount()
        await this.getPartsStats()
        await this.getSchedule()
      }
      this.$nextTick(() => {
        setTimeout(() => {
          this.refresherTriggered = false
        }, 200)
      })
    },

    clickItem(item) {
      if (!item.url) return false
      this.navToPage(item.url)
    },

    searchData() {
      this.navToPage(`/packageWorkorder/pages/search?keyword=${this.keyword}`)
    },

    navToPage(url) {
      this.$navToPage({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  background: #ffffff;
  padding: 20rpx;
  ::v-deep .u-search {
    height: 60rpx;
    input {
      background: #f7f8ff !important;
    }
    .u-search__content {
      background: #f7f8ff !important;
      height: 60rpx;
    }
  }
}

.all-container {
  padding: 1rpx 20rpx 20rpx;
}

.data-container {
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .item {
      background: #ffffff;
      width: calc((100% - 40rpx) / 3);
      margin: 20rpx 20rpx 0 0;
      height: 220rpx;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 20rpx 16rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .num {
        font-size: 52rpx;
        font-weight: 500;
      }

      .bottom {
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 36rpx;
        }

        .text {
          color: $sec-font;
          margin-left: 6rpx;
          font-size: 28rpx;
        }
      }
    }
  }
}

.card {
  @include zj-card;
  padding: 30rpx;
  box-shadow: none;
  margin-top: 20rpx;
}

.common-title {
  margin-top: 30rpx;
  font-size: 34rpx;
  font-weight: bold;
}

.home-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    font-size: 34rpx;
    color: $main-font;
    font-weight: bold;
  }

  .right {
    display: flex;
    align-items: center;

    .text {
      font-size: 28rpx;
      color: $sec-font;
    }

    .iconfont {
      font-size: 24rpx;
      color: $sec-font;
      margin-left: 8rpx;
    }
  }
}

.schedule-container {
  .schedule-card {
    border-radius: 12rpx;
    display: flex;
    overflow: hidden;
    background: #ffffff;
    margin-top: 20rpx;
    .label {
      background: $theme-color;
      width: 44rpx;

      view {
        height: 90rpx;
        font-size: 24rpx;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10rpx;
        box-sizing: border-box;
      }
    }

    .days {
      flex: 1;
      display: flex;
      overflow-x: scroll;

      .item {
        flex-shrink: 0;
        width: 90rpx;

        view {
          width: 100%;
          text-align: center;
          height: 90rpx;
          line-height: 90rpx;
          box-sizing: border-box;

          &.today {
            color: $theme-color;
            font-size: 28rpx !important;
          }

          &.active {
            color: #19be6b !important;
          }

          &:nth-child(1) {
            color: $sec-font;
          }

          &:nth-child(2) {
            font-size: 32rpx;
            font-weight: 500;
          }

          &:nth-child(3) {
            font-size: 32rpx;
            font-weight: 500;
            color: $assist-color;
            border-right: 1rpx solid #f4f5f7;
            border-top: 1rpx solid #f4f5f7;
          }

          &:nth-child(4) {
            font-size: 32rpx;
            font-weight: 500;
            color: $theme-color;
            border-right: 1rpx solid #f4f5f7;
            border-top: 1rpx solid #f4f5f7;
          }

          &:nth-child(5) {
            color: $sec-font;
            border-right: 1rpx solid #f4f5f7;
            border-top: 1rpx solid #f4f5f7;
          }
        }
      }
    }
  }
}

.order-container {
  .list {
    display: flex;
    margin-top: 30rpx;

    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon {
        position: relative;

        .iconfont {
          font-size: 52rpx;
        }
      }

      .title {
        font-size: 26rpx;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
