<style>
    .weChatConfig .Period-rules {
      display: flex;
      margin-bottom: 24px;
      padding-left: 20px;
    }
  
    .weChatConfig .Period_Spreate {
      flex: 1;
      min-width: 200px;
      margin-right: 32px;
    }
  
    .weChatConfig .Period-rule-title {
      color: #646a73;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
    }
  
    .weChatConfig .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;
    }
  
    .FormItem-asterisk {
      position: relative;
      top: 3px;
      margin-left: 3px;
      color: #f54a45;
      line-height: 1;
    }
  
    .baseSetForm_Dialog .el-radio {
      display: block;
      margin-bottom: 15px;
    }
  
  </style>
  <template>
    <div class="page-body">
        <div class="weChatConfig">
            <div style="text-align:right;">
              <q-btn color="accent" size="sm" class="q-mr-md" @click="geteject" label="修改基础配置" />
            </div>
            <div class="Period-rules">
              <div class="Period_Spreate">
                <div class="Period-rule-title">企业名称</div>
                <div>{{baseObj.Name}}</div>
              </div>
              <div class="Period_Spreate">
                <div class="Period-rule-title">
                  企业ID
                </div>
                <div>{{baseObj.WX_CorpId}}</div>
              </div>
            </div>
            <div class="Period-rules">
              <div class="Period_Spreate">
                <div class="Period-rule-title">通讯录管理secret</div>
                <div>{{baseObj.Employee_Secret}}</div>
              </div>
              <div class="Period_Spreate">
                <div class="Period-rule-title">
                    外部联系人管理secret
                </div>
                <div>
                  {{baseObj.Contact_Secret}}
                </div>
              </div>
            </div>
            <div class="Period-rules">
              <div class="Period_Spreate">
                <div class="Period-rule-title">
                  开启状态
                </div>
                <div>
                  {{baseObj.Enable==1?'已开启':'未开启'}}
                </div>
              </div>
            </div>
           
        </div>
        <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.WX_CorpId" ref="WX_CorpId"
                    class="col-12 q-pb-lg" label="企业微信ID" :rules="[val => !!val || '请填写企业微信ID']" />
                </div>
                <div>
                    <q-input filled stack-label  :dense="false" v-model="addMsg.Employee_Secret" ref="Employee_Secret"
                    class="col-12 q-pb-lg" label="企业通讯录secret" :rules="[val => !!val || '请填写企业通讯录secret']" />
                </div>
                <div>
                    <q-input filled stack-label  :dense="false" v-model="addMsg.Contact_Secret" ref="Contact_Secret"
                    class="col-12 q-pb-lg" label="企业外部联系人secret" :rules="[val => !!val || '请填写企业外部联系人secret']" />
                </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>
    
  </template>
  <script>
    import {
        getWeChatConfigInfo,
        setWeChatConfig
    } from '../../api/system/wechat';
    export default {
      meta: {
        title: "企业微信设置"
      },
      components: {
        
      },
      data() {
        return {
          isShowBaseSet: false,
          baseObj: {},
          addMsg:{},
        }
      },
      mounted() {
        this.getList();
      },
      methods: {
        //获取okr配置信息
        getList() {
            getWeChatConfigInfo({}).then(res => {
                if (res.Code == 1) {
                this.baseObj = res.Data;
                }
            })
        },
 
        //关闭流程设置
        closeProcess() {
          this.isShowBaseSet = false;
        },
        geteject(){
            this.addMsg = JSON.parse(JSON.stringify(this.baseObj))
            this.isShowBaseSet = true;
        },
        setBaseInfo(){
            this.$refs.Name.validate();
            this.$refs.WX_CorpId.validate();
            this.$refs.Employee_Secret.validate();
            this.$refs.Contact_Secret.validate();
            if(!this.$refs.Name.hasError && !this.$refs.WX_CorpId.hasError && !this.$refs.Employee_Secret.hasError && !this.$refs.Contact_Secret.hasError){
                let msg={
                    Id: this.addMsg.Id,
                    Name: this.addMsg.Name,
                    WX_CorpId: this.addMsg.WX_CorpId,
                    Employee_Secret: this.addMsg.Employee_Secret,
                    Contact_Secret: this.addMsg.Contact_Secret,
                    Enable: this.addMsg.Enable,
                    
                }
                setWeChatConfig(msg).then(res => {
                    if (res.Code == 1) {
                        this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: '数据保存成功！',
                            position: 'top'
                        })
                        this.getList()
                        this.isShowBaseSet = false;
                    }
                })
            }
        }
       
      }
    }
  
  </script>
  