<template>
  <div>
  <div class="port-change">
    <div class="title" v-if="dateAllList.length > 0">端口变化</div>
    <YaEmpty  v-if="dateAllList.length == 0"></YaEmpty>
    <div class="serach flex-bt-center" v-if="dateAllList.length > 0">
      <div class="flex-st-center">
        <div class="flex-st-center">
          <div class="open"></div>
          <div>端口状态：开</div>
        </div>
        <div class="flex-st-center">
          <div class="close"></div>
          <div>端口状态：关</div>
        </div>
      </div>
      <div class="flex-st-center">
        <el-input v-model="port" class="input" placeholder="请输入端口" :prefix-icon="Search"/>
        <ya-button @click="getList('')" type="primary">查询</ya-button>
        <ya-button @click="getList('init')">重置</ya-button>
      </div>
    </div>
    <div class="yaBox" v-if="dateAllList.length > 0">
      <div>
        <div class="header-left">
          <div class="date">日期</div>
          <div class="port">端口</div>
        </div>
        <div class="header-left-content" v-for="item in list">
          {{item.port}}
        </div>
        <div class="header-left-content header-left-bottom">时间选择</div>
      </div>
      <div>
        <div class="ya-right" id="yaBox" :style="{height:scroolHeight +'px'}">
        <div class="ya-right-content" v-drag id="yaContent">
          <div class="positionRelative">
            <div class="header" >
                <div class="header-item" v-for="item in dateAllList">
                  <div class="header-top" >
                    <el-tooltip
                      v-if="item.children.length < 4"
                      effect="dark"
                      :content="item.YEAR + '年' + item.MONTH + '月'"
                      placement="top"
                    >
                    <div class="box-item" :class="item.children.length == 3 ? 'header-top-three':item.children.length == 2 ? 'header-top-two':'header-top-one'">{{item.YEAR}}年{{item.MONTH}}月</div>
                    </el-tooltip>
                    <div class="box-item" v-else>{{item.YEAR}}年{{item.MONTH}}月</div>
                  </div>
                  <div class="ya-right_time">
                    <div
                      draggable="false"
                      class="ya-item"
                      v-for="(jitem, i) in item.children"
                      :key="i"
                    >
                      {{jitem.DAY}}
                    </div>
                  </div>
                </div>
            </div>
            <div class="positionRelative"  v-for="jitem in list">
              <div class="flex-st justCenter1">
                <div class="header-item" v-for="item in dateAllList">
                  <div class="ya-right_time">
                    <div
                      class="ya-item1"
                      v-for="(jitem, i) in item.children"
                      :key="i"
                    >
                    </div>
                  </div>
                </div>
                <!-- <div class="ya-item-icon1-item" v-for="(item, i) in choseDateList"></div> -->
                <!-- <div class="ya-item-icon1-item"></div> -->
                <!-- <div class="ya-item-icon1-item"></div> -->
              </div>
              <div class="flex-st positionAbsoulte ya-right_time2">
                <div class="ya-right_time">
                  <div v-for="(item, i) in jitem.statusList" :key="i">
                    <el-popover
                    v-if="item.status == 'survive' || item.status == 'offLine'"
                    placement="top-start"
                    :width="200"
                    trigger="hover"
                    ref="popover"
                  >
                    <template #reference>
                      <div
                        draggable="false"
                        class="ya-item-icon1"
                        :class="item.status == 'survive' ?'active': item.status == 'offLine' ? 'close' : ''"
                        :style="{ width: getTime(item) + 'px' }"
                        :key="i"
                      ></div>
                    </template>
                    <template #default>
                      <div>
                        <div class="port-title">
                          <span></span>
                          <div>端口：{{jitem.port}}</div>
                        </div>
                        <div class="port-content">
                          {{item.startTime}}至{{item.endTime}}处于{{item.status == 'survive'? '开启': item.status == 'offLine'? '关闭': ''}}状态
                        </div>
                      </div>
                    </template>
                  </el-popover>
                  <div
                    v-else
                    draggable="false"
                    class="ya-item-icon1"
                    :style="{ width: getTime(item) + 'px' }"
                    :key="i"
                  ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ya-scroll">
        <div class="ya-scroll-bar" id="yaScrollBar1">
          <div class="ya_dot" v-dragScoll id="yaScrollBar"></div>
        </div>
      </div>
      </div>
      
    </div>
    <div class="page" v-if="dateAllList.length > 0">
      <YaPagination
        :current-page="currentPage"
        v-model="currentPage"
        small
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :pager-count="pagerCount"
      >
      </YaPagination>
    </div>
  </div>
