<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :span="13" style="height: 100%">
        <el-card class="box-card box-card1" style="height: 18%">
          <div slot="header" class="clearfix">
            <span>工单信息</span>
          </div>
          <div class="list">
            <div
              class="item"
              v-for="(item, index) in repaireOptions"
              :key="index"
            >
              <div class="img_box">
                <img :src="item.imgUrl" />
              </div>
              <div @click="handelRouterTo('/page-wt/tickets')">
                <div>{{ item.title }}</div>
                <div class="text">{{ item.num }}/{{ item.total }}</div>
              </div>
            </div>
          </div>
        </el-card>

        <div class="char">
          <el-card class="box-card" style="width: 55%">
            <div slot="header" class="clearfix">
              <span>故障设备分布（部门）</span>
            </div>

            <v-chart
              ref="pieRef"
              style="height: 100%"
              :option="pieEquipmentFailureOption"
            />
          </el-card>
          <el-card class="box-card" style="width: calc(45% - 15px)">
            <div slot="header" class="clearfix">
              <span>设备状态</span>
            </div>
            <div class="statusList">
              <div v-for="(item, index) in statusList" :key="index">
                <div class="left" :style="{ color: item.color }">
                  <img :src="item.titleUrl" />
                  {{ item.title }}
                </div>
                <div class="right">
                  <img :src="item.numUrl" />
                  <div>
                    <span>{{ item.num }}</span>
                    <span>台</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <!-- <el-card class="box-card" style="height: 18%; margin-top: 15px">
          <div slot="header" class="clearfix">
            <span>设备状态</span>
          </div>
          <div class="statusList">
            <div
              :style="{ background: item.color }"
              class="item"
              v-for="(item, index) in statusList"
              :key="index"
            >
              <span>{{ item.title }}</span>
              <span>{{ item.num }}</span>
            </div>
          </div>
        </el-card> -->
        <el-card class="box-card" style="height: 42%; margin-top: 15px">
          <div slot="header" class="clearfix">
            <span>故障设备分布（类型）</span>
          </div>
          <v-chart
            ref="barRef"
            style="height: 100%"
            :option="barEquipmentFailureOption"
          />
        </el-card>
      </el-col>
      <el-col :span="11" style="height: 100%">
        <div class="char" style="height: 40%; margin: 0">
          <el-card
            class="box-card"
            style="height: 100%; width: 63%; position: relative"
          >
            <div slot="header" class="clearfix">
              <span>备品备件</span>
            </div>
            <div class="sparePart">
              <span>消耗总量 68</span>
              <span
                >环比-17%
                <i
                  class="el-icon-caret-bottom"
                  style="color: #38994e; font-size: 1vw"
                ></i
              ></span>
              <span>同比 - </span>
              <span style="margin-top: 25px">消耗种类 20 </span>
            </div>
            <v-chart
              ref="pieRef1"
              style="height: 100%"
              :option="pieSparePartOption"
            />
          </el-card>

          <el-card
            class="box-card"
            style="height: 100%; width: calc(37% - 15px)"
          >
            <div slot="header" class="clearfix">
              <span>排名</span>
              <el-select
                v-model="rankType"
                placeholder="请选择"
                style="width: 110px"
              >
                <el-option
                  v-for="item in rankTypeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="scrollList">
              <div class="tableList_header">
                <span
                  v-for="item in rankList"
                  :key="item.prop"
                  :style="{ width: item.width }"
                >
                  {{ item.label }}
                </span>
              </div>
              <div class="tableList" ref="rankTableList">
                <vue-seamless-scroll
                  :data="rankData"
                  :class-option="seamlessScrollOption"
                  class="scroll_box"
                >
                  <div
                    v-for="(item, index) in rankData"
                    :key="index"
                    class="srcoll_item"
                  >
                    <template v-for="data in rankList">
                      <span
                        :style="{ width: data.width }"
                        :key="data.prop"
                        :title="item[data.prop]"
                      >
                        {{ item[data.prop] }}</span
                      >
                    </template>
                  </div>
                </vue-seamless-scroll>
              </div>
            </div>
          </el-card>
        </div>

        <el-card class="box-card" style="height: 60%; margin-top: 15px">
          <div slot="header" class="clearfix">
            <span>班组维修消耗费用趋势(万元)</span>
            <el-radio-group
              style="margin-left: 15px"
              v-model="timeType"
              @change="timeTypeChange()"
            >
              <el-radio-button label="3">月度</el-radio-button>
              <el-radio-button label="2">季度</el-radio-button>
              <el-radio-button label="1">年度</el-radio-button>
            </el-radio-group>
          </div>
          <v-chart ref="lineRef" style="height: 100%" :option="lineOption" />
        </el-card>
        <!-- <el-card class="box-card" style="height: calc(25% - 15px)">
          <div slot="header" class="clearfix">
            <span>待处理</span>
          </div>
          <div class="scrollList">
            <div class="tableList_header">
              <span
                v-for="item in planList"
                :key="item.prop"
                :style="{ width: item.width }"
              >
                {{ item.label }}
              </span>
            </div>
            <div class="tableList" ref="planTableList">
              <vue-seamless-scroll
                :data="planData"
                :class-option="seamlessScrollOption"
                class="scroll_box"
              >
                <div
                  v-for="(item, index) in planData"
                  :key="index"
                  class="srcoll_item"
                >
                  <template v-for="data in planList">
                    <span
                      v-if="data.prop != 'action' && data.prop != 'code'"
                      :style="{ width: data.width }"
                      :key="data.prop"
                      :title="item[data.prop]"
                    >
                      {{ item[data.prop] }}</span
                    >
                    <span
                      v-if="data.prop == 'code'"
                      :style="{ width: data.width }"
                      :key="data.prop"
                      :title="item[data.prop]"
                      ><el-link type="primary" :underline="false">
                        {{ item[data.prop] }}
                      </el-link></span
                    >
                    <span
                      v-if="data.prop == 'action'"
                      :style="{ width: data.width }"
                      :key="data.prop"
                      ><el-link
                        type="primary"
                        :underline="false"
                        icon="el-icon-edit"
                      >
                        审批
                      </el-link></span
                    >
                  </template>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
        </el-card> -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll';

