<template>
  <div>
    <Card style="height:100%">
      <Drawer placement="right" :closable="false" v-model="showsearch" width="600">
        <Forms ref="searchform" :fminfo="searchinfo" style="height:100%">
          <template v-slot:default="slotProps">
            <Button
              v-for="bt in searchbtns"
              :key="bt.key"
              :type="bt.type"
              @click="doquery(slotProps.fm,bt.key)"
            >{{ bt.title }}</Button>
          </template>
        </Forms>
      </Drawer>
      <div>
        <tables
          ref="tables"
          editable
          searchable
          search-place="top"
          highlightRow
          v-model="tableData"
          :columns="colswithauth"
          @on-rapid-query="doquery"
          @on-exec="doexec"
          @on-select="onsels"
          @on-adv-search="advsearch"
        />
        <div style="text-align:center">
          <Page
            :total="pageInfo.total"
            :current.sync="pageInfo.pageNo"
            :page-size="pageInfo.pageSize"
            show-sizer
            @on-page-size-change="onsizeChange"
            @on-change="onpagechange"
          />
        </div>
      </div>
      <!-- <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button> -->
       <Drawer placement="right" :closable="false" v-model="showedform" width="70">
            <Forms  ref="edform" :fminfo="forminfo" style="height:100%"></Forms>
      </Drawer>
  
    </Card>

    <Modal v-model="isdel" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>Delete confirmation</span>
      </p>
      <div style="text-align:center">
        <p>After this task is deleted, the downstream 10 tasks will not be implemented.</p>
        <p>Will you delete it?</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="modal_loading" @click="delpost">Delete</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import Tables from "_c/tables";
import Forms from "./forms/forms";
import { getTableData } from "@/api/data";
export default {
  name: "tables_page",
  components: {
    Tables,
    Forms
  },
  props: {
    packageName: String,
    metaName: {
      type: String,
      default: "user_info"
    },
    isMulti: Boolean,
    sumfields: {
      type: Array,
      default() {
        return [];
      }
    },
    avgfields: {
      type: Array,
      default() {
        return [];
      }
    },
    calcfields: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    this.packageName = "auth";
    this.metaName = "user_info";
    return {
      metainfo: this.$store.getters[this.metaName],
      tableData: [],
      isdel: false,
      modal_loading: false,
      currentRow: null,
      currentSels: null,
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 100
      },
      searchModel: {},
      showsearch: false,
      showedform: false,

      sum_fields: this.sumfields ? this.sumfields : [],
      avg_fields: this.avgfields ? this.avgfields : [],
      calcdata: this.calcfields
        ? this.calcfields
        : [{ label: "余额", value: 1000 }],
      sumdata: {},
      avgdata: {}
    };
  },
  methods: {
    onpagechange() {
      this.fetchData();
    },
    buildQuery(qobj) {
      let rtn = {};
      if (qobj) {
        rtn.search = qobj;
      } else {
        rtn.search = this.$refs.searchform.formModel;
      }
      rtn.aggsinfo = { sum: this.sum_fields, avg: this.avg_fields };
      rtn.pageInfo = {
        pageSize: this.pageInfo.pageSize,
        pageNo: this.pageInfo.pageNo
      };
      return rtn;
    },
    advsearch() {
      this.showsearch = true;
    },
    onsizeChange(s) {
      this.pageInfo.pageSize = s;
    },
    onsels(sels, lastsel) {
      this.currentSels = currentSels;
      this.currentRow = lastsel;
    },
    delpost() {
      this.modal_loading = true;
      setTimeout(() => {
        this.isdel = false;
        this.modal_loading = false;
        this.currentRow = null;
      }, 2000);
    },
    doexec(key, row) {
      if (key == "delete") {
        this.currentRow = row;
        this.isdel = true;
      }
      if (key == "edit") {
        this.showedform = true;
      }
      console.log(key, row);
    },
    doquery(q, k) {
      if (k == "cancel-search") {
        this.$refs.searchform.resetForm();
        this.showsearch = false;
        return;
      }
      if (k == "start-search") {
        this.showsearch = false;
      }
      this.fetchData(q);
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    },
    fetchData(q) {
      let modelname = this.metaName.split("_");
      let url =
        "/web/" +
        this.packageName +
        "/" +
        modelname +
        "Ctl/" +
        "findAndCountAll";
      console.log(url);
      let query = this.buildQuery(q);
      getTableData(url, query).then(res => {
        console.log(res.data);
        this.tableData = res.data.data.results.rows;
        this.pageInfo.total = res.data.data.results.count;
      });
    }
  },
  mounted() {
    //从缓存中恢复查询条件
    this.fetchData();
  },
  created() {
    if (this.isMulti && this.metainfo) {
      this.metainfo["list"].unshift({
        type: "selection",
        width: 60,
        align: "center"
      });
    }
  },
  computed: {
    searchinfo() {
      return this.metainfo["search"];
    },
    forminfo() {
      return this.metainfo["form"];
    },
    formbtns() {
      return this.metainfo["auths"].filter(bt => {
        return bt.isOnForm;
      });
    },
    searchbtns() {
      return this.metainfo["auths"].filter(bt => {
        return bt.isInSearch;
      });
    },
    onlistbtns() {
      return this.metainfo["auths"].filter(bt => {
        return bt.isOnGrid;
      });
    },
    colswithauth() {
      let listbtns = this.metainfo["auths"].filter(bt => {
        return bt.isInRow;
      });
      this.metainfo["list"].forEach(c => {
        if (c.key == "handle") {
          c.button.push(...listbtns);
        }
      });

      return this.metainfo["list"];
    }
  }
};
</script>

<style>
</style>
