<template>
  <div class="maintenanceLeft">
    <div class="event_box common" :class="[sysTheme ? 'dark_event' : '']">
      <div class="title">运维事件</div>
      <ul class="table_box">
        <li v-for="item in eventList" :key="item.id">
          <span class="time">{{ item.time }}</span>
          <span class="event">{{ item.event }}</span>
          <span class="handle" @click="handlePreview(item.id)">{{
            item.handle
          }}</span>
        </li>
      </ul>
    </div>
    <div class="statistics common" :class="[sysTheme ? 'dark_statistics' : '']">
      <div class="title">运维统计</div>
      <ul class="btn_list">
        <li
          v-for="(item, i) in btnList"
          :key="item.value"
          :class="[btnIndex == i ? 'active' : '']"
          @click="changeBtn(i)"
        >
          {{ item.text }}
        </li>
      </ul>
      <div class="table_box">
        <div class="table_header">
          <span class="name">姓名</span>
          <span class="frequency">巡查次数</span>
          <span class="rate">达标率</span>
          <span class="delay">工单延迟</span>
          <span class="delayRate">延迟率</span>
        </div>
        <div class="table_content">
          <div class="table_List" v-for="item in statisticsList" :key="item.id">
            <span class="name">{{ item.name }}</span>
            <span class="frequency">{{ item.frequency }}</span>
            <span class="rate">{{ item.rate }}</span>
            <span class="delay">{{ item.delay }}</span>
            <span class="delayRate">{{ item.delayRate }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="inspect common" :class="[sysTheme ? 'dark_inspect' : '']">
      <div class="title">设施例行检查</div>
      <div class="table_box">
        <div class="table_header">
          <span class="content">检查内容</span>
          <span class="way">处理办法</span>
          <span class="handler">处理人</span>
          <span class="frequency">频率</span>
          <span class="date">日期</span>
          <span class="setUp"></span>
        </div>
        <div class="table_content">
          <div class="table_List" v-for="item in inspectList" :key="item.id">
            <span class="content">{{ item.content }}</span>
            <span class="way">{{ item.way }}</span>
            <span class="handler">{{ item.handler }}</span>
            <span class="frequency">{{ item.frequency }}</span>
            <span class="date">{{ item.date }}</span>
            <span class="setUp">设置</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed, h, onMounted } from "vue";
import { useStore } from "vuex";

export default {
  name: "maintenanceLeft",
  setup() {
    let store = useStore();

    const state = reactive({
      eventList: [
        {
          id: 0,
          time: "2021年5月28日",
          event: "张三处理了例行检查工单",
          handle: "查看工单",
        },
        {
          id: 0,
          time: "2021年5月28日",
          event: "张三处理了例行检查工单",
          handle: "查看工单",
        },
        {
          id: 0,
          time: "2021年5月28日",
          event: "张三处理了例行检查工单",
          handle: "查看工单",
        },
        {
          id: 0,
          time: "2021年5月28日",
          event: "张三处理了例行检查工单",
          handle: "查看工单",
        },
        {
          id: 0,
          time: "2021年5月28日",
          event: "张三处理了例行检查工单",
          handle: "查看工单",
        },
      ],
      btnIndex: 0,
      sysTheme: "",
      btnList: [
        {
          id: 0,
          text: "全部",
        },
        {
          id: 0,
          text: "最近七天",
        },
        {
          id: 0,
          text: "最近一月",
        },
        {
          id: 0,
          text: "最近一年",
        },
        {
          id: 0,
          text: "最近三年",
        },
      ],
      statisticsList: [
        {
          id: 0,
          name: "张三",
          frequency: "10",
          rate: "90%",
          delay: "1次",
          delayRate: "10%",
        },
        {
          id: 1,
          name: "张三",
          frequency: "10",
          rate: "90%",
          delay: "1次",
          delayRate: "10%",
        },
        {
          id: 2,
          name: "张三",
          frequency: "10",
          rate: "90%",
          delay: "1次",
          delayRate: "10%",
        },

        {
          id: 3,
          name: "张三",
          frequency: "10",
          rate: "90%",
          delay: "1次",
          delayRate: "10%",
        },
        {
          id: 3,
          name: "张三",
          frequency: "10",
          rate: "90%",
          delay: "1次",
          delayRate: "10%",
        },
        {
          id: 3,
          name: "张三",
          frequency: "10",
          rate: "90%",
          delay: "1次",
          delayRate: "10%",
        },
      ],
      inspectList: [
        {
          id: 0,
          content: "粗格栅检查",
          way: "更换润滑油",
          handler: "张三",
          frequency: "每4月一次",
          date: "2021年2月20",
        },
        {
          id: 1,
          content: "进水泵检查",
          way: "探头更换3次",
          handler: "张三",
          frequency: "每4月一次",
          date: "2021年2月20",
        },
        {
          id: 2,
          content: "中控室",
          way: "网络线路",
          handler: "张三",
          frequency: "每4月一次",
          date: "2021年2月20",
        },
        {
          id: 3,
          content: "前池检查",
          way: "流量计校准",
          handler: "张三",
          frequency: "每4月一次",
          date: "2021年2月20",
        },
        {
          id: 4,
          content: "中控室",
          way: "自控系统升级",
          handler: "张三",
          frequency: "每4月一次",
          date: "2021年2月20",
        },
        {
          id: 4,
          content: "粗格栅检查",
          way: "更换润滑油",
          handler: "张三",
          frequency: "每4月一次",
          date: "2021年2月20",
        },
      ],
    });
    state.sysTheme = computed(() => {
      return store.getters.sysTheme;
    });
    //   查看工单
    const handlePreview = () => {};
    //运维统计按钮点击
    const changeBtn = (i) => {
      state.btnIndex = i;
    };
    return {
      ...toRefs(state),
      handlePreview,
      changeBtn,
    };
  },
};
</script>

