<template>
  <el-container>
    <el-main style="background: #fff;">
      <div class="pictureContainer">
        <div class="pictureHeader">
          <div class="left-panel">
            <div class="block">
              <span class="demonstration">时间段一</span>
              <el-date-picker
                v-model="dateRange1"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              />
            </div>
            <div class="block">
              <span class="demonstration">时间段二</span>
              <el-date-picker
                v-model="dateRange2"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              />
            </div>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="dateChange"
              class="search-button"
            >
              查询
            </el-button>
          </div>
        </div>

        <img :src="imgUrl" class="flowImg" v-if="imgUrl" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
    export default {
        data() {
            return { 
                imgUrl:'',
                dataObj:{ },
                dateRange1: [],
                dateRange2: [],
                pickerOptions: {
                    disabeledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            };
            
        },
        methods: {
            dateChange() {
                if (this.dateRange1.length !== 2 || this.dateRange2.length !== 2) {
                    this.$message.warning("请完整选择两个时间段！");
                    return;
                }
			let that = this;
            const payload = {
                startTime1: this.dateRange1[0],
                endTime1: this.dateRange1[1],
                startTime2: this.dateRange2[0],
                endTime2: this.dateRange2[1]
            }
            try {
                this.$API.enm.mpoint.showPicture.req(payload).then(res => {
                if (res.rel_path){
                    this.imgUrl = res.rel_path;
                }else{
                    this.$message.error("没有获取到图片地址");
                }
            })
            }
            catch (error) {
                console.log(error);
            }
            }
        }
    };
</script>
<style scoped>
.pictureContainer {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.pictureHeader {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.left-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: flex-start;
}

.block {
  display: flex;
  align-items: center;
  gap: 6px;
}

.block .demonstration {
  margin-bottom: 4px;
  font-size: 14px;
  color: #666;
}

.search-button {
  display: flex;
  align-items: center;
}

.flowImg {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 30px auto 0;
  object-fit: contain;
}
</style>
