<template>
    <d2-container>
        <div class="d2-table-view-full">
            <div class="d2-table-view-header">
                <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
                    <el-form-item label="姓名">
                        <el-input v-model="filter.name" clearable/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d2-table-view-content">
                <div class="d2-table-view-handle">
                    <el-button @click="operVisible = !operVisible" size="small" icon="el-icon-plus" >新增</el-button>
                    <el-button size="small" @click="onMutilDelClick">批量删除</el-button>
                </div>
                <d2-crud
                        title="黑名单"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowDelete"
                        selection-row
                        @selection-change="handleSelectionChange"
                ></d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                @close="clearForm"
                width="60%"
                :close-on-click-modal="false">
            <el-form  ref="form" :model="form" label-width="90px" labelPosition="right" :rules="rules">
                <el-row :gutter="16">
                    <el-col :span="11">
                        <el-form-item label="编号">
                            <el-input v-model="form.code" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="相片">
                            <img v-if="form.photo" :src="form.photo" class="avatar" style="width: 100px;height: 100px">
                            <label for="upload-input">
                                <span class="import-button">点击上传图片</span>
                            </label>
                            <!--<span>(请上传大小不超过30kb的图片)</span>-->
                            <input
                                    id="upload-input"
                                    type="file"
                                    style="display: none"
                                    multiple
                                    ref="upload"
                                    name="img"
                                    @change="upload($event)">
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="姓名" prop="name" >
                            <el-input v-model="form.name" maxlength="15" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="性别" prop="gender">
                            <el-select v-model="form.gender" placeholder="请选择" style="width: 100%;" >
                                <el-option value="男"></el-option>
                                <el-option value="女"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="证件类型" prop="identityType">
                            <custom-select :value="form.paramData" v-model="form.identityType" typeName="证件类型" style="width: 100%;"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="证件号" prop="identityNo">
                            <el-input v-model="form.identityNo"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="备注" >
                            <el-input type="textarea" v-model="form.remark" maxlength="100" style="width: 100%"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
     		    <zl-button :loading="staLoading" @click="operInstanceEqu('form')"/>
            </span>
        </el-dialog>
    </d2-container>
</template>

