<template>
  <div class="testdiv">
    <!-- 看板标题 -->
    <div class="top_title">
      <span>{{ title }}</span>
      <img :src="imgLogo" class="logo" @click="back()" />
      <div class="times_bg">{{ nowTime }}</div>
      <div class="setting" @click="openSet()">
        <img src="../../../static/images/setting.svg" />
      </div>
    </div>
    <div class="middle_bottom">
      <Row class="top">
        <i-col span="4">
          <div class="status_total status_normal">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="md-thumbs-up" size="44" />
                  <p>运行</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg1 }}</div>
            </div>
          </div>
        </i-col>
        <i-col span="4">
          <div class="status_total status_manual">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="ios-build" size="44" />
                  <p>手动/调试</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg2 }}</div>
            </div>
          </div>
        </i-col>
        <i-col span="4">
          <div class="status_total status_free">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="md-checkbox-outline" size="44" />
                  <p>空闲</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg3 }}</div>
            </div>
          </div>
        </i-col>
        <i-col span="4">
          <div class="status_total status_danger">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="md-information-circle" size="44" />
                  <p>设备报警</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg4 }}</div>
            </div>
          </div>
        </i-col>
        <i-col span="4">
          <div class="status_total status_close">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="md-power" size="44" />
                  <p>关机</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg0 }}</div>
            </div>
          </div>
        </i-col>
      </Row>
      <div v-if="flag == 1" class="machineState">
        <!-- 只有一条产线 -->
        <div
          class="product_line_1"
          v-for="(item, index) in productArr"
          :key="index"
        >
          <div class="product_line_title">
            <div class="product_line_title_1">{{ item.title }}</div>
            <div class="product_line_title_2">
              <img src="/static/images/f.jpg" />
              <span>设备运行状态</span>
            </div>
            <div class="product_line_title_3">
              <img src="/static/images/p.jpg" />
              <span>时间稼动率</span>
            </div>
          </div>
          <div
            v-for="(v, k) in item.arr"
            :key="k"
            class="product_line_item"
            :style="{
              left: v.x + '%',
              top: v.y + '%',
              width: v.w + '%',
              height: v.h + '%',
            }"
          >
            <a href="javascript:;" v-if="v.w && v.h">
              <div class="product_line_info">
                <div class="product_line_info_title">
                  {{ v.machine_section_title }}
                </div>
                <div class="product_line_info_icon">
                  <img src="/static/images/m.png" />
                </div>
                <div
                  class="product_line_info_status"
                  :style="{
                    backgroundColor: colorList[v.status]
                      ? colorList[v.status]
                      : '#585858',
                  }"
                >
                  <span class="product_line_info_status_text">{{
                    statusList[v.status] ? statusList[v.status] : "关机"
                  }}</span>
                </div>
                <div class="product_line_info_footer">
                  <div class="product_line_info_footer_text">
                    <span>{{ v.time_lag }}%</span>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div v-if="flag == 2" class="machineState">
        <!-- 有两条产线 -->
        <div
          class="product_line_2"
          v-for="(item, index) in productArr"
          :key="index"
        >
          <div class="product_line_title">
            <div class="product_line_title_1">{{ item.title }}</div>
            <div class="product_line_title_2">
              <img src="/static/images/f.jpg" />
              <span>设备运行状态</span>
            </div>
            <div class="product_line_title_3">
              <img src="/static/images/p.jpg" />
              <span>时间稼动率</span>
            </div>
          </div>
          <div
            v-for="(v, k) in item.arr"
            :key="k"
            class="product_line_item"
            :style="{
              left: v.x + '%',
              top: v.y + '%',
              width: v.w + '%',
              height: v.h + '%',
            }"
          >
            <a href="javascript:;" v-if="v.w && v.h">
              <div class="product_line_info">
                <div class="product_line_info_title">
                  {{ v.machine_section_title }}
                </div>
                <div class="product_line_info_icon">
                  <img src="/static/images/m.png" />
                </div>
                <div
                  class="product_line_info_status"
                  :style="{
                    backgroundColor: colorList[v.status]
                      ? colorList[v.status]
                      : '#585858',
                  }"
                >
                  <span class="product_line_info_status_text">{{
                    statusList[v.status] ? statusList[v.status] : "关机"
                  }}</span>
                </div>
                <div class="product_line_info_footer">
                  <div class="product_line_info_footer_text">
                    <span>{{ v.time_lag }}%</span>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出框 -->
    <Modal :styles="setting" v-model="setModal" footer-hide>
      <p slot="header">
        <span>请选择要跳转的组合</span>
      </p>
      <div class="modal_body" style="max-height: 160px; overflow-y: auto">
        <List size="small">
          <ListItem v-for="(v, i) in combList" :key="i">
            <span class="setItem" @click="play(v.id)">{{ v.title }}</span>
          </ListItem>
        </List>
      </div>
    </Modal>
  </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";

