<template>
  <div class="container">
    <div class="title">党员明细</div>

    <div class="header">
      <div class="header-left">
        <el-button type="primary" @click="handleAdd">新增党员信息</el-button>
      </div>
    </div>
    <!-- 表格-->
    <div  class="table-container">
      <el-table :data="djbList" v-loading="loading">
        <el-table-column label="序号" type="index"/>
        <el-table-column label="类型" prop="type" width="100">
          <template v-slot="scope">
            {{ type[scope.row.type] }}
          </template>
        </el-table-column>

        <el-table-column label="姓名" prop="xmname" width="100"></el-table-column>
        <el-table-column label="性别" prop="sex" width="60">
          <template v-slot="scope">
            {{ sex[scope.row.sex] }}
          </template>
        </el-table-column>
        <el-table-column label="民族" prop="ming" width="100">
          <template v-slot="scope">
            {{ ming[scope.row.ming] }}
          </template>
        </el-table-column>
        <el-table-column label="身份证" prop="idcard"></el-table-column>
        <el-table-column label="籍贯" prop="city"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column label="手机号" prop="telphone" width="120"></el-table-column>

        <el-table-column label="状态" prop="status" width="80">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 1" type="success">在职</el-tag>
            <el-tag v-else type="danger">离职</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="275">
          <template #default="scope">
            <el-button
              plain
              size="small"
              type="primary"
              @click="handleEdit(scope.row)"
              v-permission="{ permission: '编辑', type: 'disabled' }"
            >编辑
            </el-button
            >
            <el-button
              plain
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
              v-permission="{ permission: '删除', type: 'disabled' }"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="pagination">
      <el-pagination
      @current-change="handleCurrentChange"
      :background="true"
      :page-size="pageCount"
      :current-page="currentPage"
      v-if="refreshPagination"
      layout="prev,pager,next,jumper"
      :total="total_nums"
      >

      </el-pagination>
    </div>
    <el-dialog
      :title="dialogTitle"
      v-model="showDialog"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="resetForm"
      width="900px"
    >
      <el-form v-if="showComp" :model="temp" status-icon ref="form" label-width="100px" :rules="rules">
        <el-form-item label="电子照片" prop="image">
          <upload-imgs ref="uploadEle" :value="contentImgData" :max-num="1"/>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio v-model="temp.type" :label="100">正式党员</el-radio>
          <el-radio v-model="temp.type" :label="200">预备党员</el-radio>
          <el-radio v-model="temp.type" :label="300">入党积极分子</el-radio>
          <el-radio v-model="temp.type" :label="400">申请入党</el-radio>
        </el-form-item>

        <el-row>
          <el-col :span="6"
          >
            <el-form-item label="姓名" prop="xmname">
              <el-input v-model="temp.xmname" :disabled="dialogTitle == '编辑内容'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="temp.sex" :disabled="dialogTitle == '编辑内容'" aria-checked="true" :label="201"
              >男
              </el-radio
              >
              <el-radio v-model="temp.sex" :disabled="dialogTitle == '编辑内容'" :label="202">女</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="temp.age"></el-input>
            </el-form-item
            >
          </el-col>
          <el-col :span="6">
            <el-form-item label="民族" prop="ming">
              <el-select v-model="temp.ming" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12"
          >
            <el-form-item label="身份证号" prop="idcard">
              <el-input v-model="temp.idcard" :disabled="dialogTitle == '编辑内容'"></el-input>
            </el-form-item
            >
          </el-col>
          <el-col :span="12"
          >
            <el-form-item label="联系电话" prop="telphone">
              <el-input v-model="temp.telphone" :disabled="dialogTitle == '编辑内容'"></el-input>
            </el-form-item
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="city">
              <el-input v-model="temp.city" :disabled="dialogTitle == '编辑内容'"></el-input>
            </el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="居住地址" prop="address">
              <el-input v-model="temp.address"></el-input>
            </el-form-item
            >
          </el-col>
        </el-row>
        <el-form-item label="加入时间" prop="pubdate">
          <el-date-picker
            v-model="temp.pubdate"
            type="date"
            placeholder="选择日期"
            :disabled="dialogTitle == '编辑内容'"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="是否在职">
          <el-switch v-model="temp.status" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="dialogTitle === '添加党员信息' ? confirmAdd() : confirmEdit()"
        >保存</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="提示" v-model="showDeleteDialog" width="400px">
      <span>确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {DangjianModel} from "../../model/dangjian";


import {ElMessage} from 'element-plus'
import LinSearch from '@/component/base/search/lin-search'
import UploadImgs from '../../component/base/upload-image/index'

