<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>
</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>
#dialogContent_1 {
  .form {
    .el-form-item {
      position: relative;
      margin-bottom: 30px;

      &::after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -15px;
        height: 1px;
        content: '';
        background: #347ee5;
      }

      &:last-child {
        &::after {
          height: 0;
        }
      }
    }
  }

  .el-form--inline .el-form-item {
    margin-right: 8px !important;
  }

  .el-form-item__label {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 16px;
    color: #e0e5fa;
  }

  .el-tabs__nav-scroll {
    .el-tabs__item {
      font-size: 16px !important;
      color: #ffffff;
    }

    .is-active {
      border: 1px solid #009cff;
      padding-left: 10px;
      padding-right: 10px;
    }

    &::after {
      background-color: #b9c1c32b;
    }
  }

  .el-tag.el-tag--info {
    background-color: transparent;
    color: #9ec4ff;
  }

  .el-date-editor .el-range-input,
  .el-icon,
  .el-range-separator {
    color: #d3f6ff !important;
    font-size: 16px !important;

    &.avatar-uploader-icon {
      font-size: 80px !important;
    }
  }

  .el-textarea__inner {
    background: #155785;
    border-radius: 6px;
    border: 1px solid #47affe;
    box-shadow: none !important;
    color: #d3f6ff;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 16px !important;

    &::placeholder {
      color: #d3f6ff;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 16px !important;
    }
  }

  .el-input__wrapper {
    box-shadow: none !important;
    height: 35px !important;
    background: #155785 !important;
    border-radius: 6px !important;
    border: 1px solid #47affe !important;
    font-size: 16px !important;

    .el-input__prefix {
      color: #d3f6ff;
    }

    .el-input__inner {
      height: 35px !important;
      color: #d3f6ff !important;
      -webkit-text-fill-color: #d3f6ff !important;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 16px !important;

      &::placeholder {
        color: #d3f6ff;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 16px !important;
      }
    }
  }

  .el-date-editor {
    height: auto;
  }
}
</style>