<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-04-20 11:08:57
 -->
<template>
  <div class="daily-set-wrap ">
    <div class="daily-set-content border-box">
      <div class="company-title m-b-20 flex flex-space-between">
        <div class="line-h-32"><span class="color-303133 font-14 font-w-600">企业微信基本信息</span><el-button class="m-l-20" type="text" @click="refeshData">同步刷新 </el-button></div>
        <div>
          <set-tip v-if="!checkShow" :tipText="tipText"></set-tip>
        </div>
      </div>
      <div class="company-info-body">
        <el-form ref="form" :model="form" label-width="105px">
          <!-- <el-form-item label="小程序版本">
            <span class="font-14 color-303133">{{ companyObj.smallVersion || '免费版' }}</span>
          </el-form-item> -->
          <el-form-item label="企业名称">
            <span class="font-14 color-303133 p-r-10">{{ companyObj.corpName }}</span> <el-tag> {{ companyObj.contactFlag == 1 ? '已认证' : '未认证' }}</el-tag
            ><span v-if="companyObj.contactFlag == 1" class="p-l-10 font-12 color-909399">认证到期 {{ companyObj.verifiedEndTime | timeStampToYmd }}</span>
          </el-form-item>
          <el-form-item label="企业ID">
            <span class="font-14 color-303133">{{ companyObj.corpid }}</span>
          </el-form-item>
          <el-form-item label="行业类型">
            <span class="font-14 color-303133">{{ companyObj.corpIndustry }} / {{ companyObj.corpSubIndustry }}</span>
          </el-form-item>
          <el-form-item label="人员规模">
            <span class="font-14 color-303133">{{ companyObj.corpScale }}</span>
          </el-form-item>
          <el-form-item label="地址">
            <span class="font-14 color-303133">{{ companyObj.location }}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="company-title m-b-20 m-t-30"><span class="color-303133 font-14 font-w-600">客户密钥维护</span></div>
      <div class="company-info-body secret-body">
        <div class="m-b-20">
          <span class="inline-block w-127"
            ><el-tooltip class="item" effect="dark" content="企业微信中【客户联系】API中若更新secret，请复制后更新至此处。首次使用好办请输入。" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;" class="font-14 color-606266">客户联系secret：</span></el-tooltip> </span
          ><el-input class="m-l-10 w-399" maxlength="200" v-model="companyObj.contactSecret" placeholder=""></el-input><el-button class="m-l-20" type="text" @click="saveSecret('1')">保存</el-button><span v-if="companyObj.contactSecretLastTime" class="m-l-20 font-12 color-909399">最后一次保存：{{ companyObj.contactSecretLastTime || formatTimeStamp }}</span
          ><span v-if="companyObj.contactSecret" class="m-l-37 font-14 color-303133"
            ><span :class="['iconfont', companyObj.contactSecretFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ companyObj.contactSecretFlag ? '校验成功' : '校验失败' }}</span></span
          >
        </div>
        <!-- <div class="m-b-20">
          <span class="inline-block w-127"
            ><el-tooltip class="item" effect="dark" content="" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;" class="font-14 color-606266">好办助手secret：</span></el-tooltip> </span
          ><el-input class="m-l-10 w-399" v-model="secrets.haobanSecret" placeholder=""></el-input><el-button class="m-l-20" type="text" @click="saveSecret('')">保存</el-button><span class="m-l-20 font-12 color-909399">最后一次保存：{{ secrets.haobanSaveDate || formatTimeStamp }}</span>
        </div> -->
        <div class="m-b-20">
          <span class="inline-block w-127"
            ><el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content">企业微信中通讯录同步若更新secret，请复制后更新至此处。<br />因获取Secret而获取通讯录的相关信息。首次使用好办请输入。<br />若发生相关变更，与企业微信无关，特此告知！</div>
              <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;" class="font-14 color-606266">通讯录secret：</span></el-tooltip
            ></span
          ><el-input class="m-l-10 w-399" maxlength="200" v-model="companyObj.wxSecretKey" placeholder=""></el-input><el-button class="m-l-20" type="text" @click="saveSecret('2')">保存</el-button><span v-if="companyObj.wxSecretKeyLastTime" class="m-l-20 font-12 color-909399">最后一次保存：{{ companyObj.wxSecretKeyLastTime || formatTimeStamp }}</span
          ><span v-if="companyObj.wxSecretKey" class="m-l-37 font-14 color-303133"
            ><span :class="['iconfont', companyObj.wxSecretKeyFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ companyObj.wxSecretKeyFlag ? '校验成功' : '校验失败' }}</span></span
          >
        </div>
        <div>
          <span class="inline-block w-127"
            ><el-tooltip class="item" effect="dark" content="企业微信中【应用管理】关联的会员小程序secret，请复制后更新至此处。首次使用好办请输入。" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;" class="font-14 color-606266">会员小程序secret：</span></el-tooltip> </span
          ><el-input class="m-l-10 w-399" maxlength="200" v-model="companyObj.memberSecret" placeholder=""></el-input><el-button class="m-l-20" type="text" @click="saveSecret('3')">保存</el-button><span v-if="companyObj.memberSecretLastTime" class="m-l-20 font-12 color-909399">最后一次保存：{{ companyObj.memberSecretLastTime || formatTimeStamp }}</span
          ><span v-if="companyObj.memberSecret" class="m-l-37 font-14 color-303133"
            ><span :class="['iconfont', companyObj.memberSecretFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ companyObj.memberSecretFlag ? '校验成功' : '校验失败' }}</span></span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import setTip from '@/components/app/set-tip.vue';
