<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 class="header-right">

        <lin-search @query="onQueryChange" placeholder="请输入姓名" />

        <div style="margin-left: 30px">

          <el-button type="primary" @click="dialogTableVisible = !dialogTableVisible">列操作</el-button>

        </div>

      </div>

    </div>

    <!-- 表格-->

    <div class="table-container">

      <el-table :data="djbList">

        <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="image">

 <template v-slot="scope">

    <el-avatar shape="square" :size="100" :fit="fit" :src= "scope.row.image"></el-avatar>

          </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>

    <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 { DjbModel } from '@/model/djb'

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: '',

      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()

  },

  methods: {

    async getDjbList() {

      this.djbList = await DjbModel.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 DjbModel.addDjbList(this.temp)

          this.showDialog = 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].src

      this.$refs.form.validate(async valid => {

        if (valid) {

          const { id } = this.temp

          const res = await DjbModel.editDjbList(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 confirmDelete() {

      const res = await DjbModel.deleteDjblist(this.temp.id, this.temp.type)

      this.$message.success(res.message)

      this.showDeleteDialog = false

      await this.getDjbList()

    },

    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: 0 40px 20px 40px;

  }

}

</style>