<style lang='less' scoped>
.maintenanceLeft {
  position: absolute;
  top: 0;
  left: 0;
  width: 520px;
  height: 100%;
  .common {
    margin-bottom: 10px;
    padding: 0 15px;
    .title {
      padding-left: 15px;
      line-height: 44px;
      font-size: 18px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
    }
  }
  .event_box {
    height: 210px;
    background: url("../../../../assets/Imgs/yunwei_eventBg.png");
    background-size: 100% 100%;
    .table_box {
      height: 152px;
      overflow: auto;
      li {
        display: flex;
        height: 40px;
        align-items: center;
        &:hover {
          background: var(--color-rgba1);
          span {
            color: var(--color-text-active);
          }
        }
        span {
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: var(--color-yunwei);
          text-align: center;
        }
        .time {
          width: 30%;
        }
        .event {
          width: 50%;
        }
        .handle {
          width: 20%;
        }
      }
    }
  }
  .statistics {
    height: 310px;
    background: url("../../../../assets/Imgs/yunwei_statisticsBg.png");
    background-size: 100% 100%;
    .title {
      line-height: 60px;
    }
    .btn_list {
      margin-top: 0px;
      display: flex;
      li {
        margin-right: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 28px;
        background: var(--color-odd);
        border-radius: 4px;
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        color: var(--color-yunwei);
        cursor: pointer;
        &.active {
          background: #1f78f7;
          color: #fff;
        }
      }
    }
    .table_box {
      margin-top: 10px;
      height: calc(100% - 115px);
      .table_header {
        display: flex;
        border-bottom: 1px solid #47678c;
        height: 40px;
        span {
          width: 20%;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 600;
          color: var(--color-Invert);
        }
      }
    }
    .table_content {
      height: calc(100% - 40px);
      overflow: auto;
      .table_List {
        display: flex;
        &:hover {
          background: var(--color-rgba1);
          span {
            color: var(--color-text-active);
          }
        }
        span {
          width: 20%;
          line-height: 34px;
          text-align: center;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: var(--color-yunwei);
        }
      }
    }
  }
  .inspect {
    margin-bottom: 0;
    height: calc(100% - 540px);
    background: url("../../../../assets/Imgs/yunwei_jianchaBg.png");
    background-size: 100% 100%;
    .title {
      line-height: 50px;
    }
    .table_box {
      margin-top: 0px;
      height: calc(100% - 70px);
      .table_header {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #47678c;
        height: 37px;
        span {
          line-height: 36px;
          text-align: center;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 600;
          color: var(--color-Invert);
        }
        .content {
          width: 20%;
        }
        .way {
          width: 18%;
        }
        .handler {
          width: 15%;
        }
        .frequency {
          width: 18%;
        }
        .date {
          width: 25%;
        }
      }
    }
    .table_content {
      height: calc(100% - 30px);
      overflow: auto;
      .table_List {
        display: flex;
        align-items: center;
        &:hover {
          background: var(--color-rgba1);
          span {
            color: var(--color-text-active);
          }
          .setUp {
            background: #1f78f7;
            color: #fff;
          }
        }
        span {
          line-height: 36px;
          text-align: center;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: var(--color-yunwei);
        }
        .content {
          width: 20%;
        }
        .way {
          width: 18%;
        }
        .handler {
          width: 15%;
        }
        .frequency {
          width: 18%;
        }
        .date {
          width: 25%;
        }
        .setUp {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 31px;
          height: 18px;
          background: var(--bg-shezhi);
          border-radius: 2px;
          font-size: 12px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: var();
          cursor: pointer;
        }
      }
    }
  }
  .dark_event {
    background: url("../../../../assets/Imgs/event_dackBg.png");
  }
  .dark_statistics {
    background: url("../../../../assets/Imgs/jiancha_dackBg.png");
  }
  .dark_inspect {
    background: url("../../../../assets/Imgs/jiancha_dackBg.png");
  }
}
::-webkit-scrollbar {
  display: none;
}
</style>