<template>
  <section class="psList">
    <ai-list>
      <ai-title slot="title" title="党员积分" isShowBottomBorder/>
      <template #left>

        <ai-tree-menu title="组织目录" searchPlaceholder="请输入党组织名称" @search="onSearch">
          <ai-party-tree
              :filter-node-method="filterNode"
              ref="tree"
              default-first-option
              :instance="instance"
              :root="user.info.organizationId"
              :current-node-key="user.info.id"
              @select="onTreeChange"/>
        </ai-tree-menu>
      </template>
      <template #content>
        <ai-search-bar>
          <template #left>
            <div>统计周期</div>
            <el-date-picker size="small" v-model="searchDotime" type="daterange" range-separator="至" @change="timeChange"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
          </template>
          <template #right>
            <el-input size="small" placeholder="党员姓名" v-model="search.name" clearable
                      @change="page.current=1,getTableData()" suffix-icon="iconfont iconSearch"/>
            <ai-download :instance="instance" url="/app/apppartyintegralinfo/exportListByOrg" :params="search" fileName="党员积分" :disabled="tableData.length == 0">
              <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
            </ai-download>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                  @getList="getTableData" :col-configs="colConfigs" :dict="dict">
          <el-table-column slot="options" label="操作" fixed="right" align="center">
            <template slot-scope="{row}">
              <el-button type="text" @click="showDetail(row)">详情</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
  </section>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "psList",
  props: {
    instance: Function,
    dict: Object,
  },
  computed: {
    ...mapState(['user']),
    orgTree() {
      return this.$refs.tree?.$refs?.partyTree
    },
    colConfigs() {
      return [
        {label: "排行榜", prop: "orderIndex", align: "center"},
        {label: "党员姓名", prop: "name", align: "center"},
        {label: "党员类型", prop: "partyType", dict: "partyType", align: "center"},
        {label: "获得积分", prop: "integral", align: "center"},
        {slot: "options"}
      ]
    },
  },
  data() {
    return {
      searchDotime: [],
      search: {
        startTime: '',
        endTime: '',
        name: '',
      },
      page: {current: 1, size: 10, total: 0},
      tableData: [],
      organizationName: '',
      organizationTree: [],
      defaultExpanded: [],
      defaultChecked: [],
      areaTree: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      createTime: '',
      partyOrgId: '',
    }
  },
  methods: {
    back() {
      this.$router.push({})
    },
    getTableData() {
      this.instance.post("/app/apppartyintegralinfo/listByOrg", null, {
        params: {...this.page, ...this.search, partyOrgId: this.partyOrgId }
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },

    timeChange() {
      if (this.searchDotime) {
        this.search.startTime = this.searchDotime[0]
        this.search.endTime = this.searchDotime[1]
      } else {
        this.search.startTime = null
        this.search.endTime = null
      }
      this.search.current = 1
      this.getTableData()
    },
    
    onSearch(v) {
      this.orgTree.filter(v)
    },

    onTreeChange(e) {
      this.partyOrgId = e.id

      this.$nextTick(() => {
        this.getTableData()
      })
    },

    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    showDetail(row) {
      console.log(row);
      this.$router.push({query: { id: row.partyId, name: row.name, nowIntegral: row.nowIntegral}})
    },
  },
  created() {
    this.dict.load('partyType').then(() => {
      this.getTableData()
    })
  }
}
</script>

<style lang="scss" scoped>
.psList {
  height: 100%;

  ::v-deep .is-current>.el-tree-node__content{
    width: 100%!important;
    padding-right: 16px!important;
  }
}
</style>
