<template>
  <section class="cadreFiles">
    <ai-search-bar>
      <template #left>
        <ai-select placeholder="档案状态" v-model="search.status" :selectList="dict.getDict('status')"
                   @change="page.current=1,getTableData()"/>
        <ai-select placeholder="性别" v-model="search.gender" :selectList="dict.getDict('sex')"
                   @change="page.current=1,getTableData()"/>
        <ai-select placeholder="民族" v-model="search.nation" :selectList="dict.getDict('nation')"
                   @change="page.current=1,getTableData()"/>
        <ai-select placeholder="离任状态" v-model="search.outStatus" :selectList="dict.getDict('outStatus')"
                   @change="page.current=1,getTableData()"/>
        <el-select
            v-model="search.servingInfo"
            size="small"
            multiple
            placeholder="职务信息（多选）"
            clearable
            @change="page.current=1,getTableData()"
            collapse-tags>
          <el-option v-for="(op,i) in dict.getDict('appVillageSearchType')" :key="i"
                     :label="op.dictName" :value="op.dictValue"/>
        </el-select>
        <ai-search label="出生年月">
          <el-date-picker
              size="small"
              v-model="search.birthdayRangeBegin"
              type="date"
              placeholder="开始日期"
              unlink-panels
              class="border-radius-tl border-radius-br ve-middle"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="page.current=1,getTableData()"
          />
          <el-date-picker
              size="small"
              v-model="search.birthdayRangeEnd"
              type="date"
              placeholder="结束日期"
              unlink-panels
              class="border-radius-tl border-radius-br ve-middle"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="page.current=1,getTableData()"
          />
        </ai-search>
        <ai-search label="入党时间">
          <el-date-picker
              size="small"
              v-model="search.membershipTimeRangeBegin"
              @change="page.current=1,getTableData()"
              type="date"
              placeholder="开始日期"
              unlink-panels
              class="border-radius-tl border-radius-br ve-middle"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd"/>
          <el-date-picker
              size="small"
              v-model="search.membershipTimeRangeEnd"
              @change="page.current=1,getTableData()"
              type="date"
              placeholder="结束日期"
              unlink-panels
              class="border-radius-tl border-radius-br ve-middle"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd"/>
        </ai-search>
      </template>
      <template #right>
        <el-input
            v-model="search.param"
            size="small"
            placeholder="姓名/身份证号/联系方式"
            prefix-icon="iconfont iconSearch"
            clearable
            @change="page.current=1,getTableData()"
        />
        <el-button
            type="primary"
            icon="iconfont iconSearch"
            style="margin-left:5px;"
            @click="page.current=1,getTableData()"
        >查询
        </el-button>
        <el-button
            icon="el-icon-refresh-right"
            style="margin-left:5px;"
            @click="resetSearch"
        >重置
        </el-button>
      </template>
    </ai-search-bar>
    <ai-search-bar>
      <template #left>
        <el-button
            type="primary"
            icon="iconfont iconAdd"
            size="small"
            v-if="$permissions('app_appvillagecadresnew_edit')"
            @click="handleShowDetail">添加
        </el-button>
        <el-button
            icon="iconfont iconDelete"
            size="small"
            v-if="$permissions('app_appvillagecadresnew_del')"
            @click="handleDel"
            class="del-btn-list"
            :disabled="!hasSelected"
        >删除
        </el-button>
        <ai-download url="/app/appvillagecadresnew/export" :instance="instance"
                     :params="{areaId,ids:ids.toString()}" fileName="村干部档案"/>
      </template>
    </ai-search-bar>
    <ai-table :tableData="tableData" :colConfigs="colConfigs" :dict="dict" :total="page.total"
              :current.sync="page.current" :size.sync="page.size"
              @selection-change="v=>ids=v.map(e=>e.id)"
              @getList="getTableData">
      <el-table-column slot="options" prop="operate" label="操作" align="center">
        <div slot-scope="{row}">
          <el-button type="text" v-if="$permissions('app_appvillagecadresnew_detail')"
                     @click="handleShowDetail(row)">详情
          </el-button>
        </div>
      </el-table-column>
    </ai-table>
  </section>
</template>

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

export default {
  name: "cadreFiles",
  inject: ['top'],
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    areaId: {default: ""}
  },
  watch: {
    areaId(v) {
      v && this.getTableData()
    }
  },
  data() {
    return {
      tableData: [],
      search: {
        name: "",
        gender: "",
        nation: "",
        birthdayRangeBegin: "",
        birthdayRangeEnd: "",
        membershipTimeRangeBegin: "",
        membershipTimeRangeEnd: "",
        servingInfo: [],
        param: "",
        areaId: ""
      },
      page: {current: 1, size: 10, total: 0},
      ids: []
    };
  },
  methods: {
    resetSearch() {
      this.page.current = 1;
      this.page.size = 10;
      this.search = {};
      this.getTableData()
    },
    ///请求列表+查询参数
    getTableData() {
      this.instance.post(`/app/appvillagecadresnew/list`, {
        ...this.search, ...this.page,
        areaId: this.areaId
      }).then(res => {
        this.tableData = res.data.records;
        this.page.total = res.data.total;
      })
    },
    //新增|查看村干部档案
    handleShowDetail(e) {
      let {id} = e
      if (id) {
        this.$router.push({query: {id}})
      } else {
        this.$router.push({hash: "#add"})
      }
    },
    //删除
    handleDel() {
      this.$confirm("是否要删除这些村干部档案?").then(() => {
        this.instance.post("app/appvillagecadresnew/delete", null, {
          params: {ids: this.ids.toString()}
        }).then(res => {
          if (res?.code == 0) {
            this.getTableData();
            this.$message.success("删除成功!");
          }
        })
      }).catch(() => 0);
    },
    ///导出个人信息
    exportExcel() {
      let {areaId} = this.user.info
      this.instance.post(`/app/appvillagecadresnew/export`, {areaId, ids: this.ids.toString()}).then(res => {
        if (res?.code == 0) {
          this.$message.success(res.data);
        }
      })
    },
  },
  created() {
    this.dict.load("cadrePositionType", "sex", "status", "appVillageSearchType", 'outStatus')
    this.resetSearch();
  },
  computed: {
    ...mapState(["user"]),
    colConfigs() {
      return [
        {type: 'selection'},
        {prop: "name", label: "姓名", align: 'center'},
        {prop: "gender", label: "性别", align: 'center', dict: 'sex'},
        {
          prop: "idNumber", label: "身份证号",
          render: (h, {row}) => h('span', null, this.idCardNoUtil.hideId(row.idNumber))
        },
        {label: "年龄", align: 'center', render: (h, {row}) => h('span', null, this.$calcAge(row.idNumber))},
        {
          prop: "membershipTime", label: "入党时间", align: 'center',
          render: (h, {row}) => h('span', null, this.$moment(row.membershipTime).format('YYYY-MM-DD')?.replace("Invalid Date", "-"))
        },
        {prop: "phone", label: "联系方式", align: 'center'},
        {prop: "outStatus", label: "离任状态", align: 'center', dict: 'outStatus'},
        {prop: "status", label: "档案状态", align: 'center', dict: 'status'},
        {slot: 'options'}
      ]
    },
    hasSelected() {
      return !!this.ids?.toString()
    }
  }
};
</script>

<style lang="scss" scoped>
.cadreFiles {
  width: 100%;
  height: 100%;
}
</style>


