<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-27 18:28:29
 -->
<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 secret-cell">
          <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.wxSecretKey" placeholder="必填"></el-input><el-button class="m-l-20" type="text" @click="saveSecret('1')">保存</el-button><span v-if="companyObj.wxSecretKeyLastTime" class="m-l-20 font-12 color-909399">最后一次保存：{{ companyObj.wxSecretKeyLastTime | formatTimeStamp }}</span
          ><span 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 v-if="showWxError" class="el-form-item__error m-l-137">请填写客户联系 secret</div>
        </div>

        <div class="m-b-20 secret-cell">
          <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.contactSecret" placeholder="非必填"></el-input><el-button class="m-l-20" type="text" @click="saveSecret('2')">保存</el-button><span v-if="companyObj.contactSecretLastTime" class="m-l-20 font-12 color-909399">最后一次保存：{{ companyObj.contactSecretLastTime | formatTimeStamp }}</span
          ><span 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="companyObj.haobanSecret" placeholder=""></el-input><el-button class="m-l-20" type="text" @click="saveSecret('3')">保存</el-button><span class="m-l-20 font-12 color-909399">最后一次保存：{{ companyObj.haobanSecretLastTime || formatTimeStamp }}</span
          ><span class="m-l-37 font-14 color-303133"
            ><span :class="['iconfont', companyObj.haobanSecretFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ companyObj.haobanSecretFlag ? '校验成功' : '校验失败' }}</span></span
          >
          <!-- <div v-if="showHaobanError" class="el-form-item__error m-l-137">请填写通讯录 secret</div> -->
        </div>
        <!-- <div class="secret-cell m-b-20">
          <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 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 class="secret-cell ">
          <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 class="p-l-5 font-14 color-303133 font-w-500">会员小程序信息</span>
          <div class="table-cell m-t-10 p-l-137">
            <el-table class="" ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
              <el-table-column label="小程序名称" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.appName || '--' }}</template>
              </el-table-column>
              <el-table-column prop="" label="secret" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.secret | '--' }}</span
                  ><span :class="['iconfont', scope.row.memberSecretFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ scope.row.memberSecretFlag ? '校验成功' : '校验失败' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="关联商户" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.taskDesc | '--' }}</template>
              </el-table-column>
              <el-table-column prop="" label="最近编辑时间" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="line-18">{{ scope.row.updateTime | timeStampToYmd }}</div>
                  <div class="line-18">{{ scope.row.updateTime | timeStampToHms }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-button type="text" @click="toEdit(scope.$index, scope.row)">编辑</el-button><el-button type="text" @click="toDel(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div v-if="tableData.length < 10" class="text-center add-cell cursor-pointer" @click="addSecret"><span class="el-icon-plus font-14 color-2f54eb"></span><span class="font-14 color-2f54eb p-l-5">新建</span><span class="font-12 color-c0c4cc p-l-20">最多添加10个</span></div>
          </div>
        </div>
      </div>
    </div>
    <secret-set v-if="addShow" :editRow="editRow" @closeText="closeText" @submitText="submitText"></secret-set>
  </div>
</template>
<script>
import setTip from '@/components/app/set-tip.vue';
import secretSet from '@/components/set/secret-set.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: true,
      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: '',

        wxSecretKey: '',
        contactSecret: '',
        memberSecret: '',
        wxSecretKeyFlag: true,
        contactSecretFlag: true,
        memberSecretFlag: true,
        wxSecretKeyLastTime: null,
        contactSecretLastTime: null,
        memberSecretLastTime: null,
        haobanSecret: '',
        haobanSecretFlag: true,
        haobanSecretLastTime: null
      },
      showWxError: false,
      showContactError: false,
      tableData: [],
      addShow: false,
      editRow: {}
    };
  },
  computed: {},
  methods: {
    addSecret() {
      const that = this;
      that.addShow = true;
      that.editRow = {};
    },
    /**
     * 编辑
     */
    toEdit(index, row) {
      const that = this;
      that.addShow = true;
      that.editRow = row;
    },
    closeText() {
      const that = this;
      that.addShow = false;
      that.editRow = {};
    },
    submitText() {
      const that = this;
      that.addShow = false;
      that.editRow = {};
    },
    /**
     * 删除
     */
    toDel(index, row) {
      const that = this;
      that
        .$confirm('确定删除当前小程序信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.postDel(index, row);
        })
        .catch(() => {});
    },
    postDel(index, row) {
      const that = this;
      let para = {
        materialIds: row.materialId
      };
      postRequest('/haoban-manage3-web/material-del', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('删除成功', 'success');

            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 保存secret
     */
    saveSecret: _debounce(function(flag) {
      const that = this;
      let para = {};
      if (flag == 1) {
        para.wxSecretKey = String(that.companyObj.wxSecretKey).trim();
        that.showWxError = !!that.companyObj.wxSecretKey ? false : true;
      }
      // if (flag == 2) {
      //   para.contactSecret = String(that.companyObj.contactSecret).trim();
      //   that.showContactError = !!that.companyObj.contactSecret ? false : true;
      // }
      // if (flag == 3) {
      //   para.memberSecret = String(that.companyObj.memberSecret).trim();
      // }
      if (that.showWxError || that.showContactError) {
        return false;
      }
      that.postSaveSecret(flag, para);
    }, 300),
    postSaveSecret(flag, para) {
      const that = this;
      const url = flag == 1 ? '/wx-enterprise-wx-secret-set' : flag == 2 ? 'wx-enterprise-contact-secret-set' : 'wx-enterprise-member-secret-set';
      postRequest(`/haoban-manage3-web/${url}`, para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('操作成功', 'success');
            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) {
            showMsg.showmsg('刷新成功', 'success');
            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,
    secretSet
  }
};
</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;
}

.p-l-5 {
  padding-left: 5px;
}

.p-l-130 {
  padding-left: 130px;
}

.p-l-137 {
  padding-left: 137px;
}

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

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

.m-l-137 {
  margin-left: 137px;
}
.m-b-20 {
  margin-bottom: 20px;
}
.m-t-30 {
  margin-top: 30px;
}
.secret-cell {
  position: relative;
}
.add-cell {
  height: 43px;
  line-height: 43px;
  border-bottom: 1px solid #dcdfe6;
}
.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>
