<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" style="width: 8rem;"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                        <a-form-item label="办理号码">
                            <a-input placeholder="办理号码" v-model="queryParam.orderPhone" style="width: 8rem;"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                        <a-form-item label="联系号码">
                            <a-input placeholder="联系号码" v-model="queryParam.linkPhone" style="width: 8rem;"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                        <a-form-item label="是否审核通过">
                            <a-select v-model="queryParam.auditState" style="width: 8rem;">
                                <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="4" :sm="8">
                        <a-form-item label="审核人">
                            <a-input placeholder="审核人" v-model="queryParam.auditName" style="width: 8rem;"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="10">
                        <a-form-item label="上传资料时间">
                            <a-range-picker @change="onChange" v-model="queryParam.uploadDate"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :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-divider type="vertical"/>
                            <a-button @click="excelOut('2')" type="primary">导出审核通过数据</a-button>
                            <a-divider type="vertical"/>
                            <a-button @click="excelOut('3')" 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">
                <van-image width="100" height="100" @click="imgClick(text)" :src="apis + text" />
                <!--<van-image width="100" height="100" @click="imgClick('https://img.yzcdn.cn/vant/cat.jpeg')" src="https://img.yzcdn.cn/vant/cat.jpeg" />-->
            </template>
            <template slot="schoolCardUrl" slot-scope="text">
                <van-image width="100" height="100" @click="imgClick(text)" :src="apis + text" />
                <!--<van-image width="100" height="100" @click="imgClick('https://img.yzcdn.cn/vant/cat.jpeg')" src="https://img.yzcdn.cn/vant/cat.jpeg" />-->
            </template>
            <template slot="noticeUrl" slot-scope="text">
                <van-image width="100" height="100" @click="imgClick(text)" :src="apis + text" />
                <!--<van-image width="100" height="100" @click="imgClick('https://img.yzcdn.cn/vant/cat.jpeg')" src="https://img.yzcdn.cn/vant/cat.jpeg" />-->
            </template>
            <template slot="otherUrl" slot-scope="text">
                <!--<van-image width="100" height="100" @click="imgClick(text)" :src="apis + text" />-->
                <van-image width="100" height="100" @click="imgClick('https://img.yzcdn.cn/vant/cat.jpeg')" src="https://img.yzcdn.cn/vant/cat.jpeg" />
            </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="30%"
        >
            <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="上传图片1：">
                    <a v-show="Formtable.studentCardUrl != '' " href="javascript:void(0);"  @click="imgClick('https://img.yzcdn.cn/vant/cat.jpeg')">点击查看</a>
                </a-form-item>
                <a-form-item label="上传图片2">
                    <a v-show="Formtable.otherImgUrl1 != '' " href="javascript:void(0);"  @click="imgClick('https://img.yzcdn.cn/vant/cat.jpeg')">点击查看</a>
                </a-form-item>
                <a-form-item label="上传图片3">
                    <a v-show="Formtable.otherImgUrl2 != '' " href="javascript:void(0);"  @click="imgClick('https://img.yzcdn.cn/vant/cat.jpeg')">点击查看</a>
                </a-form-item>
                <br>
                <a-form-item label="是否审核通过">
                    <a-select v-model="Formtable.auditState" 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} from "../../../api/school-center/uploadVerify/studentdwkVerifyKpiAPI"
    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 {queryById} from "../../../api/school-center/uploadVerify/studentdwkVerifyKpiAPI";
    import { Image as VanImage } from 'vant';

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

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

                ],
                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: '',
                visiblepicture: false,
                selectedRowKeys: [],
                hasSelected: false,
            }
        },
        methods: {
            moment,
            start(auditState) {
                console.log(auditState);
                if(this.selectedRowKeys.length == 0){
                    this.$message.error("请勾选审核项！！！");
                    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 = '是'
                            if(res.data.auditState != 1){
                                Dialog.confirm({
                                    title: '提示',
                                    message: '已审核过，是否重新审核？？？',
                                }).then(() => {
                                    this.modifyvisible = true;
                                }).catch(() => {
                                    this.modifyvisible = false;
                                    this.Formtable = [];
                                    return;
                                });
                            }else{
                                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.apis + res
                this.visiblepicture = true
            },
            excelOut(state) {
                if(state != ''){
                    this.queryParam.auditState = state;
                }
                let nowdate = moment().format("YYYY-MM-DD");
                //导出
                exportFile(
                    excelOut(this.queryParam),
                    "大王卡证件稽核清单" + nowdate + ".xlsx",
                );

            },
            createfunctionOk() {
                this.modifyvisible=false
                this.clearmodel();
            },
            createfunctionCancel() {
                this.modifyvisible=false
                this.clearmodel0();
            },
            clearmodel() {
                this.importTile = "";
                this.zjlmoBan = false;
                this.importUrl = "";
            },
            search() {
                console.log("queryParam.month==================" + this.queryParam);
                this.$refs.table.refresh({search: true})
            },

        },
        mounted() {

        }
    }
</script>

<style scoped>

</style>