<template>
  <ai-list class="partyList">
    <template slot="title">
      <ai-title title="党员管理" isShowBottomBorder/>
    </template>
    <template #left>
      <ai-tree-menu title="组织目录" searchPlaceholder="请输入党组织名称" @search="onSearch">
        <ai-party-tree
            :filter-node-method="filterNode"
            ref="tree"
            :instance="instance"
            :root="user.info.organizationId"
            :current-node-key="selected.id"
            @select="onTreeChange"/>
      </ai-tree-menu>
    </template>
    <template slot="content">
      <ai-search-bar>
        <template #left>
          <ai-select v-model="search.sex" placeholder="请选择性别" :selectList="dict.getDict('sex')"
                     @change="search.current = 1, getList()"></ai-select>
          <ai-select v-model="search.nation" placeholder="请选择民族" :selectList="dict.getDict('nation')"
                     @change="search.current = 1, getList()"></ai-select>
          <ai-select v-model="search.partyStatus" placeholder="请选择党籍状态" :selectList="dict.getDict('partyStatus')"
                     @change="search.current = 1, getList()"></ai-select>
          <ai-select v-model="search.flowStatus" placeholder="请选择流动状态" :selectList="dict.getDict('flowStatus')"
                     @change="search.current = 1, getList()"></ai-select>
          <ai-select v-model="search.education" placeholder="请选择文化程度" :selectList="dict.getDict('education')"
                     @change="search.current = 1, getList()"></ai-select>
          <ai-select v-model="search.partyPosition" placeholder="请选择党内职务" :selectList="dict.getDict('partyPosition')"
                     @change="search.current = 1, getList()"></ai-select>
          <ai-select v-model="search.disciplinary" placeholder="请选择违纪情况" :selectList="dict.getDict('disciplinary')"
                     @change="search.current = 1, getList()"></ai-select>
          <ai-search label="出生日期">
            <el-date-picker
                size="small"
                v-model="search.birthStart"
                type="date"
                placeholder="开始日期"
                format="yyyy-MM-dd"
                style="width: 180px"
                @change="search.current = 1, getList()"
                clearable
                :value-format="'yyyy-MM-dd'+' 00:00:00'"/>
            <el-date-picker
                size="small"
                v-model="search.birthEnd"
                type="date"
                placeholder="结束日期"
                format="yyyy-MM-dd"
                style="width: 180px"
                @change="search.current = 1, getList()"
                clearable
                :value-format="'yyyy-MM-dd'+' 23:59:59'"/>
          </ai-search>
          <ai-search label="入党时间">
            <el-date-picker
                size="small"
                v-model="search.joinPartyStart"
                type="date"
                style="width: 180px"
                placeholder="开始日期"
                format="yyyy-MM-dd"
                @change="search.current = 1, getList()"
                clearable
                :value-format="'yyyy-MM-dd'+' 00:00:00'">
            </el-date-picker>
            <el-date-picker
                size="small"
                v-model="search.joinPartyEnd"
                type="date"
                style="width: 180px"
                placeholder="结束日期"
                format="yyyy-MM-dd"
                @change="search.current = 1, getList()"
                clearable
                :value-format="'yyyy-MM-dd'+' 23:59:59'">
            </el-date-picker>
          </ai-search>
          <ai-search label="年龄">
            <ai-range v-model="search.age" ref="resetagefoo" @change="search.current = 1, getList()"
                      @closeVal="search.age = []"/>
          </ai-search>
        </template>
        <template slot="right">
          <el-input
              v-model="search.con"
              size="small"
              placeholder="请输入姓名或身份证"
              clearable
              @change="search.current=1,getList()"
              suffix-icon="iconfont iconSearch"/>
        </template>
      </ai-search-bar>
      <ai-search-bar>
        <template #left>
          <el-button size="small" :disabled="!isShowAddBtn" type="primary" icon="iconfont iconAdd" @click="toAdd()">
            添加党员
          </el-button>
        </template>
        <template #right>
          <ai-import :instance="instance" :dict="dict" type="appparty" name="党员管理" @success="getList()"></ai-import>
          <ai-download :instance="instance" :params="exportQuery" url="/app/appparty/export2" fileName="党员明细"/>
        </template>
      </ai-search-bar>
      <ai-table
          :dict="dict"
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          v-loading="loading"
          style="margin-top: 6px;"
          :current.sync="search.current"
          :size.sync="search.size"
          @handleSelectionChange="handleSelectionChange"
          @getList="getList">
        <el-table-column slot="options" width="220px" fixed="right" label="操作" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
              <el-button type="text" @click="remove(row.id)">删除</el-button>
              <el-button type="text" @click="showNeighbourSetting(row.id)"
                         v-if="permissions('app_apppartyfourresident_detail')">四邻设置
              </el-button>
            </div>
          </template>
        </el-table-column>
        <div slot="paginationBtns" class="party-table__btns">
          <span style="margin-right: 8px;" @click="removeAll">批量删除</span>
        </div>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'List',

  props: {
    instance: Function,
    permissions: Function,
    dict: Object,
    selected: Object
  },
  data() {
    return {
      search: {
        current: 1,
        size: 10,
        con: '',
        age: [],
        sex: '',
        nation: '',
        partyStatus: '',
        flowStatus: '',
        education: '',
        partyPosition: '',
        birthStart: '',
        birthEnd: '',
        turnPositiveStart: '',
        turnPositiveEnd: '',
        joinPartyStart: '',
        joinPartyEnd: ''
      },
      orgName: '',
      loading: false,
      total: 0,
      colConfigs: [
        {type: 'selection', label: ''},
        {prop: 'name', label: '姓名', align: 'center'},
        {prop: 'sex', label: '性别', align: 'center', dict: 'sex'},
        {prop: 'age', label: '年龄', align: 'center'},
        // {
        //   prop: 'auditStatus', label: '审核状态', align: 'center',
        //   render: (h, {row}) => h('span', {class: `audit-${row.auditStatus}`}, this.dict.getLabel('auditStatus', row.auditStatus))
        // },
        {prop: 'partyStatus', label: '党籍状态', align: 'center', dict: 'partyStatus'},
        {prop: 'joinPartyTime', label: '入党日期', align: 'center'},
        {prop: 'partyPosition', label: '党内职务', align: 'center', dict: 'partyPosition'},
        {prop: 'flowStatus', label: '流动状态', align: 'center', dict: 'flowStatus'},
      ],
      tableData: [],
      ids: '',
    }
  },
  computed: {
    ...mapState(['user']),
    orgTree() {
      return this.$refs.tree?.$refs?.partyTree
    },
    exportQuery() {
      let {id: partyOrgId} = this.selected
      return {
        ids: this.ids ? this.ids.split(',') : [],
        ...this.search, partyOrgId
      }
    },
    isShowAddBtn() {
      return this.selected.isLeaf == 1
    }
  },
  created() {
    this.dict.load('disciplinary', 'partyType', 'sex', 'nation', 'education', 'partyStatus', 'partyPosition', 'flowStatus', 'auditStatus')
    this.getList()
  },
  methods: {
    showNeighbourSetting(id) {
      this.$router.push({query: {id}, hash: "#ns"})
    },
    onTreeChange(e) {
      this.$emit("update:selected", e)
      this.getList(e.id)
    },

    onSearch(v) {
      this.orgTree.filter(v)
    },

    getList(partyOrgId) {
      if (!this.user.info.organizationId) return

      this.loading = true
      partyOrgId = partyOrgId || this.selected.id
      this.instance.post(`/app/appparty/list`, null, {
        params: {partyOrgId, ...this.search, age: this.search.age?.join(',')}
      }).then(res => {
        this.loading = false
        if (res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      }).catch(() => {
        this.loading = false
      })
    },
    removeAll() {
      if (!this.ids) {
        return this.$message.error('请选择党员')
      }
      this.remove(this.ids)
    },
    handleSelectionChange(e) {
      this.ids = e.map(v => v.id).join(',')
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    remove(id) {
      this.$confirm('确定删除该数据？').then(() => {
        this.instance.post(`/app/appparty/delete?ids=${id}`).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },
    toDetail(id) {
      this.$router.push({query: {id}})
    },
    toAdd(id) {
      this.$router.push({query: {id}, hash: "#add"})
    }
  }
}
</script>

<style lang="scss" scoped>
.partyList {
  .party-table__btns {
    display: flex;
    align-items: center;
  }

  ::v-deep .audit-0 {
    color: #FF8822 !important;
  }

  ::v-deep .audit-1 {
    color: #2EA222 !important;
  }

  ::v-deep .ai-list__content--right {
    flex: 1;
    min-width: 0;
    margin-left: 1px;
    box-shadow: none;

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