<template>
  <Module class="flex-grow baseStructinfo-yh" :loading="loading" :error="error" :info="bsMeta && bsMeta['utilities']">
    <template #title class="chief-facility">
      监控平台实时状态
      <div class="detail-skip">
        <el-popover placement="right" width="480" trigger="focus" :visible="visible" popper-class="self-pop">
          <div class="search-wrap">
            <span>机电设备类型</span>
            <el-input placeholder="请输入关键词" style="width: 200px" @change="changeElekeyword" v-model="keyword"
              size="small" />
            <el-select v-model="value" size="small" @change="toEqDetail" placeholder="设备系统" style="width: 100px">
              <el-option v-for="(item, index) in options" :key="index" :label="item.text || ''" :value="item.value" />
            </el-select>
          </div>

          <div style="height: 300px;" class="inner-table">
            <!-- 路段 -->
            <div class="basetable">
              <div class="bt-head">
                <div>所属路段</div>
                <div>设备名称</div>
                <div>所属组织</div>
                <div>状态</div>
              </div>
              <div class="list-out" style="">
                <div class="bt-item" v-for="item in gridData.datalist" :key="item">
                  <div>{{ item.sectionName }}</div>
                  <div>{{ item.deviceName }}</div>
                  <div>{{ item.orgName }}</div>
                  <div>{{ item.deviceStatus }}</div>
                </div>
              </div>
            </div>
          </div>
          <el-pagination class="right" small layout="prev, pager, next" @current-change="handleCurrentChange"
            :page-size="pageData.size" :current-page="pageData.current" :total="pageData.total" />
          <template #reference>
            <span class="btnbg" @click="toDetail()"> 异常设备详情 &nbsp;&nbsp;<i class="el-icon-caret-right"></i></span>
          </template>
        </el-popover>
      </div>
    </template>

    <!-- <template> -->
    <div style="height: 300px; flex: 1">
      <!-- 路段 -->
      <div class="basetable">
        <div class="bt-head">
          <div>所属组织</div>
          <div>设备正常率</div>
          <div>正常数量/设备总数</div>
        </div>
        <div class="list-out">
          <vue-seamless-scroll :data="data.dataList.length>5?data.dataList:[]">
            <div class="bt-item" v-for="item in data.dataList" :key="item">
              <div>{{ item.name }}</div>
              <div>{{ item.percent }}</div>
              <div>{{ item.okAll }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <!-- </template> -->
  </Module>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, watch } from "vue";
import { useStore } from "vuex";
import { key } from "@/store";
import { sxEqStatus2, sxEqStatus } from "@/api/ele-control-cabin";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";

// import * as businessApi from '@/api/businessOverview'
const store = useStore(key);
const refresh = computed(() => store.state.ele?.refresh);
const orgCode = computed(() => store.state.ele?.orgCode);
const orgType = computed(() => store.state.ele?.orgType);
const pOrg = computed(() => store.state.ele?.pOrg);
const visible = ref(false)

const data = reactive({
  dataList: [],
});
const pageData = reactive({
  size: 10,
  current: 1,
  total: 0,
});
const gridData = reactive({
  datalist: []
})
const options = [
  {
    value: '隧道机电系统',
    label: '隧道机电系统'
  },
  {
    value: '监控系统',
    label: '监控系统'
  }
]
const keyword = ref('')
const value = ref('隧道机电系统')
const getData = async () => {
  let params = {};
  if (orgType.value) {
    params = pOrg.value;
  } else {
    params = orgCode.value;
  }
  await sxEqStatus2({
    ...params,
  }).then((res) => {
    if (res.data) {
      res.data.forEach((item: any) => {
        // 贵州暂时无数据，故设置百分比为100%
        if(item.name === '贵州'){ 
          item.percent = "100%";
          item.okAll = "664/664";
        }else if (item.allNum === 0) {
          item.percent = "无数据";
          item.okAll = "无数据";
        } else {
          item.percent =
            Math.round((item.okNum / item.allNum) * 10000) / 100 + "%";
          item.okAll = item.okNum + "/" + item.allNum;
        }
      });
    }
    data.dataList = res.data;
  });
};

