<template>
  <div class="page-panel">
    <!-- 参数设置 -->
    <div class="params-seting">
      <el-form :model="form" size="small" label-width="auto">
        <div class="head-title">参数设置</div>
        <el-form-item label="监测站点：" label-width="90px">
          <el-select placeholder="选择监测站点" v-model="form.targetSite" @change="targetSiteChange" style="width:100%">
            <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期范围：" label-width="90px">
          <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy/MM/dd" format="yyyy/MM/dd" style="width:100%" clearable></el-date-picker>
        </el-form-item>
        <div class="head-title">监测站点设置</div>
        <el-form-item label="参数设置：" label-width="90px">
          <el-select placeholder="选择参数" v-model="form.targetName" filterable style="width:100%">
            <el-option v-for="(item,index) in paramsOPtion" :key="index" :label="item.targetName+' ['+item.targetCode+']'" :value="item.targetCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'上游站点：('+upper.length+'/'+checkedUppers.length+')'" class="block-item">
          <div class="data-container">
            <div v-if="upper.length==0" class="empty">暂无数据</div>
            <el-checkbox-group v-model="checkedUppers" @change="getSelectedSite()">
              <ul>
                <li v-for="(item,index) in upper" :key="index">
                  <el-checkbox :label="item.id" :key="item.id">
                    <span :title="item.siteName">{{item.siteName}}</span>
                    <span>距离：{{item.distance}}km</span>
                  </el-checkbox>
                </li>
              </ul>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item :label="'下游站点：('+lower.length+'/'+checkedLowers.length+')'" class="block-item">
          <div class="data-container">
            <div v-if="lower.length==0" class="empty">暂无数据</div>
            <el-checkbox-group v-model="checkedLowers" @change="getSelectedSite()">
              <ul>
                <li v-for="(item,index) in lower" :key="index">
                  <el-checkbox :label="item.id" :key="item.id">
                    <span :title="item.siteName">{{item.siteName}}</span>
                    <span>距离：{{item.distance}}km</span>
                  </el-checkbox>
                </li>
              </ul>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item :label="'其他站点：('+other.length+'/'+checkedOthers.length+')'" class="block-item">
          <div class="data-container" style="height:100px">
            <div v-if="other.length==0" class="empty">暂无数据</div>
            <el-checkbox-group v-model="checkedOthers" @change="getSelectedSite()">
              <ul>
                <li v-for="(item,index) in other" :key="index">
                  <el-checkbox :label="item.id" :key="item.id">
                    <span :title="item.siteName">{{item.siteName}}</span>
                    <span>距离：{{item.distance}}km</span>
                  </el-checkbox>
                </li>
              </ul>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{backgroundColor:'#eaf1fd',height:'39px',textAlign:'center',fontWeight:600}" max-height="300px">
        <el-table-column label="顺序" align="center" width="50">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column prop="siteName" label="名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="drainageType" label="类型" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" style="padding:0" @click="moveUp(scope)">上移</el-button>
            <el-button type="text" style="padding:0" @click="moveDown(scope)">下移</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 按钮 -->
    <div class="btn-div">
      <el-button type="primary" style="width:80px" size="small" @click="getManySiteCurv()">分析</el-button>
      <el-button type="primary" style="width:80px" size="small">清空</el-button>
    </div>
  </div>
</template>

