<template>
    <div class="op-page sms-page sms-server">
        <div class="top-btn-div">
            <Button type="primary" @click="showUploadModal" class="btn">导入</Button>
            <Button type="primary" @click="exportModal=true" :disabled="!globalProfile.id" class="btn">导出</Button>
            <Button type="primary" class="btn" @click="toGuide">短信对接配置向导</Button>
        </div>
        <Form class="form" :model="globalProfile" ref="serverData" :rules="rules" :label-width="120">
            <FormItem label="短信平台对接方式" prop="type" v-validate:type.required.@change.$number="rules">
                <Select v-model="globalProfile.type" placeholder="请选择短信平台类型" @on-change="changePlat">
                    <Option v-for="item in typeOption" :value="item.value">{{item.label}}</Option>
                </Select>
            </FormItem>
            <FormItem label="短信平台厂商" prop="profileId" v-validate:profileId.required.@change.$number="rules">
                <Select v-model="globalProfile.profileId" placeholder="请选择短信平台类型">
                    <Option v-for="item in platformOption" :value="item.id">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="短信模板" prop="templateId" v-validate:templateId.required.@change.$number="rules">
                <Select v-model="globalProfile.templateId" placeholder="请选择短信模板">
                    <Option v-for="item in smsTeplates" :value="item.id">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('serverData')" class="btn">确认</Button>
                <Button type="primary" @click="smsModal=true" :disabled="!globalProfile.id" class="btn">测试</Button>
            </FormItem>
        </Form>


        <div  class="config-panel" style="color: green;font-size: 18px" v-if="globalProfile.id">
            <p>短信平台配置成功，点击以下链接可以修改相关配置</p>
            <p>

                <router-link to="/base/rest-collector" v-if="globalProfile.type=='0'"> <Icon type="md-settings" />配置HTTP连接信息<span
                        style="font-size: 14px">(配置连接HTTP服务的相关参数，如服务地址、端口等)</span></router-link>
            </p>
            <p>
                <router-link to="/base/db-collector" v-if="globalProfile.type=='1'"><Icon type="md-settings" />配置数据库连接信息<span
                        style="font-size: 14px">(配置连接数据库的相关参数，如数据库地址、用户名密码等)</span></router-link>
            </p>
            <p>
                <router-link to="/sms/rest" v-if="globalProfile.type=='0'"><Icon type="md-settings" />配置对接信息<span style="font-size: 14px">(配置发送短信时具体的请求信息，如请求路径、请求参数、请求体等)</span>
                </router-link>
            </p>
            <p>
                <router-link to="/sms/jdbc" v-if="globalProfile.type=='1'"><Icon type="md-settings" />配置对接信息<span style="font-size: 14px">(配置发送短信时具体的请求信息，如需要执行的sql语句，需要替换的参数等)</span>
                </router-link>
            </p>
            <p>
                <router-link to="/base/db-collector" v-if="globalProfile.type=='9'"><Icon type="md-settings" />配置定制对接包对接参数<span
                        style="font-size: 14px">(配置定制对接包相关参数，具体请点击链接进入，编辑对应数据)</span></router-link>
            </p>
            <p>
                <router-link to="/sms/template"><Icon type="md-settings" />配置短信模板信息<span
                        style="font-size: 14px">(配置发送短信时所使用的内容模板信息，可根据具体的短信内容参数，拼装不同的短信格式)</span></router-link>
            </p>
        </div>

        <Modal
                v-model="smsModal"
                title="短信测试" width="50" :mask-closable="false">
            <sms-test @close-modal="smsModal=false" :id="globalProfile.id" ref="smsTest"></sms-test>
            <div slot="footer"></div>
        </Modal>

        <Modal
                v-model="importModal"
                title="导入" width="50" :mask-closable="false">
            <Upload ref="upload"
                    :before-upload="handleUpload"
                    :show-upload-list="false"
                    :on-success="uploadSuccess"
                    :action="uploadUrl" accept=".zip" :format="uploadFileType">
                <Button icon="ios-cloud-upload-outline">选择短信平台配置包</Button>
            </Upload>
            <div v-if="file !== null">文件信息: {{ file.name }}
                <Button type="text" @click="upload()" :loading="loadingStatus" :disabled="loadingStatus">{{ loadingStatus ? '正在上传...' : '上传' }}
                </Button>
            </div>
            <div style="color: red;font-size: 20px" v-if="importMsg">{{importMsg}}</div>
            <div slot="footer"></div>
        </Modal>

        <Modal
                v-model="exportModal"
                title="导出" width="50" :mask-closable="false">
                <Form :model="model"  :rules="rules" :label-width="labelWidth" ref="export">
                     <Form-item label="请输入导出的配置名" prop="exportName" v-validate:exportName.required.normalCode="rules">
                        <Input v-model="model.exportName"   placeholder="建议以厂商加版本号加对接方式命名" />
                    </Form-item>
                    
                </Form>
                <div slot="footer">
                        <Button icon="ios-cloud-download-outline" @click="exportProfile">导出</Button>
                    </div>
        </Modal>

    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Emit} from "vue-property-decorator";

    import SmsTest from "./sms-test.vue";

    @Component({
        components: {
            SmsTest
        }
    })
    export default class SmsServer extends Vue {
        rules: any = {};
        private model : any = {
            exportName : ""
        };
        uploadFileType:Array<any>=["zip"];
        labelWidth:number =140;
        typeOption: Array<any> = [{label: 'HTTP', value: 0}, {label: '数据库', value: 1}, {label: '自定义', value: 9}];
        smsTeplates: Array<any> = [];
        platformOption: Array<any> = [];
        globalProfile: any = {
            type: "",
            profileId: "",
            templateId: ""
        };
        smsModal: boolean = false;
        exportModal: boolean = false;
        importModal: boolean = false;
        file: any = null;
        loadingStatus: boolean = false;
        uploadUrl: String = this.$apiPrifixUri + this.$msPrefix.sms + "/api/v1/vendor/import";
        importMsg: String = "";

        showUploadModal(){
            this.file=null;
            this.importMsg="";
            this.importModal=true;
             (this.$refs.upload as any).clearFiles();

        }

        handleUpload(file) {
            if(!file.name.endsWith(".zip")){
                this.$tools.message("error","请选择zip文件！");
                return false;
            }
            this.file = file;
            return false;
        }

        upload() {
            (this.$refs.upload as any).post(this.file)
        }

        uploadSuccess(res, file) {
            console.info(res)

            if (res.rtnCode == -1) {
                this.importMsg = res.msg;
            } else {
                this.getGloabalInfo();
                this.importModal=false
                this.loadingStatus=true;
            }
        }

        exportProfile() {
             (this.$refs["export"] as any).validate((valid) => {
                if (valid) {
                    this.download(this.$msPrefix.sms + '/api/v1/vendor/export?vendorName=' + this.model.exportName,{},this.model.exportName+".zip")
                    this.$tools.message('success', '导出成功！')
                    this.exportModal=!1;
                } else {
                    this.$tools.message('info',"请完善必填项!")
                }
            });
        }

        toGuide(){
            this.$router.push({path:"/sms/index"})
        }

        save() {
            this.getApiData('post', this.$msPrefix.sms + '/api/v1/data/save/globalProfile', this.globalProfile, res => {
                this.$tools.message('success', '保存成功！')
                this.globalProfile = res.data
            })
        }

        /*提交*/
        handleSubmit(action) {

            (this.$refs[action] as any).validate((valid) => {
                if (valid) {
                    this.save()
                } else {
                    this.$tools.message('info', "请完善必填项!")

                }
            });
        }

        getGloabalInfo() {
            this.getApiData("get", this.$msPrefix.sms + "/api/v1/data/all/globalProfile", {}, res => {
                if (res.data.content.length > 0) {
                    this.globalProfile = res.data.content[0]
                    this.changePlat(this.globalProfile.type)
                }
            })
        }

        getSmsTemplate() {
            this.getApiData("get", this.$msPrefix.sms + "/api/v1/data/all/smsTemplate", {}, res => {
                if (res.data.content.length > 0) {
                    this.smsTeplates = res.data.content.filter(item => {
                        return !item.parentId
                    })

                }
            })
        }

        mounted() {
            this.getGloabalInfo()
            this.getSmsTemplate()
        }

        changePlat(val) {
            let platMap = {0: 'restProfile', 1: 'jdbcProfile', 9: 'vendorProfile'}
            let url = this.$msPrefix.sms + "/api/v1/data/all/" + platMap[val];
            this.getApiData("get", url + "?size=10000", {}, res => {
                if (res.data.content.length > 0) {
                    this.platformOption = res.data.content;
                }else{
                    this.globalProfile.profileId=""
                    this.platformOption =[]
                }

            })
        }

    }
</script>