import { getRequest, postRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
  props: {},
  data() {
    return {
      checkShow: false,
      tipText: '请在企业密钥维护中输入对应的secret',
      tableH: window.screen.availHeight - 464 - 126,
      wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
      companyObj: {
        smallVersion: '',
        corpName: '',
        corpid: '',
        contactFlag: false,
        verifiedEndTime: '',
        corpIndustry: '',
        corpSubIndustry: '',
        corpUserMax: '',
        location: '',
        contactSecret: '',
        wxSecretKey: '',
        memberSecret: '',
        wxSecretKeyFlag: true,
        memberSecretFlag: true,
        contactSecretFlag: true,
        wxSecretKeyLastTime: null,
        contactSecretLastTime: null,
        memberSecretLastTime: null
      }
    };
  },
  computed: {},
  methods: {
    /**
     * 保存secret
     */
    saveSecret: _debounce(function(flag) {
      const that = this;
      let para = {};
      if (flag == 1) {
        para.contactSecret = that.companyObj.contactSecret;
      }
      if (flag == 2) {
        para.wxSecretKey = that.companyObj.wxSecretKey;
      }
      if (flag == 3) {
        para.memberSecret = that.companyObj.memberSecret;
      }
      that.postSaveSecret(flag, para);
    }, 300),
    postSaveSecret(flag, para) {
      const that = this;
      const url = flag == 1 ? 'wx-enterprise-contact-secret-set' : flag == 2 ? '/wx-enterprise-wx-secret-set' : 'wx-enterprise-member-secret-set';
      postRequest(`/haoban-manage3-web/${url}`, para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.getData();
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    refeshData() {
      const that = this;
      that.refreshData();
    },
    /**
     * 刷新数据
     */
    refreshData(val) {
      const that = this;
      let para = {
        wxEnterpriseId: that.wxEnterpriseId
      };
      getRequest('/haoban-manage3-web/wxEnterprise-refresh', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.companyObj = resData.result;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取数据
     */
    getData(val) {
      const that = this;
      let para = {
        wxEnterpriseId: that.wxEnterpriseId
      };
      getRequest('/haoban-manage3-web/wxEnterprise-detail', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.companyObj = resData.result;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     *  获取显示的提示
     */
    getTipData() {
      const that = this;
      let para = {};
      getRequest('/haoban-manage3-web/is-wx-enterprise-secret-set', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.checkShow = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {},
  mounted() {
    const that = this;
    that.$emit('showTab', 1);
    document.documentElement.style.backgroundColor = '#f0f2f5';
    that.getData();
    that.getTipData();
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    setTip
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.color-c0c4cc {
  display: inline-block;
  line-height: 34px;
  padding-left: 10px;
  color: #c0c4cc;
}
.color-49c958 {
  color: #49c958;
}
.color-f83431 {
  color: #f83431;
}
.line-h-32 {
  line-height: 32px;
}
.condition-tips {
  display: inline-block;
  vertical-align: middle;
  line-height: 32px;
}

.w-127 {
  width: 127px;
}

.w-399 {
  width: 399px;
}

.m-l-20 {
  margin-left: 20px;
}

.m-l-37 {
  margin-left: 37px;
}

.m-b-20 {
  margin-bottom: 20px;
}
.m-t-30 {
  margin-top: 30px;
}
.table-condition {
  // min-width: 1200px;
}
.secret-body {
  .el-input {
    /deep/ .el-input__inner {
      color: #c0c4cc;
    }
  }
}
.daily-set-wrap {
  height: 100%;
  .daily-set-content {
    padding: 20px;
    .table-condition-left {
      font-size: 0;
    }
  }
  .el-form {
    .el-form-item {
      margin-bottom: 4px;
    }
    /deep/ .el-form-item__label {
      color: #606266;
    }
  }
  .depart-item-content {
    width: 213px;
    height: 32px;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
  }
  .item-cell-select {
    /deep/ .el-select__tags {
      white-space: nowrap;
      overflow: hidden;
    }
  }
  .depart-cell {
    position: relative;
    margin: 0 24px 24px 0;
    .el-icon-circle-close {
      position: absolute;
      top: -10px;
      right: -10px;
      font-size: 16px;
      color: #808995;
      cursor: pointer;
    }
  }
}
</style>
