<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="handleClick">
      <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="getChannels"/>
                  <el-input v-model="listQuery.channelId" placeholder="渠道号" clearable style="width: 200px;"
                            class="filter-item" @keyup.enter.native="getChannels"/>
                  <el-input v-model="listQuery.channelCode" placeholder="channel_code" clearable style="width: 200px;"
                            class="filter-item" @keyup.enter.native="getChannels"/>
                  <!--                  <el-select v-model="listQuery.channelId" placeholder="渠道" clearable style="width: 200px"-->
                  <!--                             class="filter-item">-->
                  <!--                    <el-option v-for="item in channels" :key="item.channelId" :label="item.channelName"-->
                  <!--                               :value="item.channelId"/>-->
                  <!--                  </el-select>-->
                  <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getChannels">查询
                  </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="getChannels"/>
              </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="saveBaseConf">基础配置保存
            </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" :disabled="!isEdit">
                  <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="saveApplyConf">进件校验项保存
            </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="saveApplyConf">保存
            </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.repaymentUrl" :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="getChannels">回调配置保存
            </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="getChannels">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="getChannels">刷新内存缓存
            </el-button>
          </el-card>
        </div>
        <!--    刷新内存缓存  ====-->
      </el-tab-pane>

    </el-tabs>

  </div>

</template>


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


  export default {

    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.getChannels()
      this.getStaticElement()
      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: {
      getStaticElement() {
        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(() => {
        })
      },
      getChannels() {
        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: {},
        //   importCheckItem: {"point": 1, "checkedItems": []},
        //   applyPrivilege: [],
        //   callbackInfo: {}
        // }
      },
      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)
      },
      getChannelDetail(that, data) {
        getChannelDetail(data).then(rep => {
          if (rep.data) {
            that.channel = rep.data
            if (rep.data && rep.data.importCheckInfo && rep.data.importCheckInfo.checkedItemsResult.length > 0) {
              // 说明有数据
              let def = rep.data.importCheckInfo.checkedItemsResult[0];
              that.checkedItemsResultVO.point = def.point
              that.checkedItemsResultVO.value = def.checkedItems
            }
          }
        })
      },
      saveBaseConf() {
        // 保存基本配置信息
        saveChannelBaseConf(this.channel.baseConfDetail).then(rep => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 1500
          })
        })
      },
      saveApplyConf() {
        // 保存进件项配置
        console.log(this.channel.importCheckInfo)
        console.log(this.channel.applyPrivilege)
      },
      handleClick(tab) {
        // 如果点击查询页 那么隐藏tab
        if ('queryPage' === tab.name) {
          this.$options.methods.hiddenTabAll(this)
        }
      },
      showTabAll(that, excludeTab) {
        let tabs = that.$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(that) {
        let tabs = that.$refs.myTab.$children[0].$refs.tabs
        for (let i = 0; i < tabs.length; i++) {
          tabs[i].style.display = 'none'
        }
      },
      //
      // savevData() {
      //   if (this.roles.includes('channel')) {
      //     this.channel.basicInfo = { channelId: this.channel.basicInfo.channelId }
      //   }
      //   saveChannel(this.channel).then(() => {
      //     this.$notify({
      //       title: '成功',
      //       message: '保存成功',
      //       type: 'success',
      //       duration: 1000
      //     })
      //     this.handleCurrentChange(this.channel.basicInfo)
      //     this.getChannels()
      //   })
      // }
    }
  }

  function f() {

  }
</script>
