<template>
  <div style="padding: 0 20px;">
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="预算计划">
      <div slot="content"></div>
      <slot>
        <div class="selects">

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
              关键字
            </span>
            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
          </div>

          <Button style="margin-left: 10px" type="primary"
                  @click="">重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="getList">查询</Button>
          <Button style="margin-left: 10px" type="primary" @click="$refs['addUpload'].type = 'add',$refs['addUpload'].show()">新增</Button>
        </div>
      </slot>
    </lx-header>

    <xy-table :list="list"
              :table-item="table"
              @editor="row => {
                $refs['addUpload'].id = row.id;
                $refs['addUpload'].type = 'editor';
                $refs['addUpload'].show();
              }"
              @delete="">
    </xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="total" @on-change="" show-elevator show-sizer @on-page-size-change="" />
    </div>

    <addUpload :plan_department_ids="depts" ref="addUpload" @refresh="getList"></addUpload>
  </div>
</template>

<script>
import { index,destroy } from "@/api/budget/prePlan"
import { listdeptNoAuth } from "@/api/system/department"
import addUpload from "./components/addUpload.vue"
export default {
  components:{
    addUpload
  },
  data() {
    return {
      depts: [],
      select: {
        page: 1,
        page_size: 10
      },
      total: 0,
      table: [
        {
          label: "所属年份",
          prop: "year",
          width:160
        },
        {
          label: "备注",
          prop: "remark",
          align: "left",
          minWidth: 200
        },
        {
          label: "上传时间",
          prop: "created_at",
          width: 200
        }
      ],
      list: []
    }
  },
  methods: {
    async getDept() {
      const res = await listdeptNoAuth({page:1,page_size:999})
      this.depts = res.data
    },
    async getList() {
      const res = await index(this.select)
      this.list = res.data
      this.total = res.total || 0
    }
  },
  computed: {},
  created() {
    this.getList();
    this.getDept();
  }
}
</script>

<style scoped lang="scss">
.selects{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>
