<template>
  <section class="listTpl">
    <ai-list isTabs>
      <template #content>
        <ai-search-bar>
          <template #left>
            <ai-select placeholder="档案状态" v-model="search.fileStatus"
                       :selectList="resident.dict.getDict('fileStatus')"
                       @change="page.current=1,refreshTable()"/>
            <ai-select placeholder="性别" v-model="search.sex"
                       :selectList="resident.dict.getDict('sex')"
                       @change="page.current=1,refreshTable()"/>
            <ai-select placeholder="文化程度" v-model="search.education"
                       :selectList="resident.dict.getDict('education')"
                       @change="page.current=1,refreshTable()"/>
            <ai-select placeholder="婚姻状况" v-model="search.maritalStatus"
                       :selectList="resident.dict.getDict('maritalStatus')"
                       @change="page.current=1,refreshTable()"/>
            <ai-select placeholder="民族" v-model="search.nation"
                       :selectList="resident.dict.getDict('nation')"
                       @change="page.current=1,refreshTable()"/>
            <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="search.birthStart"
                style="width:250px;border-radius:0;"
                type="date"
                size="small"
                unlink-panels
                placeholder="选择出生开始日期"
                @change="page.current=1,refreshTable()"
            />
            <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="search.birthEnd"
                style="width:250px;border-radius:0;"
                type="date"
                size="small"
                placeholder="选择出生结束日期"
                unlink-panels
                @change="page.current=1,refreshTable()"
            />
            <el-select
                v-model="search.politicsStatus"
                placeholder="政治面貌"
                size="small"
                @change="page.current=1,refreshTable()"
                clearable
            >
              <el-option
                  v-for="(item,i) in resident.dict.getDict('politicsStatus')"
                  :key="i"
                  :label="item.dictName"
                  :value="item.dictValue"
              ></el-option>
            </el-select>
            <el-select
                v-model="search.householdName"
                placeholder="是否户主"
                size="small"
                @change="page.current=1,refreshTable()"
                clearable
            >
              <el-option
                  v-for="(item,i) in resident.dict.getDict('householdName')"
                  :key="i"
                  :label="item.dictName"
                  :value="item.dictValue"
              ></el-option>
            </el-select>
            <el-select
                v-model="search.faithType"
                placeholder="宗教信仰"
                @change="page.current=1,refreshTable()"
                size="small"
                clearable
            >
              <el-option
                  v-for="(item,i) in resident.dict.getDict('faithType')"
                  :key="i"
                  :label="item.dictName"
                  :value="item.dictValue"
              ></el-option>
            </el-select>
          </template>
          <template #right>
            <el-input
                size="small"
                v-model="search.con"
                placeholder="姓名/身份证/联系方式"
                @keyup.enter.native="search.current = 1, refreshTable()"
                @clear="search.current = 1, refreshTable()"
                clearable
                suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-search-bar>
          <template #left>
            <el-button
                size="small"
                type="primary"
                icon="iconfont iconAdd"
                @click="gotoAdd()"
                v-if="$permissions('app_appresident_edit')">
              添加
            </el-button>
            <el-button
                size="small"
                icon="iconfont iconDelete"
                :disabled="multipleSelection.length<=0"
                @click="beforeDelete()"
                v-if="$permissions('app_appresident_del')">
              删除
            </el-button>
          </template>
          <template #right>
            <ai-import :instance="resident.instance" :dict="resident.dict" type="appresident" name="居民档案"
                       :importParams="{residentType: active}" @success="refreshTable()">
              <el-button icon="iconfont iconImport">导入</el-button>
            </ai-import>
            <ai-download :instance="resident.instance" :params="params" url="/app/appresident/export"
                         fileName="居民档案"/>
          </template>
        </ai-search-bar>

        <ai-table :tableData="tableData" :col-configs="colConfigs" :dict="resident.dict"
                  :total="page.total" :current.sync="page.current" :size.sync="page.size"
                  @getList="refreshTable"
                  @selection-change="handleSelectionChange">
          <el-table-column slot="idNumber" label="身份证号" show-overflow-tooltip align="center">
            <template slot-scope="{row}">
              <ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
            </template>
          </el-table-column>
          <el-table-column slot="fileStatus" label="档案状态" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fileStatus==0" style="color:rgba(46,162,34,1);">正常</span>
              <span v-if="scope.row.fileStatus==1" style="color:rgba(153,153,153,1);">已注销</span>
            </template>
          </el-table-column>
          <el-table-column slot="options" label="操作" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <div class="table-options">
                <el-button
                    title="详情"
                    type="text"
                    v-if="$permissions('app_appresident_detail')"
                    @click="detailShow(scope.row)">
                  详情
                </el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
  </section>
