<style>
  .platformdeploy .Period-rules {
    display: flex;
    margin-bottom: 24px;
    padding-left: 20px;
  }

  .platformdeploy .Period_Spreate {
    flex: 1;
    min-width: 200px;
    margin-right: 32px;
  }

  .platformdeploy .Period-rule-title {
    color: #646a73;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
  }

  .platformdeploy .Period-info-icon {
    margin-left: 8px;
    color: #8f959e;
    line-height: 1;
    vertical-align: top;
  }

  .process_Btn_List {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
  }

  .processBtn_Cancel {
    width: 90px;
    height: 35px;
    border: 1px solid #A1AAB2;
    color: #000000;
    background-color: #fff;
    text-align: center;
    line-height: 35px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 20px;
  }

  .processBtn_Save {
    width: 90px;
    height: 35px;
    background-color: #2961FE;
    color: #FFF;
    text-align: center;
    line-height: 35px;
    border-radius: 5px;
    cursor: pointer;
  }

  .baseSetForm_Dialog {
    margin: 20px;
  }

  .cycle_Title {
    font-size: 20px;
    font-weight: 500;
    color: #1f2329;
  }

  .Period-alert {
    padding: 9px 16px;
    border-radius: 4px;
    background-color: #f0f4ff;
    line-height: 22px;
    color: #1f2329;
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 13px;
  }

  .Okr_Length {
    font-weight: 500;
    color: #1f2329;
  }



  .addDutyUpload .ItemImgDiv {
    width: 118px;
    height: 118px;
    position: relative;
    margin: 0 10px 10px 0;
    display: inline-block;
  }

  .addDutyUpload .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: #8c939d;
    position: relative;
    overflow: hidden;
  }

  .addDutyMain {
    display: inline-block;
    width: 118px;
    height: 118px;
    font-size: 70px;
    border: 1px dashed #d9d9d9;
    line-height: 120px;
  }

</style>
<template>
  <div class="page-body">
    <div class="platformdeploy">
      <q-tabs style="margin-bottom:20px;" v-model="tabCheck" @input="tabChange()" narrow-indicator dense align="left"
        class="text-primary">
        <q-tab v-for="(x,y) in TypeEnumList" :key='y' :ripple="false" :name="x.Id" :label="x.Name" />
      </q-tabs>
      <!-- 公众号 -->
      <template>
        <div style="text-align:right;">
          <q-btn color="accent" size="sm" class="q-mr-md" @click="geteject" label="修改平台配置" />
          <q-btn color="accent" size="sm" class="q-mr-md" @click="goLittleProgram" label="小程序信息" />
        </div>
        <div v-if="data && data.Id && data.Id>0">

          <div class="Period-rules">
           
            <div class="Period_Spreate">
              <div class="Period-rule-title">
                平台名称
              </div>
              <div>
                {{data.Name}}
              </div>
            </div>
            <div class="Period_Spreate">
              <div class="Period-rule-title">
                AppId
              </div>
              <div>
                {{data.AppId}}
              </div>

            </div>
          </div>
          <div class="Period-rules">
            
            <div class="Period_Spreate">
              <div class="Period-rule-title">
                App秘钥
              </div>
              <div>
                {{data.AppSecret}}
              </div>

            </div>
            <div class="Period_Spreate">
              <div class="Period-rule-title">
                开启状态
              </div>
              <div>
                {{data.Enable==1?'已开启':'未开启'}}
              </div>
            </div>
         

          </div>

         

        </div>
        <div v-else style="width: 100%;height: 100px;line-height: 100px;text-align: center;">
          暂无任何配置
        </div>
      </template>
      <q-dialog v-model="isShowBaseSet" maximized full-height seamless position="right" @hide="closeProcess">
        <q-card style="margin-top:61px;width:500px" class="no-border-radius classinfo_Dialog">
          <div class="baseSetForm_Dialog">
            <div class="cycle_Title">平台配置</div>
            <div style="margin-top: 10px;">
              <q-input filled stack-label :dense="false" v-model="addMsg.Name" ref="Name" class="col-12 q-pb-lg"
                label="平台名称" :rules="[val => !!val || '请填写平台名称']" />
            </div>
            <div>
              <q-input filled stack-label :dense="false" v-model="addMsg.AppId" ref="AppId" class="col-12 q-pb-lg"
                label="AppId" :rules="[val => !!val || '请填写AppId']" />
            </div>
            <div>
              <q-input filled stack-label :dense="false" v-model="addMsg.AppSecret" ref="AppSecret"
                class="col-12 q-pb-lg" label="app秘钥" :rules="[val => !!val || '请填写app秘钥']" />
            </div>

            <div class="Okr_Length" style="margin:20px 0;display: flex;align-items: center;">
              <div style="color:#1f2329;margin-right: 10px;">开启状态</div>
              <el-switch v-model="addMsg.Enable" :active-value="1" :inactive-value="2"></el-switch>

            </div>

          </div>
          <div class="process_Btn_List">
            <div class="processBtn_Cancel" @click="closeProcess">关闭</div>
            <div class="processBtn_Save" @click="setBaseInfo">确定</div>
          </div>
        </q-card>
        <div class="dialog-out-close" @click="closeProcess"
          style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
          <q-icon name="iconfont icon-jujue1" size="26px" />
        </div>
      </q-dialog>

    </div>
  </div>

