<template>
  <div class="testdiv">
    <div class="divborder parameterStatus" style="margin:0px;">
      <ul>
        <li style="margin-left: 0px;">
          <div class="EquipmentStatus E_1">
            <img src="../../../assets/images/99.jpg" alt width="95" height="120" />
            <div class="EquipmentStatus_2">
              <div class="EquipmentStatus_2_top">{{$t('900852')}}</div>
              <div class="EquipmentStatus_2_content" id="abnormal">{{abnormalcount}}</div>
            </div>
          </div>
        </li>
        <li>
          <div class="EquipmentStatus E_2">
            <img src="../../../assets/images/88.jpg" alt width="95" height="120" />
            <div class="EquipmentStatus_2">
              <div class="EquipmentStatus_2_top">{{$t('800256')}}</div>
              <div class="EquipmentStatus_2_content" id="normal">{{normalcount}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="divborder newTableDiv">
      <Table class="tableClass" :data="tableData1" :columns="tableColumns1"></Table>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  components: {},
  data() {
    return {
      tableData1: [], // 列表数据
      abnormalcount: 0,
      normalcount: 0,
      tableColumns1: [
        {
          title: this.$t("1131"),
          key: "section_name",
          align: "center",
          width: 100,
          render: (h, params) => {
            let dir = null;
            if (params.row.row_count > 0) {
              dir = [
                {
                  name: "cell",
                  arg: "rowSpan",
                  value: params.row.row_count,
                },
              ];
            } else {
              dir = [
                {
                  name: "rmcell",
                  arg: "rowSpan",
                  value: params.row.row_count,
                },
              ];
            }
            return h(
              "Tooltip",
              {
                directives: dir,
                style: {
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  display: "block",
                },
                class: {
                  echo_tooltip: true,
                },
                props: {
                  content: params.row.section_name,
                  placement: "top",
                },
              },
              params.row.section_name
            );
          },
        },
        {
          title: this.$t("200003"),
          key: "station_name",
          tooltip: true,
        },
        {
          title: this.$t("500070"),
          key: "alarmCode",
          tooltip: true,
        },
        {
          title: this.$t("500071"),
          key: "alarmContent",
          tooltip: true,
          align: "center",
        },
        {
          title: this.$t("200005"),
          key: "fault_content",
          tooltip: true,
        },
        {
          title: this.$t("200010"),
          key: "fault_reason",
          tooltip: true,
        },
        {
          title: this.$t("500073"),
          key: "fault_solution",
          tooltip: true,
        },
        {
          title: this.$t("1049"),
          key: "startTime",
          tooltip: true,
        },
        {
          title: this.$t("500083"),
          key: "time_span",
          tooltip: true,
        },
        {
          title: this.$t("400008"),
          key: "active",
          tooltip: true,
        },
        {
          title: this.$t("950000"),
          key: "isFault",
          tooltip: true,
        },
      ],
    };
  },
  mounted() {
    this.search();
    // 格式化表格样式
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
  },
  methods: {
    search() {
      axios
        .request({
          url: "/cnc/Machine/machineAlarmDetail",
          method: "get",
        })
        .then((res) => {
          this.tableData1 = [];
          var data = res.data.data;
          if (res.data.ret === 1) {
            if (
              data.productionParameterLis !== undefined &&
              data.productionParameterLis !== {}
            ) {
              this.mockTableData1(data.productionParameterLis);
            }
          }

          this.abnormalcount = data.exceptionCount;
          this.normalcount = data.normalCount;
        });
    },
    mockTableData1(tablelist) {
      let data = [];
      Object.keys(tablelist).forEach((i) => {
        tablelist[i].forEach((item) => {
          data.push({
            row_count: item.row_count,
            datetime: item.datetime,
            section_name: item.section_name,
            station_name: item.station_name,
            alarmCode: item.alarmCode,
            alarmContent: item.alarmContent,
            fault_content: item.fault_content,
            fault_reason: item.fault_reason,
            fault_solution: item.fault_solution,
            startTime: item.startTime,
            time_span: this.timechange(item.time_span),
            active: item.active === 0 ? this.$t("800257") : this.$t("800258"),
            isFault: item.isfault === 1 ? this.$t("300030") : this.$t("300031"),
          });
        });
      });
      this.tableData1 = data;
    },
    timechange(num) {
      var str = "";
      if (num > 86400) {
        let d = Math.floor(num / 86400);
        let h = Math.floor((num % 86400) / 3600);
        let m = Math.floor(((num % 86400) % 3600) / 60);
        let s = ((num % 86400) % 3600) % 60;
        str =
          d +
          this.$t("1101") +
          h +
          this.$t("1102") +
          m +
          this.$t("1103") +
          s +
          this.$t("1104");
        return str;
      } else if (num > 3600) {
        let h = Math.floor(num / 3600);
        let m = Math.floor((num % 3600) / 60);
        let s = (num % 24) % 60;
        str = h + this.$t("1102") + m + this.$t("1103") + s + this.$t("1104");
        return str;
      } else if (num > 60) {
        let m = Math.floor(num / 60);
        let s = Math.floor(num % 60);
        str = "" + m + this.$t("1103") + s + this.$t("1104");
        return str;
      } else {
        str = num + this.$t("1104");
        return str;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.parameterStatus ul {
  width: 100%;
}
.parameterStatus ul li {
  margin-left: 35px;
  display: inline-block;
}
.EquipmentStatus {
  width: 250px;
  height: 120px;
  display: inline-block;
}
.E_1 {
  background: #f39c12;
}
.E_2 {
  background: #5cb85c;
}

.EquipmentStatus img {
  vertical-align: baseline;
}
.EquipmentStatus_2 {
  float: right;
  width: 150px;
  height: 120px;
}
.EquipmentStatus_2_top {
  width: 100%;
  height: 20px;
  margin-top: 5px;
  text-align: center;
  color: white;
}
.EquipmentStatus_2_content {
  width: 70%;
  height: 60px;
  margin: auto;
  text-align: center;
  font-size: 60px;
  color: white;
}
</style>
