<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="网点名称：">
                            <a-input  placeholder="网点名称" v-model="queryParam.networkName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="县分：">
                            <a-input  placeholder="县分" v-model="queryParam.subName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="学校名称">
                            <a-input  placeholder="学校名称" v-model="queryParam.schoolName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="12">
                        <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="老客户升级页面 ">
                            <a-select placeholder="请选择" v-model="queryParam.status">
                                <a-select-option key="">请选择</a-select-option>
                                <a-select-option key="0">隐藏中</a-select-option>
                                <a-select-option key="1">显示中</a-select-option>
                            </a-select>
                        </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 @click="add()" type="primary">添加</a-button>
                        </a-col>
                    </span>
                </a-row>
            </a-form>
           </div>

        <!--列表-->
        <s-table  :locale="emptyText" :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
            <!--拦截器-->
            <template slot="statusDefault" slot-scope="text">
                <span v-if="text=='1'">
                    显示中
                </span>
                <span v-else>
                    隐藏中
                </span>
            </template>
            <template slot="operation" slot-scope="text,record">
                <a @click="modifyfunction(record)">编辑</a>
                <span v-if="record.status=='1'">
                     <a-divider type="vertical"/>
                <a-popconfirm title="是否隐藏老客户？" @confirm="delet(record)">
                    <a>隐藏老客户</a>
                </a-popconfirm>
                </span>
                <span v-else>
                    <a-divider type="vertical"/>
                <a-popconfirm title="是否显示老客户？" @confirm="delet(record)">
                    <a>显示老客户</a>
                </a-popconfirm>
                </span>

            </template>

        </s-table>

        <!--编辑----弹框-->
        <a-modal :title="titleName" :visible="modifyvisible"  @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="840px">
            <a-form :form="Formtable">
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="网点编码">
                    <a-input placeholder="网点编码" v-decorator="[ 'networkCode']"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="网点名称">
                    <a-input placeholder="网点名称" v-decorator="[ 'networkName']"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="县分">
                    <a-select placeholder="请选择" v-decorator="[ 'subName', {rules: [{ required: true, message: '县分不能为空！' ,whitespace:true}]} ]">
                        <a-select-option key="">请选择</a-select-option>
                        <a-select-option v-for="data in subNameList" :key="data">
                            {{ data}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="学校名称">
                    <a-input placeholder="学校名称" v-decorator="[ 'schoolName', {rules: [{ required: true, message: '学校名称不能为空！' ,whitespace:true}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="单宽学校名称">
                    <a-select placeholder="请选择" v-decorator="[ 'bandproductId']">
                        <a-select-option key="">请选择</a-select-option>
                        <a-select-option v-for="data in products" :key="data.productId">
                            {{ data.ProductUniversity}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="网点id(合伙人id)">
                    <a-input placeholder="网点id(合伙人id)" v-decorator="[ 'netId']"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="揽装工号">
                    <a-input placeholder="揽装工号" v-decorator="[ 'lzgh' ]"></a-input>
                </a-form-item>

                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="是否显示宽带办理">
                    <a-radio-group  v-decorator="['isShowband']">
                        <a-radio value="0">不显示</a-radio>
                        <a-radio value="1">显示</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="是否显示0息购机">
                    <a-radio-group  v-decorator="['netPhone']">
                        <a-radio value="0">不显示</a-radio>
                        <a-radio value="1">显示</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="是否显示融合办理">
                    <a-radio-group  v-decorator="['isShowrh']">
                        <a-radio value="0">不显示</a-radio>
                        <a-radio value="1">显示</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="是否已收到电信卡">
                    <a-radio-group  v-decorator="['isRecv']">
                        <a-radio value="0">否</a-radio>
                        <a-radio value="1">是</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="客户二维码">
                    <a-upload
                            ref="upload"
                            :action=uploadUrl
                            listType="picture-card"
                            :fileList="fileList"
                            :headers="header"
                            @preview="handlePreview"
                            @change="handleChange"
                            :data="fileid"
                            accept=".jpg"
                    >
                        <div>
                            <a-icon type="plus" />
                            <div class="ant-upload-text"> <span v-if="fileList.length==0">上传二维码</span>  <span v-if="fileList.length>0">更换二维码</span>  </div>
                        </div>
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                        <img alt="example" style="width: 100%" :src="previewImage" />
                    </a-modal>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 15, offset: 1}" label="套餐选择">
                    <a-checkbox-group :defaultValue="chosePages" @change="chosePagesfunction">
                        <a-row>
                            <a-col :span="8"  v-for=" data in packageName"><a-checkbox :value="data.value"  >{{data.label}}</a-checkbox></a-col>
                        </a-row>
                    </a-checkbox-group>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { ACCESS_TOKEN } from "@/store/mutation-types"

    import STable from '@/components/table';
    import {findByList,choosepages,modify,insert,hidestatus} from "@/api/school-center/schoolManagermentAPI"
    import {cloneObject} from '@/utils/util';
    export default {
        name: "schoolmanagement",
        components: {
            STable,
        },
        data: function () {
            return {
                emptyText: {emptyText: '暂无数据'},
                previewVisible: false,
                previewImage: '',
                fileList: [
                ],
                header:{
                    "Authorization":Vue.ls.get(ACCESS_TOKEN)
                },
                fileid:{},
                brackgroundurl:"manager/ciop/school/schoolManagement/qrcodeUpload",
                // form
                Formtable: this.$form.createForm(this, {name: 'Formtable'}),
                titleName:"",
                customimg:"",
                modifyForm: {
                    id:"",
                    networkCode: '',
                    networkName: '',
                    subName:"",
                    schoolName:"",
                    netId:"",
                    lzgh:"",
                    bandproductId:'',
                    isShowband:"",
                    netPhone:"",
                    isShowrh:"",
                    isRecv:"",
                    chosePages:""
                },
                subNameList: [],
                packageName:[],
                chosePages:[],
                products:[],
                //输入框列表
                queryParam: {
                    networkName: '',
                    subName: '',
                    status: '',
                    schoolName: '',
                },
                modifyvisible: false,
                columns: [
                    {dataIndex: 'networkCode', width: 200, title: '网点编码', align: "center"},
                    {dataIndex: 'networkName', width: 200, title: '网点名称', align: "center"},
                    {dataIndex: 'subName', width: 100, title: '县分', align: "center"},
                    {dataIndex: 'schoolName', width: 200, title: '学校名称', align: "center"},
                    {
                        dataIndex: 'status',
                        width: 200,
                        title: '是否显示老客户升级页面 ',
                        scopedSlots: {customRender: 'statusDefault'},
                        align: "center"
                    },
                    {
                        dataIndex: 'operation',
                        width: 200,
                        title: '操作',
                        align: "center",
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    //表示
                    let obj = cloneObject(this.queryParam)
                    return findByList(Object.assign(params, obj)).then(res => {
                        let data = {};
                        if (res.state !== 'success') {
                            this.emptyText.emptyText = '查询失败！'
                            this.$message.error("查询失败！", 5);
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {
                            if (res.data.records.length==0){
                                return data
                            }
                            data = {
                                data: res.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.total
                            }
                            if (this.subNameList.length==0){
                                res.data.records[0].subNameList.forEach((key)=>{
                                    this.subNameList.push(key.subNameList)
                                })
                                res.data.records[0].packageName.forEach((key)=>{
                                    let id=""+key.id
                                    let d={
                                        label: key.packageName,
                                        value: id
                                    }
                                    this.packageName.push(d)
                                })
                                res.data.records[0].products.forEach((key)=>{
                                    let productId=""+key.productId
                                    let d={
                                        productId: productId,
                                        ProductUniversity: key.ProductUniversity
                                    }
                                    this.products.push(d)
                                })
                            }
                        }
                        return data
                    })
                }
            }
        },
        methods:{
            getuuid() {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = Math.random() * 16 | 0,
                        v = c == 'x' ? r : (r & 0x3 | 0x8);
                    return v.toString(16);
                });
            },
            baseuploadUrl(){
                const env = process.env.NODE_ENV; //获取当前环境
                let apis = "/";
                if(env === 'development'){     //测试环境默认添加前缀
                    apis = '/api/';
                }
                return apis
            },
            uploadUrl(){
                return this.baseuploadUrl() + this.brackgroundurl
            }
            ,
            //背景图
            handleCancel() {
                this.previewVisible = false;
            },
            handlePreview(file) {
                this.previewImage = file.url || file.thumbUrl;
                this.previewVisible = true;
            },
            handleChange(obj) {
                if (this.fileList.length==2){
                    this.fileList.splice(0,1)
                }else{
                    this.fileList = obj.fileList;
                }

            },


            delet(deletdata){
                let status=0;
                if(deletdata.status==0){
                    status=1
                }
                let parent = {
                    id: deletdata.id,
                    status: status
                }
                hidestatus(parent).then(res=>{
                    if (res.state=="success"){
                        this.$message.success(res.data ? res.data : '修改成功！', 5);
                        this.search();
                        return null
                    }
                    this.$message.error(res.data ? res.data : '修改失败！', 5);
                })
            },
            chosePagesfunction(data){
                this.chosePages=data
            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            add(){
                this.titleName="添加"
                setTimeout(()=>{
                    this.Formtable.setFieldsValue({
                        isShowband:"0",
                        netPhone:"0",
                        isShowrh:"0",
                        isRecv:"0",
                    })
                },0)
                this.modifyvisible=true;
            },
            modifyfunction(data){
                //初始化
                this.titleName="编辑学校"
                let choosepagespare={
                    id:data.id
                }
                this.fileid={
                    id:data.id
                }
                let url=this.baseuploadUrl()+"manager/"+data.serviceQrcode.replace("enclosure","ciop")
                if (!(data.serviceQrcode == null || data.serviceQrcode=="")) {
                    //下载图片浏览
                    this.fileList.push({
                        uid: this.getuuid(),
                        name: '找不到图片',
                        status: 'done',
                        url: url,
                    })
                }
                this.modifyForm.id=data.id
                //查询中间表
                choosepages(choosepagespare).then(res=>{
                    if (res.state == 'success'){
                       let d=  res.data.choosepages
                        for (let i = 0; i <d.length ; i++) {
                            this.chosePages.push(d[i])
                        }
                    }
                })
                let showband="0"
                if (data.isShowband=="1"){
                    showband=data.isShowband
                }
                let isShowrh="0"
                if (data.isShowrh=="1"){
                    isShowrh=data.isShowrh
                }
                setTimeout(()=>{
                    this.Formtable.setFieldsValue({
                        subName:data.subName,
                        schoolName:data.schoolName,
                        bandproductId:data.bandproductId,
                        netId:data.netId,
                        lzgh:data.lzgh,
                        isShowband:showband,
                        netPhone:new String(data.netPhone).toString(),
                        isShowrh:isShowrh,
                        isRecv:new String(data.isRecv).toString(),
                    })
                },0)
                this.customimg="./img/custom"+data.serviceQrcode
                this.modifyvisible=true;
            },
            //提交表单
            createfunctionOk(){
                this.Formtable.validateFields(['networkCode','networkName','schoolName', 'bandproductId',"subName","lzgh", 'netId',"isShowband", 'isShowrh',"netPhone" ,'isRecv'], {force: true}, (err, values)=>{
                    if (!err){
                        this.modifyForm.networkCode=values.networkCode
                        this.modifyForm.networkName=values.networkName
                        this.modifyForm.subName=values.subName
                        this.modifyForm.schoolName=values.schoolName
                        this.modifyForm.netId=values.netId
                        this.modifyForm.lzgh=values.lzgh
                        this.modifyForm.bandproductId=values.bandproductId
                        this.modifyForm.isShowband=values.isShowband
                        this.modifyForm.netPhone=values.netPhone
                        this.modifyForm.isShowrh=values.isShowrh
                        this.modifyForm.isRecv=values.isRecv
                        this.modifyForm.chosePages=""
                        this.chosePages.forEach(value => {
                            if (value!=undefined){
                                this.modifyForm.chosePages=value+","+this.modifyForm.chosePages
                            }
                        })

                        //插入数据
                        if (this.modifyForm.id==""){
                            for (let key in this.modifyForm) {
                               if (this.modifyForm[key]==undefined){
                                   this.modifyForm[key]=""
                               }
                            }
                            insert(this.modifyForm).then(res=>{
                                if (res.state=="success") {
                                    this.$message.success(res.data ? res.data : '添加成功！', 5);
                                    this.search();
                                    this.modifyvisible=false
                                    return null;
                                }
                                this.$message.error(res.data ? res.data : '添加失败！', 5);
                            })
                            return null;
                        }
                       //修改数据
                        modify(this.modifyForm).then(res=>{
                            if (res.state=="success") {
                                this.$message.success(res.data ? res.data : '修改成功！', 5);
                                this.search();
                                this.modifyvisible=false
                                return null;
                            }
                            this.$message.error(res.data ? res.data : '修改失败！', 5);
                        })
                    }

                })

            },
            createfunctionCancel(){
                this.Formtable.setFieldsValue({
                    subName:"",
                    schoolName:"",
                    netId:"",
                    lzgh:"",
                    bandproductId:"",
                    isShowband:"",
                    netPhone:"",
                    isShowrh:"",
                    isRecv:"",
                })
                this.fileList=[]
                this.modifyForm.id=""
                this.modifyForm.chosePages=""
                this.chosePages.splice(0,this.chosePages.length)
                this.modifyvisible=false;
            }
        },
        created(){
        }
    }
</script>

<style scoped>

</style>
