<template>
  <div class="eleContari1">
    <modulen :loading="loading" :error="error">
      <template #title>机电设备完好率</template>
      <template #end>
        <dateSwitcher
          :selectTime="3"
          :showAll="false"
          @change="getChartDataByBtnOne"
        ></dateSwitcher>
      </template>
      <template v-if="!loading">
        <div class="quota-wrapper w-full">
          <div
            class="quota-box"
            v-for="(item, index) in intactRate.dataList"
            :key="index"
          >
            <Gauge class="gauge" :value="item.rate" />
            <div class="quato-bottom">
              <div class="quota">
                <span>总数: {{ item.num }}</span>
              </div>
              <Light>
                <template #title>
                  <span
                    class="text-light"
                    style="width: 90px; text-align: center;"
                  >
                    {{ item.name }}
                  </span>
                </template>
              </Light>
            </div>
          </div>
        </div>
      </template>
    </modulen>
    <div class="content h-1/3">
      <div class="ranking h-full">
        <modulen :loading="loading" :error="error">
          <template #title>机电设备故障排行</template>
          <template #end>
            <dateSwitcher
              :selectTime="3"
              @change="getChartDataByBtnTwo"
            ></dateSwitcher>
            <div class="type-select">
              <el-select
                v-model="eleData"
                @change="getRankData"
                @clear="getRankData"
                clearable
                :popper-append-to-body="false"
                class="road-select"
                size="mini"
                placeholder="设备系统"
              >
                <el-option
                  v-for="(item, index) in eleOptions.dataList"
                  :key="index"
                  :label="item.text"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </template>
          <template v-if="!loading">
            <div
              v-if="rankList.dataList.length !== 0"
              style="width: 100%; height: 280px;"
            >
              <div
                class="progress"
                v-for="(item, index) in rankList.dataList"
                :key="index"
              >
                <span
                  class="index"
                  :class="{ 'span-bg': [0, 1, 2].includes(index) }"
                >
                  {{ index + 1 }}
                </span>
                <vueSeamlessScroll
                  class="label"
                  v-if="item.name.length > 12"
                  :limitMoveNum="1"
                  :data="[item.name, item.name]"
                  :classOption="{
                    direction: 2,
                    limitMoveNum: 0,
                    waitTime: 200,
                    step: 0.5,
                  }"
                >
                  <div class="scrollList">
                    <span class="scrollItem">{{ item.name }}</span>
                    <!-- <span class="scrollItem" v-for=" i in 5" :key="i"> {{ item.name }}</span>    -->
                  </div>
                </vueSeamlessScroll>
                <span v-else class="label">{{ item.name }}</span>
                <span class="number">{{ item.amount }}</span>
                <el-progress
                  :text-inside="true"
                  :percentage="parseInt(item.percentage)"
                  color="#f6d59d"
                  style="width: 55%;"
                />
              </div>
            </div>
            <div v-else>暂无数据...</div>
          </template>
        </modulen>
      </div>
      <div class="quantum">
        <div class="triangle">
          <img
            class="s1"
            src="@/views/electromechanicalMange/assets/fault1.png"
          />
          <img
            class="s2"
            src="@/views/electromechanicalMange/assets/fault3.png"
          />
          <!-- <div class="t1">
                        <span class="d1">
                            {{ rankParams.faultNum + rankParams.okNum + rankParams.okNum || 0 }}
                        </span>
                        <div class="d2">故障上报</div>
                    </div> -->
          <div class="sx s3">
            <img
              src="@/views/electromechanicalMange/assets/fault5.png"
              alt=""
            />
            <div class="st1">
              <span class="sd1">{{ rankParams.faultNum || 0 }}</span>
              <div class="sd2">故障数量</div>
            </div>
          </div>
          <div class="sx s4">
            <img
              src="@/views/electromechanicalMange/assets/fault4.png"
              alt=""
            />
            <div class="st1">
              <div class="sd1">{{ rankParams.okNum || 0 }}</div>
              <div class="sd2">已完成</div>
            </div>
          </div>
          <div class="sx s5">
            <img
              src="@/views/electromechanicalMange/assets/fault2.png"
              alt=""
            />
            <div class="st1">
              <div class="sd1">{{ rankParams.noNum || 0 }}</div>
              <div class="sd2">未完成</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <modulen :loading="loading" :error="error">
      <template #title>机电工单动态跟踪</template>
      <template v-if="!loading">
        <div style="width: 100%;">
          <vueSeamlessScroll>
            <div style="flex: 1; width: 100%;">
              <!-- 路段 -->
              <div class="basetable">
                <div class="bt-head">
                  <div style="width: 120px;">工单类型</div>
                  <div style="width: 120px;">状态</div>
                  <div style="flex: 1;">内容</div>
                  <div style="width: 120px;">人员</div>
                  <div style="width: 120px;">时间</div>
                </div>
                <div class="list-out" v-if="tableData.titleList.length">
                  <vue-seamless-scroll :data="tableData.titleList">
                    <div
                      class="bt-item"
                      v-for="item in tableData.titleList"
                      :key="item"
                    >
                      <div style="width: 120px;">{{ item.orderType }}</div>
                      <div style="width: 120px;">{{ item.status }}</div>
                      <div style="flex: 1;">{{ item.content }}</div>
                      <div style="width: 120px;">{{ item.userName }}</div>
                      <div style="width: 120px;">{{ item.gmtCreate }}</div>
                    </div>
                  </vue-seamless-scroll>
                </div>
                <div v-else>
                  暂无数据...
                </div>
              </div>
            </div>
          </vueSeamlessScroll>
        </div>
      </template>

      <!-- <Flow :flowList="flowList" /> -->
    </modulen>
  </div>
