<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="3" :sm="6">
                        <a-form-item label="账号">
                            <a-input placeholder="账号" v-model="queryParam.account" style="width: 5rem;"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="3" :sm="6">
                        <a-form-item label="姓名">
                            <a-input placeholder="姓名" v-model="queryParam.name"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                        <a-form-item label="县分">
                            <a-select v-model="queryParam.substName" @change="getSchoolNames">
                                <a-select-option key="">--全部--</a-select-option>
                                <a-select-option v-for="d in subNames" :key="d.value" :value="d.value">{{d.text}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="5" :sm="10">
                        <a-form-item label="学校">
                            <a-select v-model="queryParam.salesSchool" style="width: 10rem;">
                                <a-select-option key="">--全部--</a-select-option>
                                <a-select-option v-for="d in schoolNames" :key="d.value" :value="d.value">{{d.text}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col v-show="false" :md="4" :sm="8">
                        <a-form-item label="状态">
                            <a-select v-model="queryParam.status" 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="5" :sm="10">
                        <a-form-item label="注册时间">
                            <a-range-picker @change="onChange" v-model="queryParam.createtime"/>
                        </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"  :loading="loading" @click="start()">审核</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="createtime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <!--拦截器-->
            <template slot="updateTime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <template slot="sex" slot-scope="text">
                <p v-if="text=='0'">女</p>
                <p v-if="text=='1'">男</p>
                <p v-else=""></p>
            </template>
            <template slot="status" 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="idcardImgUrl" slot-scope="text">
                <p v-show="text == null">未上传</p>
                <p v-show="text == ''">未上传</p>
<!--                <van-image v-show="text != null && text != ''" width="100" height="100" @click="imgClick(text)" :src="imgUrl(text)" />-->
                <a v-show="text != null && text != ''" @click="imgClick(text)">点击查看</a>
                <!--<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="studentImgUrl" slot-scope="text">
                <p v-show="text == null">未上传</p>
                <p v-show="text == ''">未上传</p>
                <a v-show="text != null && text != ''" @click="imgClick(text)">点击查看</a>
<!--                <van-image v-show="text != null && text != ''" width="100" height="100" @click="imgClick(text)" :src="imgUrl(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="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="是否审核通过">
                    <a-select v-model="Formtable.status" style="width: 8rem;">
                        <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" selectedRowKeys>待审核</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,update,getSchoolNames, initSubstName,images} from "../../../api/school-center/userManager/newUserAPI"
    import {cloneObject} 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: "newUser",
        components: {
            STable, ImportBtn
        },
        data() {
            return {
                emptyText: {emptyText: '暂无数据'},
                modifyvisible: false,
                Formtable: {
                    id: '',
                    status: '4',
                },
                title: ConstantActivity.title,
                queryParam: {
                    account: '',
                    name: '',
                    status: '',
                    substName: '',
                    salesSchool: '',
                    createtime: ['', ''],
                },
                columns: [
                    {dataIndex: 'account', width: 100, title: '账号'},
                    {dataIndex: 'name', width: 60, title: '姓名'},
                    {dataIndex: 'sex', width: 50, title: '性别',scopedSlots: {customRender: "sex"}},
                    {dataIndex: 'schoolName', width: 100, title: '所属校园'},
                    {dataIndex: 'grade', width: 60, title: '年级'},
                    {dataIndex: 'subName',width: 60,title: '县分'},
                    {dataIndex: 'phone', width: 100, title: '手机'},
                    {dataIndex: 'idCard',width: 150,title: '身份证号'},
                    {dataIndex: 'idcardImgUrl', width: 180, title: '身份证扫描件(正面)', scopedSlots: {customRender: "idcardImgUrl"}},
                    {dataIndex: 'studentImgUrl', width: 180, title: '学生证', scopedSlots: {customRender: "studentImgUrl"}},
                    {dataIndex: 'createtime', width: 100, title: '注册时间', scopedSlots: {customRender: "createtime"}},
                    {dataIndex: 'updateTime', width: 100, title: '修改时间', scopedSlots: {customRender: "updateTime"}},
                    {dataIndex: 'noticeUrl', width: 120, title: '角色名称'},
                    {dataIndex: 'position', width: 100, title: '职位'},
                    {dataIndex: 'status', width: 80, title: '人员状态', scopedSlots: {customRender: "status"}},

                ],
                rowdata: parameter => {
                    const env = process.env.NODE_ENV; //获取当前环境
                    if (env === 'development') {     //测试环境默认添加前缀
                      this.apis = '/api/';
                    }
                    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'],
                schoolNames: [],
                subNames: [],
                apis: '',
                imgInfo: '',
                visiblepicture: false,
                selectedRowKeys: [],
                hasSelected: false,
                idcardImgUrl:"",
                studentImgUrl:"",
            }
        },
        methods: {
            moment,
            start() {
                if(this.selectedRowKeys.length == 0){
                    this.$message.error("请勾选审核项！！！");
                    return;
                }
                this.modifyvisible = true;
            },
            onSelectChange(selectedRowKeys) {
                console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;

            },
            onChange(date, dateString) {
                //this.queryParam.uploadDate = dateString;
                console.log(dateString);
            },
            pictureOnClose() {
                this.imgInfo = ''
                this.visiblepicture = false;
            },
            imgClick(res) {
                let imgInfo = this.apis + (res != null ? res : "");
                //imgInfo = this.replaceUrl(imgInfo);
                images({url: imgInfo}).then(response => {
                    this.imgInfo = 'data:image/jpg;base64,' + response
                })
                this.visiblepicture = true
            },
            imgUrl(res){
              let imgUrl;
              imgUrl = this.apis + (res != null ? res.replace("manager", "app") : "");
              return imgUrl;
            },
            createfunctionOk() {
                update({'ids': this.selectedRowKeys,'status':this.Formtable.status}).then(res => {
                    if (res.state !== 'success') {
                        this.$message.error("审核失败！", 5);
                    }else{
                        setTimeout(() => {
                            this.loading = false;
                            this.selectedRowKeys = [];
                        }, 1000);
                        this.hasSelected = true;
                        this.modifyvisible=false
                        this.$refs.table.refresh({search: true})
                    }
                })
            },
            createfunctionCancel() {
                this.modifyvisible=false
            },
            search() {
                console.log("queryParam.month==================" + this.queryParam);
                this.$refs.table.refresh({search: true})
            },
            getSchoolNames() {
                this.queryParam.schoolName = ''
                this.schoolNames = []
                getSchoolNames({"substName": this.queryParam.substName}).then((res) => {
                    if (res.state == "success") {
                        const result = res.data
                        result.forEach((r) => {
                            if (r.schoolName === 'null')
                                return;
                            this.schoolNames.push({
                                value: r.schoolName,
                                text: r.schoolName
                            })
                        })
                    }
                })
            },
            initSubstName() {
                initSubstName().then((res) => {
                    if (res.state == "success") {
                        const result = res.data
                        result.forEach((r) => {
                            if (r.subName === 'null')
                                return;
                            this.subNames.push({
                                value: r.subName,
                                text: r.subName
                            })
                        })
                    }
                })
            }
        },
        mounted() {
            this.initSubstName();
            this.getSchoolNames();
        }
    }
</script>

<style scoped>
.ant-table-row-cell-break-word{
  padding:4px 4px !important;
  text-align:center !important;
}
</style>
