<template>
  <base-panel-right>
    <div class="sand-monitor-right-container">
      <base-header title="采砂地磅数据">
        <div class="header-tool">
          <el-select v-model="selectedVal1" size="mini">
            <el-option label="全部" value=""></el-option>
          </el-select>
          <el-button type="text" size="mini" class="more-btn">更多</el-button>
        </div>
      </base-header>
      <div class="card-item">
        <ul class="table-list">
          <li class="table-list-title">
            <span>车牌号码</span>
            <span>地磅数据</span>
            <span>上报时间</span>
          </li>
          <li class="table-list-item" v-for="item in tableListData" :key="item.id">
            <span>{{ item.carNum }}</span>
            <span>{{ item.weight }}</span>
            <span>{{ item.time }}</span>
          </li>
        </ul>
      </div>
      <base-header title="采砂过车数据">
        <div class="header-tool">
          <el-select v-model="selectedVal2" size="mini">
            <el-option label="全部" value=""></el-option>
          </el-select>
          <el-button type="text" size="mini" class="more-btn">更多</el-button>
        </div>
      </base-header>
      <div class="card-item">
        <div class="info-container">
          <div class="info-panel">
            <img src="@/assets/image/sand-monitor/采砂车.png" />
            <ul>
              <li><span>采砂区</span> <span>1#采砂区</span></li>
              <li><span>车型</span> <span>大型卡车</span></li>
              <li><span>车牌号</span><span>陕A32658</span></li>
              <li><span>载重</span><span>15吨</span></li>
            </ul>
          </div>
          <div class="date-panel">
            <div class="date-item">
              <span>进场日期</span>
              <span>2025-08-02 08:12:34</span>
            </div>
            <div class="date-item">
              <span>出场日期</span>
              <span>2025-08-20 15:34:45</span>
            </div>
          </div>
          <div class="tool-panel">
            <img class="tool-img" src="@/assets/image/sand-monitor/arrow-left.png" />
            <img class="tool-img" src="@/assets/image/sand-monitor/arrow-right.png" />
          </div>
        </div>
      </div>
      <base-header title="采砂预警信息">
        <div class="header-tool">
          <el-select v-model="selectedVal3" size="mini">
            <el-option label="全部" value=""></el-option>
          </el-select>
          <el-button type="text" size="mini" class="more-btn">更多</el-button>
        </div>
      </base-header>
      <div class="card-item">
        <div class="warning-container">
          <div class="warning-list-tools">
            <el-radio-group v-model="typeRadio" size="mini">
              <el-radio-button label="禁采取采砂"></el-radio-button>
              <el-radio-button label="超限预警"></el-radio-button>
              <el-radio-button label="超量预警"></el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="dateRadio" size="mini">
              <el-radio-button label="日"></el-radio-button>
              <el-radio-button label="周"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="warning-list">
            <div class="warning-list-item">
              <img src="@/assets/image/sand-monitor/采砂车2.png" />
              <ul>
                <li><span>预警信息</span> <span>3#采砂区非采砂</span></li>
                <li><span>预警类型</span> <span>非采砂时间采砂</span></li>
                <li><span>预警时间</span><span>01-15 14:00:00</span></li>
              </ul>
            </div>
            <div class="warning-list-item">
              <img src="@/assets/image/sand-monitor/采砂车2.png" />
              <ul>
                <li><span>预警信息</span> <span>3#采砂区非采砂</span></li>
                <li><span>预警类型</span> <span>非采砂时间采砂</span></li>
                <li><span>预警时间</span><span>01-15 14:00:00</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </base-panel-right>
</template>
<script>
import BasePanelRight from '@/components/base-panel/base-panel-right'
import BaseHeader from '@/components/base-header/base-header'
export default {
  name: 'sandMonitorRight',
  components: { BasePanelRight, BaseHeader },
  data() {
    return {
      selectedVal1: '',
      selectedVal2: '',
      selectedVal3: '',
      tableListData: [
        { id: 1, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
        { id: 2, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
        { id: 3, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
        { id: 4, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
        { id: 5, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' }
      ],
      typeRadio: '禁采取采砂',
      dateRadio: '日'
    }
  },

  methods: {}
}
</script>
<style scoped lang="scss">
@import url('@/assets/scss/px-to-rem.scss');
.sand-monitor-right-container {
  position: relative;
  height: 100%;
  z-index: 1;
  .header-tool {
    display: flex;
    position: absolute;
    top: 0;
    right: px-to-rem(10);
    :deep(.el-input__inner) {
      background: transparent;
      border-color: #4f9fff;
      width: px-to-rem(100);
      color: #fff;
    }
    .more-btn {
      font-size: px-to-rem(14);
      margin-left: px-to-rem(10);
    }
  }
  .card-item {
    position: relative;
    width: 3.68rem;
    padding: px-to-rem(10);
    margin-bottom: px-to-rem(10);
    background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
  }
  .table-list {
    &-title {
      display: flex;
      justify-content: space-between;
      color: #f2f6ff;
      font-size: px-to-rem(16);
      padding: 0 px-to-rem(10);
      height: px-to-rem(35);
      line-height: px-to-rem(35);
      background: #244e81;
    }
    &-item {
      display: flex;
      justify-content: space-between;
      color: #fff;
      font-size: px-to-rem(16);
      padding: px-to-rem(4) px-to-rem(10);
      margin-bottom: px-to-rem(1.8);
      height: px-to-rem(35);
      line-height: px-to-rem(35);
      background: #153057;
      box-sizing: border-box;
    }
  }
  .info-container {
    display: flex;
    flex-direction: column;
    .info-panel {
      display: flex;
      justify-content: space-between;
      margin-bottom: px-to-rem(10);
      img {
        height: px-to-rem(115);
      }
      ul {
        flex: 1;
        li {
          display: flex;
          justify-content: space-around;
          font-size: px-to-rem(14);
          color: #c4c6c8;
          line-height: px-to-rem(30);
        }
      }
    }
    .date-panel {
      display: flex;
      justify-content: space-around;
      padding: px-to-rem(6) 0;
      background: rgba(79, 159, 255, 0.2);
      border-radius: 4px;
      border: 1px solid #4f9fff;
      color: #c4c6c8;
      .date-item {
        display: flex;
        flex-direction: column;
        span {
          font-size: px-to-rem(14);
          margin-bottom: px-to-rem(4);
        }
      }
    }
    .tool-panel {
      display: flex;
      justify-content: flex-end;
      margin-top: px-to-rem(10);
      .tool-img {
        cursor: pointer;
        height: px-to-rem(30);
        margin-left: px-to-rem(6);
      }
    }
  }
  .warning-container {
    display: flex;
    flex-direction: column;
    .warning-list-tools {
      display: flex;
      justify-content: space-between;
      :deep(.el-radio-button__inner) {
        background: transparent;
        color: #4487d8;
        border-color: #4487d8;
        padding: px-to-rem(5);
        font-size: px-to-rem(14);
      }
      :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
        background-color: #409eff;
        color: #fff;
      }
    }
    .warning-list {
      display: flex;
      flex-direction: column;
      .warning-list-item {
        display: flex;
        justify-content: space-between;
        background: rgba(79, 159, 255, 0.2);
        border-radius: 4px;
        border: 1px solid #4f9fff;
        margin-top: px-to-rem(10);
        padding: px-to-rem(6);
        img {
          height: px-to-rem(85);
        }
        ul {
          flex: 1;
          li {
            display: flex;
            justify-content: space-around;
            font-size: px-to-rem(14);
            color: #fff;
            line-height: px-to-rem(30);
          }
        }
      }
    }
  }
}
</style>
