<template>
  <view
    :style="{ height: '100vh', overflow: 'hidden', backgroundColor: '#fff' }"
  >
    <u-status-bar></u-status-bar>
    <u-navbar
      title="安全监测"
      :autoBack="true"
      :titleStyle="{
        fontSize: '18px',
      }"
      :height="44"
      :safeAreaInsetTop="true"
      leftIconSize="20"
      leftIconColor="rgb(153, 153, 153)"
    >
    </u-navbar>
    <view class="picker-sel">
      <picker @change="typeOnChange" :range="watchArr" range-key="name">
        <view class="uni-input12" style="margin-right: 10px">
          <view>{{ name }}</view>
          <u-icon name="arrow-down-fill" color="#000" size="15"></u-icon>
        </view>
      </picker>
      <picker
        @change="stationCodeChange"
        :range="statiionCodeArray"
        range-key="stationCode"
      >
        <view class="uni-input12">
          <view>{{ stationCode }}</view>
          <u-icon name="arrow-down-fill" color="#000" size="15"></u-icon>
        </view>
      </picker>
    </view>

    <view class="jcsj-box">
      <view class="time-ranger">
        <view class="start-time">
          <text>开始时间</text>
          <text
            @click="showTime = true"
            style="margin-left: 10%; color: #3399ef"
            >{{ stm }}</text
          >
        </view>
        <view class="end-time">
          <text>结束时间</text>
          <text
            @click="showTime1 = true"
            style="margin: 0 10%; color: #3399ef"
            >{{ etm }}</text
          >
          <view class="search-btn" @click="searchHandle"> 搜索 </view>
        </view>
      </view>
      <view class="jcsj-content">
        <view  v-if="dataSources.length">
         <view style="width:100%;height:320px"> 
          <qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
          </view>
          <JcsjTable :columns="newCol" :data="dataSources" :type="name" />
        </view>
        <image
          :src="showImg"
          style="width: 60%; height: 220px; margin: 50%;transform: translate(-50%,-50%)"
          v-else
        ></image>
      </view>
      <u-datetime-picker
        :show="showTime"
        v-model="startTime"
        mode="datetime"
        @confirm="handleStartTime"
        @cancel="showTime = false"
      ></u-datetime-picker>
      <u-datetime-picker
        :show="showTime1"
        v-model="endTime"
        mode="datetime"
        @confirm="handleEndTime"
        @cancel="showTime1 = false"
      ></u-datetime-picker>
    </view>
  </view>
</template>

<script>
import moment from "moment";
import drpOption from "./jrxOptions";
import syOption from "./syOptions";
import JcsjTable from "./jcsjTable";
const stm = moment()
  .subtract(1, "days")
  .add(1, "hour")
  .set({
    minute: 0,
    second: 0,
  })
  .format("YYYY-MM-DD HH:mm:ss");
const etm = moment()
  .add(1, "hour")
  .set({
    minute: 0,
    second: 0,
  })
  .format("YYYY-MM-DD HH:mm:ss");