</div>
</template>
<script setup lang="ts">
import directive from "./index";
import { onMounted, onBeforeUnmount, watch, ref, nextTick } from "vue";
import { Search } from '@element-plus/icons-vue'
import { portChange, portDate } from "../../../api/screen/index";
import { useRoute, useRouter } from "vue-router";
const Route = useRoute();
const vDrag = directive.drag;
const vDragScoll = directive.dragScoll;
const childrenLength = ref(0);
const scroolHeight = ref(100)
const port = ref('')
const list = ref([]);
let dateList = [];
const choseDateList = ref([])
const dateAllList = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const pagerCount = ref(7)
const total = ref(0)
const hostAssetCode = ref(Route.query.code);
const popover = ref();

/**
 * @description 重置状态非none数据且天数小于4的数据宽度
 */
const getTime = (e) => {
  return e.durationHours
};
/**
 * @description 处理日期格式
 */
const arrayToTree = () => {
  var afterData = []
  dateList.forEach(item => {
    let flag = afterData.find(item1 => item1.YEAR === item.YEAR && item1.MONTH == item.MONTH)
    if (!flag) {
      afterData.push({
        YEAR: item.YEAR,
        MONTH: item.MONTH,
        children: [item]
      })
    } else {
      flag.children.push(item)
    }
  })
  return afterData
}
/**
 * @descripiton 分页
 */
const handleSizeChange = (e)=> {
  console.log(e)
  pageSize.value = e;
  getList('')
}
/**
 * @descripiton 切换当前页
 */
const handleCurrentChange = (e) => {
  currentPage.value = e;
  getList('')
}
/**
 * @description 重置列表数据
 */
const getDataList = async () => {
  let res = await portDate({});
  if (res.data.length > 0) {
    dateList = res.data.map((item,index)=>{
      let jitem = JSON.parse(JSON.stringify(item))
      let time = jitem.split('-');
      return {
        id: index,
        TragetTime: item,
        YEAR: time[0],
        MONTH: time[1],
        DAY:  time[2],
      }
    })
    choseDateList.value = dateList;
    dateAllList.value = arrayToTree();
    nextTick(()=>{
      scroolHeight.value = document.getElementById("yaContent")!.scrollHeight;
      popover.value&&popover.value.forEach((item)=>{
        item.popover?.updatePopper()
      })
    })
  } else {
    dateList = [];
    choseDateList.value = [];
    dateAllList.value = [];
  }
}
/**
 * @descripiton 获取列表数据
 */
const getList = async(type) => {
  dateAllList.value = []
  if(type == 'init') {
    port.value = '';
    currentPage.value = 1;
  }
  let parms = {
    port: port.value,
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    hostAssetCode: hostAssetCode.value
  }
  let res = await portChange(parms);
  console.log(res)
  const { code, data} = res;
  if(code == 200) {
    list.value = data.records || [];
    total.value = data.total;
  }
  if (data.records.length == 0) return
  getDataList()

}
  getList('')
