<style>
  @import "../../css/vars.css"; /* 引入预定义变量 */
  .post-css-test {
    transform: rotateY(360deg);
    box-shadow: 0 0 3px 5px rgba(222, 222, 222, .3);
    display: flex;
    color: var(--color-main);
  }

  .navigation-page {
    font-size: 14px;
  }

  .block—bodl {
    border: 1px solid #f1faf7;
    border-radius: 2px;
  }

  .base_block {
    width: 30%;
  }


</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="handleQurey(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 :inline="true" size="medium">
              <el-form-item class="base_block" label="渠道名称" 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="渠道号" label-width="40%">
                <el-input class="el_input_box" v-model="channel.baseConfDetail.channelId" :disabled="!isEdit"/>
              </el-form-item>
              <el-form-item class="base_block" label="channel_code" 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" label-width="40%">
                <el-input v-model="channel.baseConfDetail.aesKey" :disabled="!isEdit"/>
              </el-form-item>
              <el-form-item class="base_block" label="md5Key" label-width="40%">
                <el-input v-model="channel.baseConfDetail.md5Key" :disabled="!isEdit"/>
              </el-form-item>
              <el-form-item class="base_block" label="是否标准API渠道" 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 :inline="true" size="medium">
              <el-form-item style="width:25%" label="校验节点" label-width="30%">
                <el-select v-model="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
        },
        channels: [],
        staticData: {
          // 数据从后台加载
          applyPrivilegeItems: [{"name": "进件", "value": "APPLY_LOAN"}],
          importCheckPointInit: [{"name": "一推", "value": 1}],
          importCheckItemsStaticArr: [{"name": "地址", "value": "address"}, {"name": "联系人", "value": "contact"}]
        },
        channel: {
          baseConfDetail: {},
          importCheckInfo: {
            checkedItemsResult: [],//UI选择后的结果，或者编辑页面加载时 用户的数据
          },
          applyPrivilege: {
            privilege: []
          },
          callbackInfo: {},
          rsa: {}
        },
        count: 1,
        page: 1,
        roles: undefined,
        isEdit: true,
        checkedItemsResultVO: { point : [], value:[]},
        baseConfLabelWidth: '25%',
        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.isEdit = true
        this.$options.methods.showTabAll(this, "刷新缓存")
        this.channel = {
          baseConfDetail: {},
          importCheckInfo: {
            checkedItemsResult: [],
          },
          applyPrivilege: {
            privilege: []
          },
          callbackInfo: {},
          rsa: {}
        }
        // 如果编辑之后，checkedItemsResultVO 是有值的，会和页面绑定数据
        this.checkedItemsResultVO.value = []
      },
      handleUpdate(data) {
        this.isEdit = true
        this.$options.methods.showTabAll(this, "")
        this.$options.methods.getChannelDetail(this, data)
      },
      handleQurey(data) {
        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() {
        // 保存基本配置信息
        saveChannelBaseConf(this.channel.baseConfDetail).then(rep => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 1500
          })
        })
      },
      handleSaveApplyCheckConf() {
        // 保存进件项配置
        if (this.checkedItemsResultVO) {
          if(this.channel.importCheckInfo.checkedItemsResult) {
            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
          }
        }
        saveApplyCheckConf(this.channel.importCheckInfo).then(rep => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 1500
          })
        })
      },
      handleSaveApplyPrivilegeConf() {
        // 保存进件项配置
        saveApplyPrivilegeConf(this.channel.applyPrivilege).then(rep => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 1500
          })
        })
      },
      handleSaveCallbackConf() {
        // 保存进件项配置
        saveCallbackConf(this.channel.callbackInfo).then(rep => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 1500
          })
        })
      },
      handleSaveRsaConf() {
        // 保存进件项配置
        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>