</template>

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

export default {
  name: "listTpl",
  inject: ['resident'],
  props: {
    areaId: {default: ""},
    active: {default: ""},//人员类型
  },
  computed: {
    ...mapState(["user"]),
    params() {
      let params = {
        residentType: this.active
      }
      //导出搜索条件
      if (this.deleteIds.length) {
        params = {
          ...params,
          areaId: this.areaId,
          ids: this.deleteIds
        }
      } else {
        params = {
          areaId: this.areaId,
          ...params,
          ...this.search
        }
      }
      return params
    },
    colConfigs() {
      return [
        {type: "selection"},
        {label: "姓名", prop: "name", align: "center"},
        {label: "性别", prop: "sex", dict: 'sex', align: "center"},
        {slot: "idNumber"},
        {label: "年龄", prop: "age", align: "center"},
        {label: "民族", prop: "nation", align: "center", dict: "nation"},
        {label: "文化程度", prop: "education", align: "center", dict: "education"},
        {label: "政治面貌", prop: "politicsStatus", align: "center", dict: "politicsStatus"},
        {slot: "fileStatus"},
        {slot: "options"}
      ]
    }
  },
  watch: {
    areaId(v) {
      v && this.refreshTable()
    }
  },
  data() {
    return {
      page: {current: 1, size: 10, total: 0},
      search: {
        fileStatus: "",
        sex: "",
        nation: "",
        education: "",
        politicsStatus: "",
        birthStart: "",
        birthEnd: "",
        faithType: "",
        householdName: "",
        con: "",
        maritalStatus: ""
      },
      style: {},
      tableData: [],
      multipleSelection: [],
      deleteIds: [],
    };
  },
  methods: {
    handleClick() {
      this.tableData = [];
      this.multipleSelection = [];
      this.searchInit()
    },
    searchInit() {
      let tempAreaId = this.search.areaId;
      this.search = {
        fileStatus: "",
        sex: "",
        nation: "",
        education: "",
        politicsStatus: "",
        birth: [],
        faithType: "",
        householdName: "",
        areaId: "",
        con: "",
        maritalStatus: ""
      };
      this.search.areaId = tempAreaId;
      this.page = {current: 1, size: 10, total: 0};
      this.refreshTable()
    },
    handleSelectionChange(val) {
      this.deleteIds = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(e => {
        this.deleteIds.push(e.id);
      });
    },
    exportrExcle() {
      if (this.deleteIds.length == 0) {
        if (this.search.birth) {
          this.search.birth = this.search.birth.join(",");
        }
        this.resident.instance
        .post(`/app/appresident/exportAll`, null, {
          params: {
            ...this.search,
            ...this.page
          }
        })
        .then(res => {
          if (res && res.code == 0) {
            this.$message.success(res.data);
            if (typeof this.search.birth == "string") {
              this.search.birth = this.search.birth.split(",");
            }
          }
        });
      } else {
        this.resident.instance.post(`/app/appresident/exportByIds`, {
          ids: this.deleteIds,
          areaId: this.user.info.areaId
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success(res.data);
          }
        });
      }
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.refreshTable()
    },
    detailShow(row) {
      this.$router.push({query: {type: this.active, id: row.id}})
    },
    gotoAdd() {
      this.$router.push({query: {type: this.active}})
    },
    refreshTable() {
      this.resident.instance.post(`/app/appresident/list`, null, {
        params: {...this.search, ...this.page, areaId: this.areaId, residentType: this.active}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    beforeDelete() {
      this.$confirm("确定要执行删除操作吗？", {type: "error"})
      .then(() => {
        this.deletePersonFn();
        this.deleteIds = [];
      })
      .catch(() => {
      });
    },
    deletePersonFn() {
      this.resident.instance.post(`/app/appresident/deleteBody`, {
        ids: this.deleteIds
      }).then(res => {
        if (res && res.code == 0) {
          this.$message.success("删除成功");
          if (
              this.page.current == Math.ceil(this.page.total / this.page.size)
          ) {
            this.page.total = this.page.total - this.deleteIds.length;
            this.page.current = Math.ceil(this.page.total / this.page.size);
          }
          this.refreshTable();
        }
      })
    },
  },
  created() {
    this.refreshTable()
  }
}
</script>

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