<template>
  <view class="container">
    <!--<VNavigationBar style="position: relative;z-index: 99;" leftTitle="true" backgroundColor="rgba(0,0,0,0)" title-color="#fff" title=" "></VNavigationBar>-->
    <view class="bodyTopBg"></view>
    <view class="body">
      <view class="userInfoBox" >
        <image @click="showUserDetail" style="width: 104rpx;height: 104rpx;border-radius: 50%;" v-if="''==userInfo.avatar || null == userInfo.avatar" :src="defaultAvatar" mode="scaleToFill" @error="avatarErr"></image>
        <image @click="showUserDetail" style="width: 104rpx;height: 104rpx;border-radius: 50%;" v-else :src="imgUrlPrex+userInfo.avatar" mode="scaleToFill" @error="avatarErr"></image>
        <view class="userInfo" @click="showUserDetail">
          <text class="userName">{{ userInfo.nickname }}</text>
          <text class="userType">{{ userInfo.roleNames }}</text>
        </view>
        <view class="msg-box" @click="gotoMsg">
          <image mode="aspectFita" src="@/pages-home/static/msg.png" style="width: 48rpx;height: 48rpx"></image>
          <view class="msg-num" v-if="noReadNum>0">{{noReadNum}}</view>
        </view>
        <image @click="showUserDetail" style="width: 48rpx;height: 48rpx" src="/static/icons/more.png" mode="aspectFita"></image>
      </view>
<!--      服务顾问才能开单-->
      <view class="body-top-grid"  v-if="userInfo.roleCodes.includes('service_advisor')">
        <view v-for="(item, index) in menuList" :key="index" class="body-top-item" @click="gotoPage(item)">
          <view>
            <view class="title">{{ item.title }}</view>
            <view class="desc">{{ item.desc }}</view>
            <image class="btn" mode="aspectFit" src="@/static/icons/homeMenuIcon/menuBtn.png"></image>
          </view>
          <image :src="item.icon" class="icon" mode="aspectFit"></image>
        </view>
      </view>
      <!-- 维修工角色-->
      <view class="body-card" v-if="userInfo.roleCodes.includes('repair_staff')">
        <view class="title">审批单处理<text class="formValue" @click="workerTodo">全部</text><u-icon color="#999" name="arrow-right" size="12"></u-icon></view>
        <view class="title-box">
          <view class="title-box-item">
            <view class="titleDesc">已提交</view>
            <view class="titleNumber">{{ workerNumObj.submitNum }}</view>
            <image class="titleImg"  src="@/pages-home/static/up.png" ></image>
          </view>
          <view class="title-box-item">
            <view class="titleDesc">未通过</view>
            <view class="titleNumber">{{ workerNumObj.noAllowNum }}</view>
            <image class="titleImg"  src="@/pages-home/static/no.png" ></image>
          </view>
