<template>
  <div class="create-report">
    <el-row :gutter="10">
      <el-col :span="6" style="margin-top: 10px; margin-bottom: 10px">
        <dept-tree @deptChange="handleDeptChange" :showQuickGroup="true" />
      </el-col>
      <el-col :span="6" style="margin-top: 10px; margin-bottom: 10px">
        <!-- 时间范围选择 -->
        <el-date-picker
          v-model="dateValue"
          type="monthrange"
          format="yyyy-MM"
          value-format="yyyy-MM"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          @change="handleDateChange"
        >
        </el-date-picker>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DeptTree from "@/components/DeptTree/index.vue";
export default {
  name: "CreateReport",
  components: {
    DeptTree,
  },
  data() {
    return {
      deptId: "",
      dateValue: [],
    };
  },
  created() {
    this.initDate();
  },
  methods: {
    handleDeptChange(value) {
      this.deptId = value.deptId;
      console.log(value);
    },
    handleDateChange(value) {
      console.log(value);
    },
    initDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      this.dateValue = [`${year}-${month}`, `${year}-${month}`];
    },
  },
};
</script>

<style scoped>
.create-report {
  min-height: 50vh;
}
</style>
