<template>
  <el-dialog :visible.sync="dialogFormVisible" title="请选择起止日期" append-to-body>
    <div>
      <!--筛选条件-->
      <div>
        <el-form ref="dataForm" :inline="true" :model="dateForm" class="form-container">
          <el-row>
            <el-form-item class="selectForm-container-item" prop="startDate">
              <el-date-picker
                v-model="timeRange"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="截止日期"/>
            </el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">搜索</el-button>
          </el-row>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SelectDate',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      mapShow: false,
      dateForm: {
        startDate: '',
        endDate: ''
      }, // 表单
      timeRange: [], // 时间范围
      rules: {
        date: [{ required: true, message: '请选择日期', trigger: ['blur', 'change'] }]
      },
      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      markers: [],
      mapMarkers: [],
      clusters: [],
      offset: [-10, -10], // 偏移量
      alarmOffset: [-15, -30], // 偏移量
      loading: false,
      zoom: 11, // 地图缩放比例
      zooms: [11, 19], // 最小地图比例
      commonIcon: 'kkj-location', // 通用图标 绿
      events: {
        // init: (o) => {
        //   // this.fetchStaticData()
        // },
        'zoomchange': (val) => {
          console.log(val)
          this.onZoomChange()
        }
      }
    }
  },
  watch: {
    timeRange(val) {
      if (val && val.length > 0) {
        this.dateForm.startDate = val[0]
        this.dateForm.endDate = val[1]
      } else {
        this.dateForm.startDate = ''
        this.dateForm.endDate = ''
      }
    }
  },
  mounted() {},
  methods: {
    // 初始化对话框
    initDialog: function(dialogFormVisible) {
      this.dateForm.startDate = ''
      this.dateForm.endDate = ''
      this.timeRange = []
      this.dialogFormVisible = dialogFormVisible
    },
    cancel() {
      this.dialogFormVisible = false
      this.dateForm.startDate = ''
      this.dateForm.endDate = ''
      this.timeRange = []
    },
    searchData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$emit('closeMain', this.dateForm)
          this.dialogFormVisible = false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  // 地图
  .overview-map-container{
    width: 100%;
    padding: 5px;
    .map-demo{
      width: 100%;
      height: calc(100vh - 146px);
      .svg-icon{
        width: 20px;
        height: 20px;
      }
      .alarm-icon{
        width: 29px;
        height: 30px;
      }
      .nomal-info-window{
        background-color: pink;
      }
      .info-window{
        max-width: 250px;
        /*background-color: lightcyan;*/
        .info-header{
          padding: 10px 10px 5px 10px;
          line-height: 30px;
          font-weight: bold;
          /*background-color: #eaf4ff;*/
        }
        .info-body{
          padding: 5px 10px 10px 10px;
          line-height: 23px;
          font-size: 14px;
        }
      }
      .alarm-window{
        max-width: 250px;
        /*background-color: #ffeaf1;*/
        .alarm-header {
          padding: 10px 10px 5px 10px;
          line-height: 30px;
          color: red;
          font-weight: bold;
          /*background-color: #ffecec;*/
        }
        .alarm-body{
          padding: 5px 10px 10px 10px;
          line-height: 23px;
          font-size: 14px;
          .alarm-red{
            color: #ff0000;
          }
        }
      }
    }
  }
  .el-divider--horizontal{
    margin: 5px 0;
  }
</style>