<template>
  <page-table
    ref="pageTable"
    url="/report/design/reportList"
    export-url="/report/design/reportExport"
    :more-condition="isMoreCondition"
    :create-request="false"
  >
    <template #condition="{condition}">
      <el-col v-for="item in conditionList" :span="6">
        <el-form-item :label="item.name">
          <date-scope-picker v-if="item.type==='dateTime'" :mode="condition" :start-time-key="`${item.prop}Start`" :end-time-key="`${item.prop}End`" />
          <select-enum v-else-if="item.type==='enum'" :class-name="item.code" clearable />
          <vocabulary-select v-else-if="item.type==='dict'" :code="item.code" clearable />
          <el-input v-else v-model="condition[item.prop]" clearable />
        </el-form-item>
      </el-col>
    </template>
    <template #moreCondition="{condition}">
      <el-row>
        <el-col v-for="item in moreCondition" :span="6">
          <el-form-item :label="item.name">
            <date-scope-picker v-if="item.type==='dateTime'" :mode="condition" :start-time-key="`${item.prop}Start`" :end-time-key="`${item.prop}End`" />
            <select-enum v-else-if="item.type==='enum'" :class-name="item.code" clearable />
            <vocabulary-select v-else-if="item.type==='dict'" :code="item.code" clearable />
            <el-input v-else v-model="condition[item.prop]" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    <template>
      <el-table-column
        v-for="item in data.fieldInfoList"
        :label="item.name"
        :prop="item.prop"
        width="150"
        show-overflow-tooltip
      />
    </template>
  </page-table>
</template>

<script>
import {getById} from "./api/report/design";
import PageTable from "./components/PageTable/PageTable";
import DateScopePicker from "./components/DateScopePicker";
import SelectEnum from "./components/SelectList/SelectEnum";
import VocabularySelect from "./components/vocabulary/VocabularySelect";

export default {
  name: "Report",
  components: {VocabularySelect, SelectEnum, DateScopePicker, PageTable},
  mounted() {
    let id = this.$route.query.id;
    this.getReportInfo(id, this.$route);
  },
  data() {
    return {
      data: {
        conditionList: [],
        id: null,
      },
      id: null,
    }
  },
  computed: {
    params() {
      return {id: this.id}
    },
    isMoreCondition() {
      return this.data.conditionList.length > 3;
    },
    conditionList() {
      if (this.isMoreCondition) {
        return this.data.conditionList.slice(0, 3);
      }
      return this.data.conditionList;
    },
    moreCondition() {
      if (this.isMoreCondition) {
        return this.data.conditionList.slice(3, this.data.conditionList.length);
      }
      return [];
    },
  },
  watch:{
    $route(to,from) {
      let id = to.query.id;
      if (to.name === 'Report') {
        this.getReportInfo(id, to);
      }
    },
  },
  methods: {
    getReportInfo(id, to) {
      this.id = id;
      if (id) {
        getById(id).then((response) => {
          let data = response.data;
          to.meta.title = data.name;
          this.data = data;
          this.changeRouterName(to);
        });
        this.$refs.pageTable.condition.id = id;
        this.$refs.pageTable.getPage();
      }
    },
    changeRouterName(to) {
      let title = to.meta.title;
      this.$store.state.tagsView.visitedViews.forEach((item)=>{
        if (item.fullPath === to.fullPath) {
          item.title = title;
        }
      })
    },

  }

};
</script>

<style scoped>
/deep/.search-box .el-col {
  margin-right: 0;
  margin-bottom: 0;
}
</style>