export default {
  data() {
    return {
      startTime: stm,
      endTime: etm,
      stm,
      etm,
      showTime: false,
      showTime1: false,
      watchArr: [
        { name: "结构缝开度", type: 1 },
        { name: "渗压", type: 2 },
      ],
      statiionCodeArray: [],
      stationCode: "",
      name: "结构缝开度",
      dataSources: [],
      showImg: "../../static/empty.png",
      chartData: {
        chartData: {},
        eopts: {},
      },
      kfdCols: [
        {
          title: "监测点",
          key: "stationCode",
          dataIndex: "stationCode",
          width: 100,
          align: "center",
        },
        {
          title: "缝开度(mm)",
          key: "value",
          dataIndex: "value",
          width: 100,
          align: "center",
        },
        {
          title: "温度(℃)",
          key: "temp",
          dataIndex: "temp",
          width: 100,
          align: "center",
        },
        {
          title: "模数(F)",
          key: "modulus",
          dataIndex: "modulus",
          width: 100,
          align: "center",
        },
        {
          title: "监测时间",
          key: "tm",
          dataIndex: "tm",
          width: 100,
          align: "center",
        },
      ],
      syCols: [
        {
          title: "测点编号",
          key: "stationCode",
          dataIndex: "stationCode",
          width: 120,
          align: "center",
        },
        {
          title: "水位(mm)",
          key: "value",
          dataIndex: "value",
          width: 150,
          align: "center",
        },
        {
          title: "水压(KPa)",
          key: "press",
          dataIndex: "press",
          width: 100,
          align: "center",
        },
        {
          title: "水位高程(m)",
          key: "waterEle",
          dataIndex: "waterEle",
          width: 100,
          align: "center",
        },
        {
          title: "温度(℃)",
          key: "temp",
          dataIndex: "temp",
          width: 100,
          align: "center",
        },
        {
          title: "模数(F)",
          key: "modulus",
          dataIndex: "modulus",
          width: 100,
          align: "center",
        },
        {
          title: "监测时间",
          key: "tm",
          dataIndex: "tm",
          width: 100,
          align: "center",
        },
      ],
      newCol: [],
    };
  },
  components: {
    JcsjTable,
  },
  watch: {
    name: {
      handler(newVal, oldVal) {
        const type = this.watchArr.find((item) => item.name == newVal)?.type;
        this.getStationCode(type);
        this.newCol = newVal == "结构缝开度" ? this.kfdCols : this.syCols;
      },
      immediate: true,
    },
    stationCode(newVal) {
      this.getList(newVal);
    },
  },
  methods: {
    getStationCode(type) {
      uni.$http
        .get("/gunshiApp/ykz/osmoticStationInfo/list/" + type)
        .then((res) => {
          this.statiionCodeArray = res.data.data;
          this.stationCode = res.data.data[0].stationCode;
        });
    },
    stationCodeChange(e) {
      this.stationCode = this.statiionCodeArray[e.target.value].stationCode;
    },

    async getList(code) {
      const url =
        this.name == "结构缝开度"
          ? "/gunshiApp/ykz/osmoticJointR/list"
          : "/gunshiApp/ykz/osmoticPressR/list";
      try {
        const { data } = await uni.$http.post(url, {
          dateTimeRangeSo: { start: this.stm, end: this.etm },
          stationCode: code,
        });
        if (data.code == 200) {
          this.dataSources = data.data;
          this.chartData = this.name == "结构缝开度"? {...drpOption(data.data)} : {...syOption(data.data)}
        }
      } catch (error) {
        console.log(error);
      }
    },

    searchHandle() {
      this.getList(this.stationCode);
    },
    handleStartTime(e) {
      let time = moment(e.value).format("YYYY-MM-DD HH:mm:ss");
      console.log("time", time);

      this.stm = time;
      this.showTime = false;
    },
    handleEndTime(e) {
      let time = moment(e.value).format("YYYY-MM-DD HH:mm:ss");
      this.etm = time;
      this.showTime1 = false;
    },
    handleRanger(e) {
      console.log(e);
      this.tm = [...e];
    },
    typeOnChange(e) {
      this.name = this.watchArr[e.target.value].name;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.picker-sel {
  display: flex;
  justify-content: center;
  // column-gap: 10px;
  margin-top: 50px;
  padding: 0 10px;
}
.uni-input12 {
  display: flex;
  justify-content: center;
  column-gap: 10px;
  align-items: center;
  padding: 5px 0;
  border: 1px solid #f2f2f2;
  border-left: none;
  border-right: none;
  //    background-image: '../../static/images/';
}

.jcsj-box {
  padding: 0 10px;

  .jcsj-content {
    max-height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .tool-btn {
      display: flex;
      justify-content: space-between;
      align-items: "center";
      padding: 5px;

      .scale-btn {
        display: flex;

        button {
          height: 40px;
        }
      }
    }
  }

  .jcsj-charts {
    width: 1310px;
    height: 250px;
    overflow-y: auto;

    // margin-top: 20px;
    & > movable-area {
      height: 250px;
      width: 3000px;
      // position:fixed;
      overflow: hidden;
      z-index: 1;
      background-color: #efefef;

      movable-view {
        display: flex;
        justify-content: center;
        width: 1310px;
        height: 380px;
        background-color: #fff;
        left: 450px;
        top: 10px;
      }
    }

    .active {
      border-color: #68bbff !important;
      color: #68bbff;
    }
  }

  .aqjc-custom-style {
    width: 80rpx;
  }
}
</style>