<template>
  <div id="hdsj">
    <div class="panel-left">
      <div class="pl-b1">
        <span class="title1-left">水深管理</span>
        <div v-for="item in data_ssgl.value" class="plb1-item">
          <img :src="item.iconUrl" alt="">
          <div>
            <span>{{ item.title }}</span>
            <div>
              <span>{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pl-b2">
        <span class="title1-left">工程管理</span>
        <span class="title2-left">工程信息</span>
        <div class="plb2-main">
          <div class="plb2-item" v-for="item in listData_gcxx.value">
            <img :src="require('@/assets/imgs/page_hdsj/icon-gcxx.png')" alt="">
            <div>
              <div><span>{{ item.name }}</span></div>
              <div>
                <span>{{ item.date }}</span>
                <span
                  :class="{'status-wks': item.status==='未开始','status-jxz': item.status==='进行中','status-ywc': item.status==='已完成'}"
                >{{ item.status }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pl-b3">
        <span class="title2-left">工程统计</span>
        <div class="plb3-main">
          <div v-for="item in data_gctj.value">
            <div>
              <span>{{ item.year }}:</span>
              <span>{{ item.value }}</span>
              <span>个</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-right">
      <div class="pr-b1 pr">
        <span class="title1-right">疏浚监控</span>
        <span class="title2-right">工程概况</span>
        <div class="part1-item" v-for="item in data_gcgk.sta">
          <img :src="item.iconUrl" alt="">
          <div>
            <span>{{ item.title }}</span>
            <div>
              <span>{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
        <div class="part2">
          <template v-for="item,index in data_gcgk.cata">
            <div class="part2-item">
              <span>{{ item.name }}</span>
              <div>
                <span>{{ item.value }}</span>
                <span>个</span>
              </div>
            </div>
            <span class="part2-item-divider" v-if="index!==2"></span>
          </template>
          
        </div>
        
      </div>
      <div class="pr-b2 pr">
        <span class="title2-right">分时统计</span>
        <div id="chart_fstj"></div>
      </div>
      <div class="pr-b3 pr">
        <span class="title2-right">违规预警</span>
        <ul class="prb3-main" v-if="wgyjListType==='overview'">
          <li v-for="item,index in data_wgyj.value" class="prb3-item" @click="showWgyjDetail(index)">
            <img :src="require('@/assets/imgs/page_hdsj/logo-wgyj.png')" alt="">
            <div>
              <span>{{ item.name }}</span>
              <div>
                <span>{{ item.count }}</span>
                <span>个</span>
              </div>
            </div>
          </li>
        </ul>
        <ul
          v-if="wgyjListType!=='overview'"
          class="prb3-main cursor-back"
          @click="handleWgyjBack"
        >
          <li v-for="item in data_wgyj.value[wgyjListType].list" class="prb3-item2">
            <img :src="require('@/assets/imgs/page_hdsj/icon-wgyj-list.png')" alt="">
            <span>{{ item.name }}</span>
            <span>{{ item.time }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HdsjHome',
}
</script>

<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { setSjjk } from '../../echarts/options'

  onMounted(() => {
    setSjjk(document.getElementById('chart_fstj'), chartData_fstj.value)
  })

  const data_ssgl = reactive({value: [
    { title: '维护水深', value:  72, unit: '米', iconUrl: require('@/assets/imgs/page_hdsj/logo-whss.png') },
    { title: '淤积预警', value:  21, unit: '处', iconUrl: require('@/assets/imgs/page_hdsj/logo-yjyj.png') },
  ]})

  const listData_gcxx = reactive({value: [
    { name: '2022陆家嘴弯道疏浚项目', date:'2022-11-15', status: '进行中' },
    { name: '2022陆家嘴弯道疏浚项目', date:'2022-11-16', status: '未开始' },
    { name: '2022陆家嘴弯道疏浚项目', date:'2022-11-17', status: '已完成' },
  ]})

  const data_gctj = reactive({value: [
    { year: '2019', value: 3 },
    { year: '2020', value: 5 },
    { year: '2021', value: 2 },
    { year: '2022', value: 3 },
    { year: '2023', value: 1 },
  ]})

  const data_gcgk = reactive({
    sta: [
      { title: '河道总长', value: 22.15, unit: 'km', iconUrl: require('@/assets/imgs/page_hdsj/logo-hdzc.png') },
      { title: '疏浚船舶', value: 75, unit: '艘', iconUrl: require('@/assets/imgs/page_hdsj/logo-sjcb.png') },
    ],
    cata: [
      { name: '工区', value: 6 },
      { name: '排泥场', value: 17 },
      { name: '固化场', value: 3 },
    ]
  })

  const wgyjListType = ref('overview')

  function showWgyjDetail(index) {
    wgyjListType.value = index
  }

  const data_wgyj = reactive({value: [
    {
      name: '施工区域违规', count: 15,
      list: [
        { name: '浙海益货01998', time: '01-05  06:41' },
        { name: '浙海益货01998', time: '01-05  06:42' },
        { name: '浙海益货01998', time: '01-05  06:43' },
        { name: '浙海益货01998', time: '01-05  06:44' },
      ] 
    },
    {
      name: '船舶抛泥违规', count: 17,
      list: [
        { name: '浙海益货01999', time: '01-05  06:41' },
        { name: '浙海益货01999', time: '01-05  06:42' },
        { name: '浙海益货01999', time: '01-05  06:43' },
        { name: '浙海益货01999', time: '01-05  06:44' },
      ]
    }
  ]})

  function handleWgyjBack() {
    wgyjListType.value = 'overview'
  }

  const chartData_fstj = reactive({value: [
    { month: '4月', value: 17, total: 20 },
		{ month: '5月', value: 19, total: 22 },
		{ month: '6月', value: 12, total: 15 },
		{ month: '7月', value: 8, total: 11 },
		{ month: '8月', value: 17, total: 20 },
		{ month: '9月', value: 19, total: 22 },
		{ month: '10月', value: 12, total: 15 }
  ]})

</script>

<style lang="scss" scoped>
#hdsj {
  
  .panel-left, .panel-right {
    box-sizing: border-box;
    position: absolute;
    top: 105px;
    width: 380px;
    height: calc(100vh - 105px);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .panel-left {
    left: 0;
    padding: 0 30px 10px;
  }

  .panel-right {
    right: 0;
    padding: 0 30px 10px;
    .pr {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }

  .pl-b1 {
    .plb1-item {
      display: flex;
      align-items: center;
      &>div {
        display: flex;
        flex-direction: column;
        &>span {
          display: block;
          box-sizing: border-box;
          width: 174px;
          height: 27px;
          margin: 6px 0 5px;
          padding-left: 15px;
          background: url('@/assets/imgs/page_hdsj/bg-ssgl-text.png') no-repeat;
          background-size: contain;
          font-size: 24px;
          font-family: YSBTH;
          color: #FFFFFF;
          line-height: 25px;
          text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
        }
        &>div {
          padding-left: 15px;
          display: flex;
          align-items:flex-end;
          span:nth-child(1) {
            margin-right: 9px;
            font-size: 34px;
            line-height: 34px;
            font-family: BarlowBold;
            color: transparent;
            background: linear-gradient(0deg, rgba(29,128,224,0.9) 0%, rgba(255,255,255,0.9) 70%);
            -webkit-background-clip: text;
          }
          span:nth-child(2) {
            font-size: 14px;
            line-height: 22px;
            color: #FFFFFF;
            text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
          }
        }
      }
    }
    .plb1-item:nth-last-child(1) {
      &>div>div>span:nth-child(1) {
        background: linear-gradient(0deg, rgba(224,159,29,0.9) 0%, rgba(255,255,255,0.9) 70%);
        -webkit-background-clip: text;
      }
    }
  }

  .pl-b2 {
    .plb2-main {

      .plb2-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &>div {
          margin-left: 5px;
          &>div:nth-child(1) {
            width: 200px;
            height: 24px;
            background: url('@/assets/imgs/page_hdsj/bg-gcxx-title.png') no-repeat;
            background-size: contain;
            margin-bottom: 5px;
            span {
              display: block;
              width: 100%;
              height: 100%;
              font-size: 16px;
              font-weight: bold;
              font-style: italic;
              color: transparent;
              line-height: 24px;
              background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
              -webkit-background-clip: text;
            }
          }
          &>div:nth-child(2) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 18px;
            span:nth-child(1) {
              font-size: 14px;
              font-family: BarlowBold;
              color: rgba($color: #fff, $alpha: 0.6);
            }
            span:nth-child(2) {
              display: block;
              width: 66px;
              height: 31px;
              font-size: 13px;
              font-weight: bold;
              font-style: italic;
              color: #FFFFFF;
              line-height: 31px;
              text-align: center;
              &.status-wks {
                background: url('@/assets/imgs/page_hdsj/gcxx-wks.png') no-repeat;
              }
              &.status-jxz {
                background: url('@/assets/imgs/page_hdsj/gcxx-jxz.png') no-repeat;
              }
              &.status-ywc {
                background: url('@/assets/imgs/page_hdsj/gcxx-ywc.png') no-repeat;
              }
              background-size: contain;
            }
          }
        }
      }
    }
  }

  .pl-b3 {
    .plb3-main {
      position: relative;
      width: 254px;
      height: 279px;
      background: url('@/assets/imgs/page_hdsj/bg-gctj.png') no-repeat;
      background-size: 100% 100%;
      &::after {
        content: '工程统计';
        position: absolute;
        left: 37%;
        bottom: 37%;
        transform: rotateZ(4deg);
      }
      &>div {
        position: absolute;
        width: 94px;
        height: 32px;
        background: url('@/assets/imgs/page_hdsj/bg-gctj-text.png') no-repeat;
        background-size: contain;
        &>div {
          height: 100%;
          transform: rotateZ(5deg);
          display: flex;
          align-items: center;
          span:nth-child(1) {
            margin-left: 7px;
            font-size: 14px;
            font-family: BarlowBold;
            color: #A5E4FF;
          }
          span:nth-child(2) {
            margin: 0 3px 0 5px;
            font-size: 18px;
            font-family: BarlowBold;
            color: #CCE6FF;
          }
          span:nth-child(3) {
            font-size: 12px;
            color: #CCE6FF;
          }
        }
        
      }
      &>div:nth-child(1) {
        top: 15%;
        right: 5%;
      }
      &>div:nth-child(2) {
        top: 43%;
        right: -8%;
      }
      &>div:nth-child(3) {
        bottom: 17%;
        right: 5%;
      }
      &>div:nth-child(4) {
        bottom: 32%;
        left: 5%;
      }
      &>div:nth-child(5) {
        top: 26%;
        left: 5%;
      }
    }
  }

  .pr-b1 {
    .part1-item {
      width: 80%;
      display: flex;
      align-items: center;
      &>div {
        margin-left: 17px;
        &>span {
          font-size: 20px;
          font-style: italic;
          color: rgba($color: #EAF2FF, $alpha: 0.7);
        }
        &>div {
          margin-top: 8px;
          span:nth-child(1) {
            margin-right: 11px;
            font-size: 32px;
            font-family: BarlowBold;
            color: #FFFFFF;
            line-height: 32px;
          }
          span:nth-child(2) {
            font-size: 16px;
            color: rgba($color: #A6C8FF, $alpha: 0.54);
          }
        }
      }
    }

    .part2 {
      width: 76%;
      margin-top: 2vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .part2-item {
        position: relative;
        &>span {
          font-size: 16px;
          font-style: italic;
          color: #FFFFFF;
        }
        &>div {
          margin-top: 8px;
          span:nth-child(1) {
            margin-right: 4px;
            font-size: 26px;
            line-height: 26px;
            font-family: BarlowBold;
            color: #99EEFF;
          }
          span:nth-child(2) {
            font-size: 14px;
            color: #EDFFFF;
          }
        }
      }
      .part2-item-divider {
        display: block;
        height: 27px;
        border-right: 1px dashed #ddd;
      }
    }
  }

  .pr-b2 {
    #chart_fstj {
      width: 90%;
      height: 24vh;
    }
  }

  .pr-b3 {
    .cursor-back {
      cursor: url('@/assets/imgs/page_hdsj/btn-back.png'), pointer;
    }
    .prb3-main {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      width: 100%;
      // height: 20vh;
      margin: 10px 0 25px;

      .prb3-item {
        width: 85%;
        display: flex;
        align-items: center;
        margin: 5px 0 20px;
        cursor: pointer;
        &>div {
          &>span {
            display: block;
            width: 174px;
            height: 26px;
            margin-top: 10px;
            padding-left: 20px;
            background: url('@/assets/imgs/page_hdsj/bg-wgyj-text.png') no-repeat;
            background-size: 100% 100%;
            font-size: 18px;
            font-style: italic;
            color: #FFFFFF;
            line-height: 26px;
            text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
          }
          &>div {
            margin-top: 4px;
            padding-left: 20px;
            span:nth-child(1) {
              margin-right: 9px;
              font-size: 34px;
              line-height: 34px;
              font-family: BarlowBold;
              color: #FFFFFF;
              text-shadow: 0px 0px 9px rgba(255,157,0,0.61);
            }
            span:nth-child(2) {
              font-size: 14px;
              color: #FFFFFF;
              text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
            }
          }
        }
      }

      .prb3-item2 {
        width: 85%;
        height: 24px;
        display: flex;
        align-items: center;
        margin: 14px 0;
        background: url('@/assets/imgs/page_hdsj/bg-wgyj-list.png') no-repeat;
        background-size: 100% 100%;
        span:nth-child(2) {
          display: block;
          width: 51%;
          font-size: 14px;
          font-weight: 700;
          font-style: italic;
          color: transparent;
          background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
        }
        span:nth-child(3) {
          display: block;
          font-size: 14px;
          font-family: BarlowBold;
          color: rgba($color: #fff, $alpha: 0.6);
        }
      }
    }
  }
}
</style>
