<template>
  <div id="JC_oldList">
    <div class="SearchBox">
      <div class="SearchLabel">监测时间:</div>
      <div class="SearchSel">
        <el-date-picker
          clearable
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          v-model="dateTime"
          type="datetimerange"
          placeholder="请选择年月日"
        />
      </div>
      <el-button type="primary" class="searchBtn btn" @click="searchBtn">搜索</el-button>
      <el-button type="primary" class="exportBtn btn" @click="handleExport">导出</el-button>
    </div>
    <div class="TableBox animate__animated animate__zoomIn">
      <!-- <el-table stripe v-loading="loading" :data="DataList">
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column :label="item.label" align="center" :prop="item.prop" v-for="(item, index) in dataTitle" :key="index" />
      </el-table> -->

      <el-table v-loading="loading" :data="DataList" v-if="useDialogTabs.mapType == 'paishuiSupervise'">
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column
          :label="item.title + item.unit"
          :prop="item.key"
          v-for="item in headerData"
          :key="item.key"
          :width="headerData.length > 5 ? '160' : ''"
          :fixed="item.key == 'ut' ? 'right' : false"
        >
          <!-- 有二级 -->
          <el-table-column
            :label="item2.title"
            :prop="item2.key"
            v-if="item.isChild == 0"
            v-for="item2 in item.childList"
            :key="item2.key"
          >
            <template #default="scope">
              <div v-html="scope.row[item2.key]"></div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <el-table v-loading="loading" :data="DataList" v-if="useDialogTabs.mapType == 'ranQi_supervise'">
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column label="站点编码" align="center" prop="siteNo" />
        <!-- <el-table-column label="监测气体" align="center" prop="siteNo"  /> -->
        <el-table-column label="监测气体" align="center" prop="gasType">
          <template #default="{ row }">
            <div>
              {{ gas_type.find(item => item.value == row.gasType)?.label || row.gasType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="监测浓度(%VOL)" align="center" prop="gasValue" />
        <!-- <el-table-column label="温度(℃)" align="center" prop="temperature" /> -->
        <el-table-column label="水位状态" align="center" prop="waterLevelState">
          <template #default="{ row }">
            <div>
              {{ row.waterLevelState == '0' ? '正常' : '超限' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="设备状态" align="center" prop="eventType">
          <template #default="{ row }">
            <div>
              {{ row.eventType == '1' ? '在线' : '离线' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="监测时间" align="center" prop="timestamp"> </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="searchBtn"
      />
    </div>
  </div>
</template>

<script setup name="JC_oldList">
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';
import { dataAnalysisHead, dataAnalysisBody, dockingHistory } from '@/api/system/tanchuang';
import dialogTabsStore from '@/store/modules/dialogTabs';

const useDialogTabs = dialogTabsStore();

const { proxy } = getCurrentInstance();
const { gas_type } = proxy.useDict('gas_type');
console.log('🚀 ~ gas_type:', gas_type);

const props = defineProps({
  // 数据SiteNo
  SiteNo: {
    type: String,
  },
});
const AllData = reactive({
  dateTime: [
    proxy.moment().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
    proxy.moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
  ],

  loading: false,
  headerData: [],
  DataList: [],
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    startTime: '',
    endTime: '',
    stCode: '',
    deviceId: '',
  },
});

const { DataList, headerData, loading, queryParams, total, dateTime } = toRefs(AllData);

// 排水表格数据
const getBodyList = item => {
  // 获取数据
  loading.value = true;
  queryParams.value.stCode = props.SiteNo;
  queryParams.value.startTime = dateTime.value[0];
  queryParams.value.endTime = dateTime.value[1];
  dataAnalysisBody(queryParams.value).then(res => {
    DataList.value = res.data || [];
    total.value = res.total;
  });
  loading.value = false;
};

// 排水表头数据
const getHeaderList = () => {
  console.log('🚀 ~ dataAnalysisHead ~ props.SiteNo:', props.SiteNo);
  // { stCode: code }
  // 获取表头数据
  dataAnalysisHead({ stCode: props.SiteNo }).then(res => {
    // console.log(res, '表头数据');
    headerData.value = res.data;
  });
};

const searchBtn = () => {
  if (useDialogTabs.mapType == 'paishuiSupervise') {
    getBodyList();
  } else if (useDialogTabs.mapType == 'ranQi_supervise') {
    getRQtable();
  }
};

// 导出
const handleExport = () => {
  if (useDialogTabs.mapType == 'paishuiSupervise') {
    proxy.download(
      '/business/siteHistoryMonitor/batchExportHistoryData',
      {
        ...queryParams.value,
        st: queryParams.value.stCode,
        timeInterval: 1,
      },
      `${useDialogTabs.mapTypeTitle}_${new Date().getTime()}.zip`
      // `水位计${props.SiteNo}_${new Date().getTime()}.xlsx`
    );
  } else if (useDialogTabs.mapType == 'ranQi_supervise') {
    proxy.download(
      '/business/dockingThorughfareHistory/export',
      {
        ...queryParams.value,
        // st: queryParams.value.stCode,
        // timeInterval: 5,
      },
      `${useDialogTabs.mapTypeTitle}_${new Date().getTime()}.xlsx`
    );
  }
};

const getRQtable = () => {
  loading.value = true;
  queryParams.value.deviceId = props.SiteNo;
  queryParams.value.startTime = dateTime.value[0];
  queryParams.value.endTime = dateTime.value[1];
  dockingHistory(queryParams.value).then(res => {
    DataList.value = res.data || [];
    total.value = res.total;
  });
  loading.value = false;
};

onMounted(() => {
  if (useDialogTabs.mapType == 'paishuiSupervise') {
    getHeaderList();
    getBodyList();
  } else if (useDialogTabs.mapType == 'ranQi_supervise') {
    getRQtable();
  }
});
</script>

<style lang="scss" scoped>
#JC_oldList {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  .SearchBox {
    width: 100%;
    height: 60px;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #1a7494;
    height: 60px;
    line-height: 60px;
    display: flex;
    align-items: center;
    .btn {
      background: linear-gradient(0deg, rgba(28, 138, 255, 0.1) 0%, rgba(28, 138, 255, 0.4) 100%) !important;
    }
    .searchBtn {
      margin-left: 40px;
    }
    .exportBtn {
      margin-left: 20px;
    }

    .SearchLabel {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      padding: 0 10px;
      margin-left: 40px;
      height: 60px;
      line-height: 60px;

      .SearchLabelValue {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #1cf5fc;
        margin: 0 10px;
      }
    }
    :deep(.SearchSel) {
      // width: 180px;
      --el-text-color-regular: #fff;

      .el-input__wrapper {
        background: rgba(13, 42, 84, 0.9);
        border: 1px solid #1CB1FC;
        box-shadow: none;

        .el-input__inner {
          color: #c1d3d4;
        }
      }
    }

    .SearchRightBTN {
      float: right;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #1cf5fc;
    }
  }

  :deep(.TableBox) {
    width: 100%;
    height: calc(100% - 60px);
    .el-table {
      background-color: transparent;
      --el-table-row-hover-bg-color: transparent;
      // border: 1px solid rgba(28, 138, 255, 0.4);
      //   表头
      .el-table__header-wrapper {
        background-color: transparent !important;
        .el-table__header {
          tr {
            background-color: transparent !important;
          }
          .el-table__cell {
            // background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%) !important;
            background: linear-gradient(0deg, rgba(28, 138, 255, 0.1) 0%, rgba(28, 138, 255, 0.4) 100%) !important;
            background: none;
            border-radius: 2px;
            border: 1px solid rgba(28, 138, 255, 0.4);
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 58px;
          }
        }
      }
      //   内容
      .el-table__body-wrapper {
        // --el-bg-color:linear-gradient(0deg, #008599 0%, #08596d 100%);
        --el-bg-color: transparent;
        .el-table__row {
          background-color: transparent;
          border: none;
          td.el-table__cell {
            border: none;
            .cell {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
            }
          }
        }
        .el-table__row--striped {
          td.el-table__cell {
            background: linear-gradient(0deg, #008599 0%, #08596d 100%) !important;
            border: none;
          }
        }
      }
    }

    .pagination-container {
      background: none;
      padding: 32px 16px;

      .el-pagination__total,
      .el-pagination__goto,
      .el-pagination__classifier {
        color: white;
      }
    }
  }
}
</style>