</template>
<script lang="ts" setup>
import Light from './light.vue'
import Gauge from '../Echarts/gauge.vue'

import { computed, watch, nextTick, reactive, ref } from 'vue'
import {
  equipmentRate,
  typeSelect,
  page,
  faultOrder,
} from '@/api/ele-control-cabin'
import vueSeamlessScroll from '@/components/vueSeamlessScroll/index.vue'

import dateSwitcher from './switcher.vue'
import scrollBoard from './scrollBoard.vue'
import { useStore } from 'vuex'
import { key } from '@/store'
import { orderBy } from 'lodash'
const store = useStore(key)
const eleData = ref('')
const eleOptions = reactive({
  dataList: [],
})
const rankParams = reactive({})
const rankList = reactive({
  dataList: [],
})
const list = reactive({
  dataList: [
    {
      amount: 0,
      lable: '故障超期数量',
      unit: '个',
    },
    {
      amount: 0,
      lable: '故障排除时效满足率',
      unit: '%',
    },
    {
      amount: 0,
      lable: '故障误报率',
      unit: '%',
    },
    {
      amount: 0,
      lable: '故障平均响应效率',
      unit: '小时',
    },
    {
      amount: 0,
      lable: '故障平均排除效率',
      unit: '天',
    },
    {
      amount: 0,
      lable: '故障处置率',
      unit: '%',
    },
  ],
})
const intactRate = reactive({
  dataList: [
    {
      rate: 0,
      num: 0,
      name: '收费系统',
    },
    {
      rate: 0,
      num: 0,
      name: '监控系统',
    },
    {
      rate: 0,
      num: 0,
      name: '通信系统',
    },
    {
      rate: 0,
      num: 0,
      name: '供配电系统',
    },
    {
      rate: 0,
      num: 0,
      name: '隧道机电系统',
    },
  ],
})
const tableData = reactive({
  titleList: [],
})

const refresh = computed(() => store.state.ele?.refresh)
const year = computed(() => store.state.ele?.currentTime)
const orgCode = computed(() => store.state.ele?.orgCode)
const orgType = computed(() => store.state.ele?.orgType)
const pOrg = computed(() => store.state.ele?.pOrg)

