<template>
  <div class="tree">
    <ul>
      <li>
        <span>
          <productionEvents :productionEvents="monitorGbdz" />
        </span>
        <ul>
          <li>
            <span>
              <productionEvents :productionEvents="monitorKsjg" />
            </span>
            <ul>
              <li>
                <span>
                  <div class="fluid">A流</div>
                </span>
                <ul>
                  <li>
                    <span>
                      <productionEvents :productionEvents="monitorAjzks" />
                    </span>
                    <ul>
                      <li>
                        <span>
                          <productionEvents :productionEvents="monitorAlcjzks" />
                        </span>
                        <ul>
                          <li>
                            <span>
                              <productionEvents :productionEvents="monitorAlcjzjs" />
                            </span>
                            <ul>
                              <li>
                                <span>
                                  <productionEvents :productionEvents="monitorAjzjs" />
                                </span>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li>
                <span>
                  <div class="fluid">B流</div>
                </span>
                <ul>
                  <li>
                    <span>
                      <productionEvents :productionEvents="monitorBjzks" />
                    </span>
                    <ul>
                      <li>
                        <span>
                          <productionEvents :productionEvents="monitorBlcjzks" />
                        </span>
                        <ul>
                          <li>
                            <span>
                              <productionEvents :productionEvents="monitorBlcjzjs" />
                            </span>
                            <ul>
                              <li>
                                <span>
                                  <productionEvents :productionEvents="monitorBjzjs" />
                                </span>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <div class="styleGblz">
      <productionEvents :productionEvents="monitorGblz" class="styleGblzSmall" />
    </div>
  </div>
</template>

<script setup>
import productionEvents from "./productionEvents.vue";
import { event } from "@/api/digitalCasting/monitor/schedule";
// 钢包到站
let monitorGbdz = ref({})
//开始浇灌
let monitorKsjg = ref({})
//A浇铸开始
let monitorAjzks = ref({})
//A炉次浇铸开始
let monitorAlcjzks = ref({})
//A炉次浇铸结束
let monitorAlcjzjs = ref({})
//A浇铸结束
let monitorAjzjs = ref({})
//B浇铸开始
let monitorBjzks = ref({})
//B炉次浇铸开始
let monitorBlcjzks = ref({})
//B炉次浇铸结束
let monitorBlcjzjs = ref({})
//B浇铸结束
let monitorBjzjs = ref({})
//钢包离站
let monitorGblz = ref({})
let executeFun = () => {
  event().then(res => {
    // 钢包到站
    monitorGbdz.value.title = '钢包到站'
    monitorGbdz.value.icon = 'whiteFlag'
    monitorGbdz.value.triangleSwitch = false
    monitorGbdz.value.stateParameters = res.data.arriveList.length
    monitorGbdz.value.contentArr = res.data.arriveList
    //开始浇灌
    monitorKsjg.value.title = '开始浇铸'
    monitorKsjg.value.icon = 'startWatering'
    monitorKsjg.value.triangleSwitch = true
    monitorKsjg.value.stateParameters = res.data.arriveList.length
    monitorKsjg.value.contentArr = res.data.arriveList
    //A浇铸开始
    monitorAjzks.value.title = '铸流开始'
    monitorAjzks.value.icon = 'startOfCasting'
    monitorAjzks.value.triangleSwitch = true
    monitorAjzks.value.stateParameters = res.data.alist[30].length
    monitorAjzks.value.contentArr = res.data.alist[30]
    //A炉次浇铸开始
    monitorAlcjzks.value.title = '炉次浇铸开始'
    monitorAlcjzks.value.icon = 'pouringLoding'
    monitorAlcjzks.value.triangleSwitch = true
    monitorAlcjzks.value.stateParameters = res.data.alist[32].length
    monitorAlcjzks.value.contentArr = res.data.alist[32]
    //A炉次浇铸结束
    monitorAlcjzjs.value.title = '炉次浇铸结束'
    monitorAlcjzjs.value.icon = 'pouringLoding'
    monitorAlcjzjs.value.triangleSwitch = true
    monitorAlcjzjs.value.stateParameters = res.data.alist[33].length
    monitorAlcjzjs.value.contentArr = res.data.alist[33]
    //A铸流结束
    monitorAjzjs.value.title = '铸流结束'
    monitorAjzjs.value.icon = 'endOfCasting'
    monitorAjzjs.value.triangleSwitch = true
    monitorAjzjs.value.stateParameters = res.data.alist[31].length
    monitorAjzjs.value.contentArr = res.data.alist[31]
    //B浇铸开始
    monitorBjzks.value.title = '铸流开始'
    monitorBjzks.value.icon = 'startOfCasting'
    monitorBjzks.value.triangleSwitch = true
    monitorBjzks.value.stateParameters = res.data.blist[30].length
    monitorBjzks.value.contentArr = res.data.blist[30]
    //B炉次浇铸开始
    monitorBlcjzks.value.title = '炉次浇铸开始'
    monitorBlcjzks.value.icon = 'pouringLoding'
    monitorBlcjzks.value.triangleSwitch = true
    monitorBlcjzks.value.stateParameters = res.data.blist[32].length
    monitorBlcjzks.value.contentArr = res.data.blist[32]
    //B炉次浇铸结束
    monitorBlcjzjs.value.title = '炉次浇铸结束'
    monitorBlcjzjs.value.icon = 'pouringLoding'
    monitorBlcjzjs.value.triangleSwitch = true
    monitorBlcjzjs.value.stateParameters = res.data.blist[33].length
    monitorBlcjzjs.value.contentArr = res.data.blist[33]
    //B铸流结束
    monitorBjzjs.value.title = '铸流结束'
    monitorBjzjs.value.icon = 'endOfCasting'
    monitorBjzjs.value.triangleSwitch = true
    monitorBjzjs.value.stateParameters = res.data.blist[31].length
    monitorBjzjs.value.contentArr = res.data.blist[31]
    //钢包离站
    monitorGblz.value.title = '钢包离站'
    monitorGblz.value.icon = 'whiteFlag'
    monitorGblz.value.triangleSwitch = false
    monitorGblz.value.stateParameters = res.data.leaveList.length
    monitorGblz.value.contentArr = res.data.leaveList
  })
}
executeFun()
</script>
<style lang="scss" scoped>
/*Now the CSS*/
* {
  margin: 0;
  padding: 0;
}

.tree ul {
  padding-top: 40px;
  position: relative;
  overflow: auto;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 40px 5px 0 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px dashed rgba(145, 184, 242, 1);
  width: 50%;
  height: 40px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px dashed rgba(145, 184, 242, 1);
}

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}

.tree ul>li:only-child {
  padding-top: 0;
}

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}

.tree li:last-child::before {
  border-right: 1px dashed rgba(145, 184, 242, 1);
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px dashed rgba(145, 184, 242, 1);
  width: 0;
  height: 40px;
}

.tree li span {
  padding: 5px 60px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;

  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li span:hover+ul li::after,
.tree li span:hover+ul li::before,
.tree li span:hover+ul::before,
.tree li span:hover+ul ul::before {
  border-color: #94a0b4;
}

.fluid {
  display: inline-block;
  width: 45px;
  height: 24px;
  line-height: 24px;
  color: rgba(255, 255, 255, 1);
  background: rgba(232, 51, 51, 1);
  border-radius: 17px;
}

.styleGblz {
  width: 100%;
  margin-top: 70px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;

  .styleGblzSmall {
    margin-top: 50px;
  }

}</style>
