<style>
    @import "../../css/vars.css"; /* 引入预定义变量 */
    .block—bodl {
        border: 1px solid #f1faf7;
        border-radius: 2px;
    }

    .base_block {
        width: 30%;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>
<template>
    <div>
        <el-tabs ref="myTab" v-model="activeName" type="card" @tab-click="handleClickTab">
            <el-tab-pane label="查询结果" name="queryPage">
                <div class="content-page">
                    <div class="home-page-center single-page-center base">
                        <div class="home-section-wrap page-center-wrap-bottom">
                            <div class="home-section-env">
                                <div class="filter-container" style="padding-bottom:20px">
                                    <el-input v-model="listQuery.channelName" placeholder="渠道名称" clearable
                                              style="width: 200px;"
                                              class="filter-item" @keyup.enter.native="handleGetChannels"/>
                                    <el-input v-model="listQuery.channelId" placeholder="渠道号" clearable
                                              style="width: 200px;"
                                              class="filter-item" @keyup.enter.native="handleGetChannels"/>
                                    <el-input v-model="listQuery.channelCode" placeholder="channel_code" clearable
                                              style="width: 200px;"
                                              class="filter-item" @keyup.enter.native="handleGetChannels"/>
                                    <el-button class="filter-item" type="primary" icon="el-icon-search"
                                               @click="handleGetChannels">查询
                                    </el-button>
                                    <el-button :disabled="!true" class="filter-item" style="margin-left: 10px;"
                                               type="primary"
                                               icon="el-icon-edit" @click="handleCreate">添加
                                    </el-button>
                                </div>
                                <el-table
                                        v-show="true"
                                        ref="myTable"
                                        :data="channels"
                                        border
                                        max-height="550"
                                        size="medium"
                                        fit
                                        highlight-current-row
                                        style="">
                                    <el-table-column label="ID" type="index" align="center" width="65"/>

                                    <el-table-column label="渠道名称" prop="channelName" align="center"/>
                                    <el-table-column sortable label="渠道号" prop="channelId" align="center"/>
                                    <el-table-column sortable label="channel_code" prop="channelCode" align="center"/>
                                    <el-table-column label="创建时间" prop="createTime" align="center"/>
                                    <el-table-column label="更新时间" prop="updateTime" align="center"/>

                                    <el-table-column label="操作" align="center" width="180"
                                                     class-name="small-padding fixed-width">
                                        <template slot-scope="scope">
                                            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
                                            </el-button>
                                            <el-button type="primary" size="mini" @click="handleQuery(scope.row)">查看
                                            </el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>
                                <pagination v-show="count>0" :total="count" :page.sync="page"
                                            :limit.sync="listQuery.pageSize"
                                            @pagination="handleGetChannels"/>
                            </div>
                        </div>
                    </div>
                </div>
                <!--    查询页面    -->
            </el-tab-pane>
            <el-tab-pane label="基本信息配置" name="baseEdit" style="display: none;">
                <!--    基础配置    -->
                <div class="block—bodl">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>基础配置</span>
                        </div>
                        <el-form :model="channel.baseConfDetail" ref="baseConfForm" :rules="baseConfRules"
                                 :inline="true" size="medium">
                            <el-form-item class="base_block" label="渠道名称" prop="channelName" label-width="40%">
                                <el-input class="el_input_box" v-model="channel.baseConfDetail.channelName"
                                          :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item class="base_block" label="渠道号" prop="channelId" label-width="40%">
                                <el-input type='number' class="el_input_box" v-model.number="channel.baseConfDetail.channelId"
                                          :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item class="base_block" label="channel_code" prop="channelCode" label-width="40%">
                                <el-input class="el_input_box" v-model="channel.baseConfDetail.channelCode"
                                          :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item class="base_block" label="产品id" label-width="40%">
                                <el-input class="el_input_box" v-model="channel.baseConfDetail.productId"
                                          :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item class="base_block" label="aesKey" prop="aesKey" label-width="40%">
                                <el-input v-model="channel.baseConfDetail.aesKey" :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item class="base_block" label="md5Key" prop="md5Key" label-width="40%">
                                <el-input v-model="channel.baseConfDetail.md5Key" :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item class="base_block" label="是否标准API渠道" prop="isStandardChannel"
                                          label-width="40%">
                                <el-input v-model="channel.baseConfDetail.isStandardChannel" :disabled="!isEdit"/>
                            </el-form-item>
                        </el-form>
                        <el-button v-show="isEdit" class="filter-item" style="margin-left: 80%;" type="primary"
                                   icon="el-icon-search"
                                   @click="handleSaveBaseConf">基础配置保存
                        </el-button>
                    </el-card>
                </div>
                <!--    基础配置    -->
            </el-tab-pane>
            <el-tab-pane label="进件配置项" name="applyEdit">
                <!--    进件项配置  ====-->
                <div class="block—bodl">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>进件校验项配置</span>
                        </div>
                        <el-form :model="checkedItemsResultVO" ref="checkedItemsForm" :rules="checkedItemsRules"
                                 :inline="true" size="medium">
                            <el-form-item style="width:25%" label="校验节点" prop="point" label-width="30%">
                                <el-select v-model.number="checkedItemsResultVO.point" placeholder="请选择" clearable
                                           class="filter-item" style="width:100px" @change="checkedItemsSelected">
                                    <el-option v-for="item in staticData.importCheckPointInit" :key="item.value"
                                               :label="item.name" :value="item.value"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:70%" label="进件校验项：" label-width="15%">
                                <el-checkbox-group v-model="checkedItemsResultVO.value" :disabled="!isEdit">
                                    <el-checkbox v-for="item in staticData.importCheckItemsStaticArr" :key="item.value"
                                                 :label="item.value" :disabled="!isEdit">
                                        {{item.name}}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-form>
                        <el-button v-show="isEdit" class="filter-item" style="margin-left: 80%;" type="primary"
                                   icon="el-icon-search"
                                   @click="handleSaveApplyCheckConf">进件校验项保存
                        </el-button>
                    </el-card>
                </div>
                <!--    进件项配置  ====-->
                <!--    进件项配置  ====-->
                <div class="block—bodl">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>进件接口权限</span>
                        </div>
                        <el-form :inline="true" size="medium">
                            <el-form-item style="width:30%" label="进件接口权限：" label-width="40%">
                                <el-checkbox-group v-model="channel.applyPrivilege.privilege">
                                    <el-checkbox v-for="item in staticData.applyPrivilegeItems" :key="item.value"
                                                 :label="item.value"
                                                 :disabled="!isEdit">{{item.name}}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item>
                                <span style="font-size: 8px;color: #9598a7">说明：进件接口权限勾选中，对应渠道具有请求该接口的权限</span>
                            </el-form-item>
                        </el-form>

                        <el-button v-show="isEdit" class="filter-item" style="margin-left: 80%;" type="primary"
                                   icon="el-icon-search"
                                   @click="handleSaveApplyPrivilegeConf">保存
                        </el-button>
                    </el-card>
                </div>
                <!--    进件项配置  ====-->
            </el-tab-pane>
            <el-tab-pane label="回调配置" name="callbackEdit">

                <!--    回调配置  ====-->
                <div class="block—bodl">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>回调配置</span>
                        </div>
                        <el-form size="medium" style="width:92%">
                            <el-form-item label="通知节点" label-width="15%">
                                <el-input v-model="channel.callbackInfo.noticeNode" :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item label="通知顺序" label-width="15%">
                                <el-input v-model="channel.callbackInfo.noticeSequence" :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item label="审批回调地址" label-width="15%">
                                <el-input v-model="channel.callbackInfo.auditUrl" :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item label="订单状态回调地址" label-width="15%">
                                <el-input v-model="channel.callbackInfo.statusUrl" :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item label="还款状态回调地址" label-width="15%">
                                <el-input v-model="channel.callbackInfo.repaymentStatusUrl" :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item label="还款计划回调地址" label-width="15%">
                                <el-input v-model="channel.callbackInfo.repaymentPlanUrl" :disabled="!isEdit"/>
                            </el-form-item>
                        </el-form>

                        <el-button v-show="isEdit" class="filter-item" style="margin-left: 80%;" type="primary"
                                   icon="el-icon-search"
                                   @click="handleSaveCallbackConf">回调配置保存
                        </el-button>
                    </el-card>
                </div>
                <!--    回调配置  ====-->
            </el-tab-pane>
            <el-tab-pane label="Rsa配置" name="rsaEdit">
                <!--    Rsa配置  ====-->
                <div class="block—bodl">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>Rsa配置</span>
                        </div>
                        <el-form size="medium" style="width:92%">
                            <el-form-item label="渠道Rsa公钥" label-width="12%">
                                <el-input type="textarea" :rows="4" v-model="channel.rsa.channelPubRsa"
                                          :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item label="量化派Rsa私钥" label-width="12%">
                                <el-input type="textarea" :rows="5" v-model="channel.rsa.lhpPriRsa"
                                          :disabled="!isEdit"/>
                            </el-form-item>
                            <el-form-item label="量化派Rsa共钥" label-width="12%">
                                <el-input type="textarea" :rows="4" v-model="channel.rsa.lhpPubRsa"
                                          :disabled="!isEdit"/>
                            </el-form-item>
                        </el-form>
                        <el-button v-show="isEdit" class="filter-item" style="margin-left: 80%;" type="primary"
                                   icon="el-icon-search"
                                   @click="handleSaveRsaConf">Rsa配置保存
                        </el-button>
                    </el-card>
                </div>
                <!--    Rsa配置  ====-->
            </el-tab-pane>
            <el-tab-pane label="刷新缓存" name="refush">
                <!--    刷新内存缓存  ====-->
                <div class="block—bodl" v-show="isEdit">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>刷新缓存</span>
                        </div>
                        <el-button class="filter-item" style="margin-left: 80%;" type="primary" icon="el-icon-search"
                                   @click="handleRefreshCache">刷新内存缓存
                        </el-button>
                    </el-card>
                </div>
                <!--    刷新内存缓存  ====-->
            </el-tab-pane>

        </el-tabs>

    </div>

</template>


<script>
    import Pagination from '@/components/Pagination'
    import {
        getChannels,
        getChannelDetail,
        saveChannelBaseConf,
        getStaticElement,
        saveApplyCheckConf,
        saveApplyPrivilegeConf,
        saveCallbackConf,
        saveRsaConf,
        refreshCache
    } from '../../apis/channel'


    export default {
        components: {Pagination},
        data() {
            return {
                listQuery: {
                    pageNumber: 0,
                    pageSize: 10
                },
                baseConfRules: {
                    channelName: [{required: true, message: '请输入渠道名称', trigger: 'blur'}],
                    channelId: [{type:'number', required: true, message: '请输入渠道号', trigger: 'blur'}],
                    channelCode: [{required: true, message: '请输入渠道code', trigger: 'blur'}],
                    aesKey: [{required: true, message: '请输入aesKey', trigger: 'blur'}],
                    md5Key: [{required: true, message: '请输入md5Key', trigger: 'blur'}],
                    isStandardChannel: [{required: true, message: '请输入是否标准API', trigger: 'blur'}],
                },
                checkedItemsRules: {
                    point: [{type:'number', required: true, message: '请选择节点', trigger: 'change'}],
                },
                channels: [],
                staticData: {
                    // 数据从后台加载
                    applyPrivilegeItems: [{"name": "进件", "value": "APPLY_LOAN"}],
                    importCheckPointInit: [{"name": "一推", "value": 1}],
                    importCheckItemsStaticArr: [{"name": "地址", "value": "address"}, {"name": "联系人", "value": "contact"}]
                },
                channel: {
                    baseConfDetail: {},
                    importCheckInfo: {
                        channelId:'',
                        checkedItemsResult: [],//UI选择后的结果，或者编辑页面加载时 用户的数据
                    },
                    applyPrivilege: {
                        privilege: []
                    },
                    callbackInfo: {},
                    rsa: {}
                },
                count: 1,
                page: 1,
                isCreate: false,
                isEdit: true,
                checkedItemsResultVO: {point: '', value: []},
                activeName: 'queryPage',
            }
        },
        created() {
            //this.roles = store.getters.roles
        },
        mounted() {
            this.handleGetChannels()
            this.handleGetStaticElement()
            this.$nextTick(function () {
                // 初始化 之后隐藏tab
                let tabs = this.$refs.myTab.$children[0].$refs.tabs
                for (let i = 0; i < tabs.length; i++) {
                    tabs[i].style.display = 'none'
                }
            })
        },
        methods: {
            handleGetStaticElement() {
                getStaticElement().then(res => {
                    if (res.data) {
                        if (res.data.applyPrivilegeItems) {
                            this.staticData.applyPrivilegeItems = res.data.applyPrivilegeItems
                        }
                        if (res.data.importCheckPointInit) {
                            this.staticData.importCheckPointInit = res.data.importCheckPointInit
                        }
                        if (res.data.importCheckItemsStaticArr) {
                            this.staticData.importCheckItemsStaticArr = res.data.importCheckItemsStaticArr
                        }
                    }
                }).catch(() => {
                })
            },
            handleGetChannels() {
                for (const prop in this.listQuery) {
                    if (this.listQuery[prop] === '') {
                        delete this.listQuery[prop]
                    }
                }
                this.listQuery.pageNumber = this.page - 1
                getChannels(this.listQuery).then(res => {
                    if (res.data) {
                        this.channels = res.data.content
                        this.count = res.data.totalElements
                        // this.$refs.myTable.setCurrentRow(this.channels[0])
                    }
                }).catch(() => {
                })
            },
            handleCreate() {
                this.isCreate = true
                this.isEdit = true
                this.$options.methods.showTabAll(this, "刷新缓存")
                this.channel = {
                    baseConfDetail: {},
                    importCheckInfo: {
                        checkedItemsResult: [],
                    },
                    applyPrivilege: {
                        privilege: []
                    },
                    callbackInfo: {},
                    rsa: {}
                }
                // 如果编辑之后，checkedItemsResultVO 是有值的，会和页面绑定数据
                this.checkedItemsResultVO.value = []
            },
            handleUpdate(data) {
                this.isCreate = false
                this.isEdit = true
                this.$options.methods.showTabAll(this, "")
                this.$options.methods.getChannelDetail(this, data)
            },
            handleQuery(data) {
                this.isCreate = false
                this.isEdit = false
                this.$options.methods.showTabAll(this, "刷新缓存")
                this.$options.methods.getChannelDetail(this, data)
            },
            checkedItemsSelected(selected) {
                if (this.channel.importCheckInfo.checkedItemsResult.length > 0) {
                    let isCleanData = true;
                    for (let index in this.channel.importCheckInfo.checkedItemsResult) {
                        let item = this.channel.importCheckInfo.checkedItemsResult[index]
                        if (item.point === selected) {
                            // 联动 下拉框和 用户的值
                            this.checkedItemsResultVO.value = item.checkedItems
                            isCleanData = false
                            break
                        }
                    }
                    if (isCleanData) {
                        // 说明 下拉选择的 该用户没有配置，清除checkedItemsResultVO 的值
                        this.checkedItemsResultVO.value = []
                    }
                } else {
                    this.checkedItemsResultVO.value = []
                }
            },
            getChannelDetail(_this, data) {
                getChannelDetail(data).then(rep => {
                    if (rep.data) {
                        _this.channel = rep.data
                        if (rep.data && rep.data.importCheckInfo && rep.data.importCheckInfo.checkedItemsResult.length > 0) {
                            _this.channel.importCheckInfo.checkedItemsResult = rep.data.importCheckInfo.checkedItemsResult;
                            // 说明有数据
                            let def = rep.data.importCheckInfo.checkedItemsResult[0];
                            _this.checkedItemsResultVO.point = def.point
                            _this.checkedItemsResultVO.value = def.checkedItems
                        }
                    }
                })
            },
            handleSaveBaseConf() {
                this.$refs['baseConfForm'].validate(valid => {
                    if (valid) {
                        // 保存基本配置信息
                        saveChannelBaseConf(this.channel.baseConfDetail).then(rep => {
                            this.$notify({
                                title: '成功',
                                message: '保存成功',
                                type: 'success',
                                duration: 1500
                            })
                        })
                    } else {
                        return false
                    }
                })
            },
            handleSaveApplyCheckConf() {
                this.$refs['checkedItemsForm'].validate(valid => {
                    if (valid) {
                        if (this.isCreate) {
                            // 新增
                            if (!this.channel.baseConfDetail.channelId) {
                                this.$notify({
                                    title: '失败',
                                    message: '请先新增保存基本信息',
                                    type: 'error',
                                    duration: 2000
                                })
                                return
                            } else {
                                this.channel.importCheckInfo.channelId = this.channel.baseConfDetail.channelId
                            }
                        }
                        // 保存进件项配置
                        // 如果
                        if (this.checkedItemsResultVO) {
                            if (this.channel.importCheckInfo.checkedItemsResult.length > 0) {
                                // 说明用户至少有一项
                                for (let index in this.channel.importCheckInfo.checkedItemsResult) {
                                    let item = this.channel.importCheckInfo.checkedItemsResult[index]
                                    if (item.point === this.checkedItemsResultVO.point) {
                                        item.checkedItems = this.checkedItemsResultVO.value
                                    }
                                }
                            } else {
                                // 说明用户一项都没有 或者是新增
                                this.channel.importCheckInfo.checkedItemsResult.point = this.checkedItemsResultVO.point
                                this.channel.importCheckInfo.checkedItemsResult.checkedItems = this.checkedItemsResultVO.value
                                console.log(this.channel.importCheckInfo.checkedItemsResult)
                                // console.log(this.channel.importCheckInfo.checkedItems)
                            }
                        }
                        // console.log(this.channel.importCheckInfo.checkedItemsResult)
                        // console.log(this.channel.importCheckInfo.checkedItemsResult.point)
                        // console.log(this.channel.importCheckInfo.checkedItemsResult.checkedItems)
                        console.log(this.channel.importCheckInfo)
                        saveApplyCheckConf(this.channel.importCheckInfo).then(rep => {
                            this.$notify({
                                title: '成功',
                                message: '保存成功',
                                type: 'success',
                                duration: 1500
                            })
                        })
                    } else {
                        return false
                    }
                })

            },
            handleSaveApplyPrivilegeConf() {
                if (this.isCreate) {
                    if (!this.channel.baseConfDetail.channelId) {
                        this.$notify({
                            title: '失败',
                            message: '请先新增保存基本信息',
                            type: 'error',
                            duration: 2000
                        })
                        return
                    } else {
                        this.channel.applyPrivilege.channelId = this.channel.baseConfDetail.channelId
                    }
                }
                // 保存进件项配置
                saveApplyPrivilegeConf(this.channel.applyPrivilege).then(rep => {
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success',
                        duration: 1500
                    })
                })
            },
            handleSaveCallbackConf() {
                if (this.isCreate) {
                    if (!this.channel.baseConfDetail.channelId) {
                        this.$notify({
                            title: '失败',
                            message: '请先新增保存基本信息',
                            type: 'error',
                            duration: 2000
                        })
                        return
                    } else {
                        this.channel.callbackInfo.channelId = this.channel.baseConfDetail.channelId
                    }
                }
                // 保存进件项配置
                saveCallbackConf(this.channel.callbackInfo).then(rep => {
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success',
                        duration: 1500
                    })
                })
            },
            handleSaveRsaConf() {
                if (this.isCreate) {
                    if (!this.channel.baseConfDetail.channelId) {
                        this.$notify({
                            title: '失败',
                            message: '请先新增保存基本信息',
                            type: 'error',
                            duration: 2000
                        })
                        return
                    } else {
                        this.channel.rsa.channelId = this.channel.baseConfDetail.channelId
                    }
                }
                // 保存进件项配置
                saveRsaConf(this.channel.rsa).then(rep => {
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success',
                        duration: 1500
                    })
                })
            },
            handleRefreshCache() {
                // 保存进件项配置
                refreshCache().then(rep => {
                    this.$notify({
                        title: '成功',
                        message: '刷新成功',
                        type: 'success',
                        duration: 1500
                    })
                })
            },
            handleClickTab(tab) {
                // 如果点击查询页 那么隐藏tab
                if ('queryPage' === tab.name) {
                    this.$options.methods.hiddenTabAll(this)
                }
            },
            showTabAll(_this, excludeTab) {
                let tabs = _this.$refs.myTab.$children[0].$refs.tabs
                for (let i = 0; i < tabs.length; i++) {
                    if (tabs[i].innerHTML != excludeTab) {
                        // 刷新缓存tab 在新建和 查询是 不显示
                        tabs[i].style.display = ''
                    }
                }
                // 默认让基础信息配置页 选中
                tabs[1].click()
            },
            hiddenTabAll(_this) {
                let tabs = _this.$refs.myTab.$children[0].$refs.tabs
                for (let i = 0; i < tabs.length; i++) {
                    tabs[i].style.display = 'none'
                }
            },
        },
        actions: {}
    }

    function f() {

    }
</script>
