<template>
  <el-form :model="queryParams" ref="queryRef" :rules="Formrules" :inline="true" label-width="110px">
    <el-form-item label="类型：" prop="isControllerRainSite" label-width="70px">
      <el-select
        filterable
        v-model="queryParams.isControllerRainSite"
        :clearable="false"
        placeholder="请选择"
        popper-class="dialogPopperClass"
        @change="changeType"
        style="width: 100px"
      >
        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="项目选择：" prop="belongArea" v-if="queryParams.isControllerRainSite == 0" label-width="110px">
      <el-select
        filterable
        v-model="queryParams.belongArea"
        :clearable="false"
        placeholder="请选择"
        popper-class="dialogPopperClass"
        @change="changePro"
        style="width: 200px"
      >
        <el-option v-for="item in list" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
      </el-select>
    </el-form-item>
    <el-form-item label="设施选择" prop="stCode" v-if="queryParams.isControllerRainSite == 1">
      <el-select
        filterable
        v-model="queryParams.stCode"
        :clearable="false"
        placeholder="请选择"
        popper-class="dialogPopperClass"
        @change="changeSite"
        style="width: 200px"
      >
        <el-option v-for="item in siteList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
      </el-select>
    </el-form-item>
    <el-form-item label="典型降雨：" prop="realTime">
      <span style="color: #d3f6ff !important; font-size: 17px">{{ queryParams.realTime }}</span>
    </el-form-item>
    <el-form-item label="同等降雨对比时间：" prop="contrastTime" label-width="180px">
      <!-- <rainCalender
        ref="rainCalenderRef"
        :contrastTime="queryParams.contrastTime"
        :stCode="queryParams.stCode"
        :rainIntensity="queryParams.rainIntensity"
        :projectCode="queryParams.belongArea"
        :calenderRainTime="search.time"
        @change="changeTime"
      >
      </rainCalender> -->
    </el-form-item>

    <el-form-item>
      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
      <el-button plain type="warning" icon="Download" @click="downloadPdf" style="margin-left: 10px">导出</el-button>
    </el-form-item>
  </el-form>

  <div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
    <h1>开封市海绵城市项目及设施分析报告</h1>
    <h4>报告时间：</h4>
    <!-- <div v-if="projectObj['tablelist'] && projectObj['tablelist'].length">
      <div class="chart_content" v-for="item in projectObj['tablelist']">
        小时流量、降雨量
        <div class="chart_list" v-for="(child, index) in item['tablelist']">
          <p class="small_title">【{{ moment(child.dataTime).format('YYYY-MM-DD') }}号{{ item.stName }}趋势】</p>
          <div :id="`rain_chart_${moment(child.dataTime).format('YYYY-MM-DD')}_${item.stCode}_${index}`" class="chartOneBG rainChart"></div>
        </div>
        <p class="small_title" v-if="projectObj['tablelist'] && projectObj['tablelist'].length">
          【设计参数】设计降雨量 {{ projectObj.designRain }}mm，设计年径流总控制率{{ projectObj.ghJlzlkzl }}%
        </p>
        <el-table :data="item['tablelist']" style="width: 100%; margin: 0 auto" class="detailDataTable">
          <el-table-column label="对比日期" prop="dataTime" class="pdf-details" aline="center" width="100px">
            <template #default="{ row }">
              <span>{{ moment(row.dataTime).format('YYYY-MM-DD') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="降雨开始时间" prop="rainStartTime" class="pdf-details" aline="center" width="180px" />
          <el-table-column label="出流开始时间" prop="flowStartTime" class="pdf-details" aline="center" width="180px" />
          <el-table-column label="错峰间隔时间" prop="flowIntervalTime" class="pdf-details" aline="center" width="180px" />
          <el-table-column label="控制雨量(mm)" prop="trueRain" class="pdf-details" aline="center" width="110px" />
          <el-table-column label="总出流量(m³)" prop="totolFlow" class="pdf-details" aline="center"> </el-table-column>
    
          <el-table-column label="典型降雨径流总量控制率(%)" prop="jlzlkzl" class="pdf-details" aline="center"> </el-table-column>
          <el-table-column label="是否达标" prop="isStandard" class="pdf-details" aline="center" width="90px">
            <template #default="{ row }">
  
            </template>
          </el-table-column>
        </el-table>
        <p class="small_title" style="font-weight: normal">【信息】{{ item['tablelist'][0].information }}</p>
        <p class="small_title" style="font-weight: normal">【建议】{{ item['tablelist'][0].advice }}</p>
      </div>
    </div> -->
  </div>
</template>
<script setup>
const typeList = [
  {
    label: '设施',
    value: 1,
  },
  {
    label: '项目',
    value: 0,
  },
];
const siteList = ref([]);
const queryParams = ref({
  contrastTime: '',
  stCode: '',
  belongArea: '',
  realTime: '',
  isControllerRainSite: 1,
});

onMounted(() => {});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.reportDetail {
  width: 100%;
  background: #fff;
  color: #333;
  margin-bottom: 30px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;

  // 表格样式
  .table_content {
    .el-table {
      background-color: transparent !important;

      .el-table__cell {
        padding: 6px 0 !important;
      }

      .success {
        color: #24de8d;
        font-weight: bold;
      }

      .fail {
        color: #f85050;
        font-weight: bold;
      }

      .el-loading-mask {
        background: rgba(3, 20, 37, 0.9) !important;
      }

      .indexClass_1 {
        width: 26px;
        height: 26px;
        background: linear-gradient(0deg, #f4c064 0%, rgba(244, 192, 100, 0) 100%);
        border-radius: 2px;
        opacity: 0.9;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        display: block;
        justify-content: center;
        line-height: 26px;
      }

      .indexClass_2 {
        width: 26px;
        height: 26px;
        background: linear-gradient(0deg, #bacdff 0%, rgba(186, 205, 255, 0) 100%);
        border-radius: 2px;
        opacity: 0.9;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        display: block;
        justify-content: center;
        line-height: 26px;
      }

      .indexClass_3 {
        width: 26px;
        height: 26px;
        background: linear-gradient(0deg, #e07748 0%, rgba(224, 119, 72, 0) 100%);
        border-radius: 2px;
        opacity: 0.9;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        display: block;
        justify-content: center;
        line-height: 26px;
      }

      thead {
        // background: url('@/assets/images/Sponge_screen/fangXunTiaoDu/table_head_back.png') no-repeat;
        // background-size: 100% 100%;
        background: #005cba !important;
      }

      .el-button--primary {
        width: 49px;
        height: 22px;
        background: linear-gradient(0deg, #0566d7 0%, #007eff 100%);
        border-radius: 11px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #d2efff;
        line-height: 22px;
      }

      .el-table__header-wrapper {
        .el-table__header {
          th {
            background: transparent !important;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            line-height: 32px;
          }
        }
      }

      tr {
        height: 36px !important;
      }

      tr:nth-of-type(even) {
        // background: rgba(0, 72, 153, 0.3) !important;
        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
      }

      tr:nth-of-type(odd) {
        // background: rgba(19, 108, 183, 0.5) !important;
        background: transparent !important;
      }

      .el-table__body {
        border-bottom: none !important;

        tr:nth-of-type(odd) {
        }

        tr:nth-of-type(even) {
          td {
          }
        }

        tr:hover > td {
          cursor: pointer;
          background: linear-gradient(0deg, rgba(0, 89, 192, 0.3) 0%, rgba(0, 76, 164, 0.2) 100%) !important;
        }
      }

      .el-table__inner-wrapper {
        &::before {
          display: none;
        }
      }

      .el-table__header-wrapper,
      .el-table__fixed-header-wrapper {
        tr {
          background-color: transparent !important;
        }

        th {
          word-break: break-word;
        }
      }

      .el-table__body-wrapper {
        .el-button [class*='el-icon-'] + span {
          margin-left: 1px;
        }
      }

      th.el-table__cell {
        color: #fff;
        text-align: center;
        border-bottom: none !important;
        border-right: none !important;
      }

      th.is-left {
        text-align: left !important;
      }

      td.el-table__cell {
        text-align: center;
        border-bottom: none !important;
        border-right: none !important;
        color: #fff !important;
      }

      td.is-left {
        text-align: left;
      }

      td.el-table-fixed-column--right {
        background-color: #0f3a4f !important;
        color: #fff !important;

        .el-button {
          color: #fff !important;
        }
      }

      .el-table__empty-block {
        .el-table__empty-text {
          color: #fff !important;
        }
      }
    }

    // .ListBoxHeader_Sel {
    //   .el-input__wrapper {
    //     background: linear-gradient(0deg, #1c7a99 0%, #60c0e2 100%) !important;
    //     // box-shadow: none !important;
    //   }
    // }

    .el-progress-bar__outer {
      background: #2eafbf !important;
    }

    .el-tabs {
      .el-tabs__header {
        .el-tabs__nav {
          .el-tabs__item {
            color: #fff !important;

            &.is-active {
              color: #409eff !important;
            }
          }
        }
      }
    }
  }

  .waterlogImg {
    flex-wrap: wrap;

    .part {
      width: 18%;
      margin-left: 10px;
      margin-bottom: 10px;
      text-align: center;

      img {
        width: 100%;
        height: 150px;
      }

      p {
        line-height: 20px;
      }
    }
  }

  #rain_chart,
  #chartOneBG,
  .chartOneBG,
  #chartOneBG2,
  #chartOneBG3,
  #chartOneBG4 {
    // width: 100%;
    width: 1000px;
    height: 300px;
  }

  h1 {
    text-align: center;
    color: #c03639;
    font-size: 28px;
    letter-spacing: 5px;
  }

  h4 {
    color: #c03639;
    border-bottom: 3px solid #c03639;
    padding: 10px 0px;
    text-align: right;
  }

  .title {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }

  .small_title {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }

  .button_title {
    width: 66px;
    height: 22px;
    line-height: 22px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    margin-left: 20px;
    cursor: pointer;

    &:hover {
      background: #00a4ae;
      border-radius: 6px;
      text-align: center;
    }
  }

  .active_button_title {
    background: #00a4ae;
    border-radius: 6px;
    text-align: center;
  }

  .content {
    text-indent: 14px;
    position: relative;

    span {
      color: #333333;
      font-weight: bolder;
    }

    &:after {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #918f8f;
      border-radius: 50%;
      content: '';
      left: 0;
      top: 16px;
      margin-top: -4px;
    }
  }

  .small_tip {
    text-align: center;
    font-weight: bold;
    margin: 10px 0px;
  }

  .rain_date_detail {
    margin-bottom: 10px;

    .rain_box2 {
      &:hover {
        background: #5daee6;
      }
    }

    .active_rain_box2 {
      background: #5daee6 !important;
    }

    .rain_box {
      // width: 112px;
      height: 78px;
      background: #155785;
      border-radius: 6px;
      margin-right: 10px;
      cursor: pointer;
      color: #ffffff;

      &:last-child {
        margin-right: 0;
      }

      .rainfall {
        span {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
        }
      }
    }
  }
}
</style>