watch([refresh], () => {
  getData();
});
//打开异常设备
const toDetail = () => {
  visible.value = !visible.value
  getFilterSxEqStatus();
};
// 翻页
const handleCurrentChange = (current: any) => {
  pageData.current = current;
  getFilterSxEqStatus();
};
// 下拉选择
const toEqDetail = (value) => {
  getFilterSxEqStatus(value);
};
const changeElekeyword = () => {
  // console.log('keyword', this.keyword)
  getFilterSxEqStatus(this.value);
};
const getFilterSxEqStatus = (item: any) => {
  sxEqStatus({
    page: pageData.current,
    typeName: item,
    isFault: 1,
    size: 10,
    keyWord: keyword.value,
   ...orgCode.value
  }).then(({ code, msg, data }) => {
    if (code === 0) {

      Object.assign(pageData, { total: parseInt(data.total) })
      let dataList: any = [];
      data.data.forEach((item) => {
        dataList.push({
          sectionName: item.sectionName,
          deviceName: item.deviceName,
          orgName: item.orgName,
          deviceStatus: item.deviceStatus,
        });
      });
      Object.assign(gridData.datalist, dataList)
    }
  });
};
</script>
<style  lang="scss" >
.self-pop.el-popper.is-light {
  text-shadow: none;
  width: 480px;
  background: #0c3959;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #1a4a72;
  padding: 12px;
  z-index: 2000;
  color: #eaf6ff;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  word-break: break-all;



  .el-pagination .el-pager li {
    background: transparent;
    text-shadow: none;
    color: #ffff;
  }

  ::v-deep(.el-pagination .el-pager li) {
    background: transparent;
    text-shadow: none;
    color: #ffff;
  }

  ::v-deep(.el-pager li.active) {

    color: #409EFF;
    cursor: default;

  }

  .el-pager li.active {
    color: #409EFF;
    cursor: default;
  }

  ::v-deep(.btn-prev, .btn-next) {
    background: transparent;
    text-shadow: none;
    color: #ffff;
  }

  .btn-prev,
  .btn-next {
    background: transparent;
    color: #fff;
  }


}
</style>
<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

.module-box {
  overflow: hidden;
}

.inner-table {
  .list-out {
    overflow: scroll;
    height: vh(280);
  }

  .bt-item {
    line-height: inherit;
  }
}

.chief-facility {
  position: relative;
}

.detail-skip {
  position: absolute;
  right: 20px;
  cursor: pointer;
  top: 0;
}

.f1 {
  flex: 1;
}

.baseStructinfo-yh {
  height: vh(100);
}


.basetable {
  width: 100%;
  padding: 8px 12px;
}

.bt-head {
  padding: 3px;

  & div {
    /* width: 25%; */
    flex: 1;
    text-align: center;
    text-align: center;
    font-size: 12px;
    color: #badeff;
  }

  background: rgba(101, 161, 214, 0.4);
  height: vh(35);
  line-height: vh(35);
  display: flex;
  justify-content: space-between;
}

.list-out {
  height: vh(300);
  overflow: hidden;
}

.bt-item {
  margin-top: 5px;
  padding: 3px;
  column-gap: 5px;
  // height: vh(35);
  line-height: vh(35);

  & div {
    flex: 1;
    /* width: 20%; */
    text-align: center;
    font-size: 12px;
    color: #badeff;
    word-break: break-all;
  }

  border-bottom: 1px solid rgba(0, 132, 251, 0.4);
  display: flex;
  justify-content: space-between;
}

.search-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: #ffff;
  font-size: 12px;

  ::v-deep(.el-input__inner) {
    background: #0c3959;
    border-radius: 4px;
    border: 1px solid #1a4a72;
    color: #ffff;
    font-size: 12px;

  }

  ::v-deep(.el-input--small, .el-select) {
    height: 28px;
    line-height: 28px;
  }

  ::v-deep(.el-input__inner:focus) {
    outline: none;
    border-color: #21aeff;

  }

  text-shadow: none;

  v::deep(.el-input--small .el-input__icon) {
    line-height: 1
  }
}
</style>