<!--          <view class="title-box-item">-->
<!--            <view class="titleDesc">已通过</view>-->
<!--            <view class="titleNumber">{{ workerNumObj.allowNum }}</view>-->
<!--            <image class="titleImg"  src="@/pages-home/static/alow.png" ></image>-->
<!--          </view>-->
          <view class="title-box-item">
            <view class="titleDesc">待确认领料</view>
            <view class="titleNumber">{{ workerNumObj.waitingReceiveNum }}</view>
            <image class="titleImg"  src="@/pages-home/static/waitingReceiveNum.png" ></image>
          </view>
          <view class="title-box-item">
            <view class="titleDesc">待确认退料</view>
            <view class="titleNumber">{{ workerNumObj.waitingBackNum }}</view>
            <image class="titleImg"  src="@/pages-home/static/waitingBackNum.png" ></image>
          </view>
        </view>
      </view>
      <!-- 通知公告 -->
      <view class="notice-dom" v-if="noticeNum>0" @click="gotoNotice">
        <view class="notice-box">
          <image class="left-img"  src="@/pages-home/static/notice.png" ></image>
          <view class="center-text">你有{{noticeNum}}条来自平台的通知公告</view>
          <u-icon style="width: 20rpx" color="#999" name="arrow-right" size="12"></u-icon>
        </view>
      </view>
      <!-- 服务顾问角色 -->
      <view class="orderCount" v-if="userInfo.roleCodes.includes('service_advisor')" @click="serviceWork">
        <view class="orderCountItem">
          <text class="label">待审批配件申请单</text>
          <text class="value">{{serviceNum}}</text>
        </view>
      </view>
      <!-- TODO 总检角色 -->
      <view class="orderCount" v-if="userInfo.roleCodes.includes('general_inspection') || userInfo.roleCodes.includes('weixiu')">
        <view class="orderCountItem">
          <text class="label">维修中</text>
          <text class="value">{{ bossNum.workingNum }}</text>
        </view>
        <view class="line"></view>
        <view class="orderCountItem">
          <text class="label">已完成</text>
          <text class="value">{{ bossNum.doneNum }}</text>
        </view>
      </view>
      <view class="todoListBox">
        <view class="title">
          待办工单
          <text class="titleDesc">当前共
            <text class="titleCount">{{total}}</text>
            项工单需要处理
          </text>
        </view>
        <view class="todoList">
          <scroll-view scroll-y="true" style="height: 100%" class="itemContent" @scrolltolower="onReachBottomCus"
                       refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
            <order-card v-for="(item, index) in orderList" :key="index" :order="item" @childEvent="onRefresherrefresh" @startWork="startWork"></order-card>
            <view style="text-align: center" v-if="orderList.length==0">
              <image class=""  src="@/static/images/nothing.png" ></image>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <tabBarVue msg="1"></tabBarVue>
  </view>
</template>

<script>
import tabBarVue from '@/components/tabBar/tabBar.vue'
import VNavigationBar from '@/components/VNavigationBar.vue'
import OrderCard from "@/components/orderCard.vue";
import config from '@/config'
import request from '@/utils/request';
import {formatTimestamp,getOrderStatusText,builderOrder,saveTicketsRecords} from "@/utils/utils";
import {
  getToken,
  getUserInfo,
  getStrData,
  getTenantId
} from '@/utils/auth'