</script>
<style scoped lang="scss">
div {
  box-sizing:border-box;
}
.positionRelative {
  position: relative;
}
.positionAbsoulte {
  position: absolute;
}
.ya-right_time1 {
  width: 100%;
  height: 32px;
}
.ya-right_time2 {
  top: 10px;
  left: 0;
}
.port-change {
  background: #fff;
  padding: 16px;
  .title {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,0.8);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 11px;
    margin-bottom: 16px;
  }
  .serach {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,0.8);
    margin-bottom: 16px;
    .open {
      width: 12px;
      height: 12px;
      background: #0095FF;
      margin-right: 8px;
    }
    .close {
      width: 12px;
      height: 12px;
      background: #E8E8E8;
      margin-right: 8px;
      margin-left: 24px;
    }
    .input {
      margin-right: 20px;
    }
  }
}
.flex-st-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-bt-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yaBox {
  color: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  .ya-right {
    width: calc(100vw - 345px);
    // width: 600px;
    border: 1px solid #e0e0e0;
    display: flex;
    overflow: hidden;
    position: relative;
    height: 100px;
    box-sizing: border-box;
    // border-right: 0;
    .ya-right-content {
      position: absolute;
      right: 0;
    }
    .ya-right_time {
      display: flex;
      overflow: hidden;
      // min-width: 96px;
      // align-items: center;
    }
    .flex-st {
      display: flex;
      overflow: hidden;
    }
    .ya-item {
      text-align: center;
      border: 1px solid #e0e0e0;
      border-top: 0;
      border-left: 0;
      min-width: 24px;
      -moz-user-select: none;
      /* Safari 和 欧朋 */
      -webkit-user-select: none;
      /* IE10+ and Edge */
      -ms-user-select: none;
      /* Standard syntax 标准语法(谷歌) */
      user-select: none;
      height: 22px;
    }
    .ya-item-con1 {
      min-width: 96px;
    }
    .ya-item-con2 {
      min-width: 48px;
    }
    .ya-item-con2 {
      min-width: 48px;
    }
    .ya-item-con3 {
      min-width: 32px;
    }
    .ya-item-icon {
      width: 100%;
      height: 12px;
      position: absolute;
      top: 3px;
      background: rgba(0, 0, 0, 0.05);
    }
    .ya-item-icon1 {
      width: 24px;
      height: 12px;
    }
    .close {
      background: rgba(0,0,0,0.08);
      position: relative;
      top: 1px;
    }
    .close:hover {
      background: #DADADA !important;
    }
    .active {
      background: rgba(0,149,255,0.4);
      border: 1px solid rgba(0,149,255,0.6);
    }
    .active:hover {
      background: #0095FF;
      border: 1px solid rgba(0,149,255,0.6);
    }
    .ya-item-icon1-item {
      height: 32px;
      min-width: 24px;
      border: 1px solid #e0e0e0;
      border-top: 0;
      border-left: 0;
    }
 
    :last-child.ya-item-icon1-item {
      // border-right: 0;
    }
  }
  .ya-item1 {
    height: 32px !important;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-top: 0;
    border-left: 0;
    min-width: 24px;
  }
  .ya-right_time .ya-item1:last-child{
    // border-right: 0;
  }
 
  .ya-scroll {
    width: calc(100vw - 345px);
    // width: 598px;
    height: 30px;
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-top: 0;
    .ya-scroll-bar {
      height: 14px;
      width: 100%;
      // border: 1px dashed;
      border-color: #fff;
      position: relative;
      .ya_dot {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 14px;
        width: 40px;
        background: #EBF7FF;
        border: 1px solid #C7E8FF;
      }
    }
  }
}
.header {
  display: flex;
  justify-content: space-between;
  .header-top {
    box-sizing: border-box;
    background: rgba(0,0,0,0.02);
    // min-width: 24px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #e0e0e0;
    border-top: 0;
    border-left: 0;
    text-align: center;
    color: rgba(0,0,0,0.8);
    font-weight: 400;
  }
  .box-item {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap;  // 默认不换行；
  }
  .header-top-two {
    width: 47px;
  }
  .header-top-one {
    width: 23px;
  }
  .header-top-three {
    width: 71px;
  }
}
.header-left {
  display: flex;
  position: relative;
  min-width: 108px;
  height: 54px;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  border-right: 0;
  background:linear-gradient(26deg,rgba(0,0,0,0.02) 49.5%,#e0e0e0 49.5%,#e0e0e0 50.5%,rgba(0,0,0,0.02) 50.5%);
  div {
    position: absolute;
  }
  .date {
    top: 6px;
    right: 9px;
  }
  .port {
    bottom: 8px;
    left: 8px;
  }
}
.header-left-content {
  border: 1px solid #e0e0e0;
  height: 32px;
  line-height: 32px;
  min-width: 27px;
  border-top: 0;
  border-right: 0;
  text-align: center;
}
.header-left-bottom {
  height: 30px;
  line-height: 30px;
}

.port-title {
  display: flex;
  align-items: center;
  span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #0095FF;
    margin-right: 6px;
  }
  font-weight: 500;
  color: rgba(0,0,0,0.8);
  font-size: 16px;
}
.port-content {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(0,0,0,0.6);
}
.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.ya-right-content .header-item:last-child .ya-right_time .ya-item1:last-child {
  border-right: 0;
 }
.justCenter1  {
  justify-content: space-between !important;
}
</style>