</template>
<script>
  import {
    getContributeConfigTypeEnumList,
    getContributeConfigInfo,
    setContributeConfigInfo
  } from '../../api/system/index'


  export default {
    meta: {
      title: "平台配置"
    },
    components: {

    },
    data() {
      return {
        isShowBaseSet: false,
        tabCheck: '1',
        TypeEnumList: [], //各平台枚举列表
        data: null,
        addMsg: {}
      }
    },
    mounted() {
      this.getEnumList()
    },
    methods: {
      tabChange() {
        this.getConfigInfo()
      },
      getEnumList() {
        getContributeConfigTypeEnumList({}).then(res => {
          if (res.Code == 1) {
            this.TypeEnumList = res.Data;
            this.tabCheck = this.TypeEnumList[0].Id;
            this.getConfigInfo()
          }
        })
      },
      getConfigInfo() { //获取平台配置
        getContributeConfigInfo({
          Type: this.tabCheck
        }).then(res => {
          if (res.Code == 1) {
            this.data = res.Data;
          }
        })
      },
      geteject() {
        if (this.data && this.data.Id && this.data.Id > 0) {
          this.addMsg = JSON.parse(JSON.stringify(this.data))
        } else {
          this.addMsg = {
            Id: 0,
            Type: this.tabCheck,
            Enable: 1,
            AppId: '',
            Name: '',
            AppSecret: '',
          }
        }

        this.isShowBaseSet = true;
      },
      //关闭流程设置
      closeProcess() {
        this.isShowBaseSet = false;
      },
      setBaseInfo() {
        this.$refs.Name.validate();
        this.$refs.AppId.validate();
        this.$refs.AppSecret.validate();
        if (!this.$refs.Name.hasError && !this.$refs.AppId.hasError && !this.$refs.AppSecret.hasError) {
          let msg = {
            Id: this.addMsg.Id,
            Name: this.addMsg.Name,
            AppId: this.addMsg.AppId,
            AppSecret: this.addMsg.AppSecret,
            Type: this.addMsg.Type,
            Enable: this.addMsg.Enable,

          }
          setContributeConfigInfo(msg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '数据保存成功！',
                position: 'top'
              })
              this.getConfigInfo()
              this.isShowBaseSet = false;
            }
          })
        }
      },
      //跳转到微信小程序页面
      goLittleProgram(){
        var tempStr = '../system/smallProgramInfo';
        this.$router.push({
          path: tempStr,
          query: {}
        });
      }
    }
  }

</script>
