<template>
  <!-- <el-row :gutter="40" class="panel-group">
    <el-col
      v-for="(value, key, index) in statisticalData"
      :key="index"
      :xs="12"
      :sm="12"
      :lg="key==='all'?12:6"
      class="card-panel-col"
    >
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          <i class="icon_"></i>
        </div>
        <div class="card-panel-description">
          <div v-if="key==='all'">累计服务量 ：</div>
          <div class="card-panel-text">
            {{ key == "all" ? "总服务量" : key }}
          </div>
          <div class="numText">{{value}}</div>
          <count-to
            :start-val="0"
            :end-val="value"
            :duration="2600"
            class="card-panel-num"
          /> 
        </div>
      </div>
    </el-col>
  </el-row> -->

  <el-row :gutter="20">
    <el-col :xs="24" :lg="24" :sm="24" style="color:#787878;margin-bottom:20px"
      ><span>数据统计</span
      ><el-button
      v-has="'WORKORDER_ADMIN'"
        type="primary"
        target="blank"
        @click="toTj"
        style="border-radius:21px;margin-left:10px"
        >统计图表</el-button
      ><span style="float:right"
        >更新时间：{{ new Date() | parseTime("{y}-{m}-{d} {h}:00:00") }}</span
      ></el-col
    >
    <el-col
      v-for="(value, key, index) in statisticalData"
      :key="index"
      :xs="12"
      :sm="12"
      :lg="key === 'all' ? 12 : 6"
    >
      <div class="countLayout">
        <i :class="`countIcon icon_${index}`"></i>
        <span v-if="key === 'all'" style="font-size:24px"
          >累计服务量 ：<span
            style="color:#ff663d;font-size:49px;vertical-align: middle;"
            >{{ value }}</span
          ></span
        >
        <div
          v-else
          style="flex: 1;text-align: right;padding-right:51px;font-size:16px;"
        >
          <div style="margin-bottom:17px">{{ key }}</div>
          <div style="font-size:20px;color:#787878;">
            {{ formatUnit(key, value) }}
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from "vue-count-to";
import { parseTime } from "@/utils";
import { statisticalData } from "@/api/statisticalData";

export default {
  components: {
    CountTo
  },
  data() {
    return {
      listQuery: {
        residentInformationId: undefined,
        eventTypeId: undefined
      },
      statisticalData: undefined
    };
  },
  created() {
    this.getStatisticalData();
  },
  methods: {
    // handleSetLineChartData(type) {
    //   this.$emit("handleSetLineChartData", type);
    // }
    getStatisticalData() {
      statisticalData(this.listQuery).then(res => {
        // this.statisticalData = {
        //   all: 318,
        //   平均办结时间: 61722,
        //   平均受理时间: 22349,
        //   未受理量: 0,
        //   未受理率: 0,
        //   按时受理量: 318,
        //   按时受理率: 1.0,
        //   超时受理量: 0,
        //   超时受理率: 0.0,
        //   按时办结量: 307,
        //   按时办结率: 1.0,
        //   超时办结量: 0,
        //   超时办结率: 0.0,
        //   未办结量: 11,
        //   未办结率: 0.0346,
        //   非常满意量: 274,
        //   非常满意率: 0.8925,
        //   满意量: 33,
        //   满意率: 0.1075,
        //   不满意量: 0,
        //   不满意率: 0.0
        // };
        this.statisticalData = res.d;
      });
    },
    formatUnit(key, value) {
      // console.log(key,value);
      let str = "";
      if (key.indexOf("率") != -1) {
        str = `${(value * 100).toFixed(2)}%`;
      } else if (key.indexOf("时间") != -1) {
        str = this.timeFormat(value);
      } else {
        str = value;
      }
      // console.log(str);
      return str;
    },
    timeFormat(timeStamp) {
      const timeStr = `${
        Math.floor(timeStamp / 3600) < 9
          ? "0" + Math.floor(timeStamp / 3600)
          : Math.floor(timeStamp / 3600)
      }:${
        Math.floor(((timeStamp % 86400) % 3600) / 60) < 9
          ? "0" + Math.floor(((timeStamp % 86400) % 3600) / 60)
          : Math.floor(((timeStamp % 86400) % 3600) / 60)
      }:${
        Math.floor(((timeStamp % 86400) % 3600) % 60) < 9
          ? "0" + Math.floor(((timeStamp % 86400) % 3600) % 60)
          : Math.floor(((timeStamp % 86400) % 3600) % 60)
      }`;
      return timeStr;
    },
    toTj(){
      window.open('http://new.rtmedia.myntv.cn/static/largeScreen/leaderForTv.html')
      console.log(window);
    }
  }
};
</script>

<style lang="scss" scoped>
.countLayout {
  background: #fff;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}
.countIcon {
  display: inline-block;
  background-size: cover !important;
  width: 60px;
  height: 60px;
  margin: 38px 38px 38px 55px;
  vertical-align: middle;
}
.icon_0 {
  background: url("./img/icon_0.png") no-repeat;
}
.icon_1 {
  background: url("./img/icon_1.png") no-repeat;
}
.icon_2 {
  background: url("./img/icon_2.png") no-repeat;
}
.icon_3 {
  background: url("./img/icon_3.png") no-repeat;
}
.icon_4 {
  background: url("./img/icon_3.png") no-repeat;
}
.icon_5 {
  background: url("./img/icon_4.png") no-repeat;
}
.icon_6 {
  background: url("./img/icon_4.png") no-repeat;
}
.icon_7 {
  background: url("./img/icon_5.png") no-repeat;
}
.icon_8 {
  background: url("./img/icon_5.png") no-repeat;
}
.icon_9 {
  background: url("./img/icon_6.png") no-repeat;
}
.icon_10 {
  background: url("./img/icon_6.png") no-repeat;
}
.icon_11 {
  background: url("./img/icon_7.png") no-repeat;
}
.icon_12 {
  background: url("./img/icon_7.png") no-repeat;
}
.icon_13 {
  background: url("./img/icon_8.png") no-repeat;
}
.icon_14 {
  background: url("./img/icon_8.png") no-repeat;
}
.icon_15 {
  background: url("./img/icon_9.png") no-repeat;
  width: 63px;
  height: 54px;
}
.icon_16 {
  background: url("./img/icon_9.png") no-repeat;
  width: 63px;
  height: 54px;
}
.icon_17 {
  background: url("./img/icon_10.png") no-repeat;
  width: 63px;
  height: 54px;
}
.icon_18 {
  background: url("./img/icon_10.png") no-repeat;
  width: 63px;
  height: 54px;
}
.icon_19 {
  background: url("./img/icon_11.png") no-repeat;
  width: 63px;
  height: 54px;
}
.icon_20 {
  background: url("./img/icon_11.png") no-repeat;
  width: 63px;
  height: 54px;
}
// .icon_21{
//   background:url('./img/icon_1.png')no-repeat;
// }
.numText {
  font-size: 20px;
  color: #787878;
  font-family: PingFang-SC-Regular;
  text-align: right;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