export default {
  components: {
    OrderCard,
    tabBarVue,
    VNavigationBar
  },
  data() {
    return {
      imgUrlPrex:config.baseImageUrl,
      userInfo: {
        avatar: undefined,
        nickname: ''
      },
      menuList: [
        {
          title: '新建工单',
          desc: '直接添加客户订单',
          icon: require('@/static/icons/homeMenuIcon/menu1.png'),
          path: '/pages-order/addOrder/addOrder'
        },
        {
          title: '预约开单',
          desc: '查询预约记录',
          icon: require('@/static/icons/homeMenuIcon/menu1.png'),
          path: '/pages-order/appointOrder/appointOrder'
        }
      ],
      bannerIndex: 0,
      shopList: [],
      bannerList: [],
      richTextHtml: null,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      //下来刷新状态
      isTriggered:true,
      orderList: [
      ],
      //维修工处理配件申请单数量
      workerNumObj:{
        submitNum:0,
        allowNum:0,
        noAllowNum:0,
        waitingReceiveNum:0,
        waitingBackNum:0,
      },
      //服务顾问待处理数量
      serviceNum:0,
      //总检查看维修中、已完成的工单数量
      bossNum:{
        workingNum:0,
        doneNum:0
      },
      defaultAvatar: require('@/static/icons/avatar.png'),
      //未读消息数量
      noReadNum:0,
      //通知公告数量
      noticeNum:0,
    }
  },
  onLoad(){
    if(!getToken()){
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }else{
      if(!this.$msgSocket){
        this.$startMsgSocket(getTenantId(),getStrData("userId"))
      }
    }
  },
  onShow() {
    if(!getToken()){
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }else{
      //直接取缓存中的用户信息
      this.userInfo = getUserInfo()
      this.getNoReadNum()
      this.getNoticeList()
      this.onRefresherrefresh()
      if(this.userInfo.roleCodes.includes('repair_staff')){
        //维修工
        this.getWorkerTodo()
      }else if(this.userInfo.roleCodes.includes('service_advisor')){
        //服务顾问
          this.getServiceTodo()
      }else if(this.userInfo.roleCodes.includes('weixiu') ||this.userInfo.roleCodes.includes('general_inspection')){
        //总检或管理员
        this.getBossTodo()
      }
    }
  },
  methods: {
    gotoMsg(){
      //去消息中心
      uni.navigateTo({
        url: '/pages-home/msg/message'
      })
    },
    /**
     * 上滑加载数据
     */
    onReachBottomCus() {
      //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
      if (this.pageNo * this.pageSize >= this.total) {
        uni.$u.toast('没有更多数据了')
        return
      }
      //页码+1,调用获取数据的方法获取第二页数据
      this.pageNo++
      //此处调用自己获取数据列表的方法
      this.getOrderList()
    },
    /**
     * 下拉刷新数据
     */
    onRefresherrefresh(){
      this.isTriggered = true
      this.pageNo = 1
      this.total = 0
      this.orderList = []
      this.getOrderList()
    },
    /**
     * 开始施工
     */
    startWork(id){
      let paramsObj = {ticketId:id}
      //先查当前用户在本工单下有几个维修项目
      request({
        url: '/admin-api/repair/titem/listProject',
        method: 'get',
        params:paramsObj
      }).then((res) => {
        console.log(res)
        if (res.code == 200 && res.data.length>0) {
          if(res.data.length==1){
            //只有1个，直接开始施工
            this.startWorkRequest(id,"02",res.data[0].id,"02","kssg","开始施工")
          }else{
            uni.showActionSheet({
              itemList: res.data.map(m => m.itemName),
              success: ({
                          tapIndex
                        }) => {
                this.startWorkRequest(id,"02",res.data[tapIndex].id,"02","kssg","开始施工")
              }
            })
          }
        }else{
          uni.showToast({
            title: '操作失败，请联系管理员',
            icon: 'none'
          })
        }
      })
    },
    /**
     * 开始施工请求后台
     */
    async startWorkRequest(id,ticketsWorkStatus,itemId,itemStatus,recordType,remark){
      try {
        const result = await saveTicketsRecords(id,ticketsWorkStatus,itemId,itemStatus,recordType,remark,null);
        console.error("result",result);
        this.onRefresherrefresh()
      } catch (error) {
        console.error(error);
      }
    },
    /**
     * 维修工的角度查提交的配件申请单 待处理数量
     */
    getWorkerTodo(){
      request({
        url: '/admin-api/repair/tw/getWorkerTodo',
        method: 'get',
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.workerNumObj = res.data
        }
      })
    },
    /**
     * 从总检的角度差维修中、已完成的工单数量
     */
    getBossTodo(){
      request({
        url: '/admin-api/repair/tickets/getBossNum',
        method: 'get',
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.bossNum = res.data
        }
      })
    },
    /**
     * 服务顾问的角度查待处理的配件申请单数量
     */
    getServiceTodo(){
      let params = {
        pageNo:this.pageNo,
        pageSize:this.pageSize,
        type:"01",
        status:"01"
      }
      request({
        url: '/admin-api/repair/tw/page',
        method: 'get',
        params:params
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.serviceNum = res.data.total
        }
      })
    },
    /**
     * 查本人待处理工单
     */
    getOrderList(){
      let paramsObj = {pageNo: this.pageNo, pageSize: this.pageSize, isFinish: "0"}
      request({
        url: '/admin-api/repair/tickets/pageType',
        method: 'get',
        params:paramsObj
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          let thisPageRecords = []
          if(res.data && res.data.hasOwnProperty("records")){
            for (let i = 0; i < res.data.records.length; i++) {
              let order = res.data.records[i]
              let viewOrder = builderOrder(order)
              if(order.booking){
                viewOrder['appointDate'] = formatTimestamp(order.createTime)
              }
              let projectList = []
              if(order.itemList){
                for (let j = 0; j < order.itemList.length; j++) {
                  let itemObj = order.itemList[j]
                  if("01"==itemObj.itemType){
                    projectList.push({
                      id:itemObj.id,
                      name:itemObj.itemName
                    })
                  }
                }
              }
              viewOrder['projectList'] = projectList
              thisPageRecords.push(viewOrder)
            }
          }
          //判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
          if (this.pageNo != 1) {
            this.orderList = this.orderList.concat(thisPageRecords)
          } else {
            this.orderList = thisPageRecords
          }
          //将获取的总条数赋值
          this.total = res.data.total
          this.isTriggered = false
        }
      })
    },
    gotoPage(menu) {
      uni.navigateTo({
        url: menu.path
      })
    },
    avatarErr(err) {
      console.log('err', err)
      this.userInfo.avatar = this.defaultAvatar
    },
    showUserDetail() {
      uni.navigateTo({
        url: '/pages/my/myInfo'
      })
    },
    workerTodo() {
      uni.navigateTo({
        url: '/pages-repair/applyList/applyList'
      })
    },
    /**
     * 服务顾问待办
     */
    serviceWork(){
      uni.navigateTo({
        url: '/pages-home/service/applyList'
      })
    },
    /**
     * 获取未读消息数量
     * @returns {Promise<void>}
     */
    async getNoReadNum(){
      await request({
        url: "/admin-api/system/notify-message/get-unread-count",
        method: "GET"
      }).then((res) => {
        if(res.code==200){
          this.noReadNum = res.data>99?99:res.data
        }
      })
    },
    /**
     * 跳转通知公告列表页
     */
    gotoNotice(){
      uni.navigateTo({
        url: '/pages-home/notice/notice'
      })
    },
    /**
     * 查通知公告--查数量
     */
    async getNoticeList(){
      const res = await request({
        url: "/admin-api/base/notice/page",
        method: "get",
        params: {
          pageNo:1,
          pageSize:1,
          type:1,
          parentServer: "weixiu",
          server: "app"
        },
        tenantIdFlag:false
      })
      if(res.code==200){
        this.noticeNum = res.data.total
      }
    },
  }
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}