watch([refresh], () => {
  eleData.value = ''
  initData(year.value)
})
const initData = (year: any) => {
  getEquipmentRate(year)
  getfaultPage(year)
  gettypeSelect()
  getfaultOrder(eleData.value, year)
}
// 机电故障完好率 年月
const getChartDataByBtnOne = (year: any) => {
  getEquipmentRate(year)
}
//  机电设备故障排行率
const getChartDataByBtnTwo = (year: any) => {
  getfaultOrder(eleData.value, year)
}
// 机电工单动态跟踪
const getChartDataByBtnThree = (params: any) => {
  getfaultPage(params)
}
// 获取机电故障完好率api
const getEquipmentRate = (year: any) => {
  if (!year) {
    return
  }
  if (!orgCode.value) {
    return
  }
  equipmentRate({
    year: year,
    ...orgCode.value,
  }).then(({ code, msg, data }) => {
    if (code === 0) {
      if (data.length > 0) {
        intactRate.dataList.forEach((item) => {
          item.num = data.filter((v) => v.name === item.name)[0].num || 0
          item.rate = data.filter((v) => v.name === item.name)[0].rate || 0
        })
      }
    }
  })
}
// 获取下拉获取
const gettypeSelect = () => {
  typeSelect().then(({ code, msg, data }) => {
    if (code === 0) {
      eleOptions.dataList = data || []
    }
  })
}
// 下拉
const getRankData = () => {
  getfaultOrder(eleData.value, year.value)
}
// 机电设备故障api
const getfaultOrder = (equipmentTypeId: any, year: any) => {
  if (!orgCode.value) {
    return
  }
  faultOrder({
    equipmentTypeId: equipmentTypeId,
    year: year,
    ...orgCode.value,
  }).then(({ code, msg, data }) => {
    if (code === 0) {
      Object.assign(rankParams, data || {})

      let list: any = []
      let sum = 0
      data.vos.map((item) => {
        sum += item.num || 0
      })
      data.vos.forEach((item, index) => {
        list.push({
          name: item.content,
          amount: item.num,
          percentage: ((item.num / sum) * 100).toFixed(1),
        })
      })
      console.log(rankList)
      rankList.dataList = list
    }
  })
}
// 机电工单动态跟踪
const getfaultPage = (year: any) => {
  page({
    current: 1,
    size: 10,
    ...orgCode.value,
  }).then(({ code, msg, data }) => {
    if (code === 0) {
      const { records } = data
      let titleLib: any = []
      records.forEach((item, index) => {
        titleLib.push({
          orderType: typeFormat(item.type),
          status: statusFormat(item),
          content: item.content,
          userName: item.userName,
          gmtCreate: item.gmtCreate,
        })
      })
      tableData.titleList = titleLib
    }
  })
}
const typeFormat = (type: any) => {
  let text = ''
  // 1-机电巡检 2-机电故障 3-机电任务
  switch (type) {
    case 1:
      text = '机电巡检'
      break
    case 2:
      text = '机电故障'
      break
    case 3:
      text = '机电任务'
      break
  }
  return text
}
const statusFormat = (item: any) => {
  let text = ''
  // 机电巡检：1-已完成；机电故障：1-待受理 2-派单中 3-处理中 4-验收中 5-已完成 6-误报； 机电任务： 0-审批中 1-处理中 2-验收中 3-已完成
  switch (item.type) {
    case 1:
      switch (item.status) {
        case 1:
          text = '已完成'
          break
      }
      break
    case 2:
      switch (item.status) {
        case 1:
          text = '待受理'
          break
        case 2:
          text = '派单中'
          break
        case 3:
          text = '处理中'
          break
        case 4:
          text = '验收中'
          break
        case 5:
          text = '已完成'
          break
        case 6:
          text = '误报'
          break
      }
      break
    case 3:
      switch (item.status) {
        case 0:
          text = '审批中'
          break
        case 1:
          text = '处理中'
          break
        case 2:
          text = '验收中'
          break
        case 3:
          text = '已完成'
          break
      }
      break
  }
  return text
}
</script>

