<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="540px"
    title="选择时间段"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-date-picker
      v-model="createTime"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      value-format="timestamp"
      align="right"
      unlink-panels
    >
    </el-date-picker>

    <div slot="footer">
      <el-button @click="cancel" plain>取消</el-button>
      <el-button type="primary" @click="confirm" :disabled="isSubmit"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import pickerOptions from "@/constant/datePickerOptions";

export default {
  name: "ExportSetDialog",
  data() {
    return {
      pickerOptions,
      createTime: [],
      dialogVisible: false,
    };
  },
  methods: {
    cancel() {
      this.dialogVisible = false;
    },
    open() {
      this.dialogVisible = true;
    },
    confirm() {
      if (!this.createTime || !this.createTime.length) {
        this.$message.error("请选择时间段");
        return;
      }
      this.$emit("confirm", this.createTime);
    },
  },
};
</script>