<script>
    import {getPageList,deleteList,getList,saveOrUpdataList,uploadImg} from "../../../../api/visitor/manage/blacklist";
    import photo from "./components/photo"
    import {tableOptions} from "../../../../assets/options";

    export default {
        name: "index",
        components:{
            photo
        },
        data(){
            let checkName =(rule, value, callback)=>{
                let reg = /^[\u4e00-\u9fa5_a-zA-Z]{1,15}$/
                if(!reg.test(value)){
                    return callback(new Error("姓名是由中文或英文组成最多不能超过15位"))
                }else {
                    callback()
                }
            }
            let checkidNo = (rule, value, callback) => {
                if(this.form.identityType === '0'){
                    let reg =/^[1-9]\d{5}(16|17|18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                    if(!reg.test(value)){
                        return callback(new Error("请输入正确的身份证号"))
                    }else {
                        callback()
                    }
                }else if(this.form.identityType === '1'){
                    let reg = /^1[45][0-9]{7}$|([P|p|S|s]\d{7}$)|([S|s|G|g]\d{8}$)|([Gg|Tt|Ss|Ll|Qq|Dd|Aa|Ff]\d{8}$)|([H|h|M|m]\d{8,10})$/
                    if(!reg.test(value)){
                        return callback(new Error("请输入正确的护照"))
                    }else {
                        callback()
                    }
                }
            }
          return{
              diaLogName:'新增',
              currentPage:1,
              pagination:{
                  total:0
              },
              tableOptions,
              loading:false,
              operVisible:false,
              isEdit:false,
              staLoading:false,
              selection:[],
              filter:{
                  id:'',
                  name:'',
                  pageSize:10,
                  pageNum:1,
              },
              data:[],
              id:[],
              columns:[
                  {
                      title:'编号',
                      key:'code',
                      minWidth:'100',
                      showOverflowTooltip: true
                  },
                  {
                      title:'姓名',
                      key:'name',
                      minWidth:'100',
                      showOverflowTooltip: true
                  },
                  {
                      title:'证件名称',
                      key:'paramData',
                      minWidth:'100',
                      showOverflowTooltip: true
                  },
                  {
                      title:'证件号',
                      key:'identityNo',
                      minWidth:'180',
                      showOverflowTooltip: true
                  },
                  {
                      title:'性别',
                      key:'gender',
                      minWidth:'100',
                      showOverflowTooltip: true
                  },
                  {
                      title:'操作员',
                      key:'userNm',
                      minWidth:'100',
                      showOverflowTooltip: true
                  },
                  {
                      title:'操作日期',
                      key:'modifyDate',
                      minWidth:'100',
                      showOverflowTooltip: true
                  },
                  {
                      title:'相片',
                      key:'photo',
                      minWidth:'100',
                      component:{
                          name:photo
                      }
                  },
              ],
              rowHandle:{
                  columnHeader:'操作',
                  minWidth:'180',
                  align:'center',
                  custom:[
                      {
                          text:'编辑',
                          type:'primary',
                          size:'small',
                          emit:'edit'
                      },
                      {
                          text:'删除',
                          type:'danger',
                          size:'small',
                          emit:'delete'
                      },
                  ]
              },
              form:{
                  code:'',
                  name:'',
                  gender:'',
                  paramData:'',
                  identityNo:'',
                  remark:'',
                  photo:'',
                  identityType:''
              },
              rules:{
                  name:[{required:true,validator:checkName,trigger:'blur'}],
                  identityNo:[{validator:checkidNo,required:true,trigger:'blur'}],
                  identityType:[{ required: true, message: '请选择证件类型', trigger: 'change' }],
                  gender:[{ required: true, message: '请选择性别', trigger: 'change' }],
              }
          }
        },
        methods:{
            handleList(val){
                if(val){
                    this.filter.pageNum=1
                    this.currentPage=1
                }
                this.loading=true
                getPageList(this.filter).then(res=>{
                    this.loading=false
                    this.data=res.page.list
                    this.pagination.total=res.page.total
                }).catch(err=>{
                    this.loading=false
                })
            },
            onMutilDelClick(){
                if(!this.selection.length){
                    this.$message({
                        message:'请选择记录',
                        type:'success'
                    })
                }
                this.selection.forEach((item,index)=>{
                    this.id.push(item.id)
                })
                this.id=this.id.join(",")
                this.delete(this.id)
            },
            handleRowEdit({index,row}){
                this.isEdit=true
                this.diaLogName='编辑'
                let id=row.id
                getList({id}).then(res=>{
                    this.form=res.visitorBlacklist
                    this.operVisible = true
                })
            },
            handleRowDelete({index,row}){
                this.delete(row.id)
            },
            delete(id){
                this.$confirm(`确定要删除吗?`, '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '放弃',
                    type: 'warning'
                }).then(() => {
                    deleteList({id}).then(res=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.handleList()
                    })
                })
            },
            handleSelectionChange(selection){
                this.selection=selection
            },
            handleCurrentChange(val){
                this.filter.pageNum = val
                this.handleList()
            },
            handleSizeChange(val){
                this.filter.pageNum = 1
                this.filter.pageSize = val
                this.handleList()
            },
            clearForm(){
                this.form={
                    code:'',
                    name:'',
                    gender:'',
                    paramData:'',
                    identityNo:'',
                    remark:'',
                    photo:'',
                    identityType:''
                }
                this.diaLogName='新增'
                this.isEdit=false
            },
            upload (e) {
                this.files = []
                let files = e.target.files
                let formData = new FormData()
                //console.log(this.$refs.upload.files[0])
                if(this.$refs.upload.files[0].size>1000000){
                    this.$message({
                        message: '请上传大小不超过1MB的图片',
                        type: 'error'
                    })
                    return false
                }
                for (let k in files) {
                    if (files.hasOwnProperty(k)) {
                        formData.append('file', files[k])
                    }
                }
                uploadImg(formData).then(res => {
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    })
                    //this.form.photo = res.data[0]
                    this.$set(this.form,'photo',res)
                })
                this.$refs.upload.value = null
            },
            operInstanceEqu(form){
                this.$refs[form].validate((valid)=>{
                    if (valid){
                        this.staLoading=true
                        saveOrUpdataList(this.form).then(res=>{
                            this.staLoading=false
                            this.operVisible=false
                            this.$message({
                                message: this.form.id ? '编辑成功':'新增成功',
                                type: 'success'
                            })
                            this.handleList()
                        }).catch(err=>{
                            this.staLoading=false
                        })
                    }
                })
            },
        },
        mounted() {
            this.filter.pageSize = this.tableOptions.pageList[0]
            this.tableOptions = this.$calcTableHeight(tableOptions,35)
            this.handleList()
        }
    }
</script>

<style scoped>

</style>