export default {
  inject: ["reload"],
  data() {
    return {
      combList: [],
      setModal: false,
      imgLogo: require("../../../static/images/siger.png"),
      nowTime: moment(new Date().getTime()).format("YYYY-MM-DD"),
      top: {
        ctg0: 0,
        ctg1: 0,
        ctg2: 0,
        ctg3: 0,
        ctg4: 0,
      },
      // 产线条数
      flag: 0,
      // 渲染数据主体
      productArr: [],
      // 背景颜色列表
      colorList: ["#C6C5CB", "#5CB85C", "#5AADF5", "#F0AD4E", "#D9534F"],
      // 状态列表
      statusList: ["关机", "运行", "调试", "空闲", "报警"],
    };
  },
  computed: {
    ...mapState(["user"]),
    combId() {
      return this.$route.query.combId;
    },
    title() {
      return this.$route.query.title;
    },
    setting() {
      return {
        position: "fixed",
        top: "50px",
        right: "50px",
        width: "250px",
      };
    },
  },
  created() {
    if (this.user.logo) {
      this.imgLogo = this.user.logo;
    }
  },
  mounted() {
    const _this = this;
    let query = _this.$route.query;
    let params = {
      patial_code: query.patial_code,
      page_id: query.pageId,
      projectid: _this.user.projectId,
    };
    _this.axios
      .request({
        url: "/dashboard/DashboardShow/getalldata",
        params,
        method: "get",
      })
      .then((res) => {
        let result = res.data;
        if (result.ret == 1) {
          _this.render_1(result.data);
          _this.render_2(result.data);
        } else {
          _this.$Message.error(_this.$t("" + result.msg));
        }
      });
  },
  methods: {
    openSet() {
      const _this = this;
      _this.axios
        .request({
          url: "/dashboard/DashboardConfig/GetCombList",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.combList = result.data_comb;
            _this.setModal = true;
          }
        });
    },
    // 页面播放
    play(combId) {
      const _this = this;
      let params = {
        id: combId,
        projectid: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/dashboard/DashboardShow/getallcombpages",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$router.replace({ name: "8000063", query: { combId } });
            _this.reload();
          }
        });
    },
    // 渲染头部信息
    render_1(res) {
      let ctg0 = 0,
        ctg1 = 0,
        ctg2 = 0,
        ctg3 = 0,
        ctg4 = 0;
      if (res.last_data && res.last_data.data.length) {
        res.last_data.data.forEach((ele, i) => {
          if (res.listAll[ele.machineId]) {
            switch (ele.staus) {
              case 0:
                ctg0++;
                break;
              case 1:
                ctg1++;
                break;
              case 2:
                ctg2++;
                break;
              case 3:
                ctg3++;
                break;
              case 4:
                ctg4++;
                break;
            }
          }
        });
      }
      let top = {};
      top.ctg0 = ctg0;
      top.ctg1 = ctg1;
      top.ctg2 = ctg2;
      top.ctg3 = ctg3;
      top.ctg4 = ctg4;
      this.top = top;
    },
    // 渲染主体信息
    render_2(res) {
      // 对返回的数据进行验证，防止 null 或者 undefined 打点调用报错
      if (!res.product) {
        return false;
      }
      // 拿到当前组件实例
      const _this = this;
      // z 用来判断返回的数据有几条产线
      let z = 0;
      // 数组用来渲染页面数据
      let productArr = [];

      // 中间过渡对象
      let datas = {};
      // 遍历返回的数据将数据组装成可以直接使用的结构
      $.each(res.product, function (k, v) {
        let datass = [];
        let name = "";
        $.each(v, function (key, val) {
          name = val.production_section_title;
          datass.push(val);
        });
        if (!datass.length) {
          return false;
        }
        datas[name] = datass;
        // productArr 数组的子项
        let product = {};
        product.title = name;
        product.arr = datass;
        productArr.push(product);
      });
      // 遍历组装后的数据判断应该在页面上动态生成 1 或 2 条产线
      for (let key in datas) {
        if (datas[key].length) {
          z++;
        }
      }
      // 判断应该渲染几条产线
      if (z == 2) {
        // 有两条产线
        _this.flag = 2;
      } else if (z == 1) {
        // 有一条产线
        _this.flag = 1;
      } else {
        // 没有产线
        _this.flag = 0;
      }
      _this.productArr = productArr;
    },
    // 返回
    back() {
      this.$router.go(-1);
    },
  },
  beforeRouteEnter(to, from, next) {
    if (from.path == "/") {
      next((vm) => {
        vm.$router.replace({ name: "8000063", query: { combId: vm.combId } });
      });
      return false;
    }
    next();
  },
};
</script>
<style lang="less" scoped>
.product_line_item {
  position: absolute;

  a {
    color: #fff;

    .product_line_info {
      height: 100%;
      cursor: pointer;

      .product_line_info_title {
        color: #b1e2ff;
        font-size: 16px;
        height: 20%;
        text-align: center;
        font-weight: bold;
      }
      .product_line_info_icon {
        float: left;
        width: 65%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 95%;
          height: 95%;
        }
      }

      .product_line_info_status {
        width: 30%;
        height: 30%;
        float: right;
        font-size: 14px;
        text-align: center;
        line-height: 50%;

        .product_line_info_status_text {
          position: relative;
          top: 45%;
        }
      }

      .product_line_info_footer {
        float: right;
        width: 30%;
        height: 50%;
        margin-top: 5%;

        .product_line_info_footer_text {
          font-size: 16px;
          font-weight: bold;
          background-color: #ffff00;
          color: #000;
          border-radius: 50%;
          height: 80%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

.product_line_title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  font-weight: bold;
  font-size: 20px;

  .product_line_title_1 {
    margin-left: 24px;
    line-height: 40px;
    color: #fff;
  }

  .product_line_title_2 {
    margin-left: 4%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
      margin-right: 8px;
    }

    span {
      color: #fff;
    }
  }

  .product_line_title_3 {
    margin-left: 4%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
      margin-right: 8px;
    }

    span {
      color: #fff;
    }
  }
}

.product_line_2 {
  padding: 32px 24px;
  background: url(/static/images/u9.png) center center no-repeat;
  background-size: 100% 100%;
  position: relative;
  width: 48%;
  height: 100%;
  margin-left: 20px;
}

.product_line_1 {
  padding: 32px 24px;
  background: url(/static/images/u9.png) center center no-repeat;
  background-size: 100% 100%;
  position: relative;
  width: 100%;
  height: 100%;
  margin-left: 20px;
}

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

.status_total {
  width: 175px;
}

.status_total_left {
  width: 75px;
  height: 75px;
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status_total_left div {
  height: 75%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.status_total_right {
  width: 100px;
  text-align: center;
  height: 75px;
  line-height: 75px;
  background-color: #021d35;
  color: #ffffff;
  font-size: 28px;
}

.status_normal > div {
  display: flex;
  border: 2px solid #5db75d;
}

.status_normal .status_total_left {
  background-color: #5db75d;
}

.status_manual > div {
  display: flex;
  border: 2px solid #5babe0;
}

.status_manual .status_total_left {
  background-color: #5babe0;
}

.status_free > div {
  display: flex;
  border: 2px solid #efad4d;
}

.status_free .status_total_left {
  background-color: #efad4d;
}

.status_danger > div {
  display: flex;
  border: 2px solid #d9524b;
}

.status_danger .status_total_left {
  background-color: #d9524b;
}

.status_close > div {
  display: flex;
  border: 2px solid #c6c5cb;
}
.status_close .status_total_left {
  background-color: #c6c5cb;
}

@font-face {
  font-family: "DS-DIGII";
  src: url(../../../static/font/DS-DIGI.TTF) format("truetype");
}

.testdiv {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  background-image: url("../../../static/images/u0.png");
  background-size: 100% 100%;
  padding: 11px;
  box-sizing: border-box;
  overflow-y: auto;
}

.top_title {
  width: 100%;
  height: 106px;
  background: url("../../../static/images/u2.png") center center no-repeat;
  background-size: 81.25% 100%;
  padding: 0 25px 0 40px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  font-size: 59px;
  color: #fff;
  font-weight: bold;
  line-height: 100px;
  position: relative;
  font-style: italic;

  .logo {
    width: 200px;
    height: 60px;
    float: left;
    margin-top: 27px;
    cursor: pointer;
  }

  .times_bg {
    width: 200px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    float: right;
    background: url("../../../static/images/u4.png") center center no-repeat;
    background-size: 100% 40px;
    margin-top: 34px;
  }
}

.middle_bottom {
  margin-top: 24px;
  padding: 0 24px;
  height: 85%;

  .machineState {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
    width: 100%;
    height: 85%;
  }
}

::-webkit-scrollbar {
  display: none;
}
.setting {
  display: inline-block;
  position: fixed;
  right: 20px;
  top: -20px;
  img {
    width: 40px;
    cursor: pointer;
  }
}
.setItem {
  font-size: 14px;
  cursor: pointer;
}
.setItem:hover {
  color: #2d8cf0;
  font-weight: bold;
}
</style>
