<template>
  <div>
    <!-- 参数设置 -->
    <div class="params-seting">
      <el-form :model="form" size="small" label-width="auto">
        <div class="head-title">参数设置</div>
        <el-form-item label="检测指标：">
          <el-select placeholder="选择指标" style="width:100%">
            <el-option
              v-for="(item,index) in []"
              :key="index"
              :label="item.siteName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间：">
          <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"
            :clearable="false"
            style="width:100%"
          ></el-date-picker>
        </el-form-item>
        <div class="head-title">监测站点设置</div>
        <el-form-item label="检测站点：">
          <el-select placeholder="选择检测站点" style="width:100%">
            <el-option
              v-for="(item,index) in []"
              :key="index"
              :label="item.siteName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上游站点：" class="block-item">
          <div class="data-container">
            <ul>
              <li v-for="(item,index) in []" :key="index">
                <el-checkbox v-model="item.checked">
                  <span>中国邮政院内</span>
                  <span>距离：3.97KM</span>
                </el-checkbox>
                <div></div>
              </li>
            </ul>
          </div>
        </el-form-item>
        <el-form-item label="下游站点：" class="block-item">
          <div class="data-container"></div>
        </el-form-item>
        <el-form-item label="其他站点：" class="block-item">
          <div class="data-container" style="height:100px"></div>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{height:'39px',textAlign:'center',fontWeight:600}"
      >
        <el-table-column prop="date" label="统计顺序"></el-table-column>
        <el-table-column prop="name" label="检测站点名称" width="180"></el-table-column>
        <el-table-column prop="address" label="设备类型"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text">上移</el-button>
            <el-button type="text">下移</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {}
    }
  },
  mounted() {},
  destroyed() {},
  methods: {}
}
</script>

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