<template>
  <view :style="{ height: '100vh', overflow: 'auto', backgroundColor: '#fff' }">
    <u-navbar
      :title="name"
      :autoBack="true"
      :titleStyle="{
        fontSize: '18px',
      }"
      :height="40"
      :safeAreaInsetTop="true"
      leftIconSize="20"
      leftIconColor="rgb(153, 153, 153)"
    >
    </u-navbar>
    <view style="padding: 10px">
      <view class="time-ranger" style="margin-top: 70px">
        <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 v-if="tableData.length != 0">
          <view class="water-chart-area">
            <qiun-data-charts
              :chartData="chartData.chartData"
              :echartsApp="true"
              :eopts="chartData.eopts"
            />
          </view>
          <view class="water-table-area">
            <Table :tableData="tableData"></Table>
          </view>
        </view>
        <view
          style="
            height: calc(100vh - 150px);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
          "
          v-else
        >
          <image src="../../../static/empty.png" mode=""></image>
        </view>
      </view>
    </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>
</template>
<script>
import moment from "moment";
import Table from "./jcTable.vue";
import { numberFormat } from "../../utils/tool";
import drpOptions from "./jcOptions";
const stm = moment()
  .subtract(7, "days")
  .set({
    minute: 0,
    second: 0,
  })
  .format("YYYY-MM-DD HH:mm");
const etm = moment()
  .set({
    minute: 0,
    second: 0,
  })
  .format("YYYY-MM-DD HH:mm");
export default {
  components: {
    Table,
  },
  data() {
    return {
      name: "",
      stcd: "",
      startTime: stm,
      endTime: etm,
      stm,
      etm,
      showTime: false,
      showTime1: false,
      tableData: [],
      chartData: {},
    };
  },
  methods: {
    handleStartTime(e) {
      let time = moment(e.value).format("YYYY-MM-DD HH:mm");
      this.stm = time;
      this.showTime = false;
    },
    handleEndTime(e) {
      let time = moment(e.value).format("YYYY-MM-DD HH:mm");
      this.etm = time;
      this.showTime1 = false;
    },
    async geTableData() {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      try {
        const { data } = await uni.$http.post("/gunshiApp/tsg/stWaterR/list", {
          stcd: this.stcd,
          startTime: moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
          endTime: moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
          isAsc: false,
          orderField: "tm",
        });

        if (data.code == 200) {
          uni.hideLoading();

          this.tableData = [...data.data];
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    searchHandle() {
      this.geTableData();
    },
  },
  watch: {
    tableData(n, o) {
      let num = 0;
      if (n.length > 0) {
        n.forEach((s) => {
          num += Number(s.v);
        });
        this.chartData = {
          ...drpOptions(n, numberFormat(num)),
        };
      }
    },
  },
  mounted() {
    this.geTableData();
  },
  onLoad(options) {
    this.stcd = options.stcd;
    this.name = options.name;
  },
};
</script>
<style lang="scss" scoped>
.water-chart-area {
  width: 100%;
  height: 250px;
}
.water-table-area {
  margin-top: 10px;
}
</style>