<style lang="scss">
@import '~/styles/viewport-convert.scss';
::v-deep .module-content {
  z-index: 0;
}
.text-light {
  position: absolute;
  right: 0;
  left: 0;
  font-size: 11px;
}
.road-select {
  width: 110px;
}
.scrollList {
  .scrollItem {
    &:nth-child(n + 1) {
      margin-left: 135px;
    }
  }
}
.eleContari1 {
  .el-progress-bar__innerText {
    display: none;
  }

  .el-progress-bar__outer {
    border-radius: 0;
  }

  .el-progress-bar__inner {
    border-radius: 0;
  }

  .number-wrapper {
    width: 100%;
    margin-top: 10px;
  }

  .number-img {
    width: 100%;
    height: 110px;
  }

  .content {
    display: flex;
    width: 100%;
    height: 37%;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;

    .ranking {
      width: 50%;
    }

    .quantum {
      width: 60%;
    }

    .triangle {
      position: relative;
      display: flex;
      padding: 20px;

      .s1 {
        top: 0;
        width: 440px;
      }

      .s2 {
        position: absolute;
        left: 100px;
        width: 300px;
      }

      .t1 {
        position: absolute;
        top: 90px;
        left: 168px;
        width: 260px;
        text-align: center;

        .d1 {
          display: inline-block;
          height: 60px;
          font-size: 55px;
          color: transparent;
          background: linear-gradient(#fff 0%, #faff67 100%);
          -webkit-background-clip: text;
          background-clip: text;
        }

        .d2 {
          font-size: 18px;
          color: #bddbf1;
        }
      }

      .sx {
        position: absolute;
        display: flex;
        width: 160px;
        align-items: center;

        img {
          width: 81px;
        }

        .st1 {
          padding-left: 10px;
          text-align: left;

          .sd1 {
            display: inline-block;
            font-size: 22px;
            color: transparent;
            background: linear-gradient(#fff 0%, #faff67 100%);
            -webkit-background-clip: text;
            background-clip: text;
          }

          .sd2 {
            font-size: 16px;
          }
        }
      }

      .s4 {
        top: 50px;
        left: 350px;
      }

      .s5 {
        top: 270px;
        left: 300px;
        // animation: animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
        //     animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      }

      @keyframes animX {
        0% {
          left: 0;
        }

        100% {
          left: 413;
        }
      }

      @keyframes animY {
        0% {
          top: 0;
        }

        100% {
          top: 300px;
        }
      }
    }
  }

  .progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;

    .index {
      display: block;
      width: 18px;
      height: 18px;
      color: #f3a336;
      text-align: center;
    }

    .span-bg {
      background: url('@/views/electromechanicalMange/assets/text-bg.png');
      background-size: 100%;
    }

    .label {
      width: 135px;
      overflow: hidden;
      color: #bddbf1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .number {
      color: #fff5bf;
    }
  }

  .real {
    position: absolute;
    top: 15%;
    right: 42%;

    .real-text {
      font-family: SourceHanSansCNRegular, sans-serif;
    }

    p {
      width: 220px;
      padding: 4px 10px;
      box-sizing: border-box;

      span:nth-of-type(1) {
        font-size: 18px;
      }

      span:nth-of-type(2) {
        display: inline-block;
        margin-left: 30px;
        font-size: 25px;
        color: transparent;
        background: linear-gradient(#fff 0%, #faff67 100%);
        background-clip: text;
      }
    }

    .pbg {
      position: relative;
      z-index: 2;
      display: flex;
      background: url('@/views/electromechanicalMange/assets/pbg.png') no-repeat
        0 0;
      background-size: 100%;
      align-items: center;

      img {
        position: absolute;
        bottom: 2px;
        left: -25px;
        z-index: 1;
        width: 100%;
        height: 20px;
        background: url('@/views/electromechanicalMange/assets/light.png');
      }
    }
  }

  .word-wrapper {
    width: 90%;
    height: 30%;
    margin-top: -10px;
  }

  .gauge {
    width: 130px;
  }

  .quota-wrapper {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .quota-box {
      width: 160px;
      height: 160px;
    }

    .quota {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .quato-bottom {
      position: absolute;
      top: 80px;
      margin-left: 20px;
    }
  }
}

.module-box {
  overflow: hidden;
}

.chief-facility {
  position: relative;
}

.detail-skip {
  position: absolute;
  right: 20px;
  cursor: pointer;
}

.f1 {
  flex: 1;
}

.basetable {
  width: 100%;
  padding: 8px 12px;
  height: calc(30vh - 35px);
}

.bt-head {
  padding: 3px;

  & div {
    /* width: 25%; */
    text-align: center;
    text-align: center;
    font-size: 12px;
    color: #badeff;
  }

  background: rgba(101, 161, 214, 0.4);
  height: vh(35);
  line-height: vh(35);
  display: flex;
  justify-content: space-between;
}

.list-out {
  overflow: hidden;
}

.bt-item {
  margin-top: 5px;
  padding: 3px;
  column-gap: 5px;
  // height: vh(35);
  line-height: 3;

  & div {
    /* width: 20%; */
    text-align: center;
    font-size: 12px;
    color: #badeff;
    word-break: break-all;
  }

  border-bottom: 1px solid rgba(0, 132, 251, 0.4);
  display: flex;
  justify-content: space-between;
}
</style>
<style lang="scss" scoped>
::v-deep .module-content {
  z-index: 0;
}
.type-select {
  ::v-deep(input::placeholder) {
    color: #94c2e2;
    font-size: 12px;
  }
  ::v-deep(.el-select-dropdown__item) {
    color: #fff;
  }
  ::v-deep(.el-input__inner) {
    color: #3da5ff;
    font-size: 12px;
    background-color: rgba(73, 153, 255, 0.1);
    border: 1px solid rgba(73, 153, 255, 0.35);
    border-radius: 2px;
    height: 18px;
    line-height: 18px;
    padding-left: 7px;
    padding-right: 20px;
  }

  ::v-deep(.el-input--mini) {
    line-height: 20px;
  }

  ::v-deep(.el-input__icon) {
    width: 16px;
    height: 20px;
    line-height: 20px;
  }

  ::v-deep(.el-select__popper.el-popper) {
    background: rgba(5, 15, 45, 0.7);
    color: white;
  }
}
</style>
