<template>
  <el-dialog title="手动加测" width="80%" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <el-radio-group v-model="plain.type" @change="typeHandler">
      <el-radio :label="1">根据设置垂线测流</el-radio>
      <el-radio :label="2">指定临时垂线测流</el-radio>
    </el-radio-group>
    <div style="margin-top: 10px">
      <ChartList v-if="plain.type===1" :plain="plain" />
      <Chart v-if="plain.type===2" :plain="plain" @addPoint="addPoint" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getSiteSection, listPlainPoint} from "@/api/site/berthing";
import {getConfig} from "@/api/site/site";
import {getWaterLevel, manualMeasure} from "@/api/analysis/achievement";
import ChartList from '@/views/site/plain-point/chart-list';
import Chart from '@/views/site/plain-point/chart';

export default {
  components: {
    ChartList,
    Chart,
  },
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      plain: {
        type: 1,
        wlevelmax: 0,
        wlevelmin: 0,
        waterlevel: 0,
        wlevel: 0,
        sections: [],
        list: [],
        positions: [],
      },
      site: {},
    }
  },
  methods: {
    open(site) {
      this.site = site;
      this.dialogFormVisible = true;
      this.getList();
      this.loadConfig();
      this.loadSection();
      this.loadWaterLevel();
    },
    getList() {
      this.loading = true;
      listPlainPoint({ siteId: this.site.siteId, page: 1, size: 10000 }).then(response => {
          this.plain.list = response.data.records;
          this.loading = false;
        }
      );
    },
    loadConfig() {
      getConfig(this.site.siteId).then((res) => {
        const { wlevelmax, wlevelmin } = res.data || {};
        this.plain.wlevelmax = wlevelmax;
        this.plain.wlevelmin = wlevelmin;
      })
    },
    loadSection() {
      getSiteSection(this.site.siteId).then((res) => {
        const { positions } = res.data || {};
        this.plain.sections = JSON.parse(positions) || [];
      })
    },
    loadWaterLevel() {
      getWaterLevel(this.site.siteId).then((res) => {
        const { waterlevel } = res.data || {};
        this.plain.waterlevel = waterlevel;
      })
    },
    typeHandler() {
      if (this.plain.type === 1) {
        this.plain.wlevel = 0;
      } else {
        this.plain.wlevel = this.plain.waterlevel || (this.plain.wlevelmin + this.plain.wlevelmax) / 2;
        this.plain.positions = [];
      }
    },
    addPoint(point) {
      if (this.plain.positions.includes(point)) {
        const positions = [...this.plain.positions];
        const index = positions.indexOf(point);
        positions.splice(index, 1);
        this.plain.positions = positions;
        return;
      }
      const positions = [...this.plain.positions, point];
      positions.sort((a, b) => a - b);
      this.plain.positions = positions;
    },
    submit() {
      const data = {
        type: this.plain.type,
        siteId: this.site.siteId,
      }
      if (this.plain.type === 1) {
        if (this.plain.list.length === 0) {
          return this.$message.error("请先设置停泊点");
        }
      }
      if (this.plain.type === 2) {
        if (this.plain.positions.length === 0) {
          return this.$message.error("请添加停泊点");
        }
        data.positions = this.plain.sections.filter((s) => this.plain.positions.includes(s.x));
      }
      manualMeasure(data).then(() => {
        this.$message.success("加测指令下发成功");
        this.dialogFormVisible = false;
      });
    }
  }
}
</script>

<style scoped>

</style>
