<template>
  <div class="account-padding">
    <div class="my-account">第三方APP</div>
    <div class="account-row-item">
      <div class="account-label gray-75">企业微信绑定</div>
      <span>
        <icon-font :style="!bindData.bindWechat ? { color: '#9e9e9e' } : { color: '#1ec563' }" class="item-icon" type="icon-qiyeweixin3" />
        <span class="gray-75" style="margin-left: 12px">企业微信</span>
        <span class="gray-75" style="margin-left: 8px" v-if="bindData.bindWechat">{{ '已绑定：' + bindData.weChatName }}</span>
        <span class="blue-e5 pointer" style="margin-left: 24px" @click="wechatBind">{{ !bindData.bindWechat ? '绑定' : '解绑' }}</span>
      </span>
    </div>
    <div class="account-row-item">
      <div class="account-label gray-75">钉钉绑定</div>
      <span>
        <DingtalkCircleFilled :style="!bindData.bindDing ? { color: '#9e9e9e' } : { color: '#1ec563' }" class="item-icon" />
        <span class="gray-75" style="margin-left: 12px">钉钉</span>
        <span class="gray-75" style="margin-left: 8px" v-if="bindData.bindDing">{{ '已绑定：' + bindData.dingName }}</span>
        <span class="blue-e5 pointer" style="margin-left: 24px" @click="dingDingBind">{{ !bindData.bindDing ? '绑定' : '解绑' }}</span>
      </span>
    </div>
  </div>
</template>
<script lang="ts" setup name="we-chat-ding-setting">
  import { onMounted, ref, reactive } from 'vue';
  import { CollapseContainer } from '@/components/Container';
  import { getUserData } from './UserSetting.api';
  import { useUserStore } from '@/store/modules/user';
  import { useModal } from '@/components/Modal';
  import { DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';

  const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
  });
  const userDetail = ref<any>([]);
  const userStore = useUserStore();
  const bindData = reactive<any>({
    bindWechat: false,
    weChatName: '昵称',
    bindDing: false,
    dingName: '昵称',
  });

  /**
   * 初始化钉钉和企业微信数据
   */
  function initUserDetail() {}

  /**
   * 微信绑定解绑事件
   */
  function wechatBind() {
    console.log('微信绑定解绑事件');
  }

  /**
   * 钉钉绑定解绑事件
   */
  function dingDingBind() {
    console.log('钉钉绑定解绑事件');
  }

  onMounted(() => {
    initUserDetail();
  });
</script>
<style lang="less" scoped>
  .account-row-item {
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    box-sizing: border-box;
    display: flex;
    height: 71px;
    position: relative;
  }

  .account-label {
    text-align: left;
    width: 160px;
  }

  .gray-75 {
    color: #757575 !important;
  }

  .pointer {
    cursor: pointer;
  }

  .blue-e5 {
    color: #1e88e5;
  }

  .phone-margin {
    margin-left: 24px;
    margin-right: 24px;
  }

  .clearfix:after {
    clear: both;
  }

  .clearfix:before {
    content: '';
    display: table;
  }
  .account-padding {
    padding: 30px 40px 0 20px;
  }
  .my-account {
    font-size: 17px;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 20px;
  }
</style>
