<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="8">
                        <a-form-item label="用户姓名">
                            <a-input placeholder="用户姓名" v-model="queryParam.userName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                        <a-form-item label="办理号码">
                            <a-input placeholder="办理号码" v-model="queryParam.orderPhone"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                        <a-form-item label="联系号码">
                            <a-input placeholder="联系号码" v-model="queryParam.linkPhone"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="3" :sm="6">
                        <a-form-item label="是否审核通过">
                            <a-select v-model="queryParam.auditState">
                                <a-select-option key="">--全部--</a-select-option>
                                <a-select-option key="1">未审核</a-select-option>
                                <a-select-option key="2">是</a-select-option>
                                <a-select-option key="3">否</a-select-option>
                                <a-select-option key="4">无效</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="12">
                        <a-form-item label="上传资料时间">
                            <a-range-picker @change="onChange" v-model="queryParam.uploadDate"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                        <a-form-item label="审核人">
                            <a-input placeholder="审核人" v-model="queryParam.auditName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="5" :sm="10">
                        <a-form-item label="审核时间">
                            <a-range-picker @change="onChange1" v-model="queryParam.auditDate"/>
                        </a-form-item>
                    </a-col>
                    <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
                        <a-col :md="6" :sm="24">
                            <a-button @click="search()" type="primary">查询</a-button>
                            <a-divider type="vertical"/>
                            <a-button type="primary":disabled="hasSelected" :loading="loading" @click="start('2')">
                                审核
                            </a-button>
                            <a-divider type="vertical"/>
                            <a-button type="primary" :loading="loading" @click="start('2')">
                                批量通过
                            </a-button>
                            <a-divider type="vertical"/>
                            <a-button type="primary" :loading="loading" @click="start('3')">
                                批量不通过
                            </a-button>
                            <a-divider type="vertical"/>
                            <a-button @click="excelOut()" type="primary">导出数据</a-button>
                        </a-col>
                    </span>
                </a-row>
            </a-form>
        </div>

        <!--列表-->
        <s-table :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :data="rowdata" bordered ref="table" size="small" class="flex-filling" :locale="emptyText">
            <!--拦截器-->
            <template slot="uploadDate" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <!--拦截器-->
            <template slot="crnActivateDate" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <!--拦截器-->
            <template slot="auditDate" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <template slot="isComboMoney49" slot-scope="text">
                <p v-if="text=='0'">否</p>
                <p v-if="text=='1'">是</p>
                <p v-else=""></p>
            </template>
            <template slot="isFull" slot-scope="text">
                <p v-if="text=='0'">否</p>
                <p v-if="text=='1'">是</p>
                <p v-else=""></p>
            </template>
            <template slot="isClear" slot-scope="text">
                <p v-if="text=='0'">否</p>
                <p v-if="text=='1'">是</p>
                <p v-else=""></p>
            </template>
            <template slot="isUnderYears" slot-scope="text">
                <p v-if="text=='0'">否</p>
                <p v-if="text=='1'">是</p>
                <p v-else=""></p>
            </template>
            <template slot="isStudentAccordance" slot-scope="text">
                <p v-if="text=='0'">否</p>
                <p v-if="text=='1'">是</p>
                <p v-else=""></p>
            </template>
            <template slot="isSchoolAccordance" slot-scope="text">
                <p v-if="text=='0'">否</p>
                <p v-if="text=='1'">是</p>
                <p v-else=""></p>
            </template>
            <template slot="isUploadBeforeActivate" slot-scope="text">
                <p v-if="text=='0'">否</p>
                <p v-if="text=='1'">是</p>
                <p v-else=""></p>
            </template>
            <template slot="isFirstUpload" slot-scope="text">
                <p v-if="text=='0'">否</p>
                <p v-if="text=='1'">是</p>
                <p v-else=""></p>
            </template>
            <template slot="auditState" slot-scope="text">
                <p v-if="text=='1'">未审核</p>
                <p v-if="text=='2'">审核通过</p>
                <p v-if="text=='3'">审核不通过</p>
                <p v-if="text=='4'">无效</p>
                <p v-else=""></p>
            </template>

            <template slot="studentCardUrl" slot-scope="text">
                <p v-show="text=='' ">无</p>
<!--                <van-image v-show="text!='' " width="100" height="100" @click="imgClick(text)" :src="replaceUrl(text)" />-->
                <a v-show="text != '' " href="javascript:void(0);"  @click="imgClick(text)">点击查看</a>
            </template>
            <template slot="otherImgUrl1" slot-scope="text">
                <p v-show="text=='' ">无</p>
