<template>
  <div v-if="loading" class="ui-boundEnterprise">
    <div>
      <div class="ui-title font_48 color3 bold">绑定订单职责</div>
      <div class="font_28 color3 ui-pl-32 ui-pb-32">当前可绑定职责：</div>
      <div v-if="typeList && typeList.length > 0" class="ui-item-select">
        <div v-for="(item, index) in typeList" :key="index" class="f-fbc ui-pb-36" @click="selectChange(item)">
          <div class="f-fcl">
            <img v-if="item.name == '主教练'" class="ui-duty-icon" src="https://image.fulllinkai.com/202305/06/103763ce22be9a1bd964080a6b45bdf0.png" alt="" />
            <img v-else-if="item.name == '副教练'" class="ui-duty-icon" src="https://image.fulllinkai.com/202305/06/b73e57901f943fa31eec78b21c8e8eac.png" alt="" />
            <img v-else-if="item.name == '客服'" class="ui-duty-icon" src="https://image.fulllinkai.com/202305/06/6a96db6ec2a77503b84e6213f9d905a6.png" alt="" />
            <img v-else class="ui-duty-icon" src="https://image.fulllinkai.com/202305/06/697595eb7b086798bef1706563ce3b92.png" alt="" />
            <div class="font_32 color3 ui-item-select-text">{{ item.name }}</div>
          </div>
          <div>
            <img v-show="!item.state" class="ui-item-select-icon" src="https://image.fulllinkai.com/202306/25/ba1565f2cf6d59945ec6f522c8caaa5d.png" alt="" />
            <img v-show="item.state" class="ui-item-select-icon" src="https://image.fulllinkai.com/202306/25/1c57dd3dd3d4062255c159d73a437b83.png" alt="" />
          </div>
        </div>
        <div class="ui-btn f-fcc font_30 colorF bold" @click="saveRole">确认绑定</div>
        <div class="font_24 color9 text-center">绑定后可使用该职责</div>
      </div>
      <div v-else>
        <img class="ui-no-role-icon" src="https://image.fulllinkai.com/202306/07/247d8ae6b90334457d1b39129cd5c490.png" alt="" />
        <div class="font_30 color9 text-center">暂无可绑定的职责</div>
      </div>
    </div>
  </div>
  <div v-else class="ui-skeleton">
    <div class="f-fcl">
      <div class="ui-skeleton-photo"></div>
      <div>
        <div class="ui-skeleton-name"></div>
        <div class="ui-skeleton-name-v2"></div>
      </div>
    </div>
    <div class="ui-skeleton-line"></div>
    <div v-for="(item, index) in skeleton" :key="index" class="f-fcl">
      <div class="ui-skeleton-item">{{ item }}</div>
      <div class="ui-skeleton-item-v2"></div>
    </div>
    <div class="font_28 color9 text-center">-- 加载中 --</div>
  </div>
  <img class="ui-icon" src="https://image.fulllinkai.com/202306/26/05b70e1b55dfed082b28fda935653343.png" alt="" />
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { showToast } from 'vant';
  import weChat from '@/utils/weChat';
  import router from '@/router';
  import { useUserStore } from '@/store/modules/user';

  defineOptions({ name: 'BoundEnterprise' });

  const userStore = useUserStore() as any;
  const loading = ref(false);
  const isBind = ref<any>(''); // 是否绑定企业微信
  const isRole = ref<any>(''); // 群是否绑定职责
  const isRoleIdList = ref<any[]>([]); // 选择跟群绑定的职责
  const typeList = ref<any[]>([]);
  const throttle = ref<any>(true);
  const skeleton = ref<any[]>(['', '', '', '', '', '']);

  // 获取是否绑定企业微信 is_bind: true, false. 是否绑定职责is_role: true, false. 可绑定的职责列表 role_list
  const getState = () => {
    weChat({ url: `/h5/work/${userStore.chatId}/group/orders/status`, hideLoading: true, method: 'get' })
      .then((res) => {
        const result = res.data;
        userStore.weChatBindState = result.status;
        userStore.chiefCoach = result.is_main_coach;
        userStore.coach = result.is_coach;
        userStore.service = result.is_customer;
        isBind.value = result.is_bind;
        isRole.value = result.is_role;
        if (isRole.value) {
          router.replace({
            name: 'personalCenter',
          });
          return;
        }
        if (result.role_list && result.role_list.length > 0) {
          result.role_list.forEach((item) => {
            typeList.value.push({
              id: item.id,
              name: item.name,
              state: 0,
            });
          });
        }
        loading.value = true;
      })
      .catch((err) => {
        console.log(err);
      });
  };

  // 为群绑定职责
  const saveRole = () => {
    if (throttle.value) {
      let data = {
        chat_id: userStore.chatId,
        role_ids: isRoleIdList.value,
      };
      if (isRoleIdList.value.length === 0) {
        showToast('请选择需要绑定的职责');
        return;
      }
      throttle.value = false;
      weChat({ url: `h5/order/bind/role`, data, method: 'post' })
        .then((res) => {
          let result = res.data;
          console.log(result, '7777');
          showToast('绑定成功');
          setTimeout(() => {
            throttle.value = true;
            router.replace({
              name: 'personalCenter',
            });
          }, 1000);
        })
        .catch((err) => {
          throttle.value = true;
          console.log(err);
        });
    }
  };

  const selectChange = (e) => {
    console.log(e, '7777');
    if (e.state === 0) {
      isRoleIdList.value.push(e.id);
      e.state = 1;
    } else {
      isRoleIdList.value = isRoleIdList.value.filter((id) => {
        return id !== e.id;
      });
      e.state = 0;
    }
    console.log(isRoleIdList.value);
  };

  onMounted(() => {
    let route = router.currentRoute.value.query;
    console.log(route);
    if (route.chat_id) {
      userStore.chatId = route.chat_id;
    }
    userStore.serviceUserId = route.service_user_id;
    getState();
  });
