<template>
    <div class="develop">
        <div class="develop-bg">
            <div class="item">
                <div class="item-title">小程序参数配置</div>
                <p class="text">
                    <b>AppID：</b>
                    <span v-show="!editProgram">{{ weiXinLogin.appid }}</span>
                    <el-input v-model="weiXinLogin.appid" size="small" v-show="editProgram"></el-input>
                </p>
                <p class="text">
                    <b>AppSecret(密钥)：</b>
                    <span v-show="!editProgram">{{ weiXinLogin.secret }}</span>
                    <el-input v-model="weiXinLogin.secret" size="small" v-show="editProgram"></el-input>
                </p>
                <el-button size="mini" @click="saveProgram">{{ editProgram ? '保存' : '修改' }}</el-button>
                <el-button size="mini" @click="editProgram=false" v-show="editProgram">取消</el-button>
                <div class="item-title" style="margin-top: 20px">
                    扫普通链接二维码打开小程序
                    <el-button size="mini" @click="dialogVisible = true">添加</el-button>
                </div>
                <el-table
                        v-loading="listLoading"
                        :data="qcodeList"
                        element-loading-text="Loading"
                        border
                        style="margin-top: 10px">
                    <el-table-column label="普通二维码链接" align="center">
                        <template slot-scope="scope">{{ scope.row.url }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="delQcode(scope.row, scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <ul class="desc-list">
                    <span>说明：</span>
                    <li>1.添加链接后，复制链接填写到微信小程序“开发-开发参数-普通链接二维码打开小程序”表格中</li>
                    <li>2.普通链接二维码最多只能添加10个</li>
                </ul>
            </div>
            <div class="item">
                <div class="item-title">其他浏览器扫码配置</div>
                <p class="text">
                    <b>目录名称：</b>
                    <span>{{ scanCode.foldName }}</span>
                    <!--<el-input v-model="scanCode.foldName" size="small" style="width: 200px"></el-input>-->
                    <!--<span style="font-size: .7rem">目录名称必须是英文，且不超过10个字符</span>-->
                </p>
                <p class="text">
                    <b>logo图片：</b>
                    <span v-show="!editScan">{{ scanCode.logoFile }}</span>
                    <input type="file" @change="addFile($event, 'logoFile')" v-show="editScan" ref="file1">
                    <span style="font-size: .7rem" v-show="editScan">文件名必须是logo</span>
                </p>
                <p class="text">
                    <b>小程序图片：</b>
                    <span v-show="!editScan">{{ scanCode.qCodeFile }}</span>
                    <input type="file" @change="addFile($event, 'qCodeFile')" v-show="editScan" ref="file2">
                    <span style="font-size: .7rem" v-show="editScan">文件名必须是qcode</span>
                </p>
                <p class="text">
                    <b>密钥文件：</b>
                    <span v-show="!editScan">{{ scanCode.homeHtmlFile }}</span>
                    <input type="file" @change="addFile($event, 'homeHtmlFile')" v-show="editScan" ref="file3">
                    <span style="font-size: .7rem" v-show="editScan">文件名必须是home</span>
                </p>
                <el-button size="mini" @click="saveBrowserScan">{{ editScan ? '保存' : '修改' }}</el-button>
                <el-button size="mini" @click="editScan=false" v-show="editScan">取消</el-button>
            </div>
            <div class="item">
                <div class="item-title">极光推送配置</div>
                <p class="text">
                    <b>AppID：</b>
                    <span v-show="!editJpush">{{ jpush.appKey }}</span>
                    <el-input v-model="jpush.appKey" size="small" v-show="editJpush"></el-input>
                </p>
                <p class="text">
                    <b>AppSecret(密钥)：</b>
                    <span v-show="!editJpush">{{ jpush.masterSecret }}</span>
                    <el-input v-model="jpush.masterSecret" size="small" v-show="editJpush"></el-input>
                </p>
                <el-button size="mini" @click="saveJpush">{{ editJpush ? '保存' : '修改' }}</el-button>
                <el-button size="mini" @click="editJpush=false" v-show="editJpush">取消</el-button>
            </div>
        </div>

        <el-dialog title="用户编辑" :visible.sync="dialogVisible" width="400px">
            <div class="info-wrp">
                <el-form ref="form" :model="scanData" label-width="120px">
                    <el-form-item label="目录名称：">
                        <el-input v-model="scanData.foldName" style="width: 200px" />
                    </el-form-item>
                    <el-form-item label="校验文件：">
                        <input type="file" style="width: 200px" @change="addVerifyFile">
                    </el-form-item>
                    <el-form-item>
                        <el-row>
                            <el-button size=small @click="dialogVisible = false">取消</el-button>
                            <el-button size=small type="primary" @click="addScan">确定</el-button>
                        </el-row>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/parameter'
    export default {
        name: "develop",
        data() {
            return {
                developData: {},
                editProgram: false,
                weiXinLogin: {
                    appid: '',
                    secret: ''
                },
                listLoading: false,
                qcodeList: [],
                editScan: false,
                scanCode: {},
                scanData: {
                    foldName: '',
                    verifyFile: ''
                },
                fileForm: new FormData(),
                editJpush: false,
                jpush: {
                    appKey: '',
                    masterSecret: ''
                },
                dialogVisible: false,
            }
        },
        created() {
            this.getDevelop()
        },
        methods: {
            getDevelop() {
                api.getDevelop().then(res => {
                    console.log('develop：', res)
                    this.developData = res.results

                    this.weiXinLogin = this.developData.weiXinLogin
                    this.qcodeList = this.developData.scanCodes
                    if(this.developData.scanCodes.length!=0) {
                        this.scanCode = this.developData.scanCodes[0]
                    } else {
                        this.scanCode = {
                            foldName: '',
                            homeHtmlFile: '',
                            id: '',
                            logoFile: '',
                            qCodeFile: '',
                            url: '',
                        }
                    }
                    this.jpush = this.developData.jpush
                })
            },
            saveProgram() {
                if(this.editProgram) {
                    api.updateWx(this.weiXinLogin).then(res => {
                        this.$message({ type: 'success', message: '修改成功' })
                    })
                }
                this.editProgram = !this.editProgram
            },
            addVerifyFile(ev) {
                this.scanData.verifyFile = ev.target.files[0]
            },
            addScan() {
                api.addScan(this.scanData).then(res => {
                    this.$message({ type: 'success', message: '添加成功' })
                })
            },
            addFile(ev, type) {
                // this.fileForm.append(type, ev.target.files[0])
                this.fileForm.append('files', ev.target.files[0])
                console.log(this.fileForm)
            },
            clearFile() {
                for (var key of this.fileForm.keys()) {
                    this.fileForm.delete(key)
                }
                for (let i=0;i<3;i++) {
                    this.$refs['file'+i].value = ''
                }
            },
            saveBrowserScan() {
                if(this.editScan) {
                    console.log(this.fileForm)
                    api.updateFile(this.fileForm).then(res => {
                        this.$message({ type: 'success', message: '修改成功' })
                        this.clearFile()
                    }).catch(err => {
                        console.log(err)
                        this.clearFile()
                    })
                }
                this.editScan = !this.editScan
            },
            saveJpush() {
                if(this.editJpush) {
                    api.updateJpush(this.jpush).then(res => {
                        this.$message({ type: 'success', message: '修改成功' })
                    })
                }
                this.editJpush = !this.editJpush
            }
        }
    }
</script>

<style scoped lang="scss">
    .develop {
        &-bg {
            width: 100%;
            background-color: #fff;
            padding: 20px 25px;
            .item {
                background-color: #eeeeee;
                padding: 20px 50px;
                margin-top: 20px;
                &-title {
                    margin-left: -20px;
                }
                &:first-child {
                    margin-top: 0px;
                }
                .text {
                    line-height: 1;
                    font-size: .95rem;
                    .el-input {
                        width: 400px;
                    }
                    b {
                        font-weight: normal;
                        display: inline-block;
                        width: 140px;
                        text-align: right;
                    }
                    span {
                        color: #f4516c;
                    }
                }
                .desc-list {
                    list-style-type: none;
                    font-size: .8rem;
                    line-height: 1.4;
                    span {
                        margin-left: -20px;
                    }
                }
            }
        }
    }
</style>