<!--                <van-image v-show="text!='' " width="100" height="100" @click="imgClick(text)" :src="replaceUrl(text)" />-->
                <a v-show="text != '' " href="javascript:void(0);"  @click="imgClick(text)">点击查看</a>
            </template>
            <template slot="otherImgUrl2" slot-scope="text">
                <p v-show="text=='' ">无</p>
<!--                <van-image v-show="text!='' " width="100" height="100" @click="imgClick(text)" :src="replaceUrl(text)" />-->
                <a v-show="text != '' " href="javascript:void(0);"  @click="imgClick(text)">点击查看</a>
            </template>
            <template slot="otherImgUrl3" slot-scope="text">
                <p v-show="text=='' ">无</p>
<!--                <van-image v-show="text!='' " width="100" height="100" @click="imgClick(text)" :src="replaceUrl(text)" />-->
                <a v-show="text != '' " href="javascript:void(0);"  @click="imgClick(text)">点击查看</a>
            </template>
            <!--<template slot="operation" slot-scope="text,record">
                <span>
                  <a v-if="record.auditState == 1" @click="modifyfunction(record)">审核</a>
                </span>
            </template>-->
        </s-table>

        <!----弹框-->
        <a-drawer
                title="图片"
                placement="right"
                :closable="false"
                @close="pictureOnClose"
                :visible="visiblepicture"
                width="50%"
        >
            <div>
                <img class="bg-img" :src="imgInfo">
            </div>
        </a-drawer>

        <!----弹框-->
        <a-modal title="审核" :visible="modifyvisible" @ok="createfunctionOk"  @cancel="createfunctionCancel" html-type="submit" width="824px">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-form-item label="用户姓名">{{Formtable.userName}}</a-form-item>
                <a-form-item label="办理号码">{{Formtable.orderPhone}}</a-form-item>
                <br>
                <a-form-item label="联系号码">{{Formtable.linkPhone}}</a-form-item>
                <a-form-item label="上传资料时间">{{Formtable.uploadDate | dayjs}}</a-form-item>
                <br>
                <a-form-item label="学生证封面照片：">
                    <a v-show="Formtable.studentCardUrl != '' " href="javascript:void(0);"  @click="imgClick(Formtable.studentCardUrl)">点击查看</a>
                    <!--<van-image width="100" height="100" @click="imgClick(Formtable.studentCardUrl)" :src="apis + Formtable.studentCardUrl" />-->
                </a-form-item>
                <a-form-item label="学生证内页照片">
                    <a v-show="Formtable.otherImgUrl1 != '' " href="javascript:void(0);"  @click="imgClick(Formtable.otherImgUrl1)">点击查看</a>
                    <!--<van-image width="100" height="100" @click="imgClick(Formtable.otherImgUrl1)" :src="apis + Formtable.otherImgUrl1" />-->
                </a-form-item>
                <a-form-item label="身份证照片">
                    <a v-show="Formtable.otherImgUrl2 != '' " href="javascript:void(0);"  @click="imgClick(Formtable.otherImgUrl2)">点击查看</a>
                    <!--<van-image width="100" height="100" @click="imgClick(Formtable.otherImgUrl2)" :src="apis + Formtable.otherImgUrl2" />-->
                </a-form-item>
                <br>
                <a-form-item label="是否审核通过">
                    <a-select v-model="tempstate" style="width: 8rem;">
                        <a-select-option key="是">是</a-select-option>
                        <a-select-option key="否">否</a-select-option>
                        <a-select-option key="无效">无效</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import ImportBtn from "../../../components/sysmanage/ImportBtn";
    import {list, excelOut,update,queryById} from "../../../api/school-center/uploadVerify/studentCardVerifyAPI"
    import {cloneObject, exportFile} from '@/utils/util';
    import ConstantActivity from "@/constant/ConstantActivity";
    import Vue from 'vue';
    import moment from "moment";
    import {DatetimePicker, Dialog} from 'vant';
    import { Image as VanImage } from 'vant';

    Vue.use(VanImage);
    Vue.use(Dialog)
    Vue.use(DatetimePicker);

    export default {
        name: "studentCardVerify",
        components: {
            STable, ImportBtn
        },
        data() {
            return {
                emptyText: {emptyText: '暂无数据'},
                modifyvisible: false,
                Formtable: {
                    id: '',
                    userName: '',
                    orderPhone: '',
                    linkPhone: '',
                    auditState: '',
                    uploadDate: '',
                    auditDate: '',
                    studentCardUrl: '',
                    otherImgUrl1: '',
                    otherImgUrl2: '',
                    otherImgUrl3: '',
                },
                tempstate: '',
                title: ConstantActivity.title,
                queryParam: {
                    userName: '',
                    orderPhone: '',
                    linkPhone: '',
                    auditName: '',
                    auditState: '',
                    uploadDate: ['', ''],
                    auditDate: ['', ''],
                },
                columns: [
                    {dataIndex: 'userName', width: 100, title: '用户姓名'},
                    {dataIndex: 'orderPhone', width: 100, title: '办理号码'},
                    {dataIndex: 'linkPhone', width: 100, title: '联系号码'},
                    {dataIndex: 'idCard', width: 100, title: '身份证'},
                    {dataIndex: 'uploadDate', width: 100, title: '上传时间', scopedSlots: {customRender: "uploadDate"}},
                    {dataIndex: 'isFirstUpload', width: 100, title: '是否首次上传', ellipsis: true, scopedSlots: {customRender: "isFirstUpload"}},
                    {dataIndex: 'auditState',width: 100,title: '是否通过审核',ellipsis: true,scopedSlots: {customRender: "auditState"}},
                    {dataIndex: 'auditName', width: 100, title: '审核人姓名'},
                    {dataIndex: 'studentCardUrl', width: 180, title: '学生证封面照片', scopedSlots: {customRender: "studentCardUrl"}},
                    {dataIndex: 'otherImgUrl1', width: 180, title: '学生证内页照片', scopedSlots: {customRender: "otherImgUrl1"}},
                    {dataIndex: 'otherImgUrl2', width: 180, title: '身份证照片', scopedSlots: {customRender: "otherImgUrl2"}},
                    {dataIndex: 'otherImgUrl3', width: 180, title: '补充照片', scopedSlots: {customRender: "otherImgUrl3"}
                    },

                    /*{dataIndex: 'county', width: 80, title: '县分'},
                    {dataIndex: 'school', width: 120, title: '学校'},
                    {dataIndex: 'isComboMoney49', width: 100, title: '办理号码是否新49', ellipsis: true, scopedSlots: {customRender: "isComboMoney49"}},
                    {dataIndex: 'isFull', width: 100, title: '是否已上传学生证照片、学校等必填信息', ellipsis: true, scopedSlots: {customRender: "isFull"}},
                    {dataIndex: 'isClear', width: 100, title: '学生证照片是否清晰', ellipsis: true, scopedSlots: {customRender: "isClear"}},
                    {dataIndex: 'isUnderYears', width: 100, title: '学生年龄是否25岁及以下', ellipsis: true, scopedSlots: {customRender: "isUnderYears"}},
                    {dataIndex: 'isStudentAccordance', width: 100, title: '号码被实名人员与上传学生证用户是否一致', ellipsis: true, scopedSlots: {customRender: "isStudentAccordance"}},
                    {dataIndex: 'isSchoolAccordance', width: 100, title: '学生证所属学校与号码所属学校是否一致', ellipsis: true, scopedSlots: {customRender: "isSchoolAccordance"}},
                    {dataIndex: 'isUploadBeforeActivate', width: 100, title: '资料上传时间是否早于CRM系统激活时间', ellipsis: true, scopedSlots: {customRender: "isUploadBeforeActivate"}},
                    {dataIndex: 'crnActivateDate', width: 100, title: 'crm激活时间', scopedSlots: {customRender: "crnActivateDate"}},
                    {dataIndex: 'agentBusinessman', width: 100, title: '代理商'},
                    {dataIndex: 'auditDate', width: 100, title: '审核时间', scopedSlots: {customRender: "auditDate"}}*/
                ],
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    let obj = cloneObject(this.queryParam)

                    return list(Object.assign(params, obj)).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            this.$message.error("查询失败！", 5);
                            this.emptyText.emptyText = '查询失败！'
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {
                            data = {
                                data: res.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.total
                            }
                        }
                        return data
                    })
                },
                tempMode: ['month', 'month'],
                apis: 'img/',
                imgInfo: '',//require("../../../assets/img/previewAvatar.jpg"),
                visiblepicture: false,
                selectedRowKeys: [],
                hasSelected: true,
            }
        },
        methods: {
            moment,
            modifyfunction(data) {
                if (data != undefined) {
                    this.Formtable.id = data.id
                    this.Formtable.userName = data.userName
                    this.Formtable.orderPhone = data.orderPhone
                    this.Formtable.linkPhone = data.linkPhone
                    this.Formtable.auditState = data.auditState
                    this.Formtable.uploadDate = data.uploadDate
                    this.Formtable.auditDate = data.auditDate
                    this.Formtable.studentCardUrl = data.studentCardUrl
                    this.Formtable.otherImgUrl1 = data.otherImgUrl1
                    this.Formtable.otherImgUrl2 = data.otherImgUrl2
                    this.Formtable.otherImgUrl3 = data.otherImgUrl3
                }
                this.modifyvisible = true;
            },
            start(auditState) {
                console.log(auditState);
                if(this.selectedRowKeys.length == 0){
                    alert("请勾选审核项！！！");
                    return;
                }
                if(this.selectedRowKeys.length == 1){
                    queryById({'ids': this.selectedRowKeys}).then(res => {
                        if (res.state == 'success') {
                            this.Formtable.id = res.data.id
                            this.Formtable.userName = res.data.userName
                            this.Formtable.orderPhone = res.data.orderPhone
                            this.Formtable.linkPhone = res.data.linkPhone
                            this.Formtable.uploadDate = res.data.uploadDate
                            this.Formtable.auditDate = res.data.auditDate
                            this.Formtable.studentCardUrl = res.data.studentCardUrl
                            this.Formtable.otherImgUrl1 = res.data.otherImgUrl1
                            this.Formtable.otherImgUrl2 = res.data.otherImgUrl2
                            this.Formtable.otherImgUrl3 = res.data.otherImgUrl3
                            this.Formtable.auditState = res.data.auditState
                            if(res.data.auditState == 1 || res.data.auditState == 2){
                                this.tempstate = '是'
                            }else if(res.data.auditState == 3){
                                this.tempstate = '否'
                            }else if(res.data.auditState == 4){
                                this.tempstate = '无效'
                            }
                            this.modifyvisible = true;
                        }
                    })
                }else{
                    update({'ids': this.selectedRowKeys,'state':auditState}).then(res => {
                        if (res.state !== 'success') {
                            this.$message.error("审核失败！", 5);
                        }else{
                            setTimeout(() => {
                                this.loading = false;
                                this.selectedRowKeys = [];
                            }, 1000);
                            this.hasSelected = true;
                            this.$refs.table.refresh({search: true})
                        }
                    })
                }
            },
            onSelectChange(selectedRowKeys) {
                console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
                if(this.selectedRowKeys.length > 1){
                    this.hasSelected = true;
                }else{
                    this.hasSelected = false;
                }
            },
            onChange(date, dateString) {
                //this.queryParam.uploadDate = dateString;
                console.log(dateString);
            },
            onChange1(date, dateString) {
                //this.queryParam.auditDate = dateString;
                console.log(dateString);
            },
            pictureOnClose() {
                this.imgInfo = ''
                this.visiblepicture = false;
            },
            imgClick(res) {
                this.imgInfo = this.baseuploadUrl() + res
                this.imgInfo = this.replaceUrl(this.imgInfo);
                this.visiblepicture = true
            },
            replaceUrl(res){
              res = res.replace("manager","app")
              return res;
            },
            baseuploadUrl(){
              const env = process.env.NODE_ENV; //获取当前环境
              let apis = "/";
              if(env === 'development'){     //测试环境默认添加前缀
                apis = '/api/';
              }
              return apis
            },
            excelOut() {
                let obj = cloneObject(this.queryParam)
                let nowdate = moment().format("YYYY-MM-DD");
                //导出
                exportFile(
                    excelOut(Object.assign(obj)),
                    "学生不限量证件清单" + nowdate + ".xlsx",
                );

            },
            createfunctionOk() {
                this.selectedRowKeys = []
                this.selectedRowKeys.push(this.Formtable.id);
                if(this.tempstate == '是'){
                    this.Formtable.auditState = 2
                }else if(this.tempstate == '否'){
                    this.Formtable.auditState = 3
                }else if(this.tempstate == '无效'){
                    this.Formtable.auditState = 4
                }
                update({'ids': this.selectedRowKeys,'state':this.Formtable.auditState}).then(res => {
                    if (res.state !== 'success') {
                        this.$message.error("审核失败！", 5);
                    }else{
                        setTimeout(() => {
                            this.loading = false;
                            this.selectedRowKeys = [];
                        }, 1000);
                        this.hasSelected = true;
                        this.$refs.table.refresh({search: true})
                    }
                })
                this.modifyvisible=false
                this.clearmodel();
            },
            createfunctionCancel() {
                this.modifyvisible=false
                this.clearmodel0();
            },
            clearmodel() {
                this.Formtable.id = ''
                this.Formtable.userName = ''
                this.Formtable.orderPhone = ''
                this.Formtable.linkPhone = ''
                this.Formtable.uploadDate = ''
                this.Formtable.auditDate = ''
                this.Formtable.studentCardUrl = ''
                this.Formtable.otherImgUrl1 = ''
                this.Formtable.otherImgUrl2 = ''
                this.Formtable.otherImgUrl3 = ''
                this.Formtable.auditState == ''
            },
            search() {
                console.log("queryParam.month==================" + this.queryParam);
                this.$refs.table.refresh({search: true})
            },

        },
        mounted() {

        }
    }
</script>

<style scoped>

</style>