</script>
<style lang="scss" scoped>
  .ui-boundEnterprise {
    background: #ffffff;
    overflow-y: auto;
    height: 100vh;
  }

  .ui-title {
    padding: px2rem(120) px2rem(0) px2rem(70) px2rem(50);
  }

  .ui-item-select {
    position: relative;
    z-index: 99;
    padding: 0 px2rem(30);

    .ui-duty-icon {
      width: px2rem(40);
      height: px2rem(40);
      display: block;
      margin-right: px2rem(4);
    }

    .ui-item-select-icon {
      width: px2rem(36);
      height: px2rem(36);
      display: block;
      margin-right: px2rem(10);
    }

    .ui-item-select-text {
      line-height: px2rem(40);
    }
  }

  .ui-mobile {
    position: relative;
    z-index: 33;
    margin: px2rem(0) px2rem(50);
    border-bottom: px2rem(2) solid #d8d8d8;

    .ui-mobile-text {
      line-height: px2rem(44);
    }

    .ui-user-input {
      width: px2rem(480);
      font-size: px2rem(32);
      padding: px2rem(24) px2rem(12);
      border-radius: px2rem(16);
      background: initial;
      line-height: initial;
    }

    // 去除默认下划线
    ::v-deep(.van-cell:after) {
      position: relative;
    }

    ::v-deep(input::-webkit-input-placeholder) {
      color: #999999;
    }
  }

  .ui-no-role-icon {
    width: px2rem(270);
    height: px2rem(200);
    display: block;
    margin: px2rem(40) auto px2rem(20) auto;
  }

  .ui-btn {
    position: relative;
    z-index: 33;
    width: px2rem(650);
    height: px2rem(88);
    background: #5ac7a0;
    border-radius: px2rem(40);
    margin: px2rem(100) auto px2rem(30) auto;
  }

  .ui-icon {
    width: 100vw;
    height: px2rem(946);
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .ui-skeleton {
    position: relative;
    z-index: 2;
    padding: px2rem(60);

    .ui-skeleton-photo {
      width: px2rem(120);
      height: px2rem(120);
      border-radius: 50%;
      background: #f5f5f5;
      display: block;
      margin-right: px2rem(40);
    }

    .ui-skeleton-name,
    .ui-skeleton-name-v2 {
      width: px2rem(160);
      height: px2rem(30);
      border-radius: px2rem(16);
      background: #f5f5f5;
    }

    .ui-skeleton-name-v2 {
      width: px2rem(240);
      margin-top: px2rem(16);
    }

    .ui-skeleton-line {
      width: 100%;
      height: px2rem(2);
      background: #f5f5f5;
      margin: px2rem(30) 0 px2rem(60) 0;
    }

    .ui-skeleton-item,
    .ui-skeleton-item-v2 {
      width: px2rem(52);
      height: px2rem(52);
      border-radius: px2rem(26);
      background: #f5f5f5;
      margin-bottom: px2rem(60);
    }

    .ui-skeleton-item-v2 {
      width: px2rem(480);
      margin-left: px2rem(22);
    }
  }
</style>