export default {
  name: 'list',
  filters: {
    phoneFilter(val) {
      const reg = /^(.{3}).*(.{4})$/
      return val.replace(reg, '$1****$2')
    },
  },
  components: {UploadImgs, LinSearch},

  data() {
    return {
      djbList: [],
      dialogTitle: '',
      loading:false,
      refreshPagination:true,
      currentPage:1,
      total_nums: 180,
      pageCount:10,




      showDeleteDialog: false,
      showDialog: false,
      showComp: false,
      temp: {
        id: null,
        xmname: '',
        type: '',
        telphone: '',
        status: '',
        sex: '',
        age: null,
        ming: '',
        idcard: '',
        city: '',
        address: '',
        pubdate: '',
        image: null,
      },
      options: [
        {
          value: '301',
          label: '汉族',
        },
        {
          value: '302',
          label: '藏族',
        },
      ],
      type: {
        100: '正式党员',
        200: '预备党员',
        300: '入党积极分子',
        400: '申请预备党员',
      },
      sex: {
        201: '男',
        202: '女',
      },
      ming: {
        301: '汉族',
        302: '藏族',
      },

      contentImgData: [],
      rules: {
        type: [{required: true, message: '类型不能为空', trigger: 'blur'}],
        xmname: [{required: true, message: '名字不能为空', trigger: 'blur'}],
        idcard: [{required: true, message: '身份证号不能为空', trigger: 'blur'}],
        telphone: [{required: true, message: '联系电话不为空', trigger: 'blur'}],
        age: [{required: true, message: '年龄为数字', trigger: 'blur'}],
        address: [{required: true, message: '居住地址不能为空', trigger: 'blur'}],
        city: [{required: true, message: '籍贯不能为空', trigger: 'blur'}],
      },
    }
  },
  created() {
    this.getDjbList((this.currentPage-1)* this.pageCount,this.pageCount)

  },
  methods: {
    async getDjbList() {
      this.djbList = await DangjianModel.getDjblist()
    },
    async handleAdd() {
      this.dialogTitle = '添加党员信息'
      this.showDialog = true
      this.showComp = true
    },
    async handleEdit(row) {
      this.dialogTitle = '编辑内容'
      this.showDialog = true
      this.showComp = true
      this.temp.id = row.id
      this.temp.xmname = row.xmname
      this.temp.idcard = row.idcard
      this.temp.type = row.type
      this.temp.ming = row.ming
      this.temp.address = row.address
      this.temp.city = row.city
      this.temp.telphone = row.telphone
      this.temp.age = row.age
      this.temp.sex = row.sex
      this.temp.image = row.image
      this.temp.pubdate = row.pubdate
      this.temp.status = row.status
      this.contentImgData.push({display: row.image})
    },
    async confirmAdd() {
      const images = await this.$refs.uploadEle.getValue()
      this.temp.image = images.length < 1 ? '' : images[0].src
      this.$refs.form.validate(async valid => {
        if (valid) {
          delete this.temp.id
          const res = await DangjianModel.addDjblist(this.temp)
          this.showDialog = false
          this.loading= false
          ElMessage.success(res.message)

          await this.getDjbList()
        }
      })
    },
    // 编辑
    async confirmEdit() {
      const images = await this.$refs.uploadEle.getValue()
      this.temp.image = images.length < 1 ? '' : images[0].display
      this.$refs.form.validate(async valid => {
        if (valid) {
          const {id} = this.temp

          const res = await DangjianModel.editDjb(id, this.temp)

          this.showDialog = false

          this.$message.success(res.message)
          await this.getDjbList()
        }
      })
    },
    // 删除
    handleDelete(row) {
      this.showDeleteDialog = true
      this.temp.id = row.id
      this.temp.type = row.type
    },
    async  handleCurrentChange(val){

      this.currentPage= val
      this.loading=true
      setTimeout(()=>{
        console.log(this.pageCount)
          this.getDjbList((this.currentPage-1)*this.pageCount,this.pageCount)
        this.loading= false
      },1000)

    },
    async confirmDelete() {
      const res = await DangjianModel.deleteDjblist(this.temp.id, this.temp.type)

      this.$message.success(res.message)
      this.showDeleteDialog = false
      await this.getDjbList('changePage')

    },
    resetForm() {
      this.contentImgData = []
      this.temp = []

    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    border-bottom: 1px solid #dae1ed;

    .header-left {
      float: left;

      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .header-right {
      float: right;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;
  }

  .add-button {
    padding: 20px 40px;
  }

  .header-right {
    float: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }

  .table-container {
    padding: 20px;
  }
}
</style>