<script>
import { getDevicetargetp, getSteLink } from '@/views/spectrum/statisticalAnalysis/api/api'
import { getSites } from '@/views/spectrum/dynamicMonitor/api/api'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      resultPathId: '/spectrum/statisticalAnalysis/wqMultipleSites/sitesanalysisResult',
      form: {},
      paramsOPtion: [],
      siteOption: [],
      upper: [],
      lower: [],
      other: [],
      checkedUppers: [],
      checkedLowers: [],
      checkedOthers: [],
      tableData: []
    }
  },
  mounted() {
    // this.getDevicetargetp()
    this.getSites()
  },
  destroyed() {
    this.$store.dispatch('map/handelClose', this.resultPathId)
  },
  watch: {},
  methods: {
    /**
     * 获取监测指标
     */
    getDevicetargetp(sectionId) {
      let formData = new FormData()
      formData.append('sectionId', sectionId)
      getDevicetargetp(formData).then((res) => {
        if (res.code == 1 && res.result) {
          let result = res.result.showVos
          this.paramsOPtion = result
        }
      })
    },
    /**
     * 获取站点
     */
    getSites() {
      getSites({ projectId: this.$store.state.project.project.id, size: 1000 }).then((res) => {
        if (res.code && res.code == 1) {
          this.siteOption = res.result.records
        }
      })
    },
    /**
     * 获取关联的上下游及其他站点
     */
    getSteLink(siteId) {
      getSteLink({ coordinate: 'WGS84', id: siteId }).then((res) => {
        if (res.code == 1 && res.result) {
          let result = res.result
          this.upper = result.upper
          this.lower = result.lower
          this.other = result.other
        }
      })
    },
    /**
     * 选择站点
     */
    targetSiteChange(val) {
      this.checkedUppers = []
      this.checkedOthers = []
      this.checkedLowers = []
      this.getSteLink(val)
      let currentSite = this.siteOption.find((item) => {
        return item.id == val
      })
      this.$set(this.form, 'targetName', undefined)
      this.getDevicetargetp(currentSite.sectionId)
      this.tableData = [currentSite]
    },
    /**
     * 显示选择的站点
     */
    getSelectedSite() {
      let tableData = []
      let currentSite = this.siteOption.find((item) => {
        return item.id == this.form.targetSite
      })
      tableData = [currentSite]

      let loopFindSite = (checkeds) => {
        checkeds.forEach((item) => {
          let other = this.siteOption.find((item2) => {
            return item2.id == item
          })
          tableData.push(other)
        })
      }
      loopFindSite(this.checkedUppers)
      loopFindSite(this.checkedLowers)
      loopFindSite(this.checkedOthers)
      this.tableData = tableData
    },
    /**
     * 站点上移
     */
    moveUp(scope) {
      let index = scope.$index
      if (index > 0) {
        let upData = this.tableData[index - 1]
        this.tableData.splice(index - 1, 1)
        this.tableData.splice(index, 0, upData)
      } else {
        this.$message.info('已经是第一条了！')
      }
    },
    /**
     * 站点下移
     */
    moveDown(scope) {
      let index = scope.$index
      if (index + 1 == this.tableData.length) {
        this.$message.info('已经是最后一条了！')
      } else {
        let downData = this.tableData[index + 1]
        this.tableData.splice(index + 1, 1)
        this.tableData.splice(index, 0, downData)
      }
    },
    /**
     * 获取分析结果
     */
    getManySiteCurv() {
      if (!this.form.targetName) {
        this.$message.info('请选择目标参数！')
        return
      }
      if (!this.form.date || this.form.date.length < 2) {
        this.$message.info('请选择时间段！')
        return
      }
      if (!this.form.targetSite) {
        this.$message.info('请选择目标站点！')
        return
      }
      // 目标参数
      let target = this.paramsOPtion.find((item) => {
        return item.targetCode == this.form.targetName
      })
      // 目标站点
      let targetSite = this.siteOption.find((item) => {
        return item.id == this.form.targetSite
      })
      let beginTime = this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00')
      let endTime = this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
      let titleName = `${target.targetName}[${target.targetCode}]对比分析结果（${beginTime}~${endTime}）`
      let targetName = `${target.targetName}[${target.targetCode}]`
      let param = {
        params: {
          beginTime: beginTime,
          endTime: endTime,
          granularity: '2',
          siteId: this.tableData.map((item) => {
            return item.id
          }),
          targetName: this.form.targetName
        },
        titleName: titleName,
        targetSite: targetSite,
        targetName: targetName,
        sites: this.tableData
      }

      const data = {
        pathId: this.resultPathId,
        widgetid: 'HalfPanel',
        label: '多站点水质分析对比结果',
        param: param
      }
      this.$store.dispatch('map/handelClose', data)
      this.$store.dispatch('map/changeMethod', data)

      // getManySiteCurv(data).then((res) => {
      //   console.log('0000', res)
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './css.scss';
</style>