import {
  // planList,
  statusList,
  rankList,
  repaireOptions,
  pieOption,
  barOption,
  pieOption1,
  lineOption
} from './data';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, PieChart, LineChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';

import VChart from 'vue-echarts';
import { echartsMixin } from '@/utils/echarts-mixin';
import {
  listInspection,
  queryRunStatus,
  queryGroupName,
  queryDevice
} from '@/api/main';
// 按需加载 echarts
use([
  CanvasRenderer,
  BarChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  LineChart
]);
const seamlessScrollOption = {
  step: 0.2, // 数值越大速度滚动越快
  limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
  hoverStop: true, // 是否开启鼠标悬停stop
  direction: 1, // 0向下 1向上 2向左 3向右
  openWatch: true, // 开启数据实时监控刷新dom
  singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
};
export default {
  mixins: [echartsMixin(['barRef', 'pieRef', 'pieRef1', 'lineRef'])],
  data() {
    return {
      timeType: '3',
      // planList,
      tabPosition: '个人',
      // planData: [
      //   {
      //     type: '审批',
      //     code: 'XA123451',
      //     title: '巡查点计划1',
      //     userName: '李杰3213213123213123123'
      //   },
      //   {
      //     type: '审批',
      //     code: 'XA123452',
      //     title: '巡查点计划2',
      //     userName: '李杰'
      //   },
      //   {
      //     type: '审批',
      //     code: 'XA123453',
      //     title: '巡查点计划3',
      //     userName: '李杰'
      //   },
      //   {
      //     type: '审批',
      //     code: 'XA123454',
      //     title: '巡查点计划4',
      //     userName: '李杰'
      //   },
      //   {
      //     type: '审批',
      //     code: 'XA123455',
      //     title: '巡查点计划5',
      //     userName: '李杰'
      //   }
      // ],

      rankData: [
        {
          name: '备件1',
          num: '356',
          rank: 1
        },
        {
          name: '备件2',
          num: '356',
          rank: 2
        },
        {
          name: '备件3',
          num: '356',
          rank: 3
        },
        {
          name: '备件4',
          num: '356',
          rank: 4
        },
        {
          name: '备件5',
          num: '356',
          rank: 5
        },
        {
          name: '备件6',
          num: '356',
          rank: 6
        },
        {
          name: '备件7',
          num: '356',
          rank: 7
        },
        {
          name: '备件8',
          num: '356',
          rank: 8
        },
        {
          name: '备件9',
          num: '356',
          rank: 9
        },
        {
          name: '备件10',
          num: '356',
          rank: 10
        }
      ],
      dateOptions: [
        {
          label: '近七日',
          value: 1
        },
        {
          label: '近一个月',
          value: 2
        }
      ],
      rankTypeOption: [
        {
          value: '1',
          label: '全厂'
        },
        {
          value: '2',
          label: '机加一'
        },
        {
          value: '3',
          label: '机加二'
        },
        {
          value: '4',
          label: '特种作业'
        },
        {
          value: '5',
          label: '总装'
        }
      ],
      rankType: '1',
      statusList,
      rankList,
      repaireOptions,
      date: new Date(),
      seamlessScrollOption: JSON.parse(JSON.stringify(seamlessScrollOption)),
      // seamlessScrollOption2: JSON.parse(JSON.stringify(seamlessScrollOption)),
      barEquipmentFailureOption: {},
      pieEquipmentFailureOption: {},
      lineOption: {},
      pieSparePartOption: {}
    };
  },
  components: {
    vueSeamlessScroll,
    VChart
  },
  created() {
    this.pieSparePartOption = pieOption1([
      {
        value: '2',
        name: '机加一'
      },
      {
        value: '3',
        name: '机加二'
      },
      {
        value: '4',
        name: '特种作业'
      },
      {
        value: '5',
        name: '总装'
      }
    ]);

    this.queryRunStatus();
    this.timeTypeChange();
    this.queryGroupName();
    this.queryDevice();
  },
  methods: {
    //工单信息
    async getListInspection() {
      const arr = await Promise.all(
        [1, 2, 3].map((item) => listInspection({ type: item }))
      );
      arr.forEach((item, index) => {
        this.repaireOptions[index].total = item.numberTotal;
        this.repaireOptions[index].num = item.finishNumber;
      });
    },
    async queryGroupName() {
      const data = await queryGroupName();
      this.pieEquipmentFailureOption = pieOption(
        data.map((item) => {
          return {
            name: item.groupName,
            value: item.failureRate
          };
        })
      );
    },
    async queryDevice() {
      const data = await queryDevice();
      this.barEquipmentFailureOption = barOption([
        { name: '轴承', value: '45' },
        { name: '升降机', value: '25' },
        { name: '冲压杆', value: '18' },
        { name: '冷却水管', value: '36' },
        { name: '液压机', value: '21' },
        { name: '电机', value: '42' },
        { name: '水泵机', value: '38' }
      ]);
      console.log(data);
    },
    queryRunStatus() {
      queryRunStatus().then((res) => {
        this.statusList.forEach((item) => {
          item.num = res[item.code];
        });
      });
    },
    handelRouterTo(path) {
      window.history.pushState(null, '', path);
    },
    timeTypeChange() {
      this.lineOption = lineOption(this.timeType);
    }
  },
  mounted() {
    this.getListInspection();
    this.seamlessScrollOption.limitMoveNum = parseInt(
      this.$refs.rankTableList.clientHeight / 25
    );
    setTimeout(() => {
      this.$refs.barRef.resize();
      this.$refs.pieRef.resize();
      this.$refs.pieRef1.resize();
      this.$refs.lineRef.resize();
    }, 300);
    // this.seamlessScrollOption2.limitMoveNum = parseInt(
    //   this.$refs.rankTableList.clientHeight / 25
    // );
  }
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'MyFont';
  src: url('../../../public/tinymce/skins/ui/oxide/fonts/black.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
.clearfix {
  font-size: 0.7vw;

  > span {
    font-weight: bold;
    margin-left: 15px;
    margin-right: 15px;
  }
  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #398f4e;
    border-color: #398f4e;
  }
  :deep(.el-radio-button__inner) {
    font-size: 0.7vw;
  }
}
.ele-body {
  height: calc(100vh - 106px);
  > .el-row {
    height: 100%;
  }
  :deep(.el-calendar) {
    font-size: 0.7vw;
    height: 100%;
    .el-calendar__body {
      height: 90%;
      padding: 0.4vw 0.7vw;
    }
    .el-calendar-day {
      height: 100%;
    }
    .el-calendar-table {
      height: 100%;
    }
    .el-calendar__header {
      padding: 0.4vw 0.7vw;
    }
    .el-calendar-table thead th {
      padding: 0.4vw 0;
    }
    .dateItem {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .el-card {
    height: 100%;
    // margin-top: 15px;

    :deep(.el-card__body) {
      padding: 0.3vw;
    }
    :deep(.el-card__header) {
      padding: 0;
      height: 2.5vw;
      display: flex;
      align-items: center;
    }
    :deep(.el-card__body) {
      height: calc(100% - 2.5vw);
    }
    :deep(.ele-pro-table) {
      height: 99%;
    }
    .sparePart {
      font-size: 0.7vw;
      font-weight: bold;
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 20%;
      left: 5%;
    }
  }

  // :deep(.el-card + .el-card){
  //     margin-top: 0;
  //   }
  .char {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    height: calc(40% - 15px);
    > .box-card {
      margin-top: 0;
    }
  }
  .list {
    display: flex;
    box-sizing: border-box;
    height: 100%;
    margin-top: 5px;
    > div {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #398f4d;
      margin-left: 7.5px;
      margin-right: 7.5px;
      border-radius: 8px;
      color: #fff;
      height: 90%;
      cursor: pointer;
      .img_box {
        // flex: 0 0 130px;
        width: 3vw;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        background-color: #38994e;
        > img {
          width: 2.5vw;
          height: 2.5vw;
        }
      }

      > div {
        flex: 1;
        // font-size: 16px;
        font-size: 0.7vw;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .text {
          margin-top: 10px;

          // font-size: 20px;
        }
      }
    }
  }
  .statusList {
    display: flex;
    height: 100%;
    color: #fff;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    > div {
      width: 46%;
      height: 3.3vw;
      display: flex;
      align-items: center;

      > div {
        position: relative;
        display: flex;
        height: 100%;
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }
      }
      .left {
        width: 3vw;
        font-size: 0.7vw;
        align-items: center;
        justify-content: center;
        font-weight: 600;
      }
      .right {
        height: 2.6vw;
        font-family: 'MyFont';
        color: #fff;
        margin-left: 8px;
        width: calc(100% - 3vw - 5px);
        align-items: center;
        justify-content: center;
        > div {
          position: absolute;
          font-size: 0.6vw;
          display: flex;
          align-items: center;
          span:nth-of-type(1) {
            margin-right: 0.6vw;
            font-size: 0.9vw;
          }
          // top:15px
        }
      }
    }
  }
}
.scrollList {
  height: 100%;
  font-size: 0.6vw;
  color: #333;
  .tableList_header {
    width: 100%;
    display: flex;
    font-weight: bold;

    span {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 2vw;
      background: #f6f6f6;
    }
  }
  .tableList {
    height: calc(100% - 2vw);
  }
  .scroll_box {
    height: 100%;
    overflow: hidden;
    .srcoll_item {
      width: 100%;
      display: flex;
      min-height: 25px;

      span {
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
<style>
.el-select-dropdown__item.selected {
  color: #157a2c !important;
}
</style>
