<!-- 总体概览右侧面板 -->
<template>
  <div class="rightSD">
    <!-- 运行监测 -->
    <div class="topBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">运行监测</div>
      </div>
      <div class="topContent">
        <!-- 结构监测 -->
        <div class="jcBox">
          <div class="jcBox_Header">
            <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
            <span class="jcBox_HeaderFont">结构监测</span>
          </div>
          <div class="jcBox_Content jgBox">
            <div class="jcInfo" v-for="(item, index) in jgjcTitle" :key="item.code">
              <div class="jcInfo_title">{{ item.name }}</div>
              <div class="jcInfo_state" :class="jgjcData[item.code] == '1' ? '' : 'active'">
                <div class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'active'"></div>
                {{ jgjcData[item.code] == '1' ? '正常' : '异常' }}
              </div>
              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
            </div>
          </div>
        </div>
        <!-- 通行监测 -->
        <div class="jcBox txBox">
          <div class="jcBox_Header">
            <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
            <span class="jcBox_HeaderFont">通行监测</span>
          </div>
          <div class="lineBox">
            <twoLine :echartData="lineData" :refresh="chartRefresh" />
          </div>
        </div>
        <!-- 突发事件监测 -->
        <div class="jcBox">
          <div class="jcBox_Header">
            <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
            <span class="jcBox_HeaderFont">结构监测</span>
          </div>
          <div class="jcBox_Content">
            <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
              <img :src="item.icon" alt="" class="tfInfo_icon" />
              <div class="tfInfo_title">{{ item.name }}</div>
              <div class="tfInfo_state" :class="tfjcData[item.code] == '0' ? '' : 'active'">
                {{ tfjcData[item.code] == '1' ? '有' : '无' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 检测评估 -->
    <div class="bottomBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">检测评估</div>
        <img src="@/assets/tunnelImg/bg_img.png" alt="" class="ListBoxHeader_img" />
      </div>
      <div class="bottomContent">
        <div class="contentTop">
          <div class="pgBox">
            <div class="pgInfo">
              <div>{{ assessment.update.slice(0, 4) }}年</div>
              <div>{{ assessment.update.slice(5, 7) }}月{{ assessment.update.slice(8) }}日</div>
            </div>
            <div class="pgTitle">最近一次检测</div>
          </div>
          <div class="pgBox">
            <div class="pgInfo">
              <div>{{ assessment.state }}</div>
            </div>
            <div class="pgTitle">整体工作性能</div>
          </div>
          <div class="pgBox">
            <div class="pgInfo">
              <div>{{ assessment.level }}</div>
            </div>
            <div class="pgTitle">技术状况等级</div>
          </div>
        </div>
        <div class="contentBottom">
          <div>检测单位</div>
          <div class="pgCompany">{{ assessment.company }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="rightSD">
import twoLine from './components/twoLine.vue';
import { ref, reactive, toRefs, onMounted } from 'vue';

import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
import czsj from '@/assets/newImgs/czsj.png'; //处置数据
import czl from '@/assets/newImgs/czl.png'; //处置率

import ranqi_icon from '@/assets/newImgs/ranqi_icon.png'; //燃气
import qiaoliang from '@/assets/newImgs/qiaoliang.png'; //桥梁
import sd_icon from '@/assets/newImgs/sd_icon.png'; //隧道
import ps_icon from '@/assets/newImgs/ps_icon.png'; //隧道
import fxzb from '@/assets/newImgs/fxzb.png'; //风险占比

import hz_icon from '@/assets/tunnelImg/hz_icon.png';
import jtsg_icon from '@/assets/tunnelImg/jtsg_icon.png';
import ydqt_icon from '@/assets/tunnelImg/ydqt_icon.png';

let chartRefresh = ref(Math.random());

const assessment = ref({
  update: '2023-11-20',
  state: '良好',
  level: '二类',
  company: '陕西海嵘工程试验检测股份有限公司',
});
const jgjcTitle = [
  { name: '沉降监测', code: 'cj' },
  { name: '滑坡监测', code: 'hp' },
  { name: '收敛监测', code: 'sl' },
  { name: '裂缝监测', code: 'lf' },
  { name: '水位监测', code: 'sw' },
  { name: '应变监测', code: 'yb' },
];
const jgjcData = ref({
  cj: '1',
  hp: '1',
  sl: '0',
  lf: '1',
  sw: '1',
  yb: '1',
});
const tfjcTitle = [
  { name: '火灾', code: 'hz', icon: hz_icon },
  { name: '交通事故', code: 'jt', icon: jtsg_icon },
  { name: '有毒气体', code: 'dq', icon: ydqt_icon },
];
const tfjcData = ref({
  hz: '0',
  jt: '0',
  dq: '0',
});

const lineData = ref({
  tabX: ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7'],
  unit: '辆',
  series: [
    {
      name: '南向北',
      tabY: ['0', '150', '150', '200', '130', '320', '300'],
    },
    {
      name: '北向南',
      tabY: ['100', '200', '200', '150', '240', '240', '180'],
    },
  ],
});

watch(
  () => lineData.value,
  (newVal, oldVal) => {
    // console.log('change', newVal);
    // eData.value = ArrayToObject(newVal.slice(0, 10));
    // eData.value.headerList = headerList.value;
    nextTick(() => {
      chartRefresh.value = Math.random();
    });
    // console.log('obj', rightData.value);
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.rightSD {
  width: 100%;
  height: 100%;
  // box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.topBox {
  width: 100%;
  flex: 1;
  // height: 49%;
  // background: yellowgreen;
  .topContent {
    width: 100%;
    margin: 0px 0 5px;
    height: calc(100% - 49px);
    display: flex;
    flex-direction: column;
    // border: 1px solid red;
    .jcBox {
      width: 100%;
      margin-top: 5px;
      .jcBox_Header {
        height: 24px;
        width: 100%;
        .jcBox_HeaderIcon {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
        .jcBox_HeaderFont {
          display: inline-block;
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 14px;
          color: #ebfeff;
          height: 24px;
          line-height: 24px;
          position: relative;

          &::after {
            content: '';
            width: 60px;
            height: 10px;
            background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
      .jgBox {
        height: 140px;
      }
      .jcBox_Content {
        margin-top: 5px;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: space-between;
        .jcInfo {
          position: relative;
          width: 200px;
          height: 40px;
          background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
          display: flex;
          align-items: center;
          // justify-content: space-between;
          &::before {
            content: '';
            width: 4px;
            height: 40px;
            position: absolute;
            left: 0;
            top: 0;
            background: #00f2ff;
          }
          .jcInfo_title {
            font-weight: bold;
            font-size: 16px;
            color: #ebfeff;
            margin-left: 15px;
          }
          .jcInfo_state {
            display: flex;
            align-items: center;
            color: #00ff9c;
            margin-left: 16px;
            &.active {
              color: #fe667b;
            }
            .jcInfo_stateIcon {
              width: 10px;
              height: 10px;
              background: #00ff9c;
              border-radius: 50%;
              margin-right: 3px;
              &.active {
                background: #fe667b;
              }
            }
          }
          .jcInfo_btn {
            width: 38px;
            height: 21px;
            margin-left: 18px;
            background: #0ea3c3;
            border-radius: 11px;
            font-weight: 500;
            font-size: 14px;
            color: #ebfeff;
            text-align: center;
          }
        }
        .tfInfo {
          width: 136px;
          height: 130px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: url('@/assets/tunnelImg/tfjcBg.png') no-repeat;
          background-size: 100% 100%;
          .tfInfo_icon {
            width: 60px;
            height: 60px;
          }
          .tfInfo_title {
            font-weight: bold;
            font-size: 14px;
            color: #09bdf2;
          }
          .tfInfo_state {
            font-weight: bold;
            font-size: 26px;
            color: #3effb9;
            &.active {
              color: #fe667b;
            }
          }
        }
      }
    }
    .txBox {
      flex: 1;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      .lineBox {
        flex: 1;
        // border: 1px solid red;
      }
    }
  }
}
.bottomBox {
  width: 100%;
  // height: 49%;
  // background: red;
  // border: 1px solid red;
  .bottomContent {
    width: 100%;
    .contentTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 8px 0;
      .pgBox {
        width: 136px;
        height: 130px;
        background: url('@/assets/images/Sponge_screen/QiaoLiang/FBox.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        .pgInfo {
          width: 100%;
          height: 89px;
          display: flex;
          flex-direction: column;
          font-weight: bold;
          font-size: 20px;
          color: #00f2ff;
          align-items: center;
          justify-content: center;
        }

        .pgTitle {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          height: 14px;
          line-height: 14px;
          // border: 1px solid red;
        }
      }
    }
    .contentBottom {
      width: 100%;
      height: 39px;
      box-sizing: border-box;
      line-height: 39px;
      background: url('@/assets/images/Sponge_screen/QiaoLiang/CBox.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      padding: 0 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;
      color: #ebfeff;
      .pgCompany {
        color: #00f2ff;
        margin-left: 20px;
      }
    }
  }
}
.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // margin: 7px 0px 0px 8px;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
  .ListBoxHeader_img {
    width: 23px;
    height: 27px;
    margin-right: 5px;
  }
}
</style>