<template>
  <div class="workOrderProcessing publicContainer">
    <div class="orderTop">
      <div class="subtitle">
        工单统计 <el-icon @click="refreshOrder" class="btn" :class="is_refresh ? 'goRefresh' : ''"><Refresh /></el-icon>
      </div>
      <div
        class="orderTitle"
        v-for="(item, index) in orderList"
        :key="item.code"
        :class="{ active: item.value == showOrderCode }"
        @click="changeOrder(item)"
      >
        <img :src="item.icon" alt="" class="titleIcon" />
        <div class="titleCon">
          <div class="orderName">{{ item.title }}</div>
          <div class="orderNum" v-if="index != 0">{{ '( ' + (item.num || 0) + ' )' }}</div>
        </div>
      </div>
    </div>
    <div class="orderBottom">
      <registerOrder v-if="showOrderCode == 'launch'"></registerOrder>
      <checkOrder v-if="showOrderCode !== 'launch'" :status="showOrderCode"></checkOrder>
    </div>
  </div>
</template>

<script setup name="workOrderProcessing">
import checkOrder from './components/checkOrder.vue';
import registerOrder from './components/registerOrder.vue';
import bus from '@/bus';
import { groupCount } from '@/api/order';

import gddj_icon from '@/assets/images/order/gddj_icon.png';
import sl_icon from '@/assets/images/order/sl_icon.png';
import tj_icon from '@/assets/images/order/tj_icon.png';
import fp_icon from '@/assets/images/order/fp_icon.png';
import xy_icon from '@/assets/images/order/xy_icon.png';
import sb_icon from '@/assets/images/order/sb_icon.png';
import hs_icon from '@/assets/images/order/hs_icon.png';
import ja_icon from '@/assets/images/order/ja_icon.png';
// registerOrder

const timeId = null;
const showOrderCode = ref('reassign');
const is_refresh = ref(false);
const orderList = ref([
  {
    code: 'register',
    title: '登记工单',
    icon: gddj_icon,
    value: 'launch',
    num: null,
  },
]);
const orderTitleList = ref([
  {
    code: 'register',
    title: '登记工单',
    icon: gddj_icon,
    value: 'launch',
    num: null,
  },
  {
    code: 'reassign',
    title: '二次分配',
    icon: sl_icon,
    value: 'reassign',
    num: null,
  },
  {
    code: 'submit',
    title: '工单提交',
    icon: tj_icon,
    value: 'submit',
    num: null,
  },
  {
    code: 'assign',
    title: '工单分派',
    icon: fp_icon,
    value: 'assign',
    num: null,
  },
  {
    code: 'response',
    title: '工单响应',
    icon: xy_icon,
    value: 'response',
    num: null,
  },
  {
    code: 'report',
    title: '工单上报',
    icon: sb_icon,
    value: 'report',
    num: null,
  },
  {
    code: 'check',
    title: '工单核实',
    icon: hs_icon,
    value: 'check',
    num: null,
  },
  // {
  //   code: 'complete',
  //   title: '工单结案',
  //   icon: ja_icon,
  //   value: 'complete',
  //   num: null,
  // },
]);

const changeOrder = item => {
  // debugger;
  showOrderCode.value = item.value;
  //   console.log('changeOrder');
};

const getOrderList = () => {
  groupCount({ queryScope: 'todo' }).then(res => {
    // console.log(res);
    orderList.value = orderTitleList.value
      .filter(item => {
        return res.data.hasOwnProperty(item.code);
      })
      .map(item => {
        return {
          ...item,
          num: res.data[item.code] || 0,
        };
      });
  });
};

const refreshOrder = () => {
  if (is_refresh.value) return;
  is_refresh.value = true;
  getOrderList();
  timeId = setTimeout(() => {
    is_refresh.value = false;
  }, 1000); // 动画持续时间与CSS中的相同
};

onMounted(() => {
  getOrderList();
  bus.on('orderTitleList', () => {
    getOrderList();
  });
});
onBeforeUnmount(() => {
  bus.off('orderTitleList');
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<style lang="scss" scoped>
.workOrderProcessing {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f4f4f4;
  //   border: 1px solid red;
  .orderTop {
    width: 100%;
    height: 196px;
    position: relative;
    display: flex;
    // justify-content: space-evenly;
    align-items: flex-end;
    background: url('@/assets/images/order/gdbg_img.png') no-repeat;
    background-size: 100% 100%;
    // border: 1px solid red;
    .subtitle {
      position: absolute;
      left: 20px;
      top: 20px;
      font-weight: bold;
      font-size: 17px;
      color: #333333;
      display: flex;
      align-items: center;
      .btn {
        margin-left: 10px;
        cursor: pointer;
      }
      .goRefresh {
        animation: spin 1s linear forwards;
      }
    }
    .orderTitle {
      // margin-right: 30px;
      // background-color: red;
      // z-index: 999999;
      position: relative;
      margin-bottom: 30px;
      margin-left: 20px;
      display: flex;
      // flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      width: 186px;
      height: 100px;
      background: #ffffff;
      // background-color: red;
      border-radius: 5px;
      border: 1px solid #dededf;
      cursor: pointer;
      font-weight: bold;
      font-size: 18px;
      color: #333333;
      &.active {
        background: linear-gradient(90deg, #95bdff 0%, #f1f6ff 100%);
        border-radius: 5px;
        border: 2px solid #4285f4;
      }
      .titleIcon {
        width: 66px;
        height: 66px;
        margin-right: 14px;
      }
      // .orderName {
      //   // font-size: 24px;
      // }
      // .orderNum {
      //   // font-size: 20px;
      // }
    }
  }
  .orderBottom {
    // padding-top: 20px;
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 216px);
    background: #ffffff;
    border-radius: 6px;
    padding: 10px 20px;
    // border: 1px solid red;
    box-sizing: border-box;
    // .chooseBox {
    //   // padding: 20px 0;
    // }
    .chooseType {
      margin-left: 20px;
    }
    .title {
      font-size: 16px;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>