.container {
  height: 100%;
  //background: linear-gradient(180deg, #0174F6 0%, rgba(1, 116, 246, 0) 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 60rpx;
  background-color: #F3F5F7;


  .bodyTopBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500rpx;
    background-image: url("@/static/bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .body {
    position: relative;
    z-index: 10;
    flex: 1;
    height: 0;
    overflow: auto;
    padding-bottom: 30rpx;
  }

  .userInfoBox {
    margin: 0 32rpx 40rpx;

    display: flex;
    column-gap: 20rpx;
    align-items: center;

    .userInfo {
      flex: 1;
      width: 0;
      .userName {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        display: block;
        margin-bottom: 16rpx;
      }

      .userType {
        font-size: 24rpx;
        color: #0174F6;
        display: inline-block;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        border: 1rpx solid #0174F6;
        padding: 8rpx 16rpx;
      }
    }

    .msg-box{
      position: relative;
      margin-right: 40rpx;
      .msg-num{
        position: absolute;
        right: -15rpx;
        color: white;
        background: #d74a43;
        width: 35rpx;
        height: 35rpx;
        line-height: 35rpx;
        text-align: center;
        font-weight: 800;
        font-size: 11px;
        border-radius: 50%;
        top: -15rpx;
      }
    }
  }
  .body-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30rpx;
    margin: 0 32rpx 40rpx;

    .body-top-item {
      position: relative;
      display: flex;
      align-items: center;
      padding: 30rpx 0 30rpx 20rpx;
      background: linear-gradient(360deg, #FFFFFF 0%, #D7EAFF 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(202, 223, 247, 1)) 2 2;

      & > view:first-child {
        flex: 1;
        width: 0;
        display: flex;
        flex-direction: column;
        row-gap: 30rpx;
      }

      .title {
        font-weight: bold;
        font-size: 32rpx;
        color: #113A68;
      }

      .desc {
        font-weight: 500;
        font-size: 24rpx;
        color: #858BA0;
      }

      .btn {
        width: 40rpx;
        height: 30rpx;
      }

      .icon {
        width: 136rpx;
        height: 136rpx;
      }
    }
  }

  .body-card {
    border-radius: 6px 6px 6px 6px;
    margin: 18px;
    padding: 15px;
    background: #FFFFFF;
    .title {
      margin-bottom: 30rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #113A68;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      column-gap: 20rpx;
    }
    .formValue {
      flex: 1;
      width: 0;
      text-align: right;
      font-weight: 500;
      font-size: 13px;
      color: #858BA0;
    }
    .title-box{
      display: flex;
      justify-content: space-around;
      .title-box-item{
        width: 33%;
        text-align: center;
        .titleDesc {
          font-weight: 500;
          font-size: 24rpx;
          color: #858BA0;
        }
        .titleNumber{
          font-weight: 500;
          font-size: 40rpx;
          color: #333333;
          margin: 4px;
        }
        .titleImg{
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
  .notice-dom {
    margin: 40rpx 32rpx;
    background: #FFFFFF;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;

    .notice-box{
      display: flex;
      width: 100%;
      .left-img{
        width: 48rpx;
        height: 48rpx;
      }
      .center-text{
        width: calc(100% - 70rpx);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding:0 20rpx;
      }
    }
  }
  .orderCount {
    margin: 40rpx 32rpx;
    background: #FFFFFF;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 40rpx;
    display: flex;
    align-items: center;
    .orderCountItem {
      flex: 1;
      width: 0;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .label {
        color: #858BA0;
      }
      .value {
        font-weight: bold;
        font-size: 40rpx;
        color: #333333;
      }
    }
    .line {
      height: 84rpx;
      width: 1rpx;
      background-color: #DDDDDD;
    }
  }

  .todoListBox {
    margin: 40rpx 32rpx;
    height: calc(100vh - 500rpx);

    .title {
      margin-bottom: 30rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #113A68;

      .titleDesc {
        margin-left: 20rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #858BA0;
      }

      .titleCount {
        color: #0174F6;
      }
    }

    .todoList {
      display: flex;
      flex-direction: column;
      row-gap: 20rpx;
      height: 98%;
    }
  }

  .body-top-banner {
    text-align: center;
  }

  .banner {
    margin: 24rpx 0 0;
    width: 686rpx;
    height: 100%;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    background-color: #0174F6;
  }

  .menus {
    margin: 30rpx auto 0;
    box-sizing: border-box;
    width: 686rpx;
    padding: 40rpx 38rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 22rpx;
    font-size: 24rpx;

    .menu-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .info {
    width: 686rpx;
    margin: 38rpx auto 0;
    display: flex;
    align-items: center;
    column-gap: 20rpx;

    .info-icon {
      width: 80rpx;
      height: 80rpx;
    }

    .infoList {
      flex: 1;
      width: 0;

      .infoItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 10rpx;
      }

      .infoIndex {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: #333;
      }

      .infoText {
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 24rpx;
      }
    }

    .more-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .repairShop {
    width: 686rpx;
    margin: 38rpx auto 0;

    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
    }

    .shopList {
      .shopItem {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #DDDDDD;
        display: flex;
        align-items: center;
        column-gap: 20rpx;
      }

      .shopImg {
        width: 160rpx;
        height: 100rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        background-color: #999;
      }

      .shopInfo {
        flex: 1;
        width: 0;
      }

      .shopTitle {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 20rpx;
      }

      .shopDetail {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666666;
        column-gap: 10rpx;
      }

      .shopAddress {
        flex: 1;
        width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .line {
        width: 2rpx;
        height: 24rpx;
        background-color: #858BA0;
      }

      .shopDistance {
        flex-shrink: 0;
      }
    }
  }
}
</style>
