<script setup>
import { reactive, toRefs, onMounted, ref, unref, watch } from "vue";
import { getUserChoose, getUser, postChooseSubmit } from "@/api/api.js";
import { Toast } from "vant";
import { wxconfig } from "@/util/wxLogin";

import "vant/es/toast/style";

const isSelectedClick = ref(true);

/**
 * 用户详情
 */
const userInfo = ref({});
const permissionList = ref([]);
// 获取用户详情
const getUse = async () => {
  if (localStorage.getItem("Authorization")) {
    let res = await getUser();
    if (res.Ret === 200) {
      userInfo.value = res.Data;
      permissionList.value = userInfo.value.Permission.split(",") || [];
    }
  }
};

/**
 * 获取用户的选择
 */
const chooseList = ref([]);
const activeTag = ref("");

//点击产业 tag
const tagHandel = (item) => {
  isSelectedClick.value = true;
  activeTag.value = item.ChartPermissionId;
};
//复选框组
const handleCheckAllChange = (item) => {
  isSelectedClick.value = true;
  // 取到所有的子菜单id
  let ids = item.List.map((item) => {
    return item.IndustrialManagementId;
  });
  item.CheckList = item.checkAll ? ids : [];
  item.isIndeterminate = false;
};
//复选框组
const handleCheckedCitiesChange = (item) => {
  isSelectedClick.value = true;
  let len = item.CheckList.length;
  item.checkAll = len === item.List.length;
  item.isIndeterminate = len > 0 && len < item.List.length;
};

const objective = ref(false);
const subjectivity = ref(false);

const statusHandel = (val) => {
  isSelectedClick.value = !val;
};

//获取用户的选择
const getChooseList = async () => {
  const res = await getUserChoose();
  console.log(res);
  if (res.Ret === 200) {
    let checkArr = [];
    res.Data.List.forEach((item) => {
      console.log(item);
      let obj = {
        checkAll: item.CheckList.length === item.List.length ? true : false,
        isIndeterminate: item.CheckList.length > 0 && item.CheckList.length < item.List.length,
        ...item,
      };
      checkArr.push(obj);
    });
    chooseList.value = checkArr;
    objective.value = res.Data.IsObjective == 1 ? true : false;
    subjectivity.value = res.Data.IsSubjective == 1 ? true : false;
    isSelectedClick.value = res.Data.IsRefuse == 0 ? true : false;
    activeTag.value = chooseList.value[0].ChartPermissionId;
  }
};
//用户的选择保存
const chooseSubmit = async () => {
  let arr = [];
  chooseList.value.forEach((item) => {
    arr.push({
      ChartPermissionId: item.ChartPermissionId,
      IndustrialManagementIds: item.CheckList.join(","),
    });
  });
  let isSubmit = [];
  arr.flat(Infinity).forEach((item) => {
    if (!item.IndustrialManagementIds) {
      isSubmit.push(item.ChartPermissionId);
    }
  });
  if (isSelectedClick.value) {
    if (isSubmit.length === arr.flat(Infinity).length) return Toast("请至少选择一个赛道");
    if (!objective.value && !subjectivity.value) return Toast("请至少选择一项主客观内容");
  }
  const res = await postChooseSubmit({
    IsObjective: objective.value ? 1 : 0,
    IsSubjective: subjectivity.value ? 1 : 0,
    IsRefuse: isSelectedClick.value ? 0 : 1,
    IndustrialManagementIds: arr.length && arr.flat(Infinity),
  });
  if (res.Ret === 200) {
    Toast.success("保存成功");

    chooseList.value = [];
    objective.value = false;
    subjectivity.value = false;
    isSelectedClick.value = false;
    activeTag.value = 0;
    getChooseList();
  }
};
const isSelected = ref(!isSelectedClick.value);
// watch(
//   () => isSelectedClick.value,
//   (newValue) => {
//     isSelected.value = !newValue;
//     console.log(isSelected.value, newValue);
//   }
// );
onMounted(() => {
  document.title = "推送规则";
  getChooseList();
  getUse();
  wxconfig();
});
</script>

<template>
  <div class="container-tag">
    <div class="top-content">
      <div class="personal-details">
        <div class="head-portrait">
          <img :src="userInfo.Headimgurl" v-if="userInfo.Headimgurl" />
          <img src="@/assets/img/init_imgurl.png" v-else />
        </div>
        <div class="details-item">
          <template v-if="userInfo.HasPermission == 1 || userInfo.HasPermission == 2">
            <p class="name">{{ userInfo.RealName }}</p>
            <p class="phone">{{ userInfo.Mobile }}</p>
            <p class="company">{{ userInfo.CompanyName }}</p>
          </template>
          <p class="no-info" v-else>暂无您的客户信息</p>
        </div>
      </div>
      <div class="authority">
        <template v-if="userInfo.HasPermission == 1">
          <div class="item" v-for="item in permissionList" :key="item">{{ item }}</div>
        </template>
        <template v-else-if="userInfo.HasPermission == 2">
          <div class="item">暂无权限</div>
        </template>
      </div>
    </div>
    <template v-if="userInfo.HasPermission == 1">
      <div :class="['select-content', isSelectedClick ? 'is-active' : 'is-not']">
        <p class="slogan" style="color: #cfc09f">请向我推送以下行业/赛道的研究更新和活动提醒：</p>
        <div class="checkbox-content">
          <div class="checkbox-item">
            <div :class="['item', activeTag == item.ChartPermissionId ? 'active' : '']" v-for="item in chooseList" :key="item.ChartPermissionId" @click="tagHandel(item)">
              {{ item.PermissionName }}
            </div>
          </div>
          <template v-for="item in chooseList" :key="item.ChartPermissionId">
            <div v-if="activeTag == item.ChartPermissionId" class="check-ul">
              <el-checkbox v-model="item.checkAll" :indeterminate="item.isIndeterminate" @change="handleCheckAllChange(item)">{{ item.AllTracks }}</el-checkbox>
              <div class="check-li">
                <el-checkbox-group v-model="item.CheckList" @change="handleCheckedCitiesChange(item)">
                  <el-checkbox v-for="key in item.List" :key="key.IndustrialManagementId" :label="key.IndustrialManagementId">{{ key.IndustryName }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </template>
          <div class="distinguish">
            <p style="color: #fff">以上赛道</p>
            <el-checkbox @change="isSelectedClick = true" v-model="objective" label="Option 1" size="large">请向我推送【客观类】内容</el-checkbox>
            <p class="check-explain">（线上/线下调研及调研纪要、产业跟踪、季度跟踪）</p>
            <el-checkbox @change="isSelectedClick = true" v-model="subjectivity" label="Option 2" size="large">请向我推送【主观类】内容</el-checkbox>
            <p class="check-explain">（行业深度报告、路演精华、财报点评、分析师沙龙、产业深度路演）</p>
          </div>
        </div>
      </div>
      <div :class="['no-push', isSelectedClick ? 'is-not' : 'is-active']">
        <el-checkbox v-model="isSelected" @change="statusHandel"> 我不希望接收最新报告和活动更新的推送</el-checkbox>
      </div>
      <div class="confirm-box">
        <div class="confirm" @click="chooseSubmit">保存</div>
      </div>
    </template>
    <template v-else>
      <p class="inform" v-if="userInfo.HasPermission == 2">当前无行业权限，可前往【查研观向】小程序申请开通试用权限</p>
      <p class="inform" v-else-if="userInfo.HasPermission == 3">请先前往【查研观向】小程序绑定您的联系方式并申请开通试用权限</p>
      <div class="bottom-btn">
        去小程序
        <wx-open-launch-weapp id="launch-btn" class="wx-app" username="gh_a9d3744e1072" path="pages/index/index">
          <div v-is="'script'" type="text/wxtag-template">
            <div class="btn">&nbsp;</div>
          </div>
        </wx-open-launch-weapp>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.container-tag {
  padding: 30px 25px 150px;
  background: url("@/assets/img/bg_icon.png") no-repeat;
  background-size: 100% 100%;
  .top-content {
    width: 100%;
    height: 438px;
    background: url("@/assets/img/tag_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 68px 25px;
    box-sizing: border-box;
  }
  .personal-details {
    display: flex;
    .head-portrait {
      width: 126px;
      height: 126px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .details-item {
      margin-left: 30px;
      font-size: 28px;
      color: #fff;
      .name {
        font-size: 34px;
        font-weight: 500;
        color: #fff;
      }
      .phone {
        padding: 10px 0 5px;
      }
    }
  }
  .authority {
    width: 105%;
    overflow: hidden;
    padding-top: 10px;
    .item {
      width: 148px;
      height: 50px;
      font-size: 24px;
      border-radius: 4px;
      background-color: #403f3e;
      display: inline-block;
      margin: 20px 20px 0 0;
      text-align: center;
      line-height: 48px;
      border: 1px solid #e5cfb1;
      font-weight: 400;
      color: #e5cfb1;
    }
  }
  .no-info {
    line-height: 100px;
    color: #333333;
    font-size: 34px;
  }
  .inform {
    color: #666666;
    font-size: 28px;
    text-align: center;
    width: 80%;
    margin: 200px auto;
  }
  .select-content {
    padding: 20px;
    background-color: #2b2a2a;
    border-radius: 16px;
    margin-top: 10px;
    .checkbox-content {
      width: 100%;
      overflow: hidden;
      .slogan {
        font-size: 28px;
        color: #cfc09f;
        font-weight: 400;
      }
      .checkbox-item {
        width: 105%;
        padding-bottom: 25px;
        .item {
          width: 124px;
          height: 50px;
          font-size: 24px;
          border-radius: 4px;
          display: inline-block;
          margin: 20px 35px 0 0;
          text-align: center;
          line-height: 48px;
          font-weight: 400;
          color: #666666;
          background-color: #fff;
        }
        .active {
          background: #e2c586;
          color: #ffffff;
        }
      }
    }
    .check-ul {
      padding: 10px;
    }
    .check-li {
      margin-top: 20px;
      height: 520px;
      overflow: hidden;
      overflow-y: auto;
      .el-checkbox {
        width: 48%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    }
    .distinguish {
      border-top: 1px dashed #dadfe5;
      padding: 40px 10px;
      .check-explain {
        font-size: 24px;
        color: #fff;
        text-indent: 1em;
      }
    }
  }
  // .is-active {
  //   // background-color: #e9effe;
  //   // border: 1px dashed #3385ff !important;
  // }
  .confirm-box {
    position: fixed;
    bottom: 30px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: calc(30px + constant(safe-area-inset-bottom));
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
    z-index: 9;
    .confirm {
      width: 368px;
      height: 80px;
      background: #e0bc7f;
      font-size: 34px;
      color: #fff;
      margin: 0 auto;
      text-align: center;
      line-height: 80px;
      border-radius: 8px;
    }
  }

  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  :deep(.el-checkbox__label) {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-checkbox {
    color: #fff;
  }
  :deep(.el-checkbox__inner:hover) {
    border-color: #e2c586;
    font-size: 28px;
    font-weight: 400;
    font-family: PingFang SC-Regular, PingFang SC;
  }
  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #e2c586;
  }
  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background-color: #e2c586;
    border-color: #e2c586;
  }
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #e2c586;
    border-color: #e2c586;
  }
  .no-push {
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #aba8a0;
    width: 100%;
    height: 99px;
    background: linear-gradient(269deg, #403f3e 0%, #242424 100%);
    border-radius: 16px;
    margin: 30px 0 40px;
    text-indent: 0.5em;
    padding-left: 30px;
    :deep(.el-checkbox__label) {
      color: #aba8a0;
    }
  }
  .is-not {
    // background-color: #f9f9f9;
    color: #aba8a0;
    .slogan {
      color: #aba8a0 !important;
    }
    .item {
      background-color: #aba8a0 !important;
      color: #666666 !important;
    }
    .el-checkbox {
      color: #aba8a0 !important;
    }
    .check-explain {
      color: #aba8a0 !important;
    }
    :deep(.el-checkbox__inner:hover) {
      border-color: #aba8a0 !important;
      font-size: 28px;
      font-weight: 400;
      font-family: PingFang SC-Regular, PingFang SC;
    }
    :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
      color: #aba8a0 !important;
    }
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #aba8a0 !important;
      border-color: #aba8a0 !important;
    }
    :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      background-color: #aba8a0 !important;
      border-color: #aba8a0 !important;
    }
    :deep(.el-checkbox__inner) {
      background-color: #aba8a0 !important;
      border-color: #aba8a0 !important;
    }
  }
  .bottom-btn {
    position: relative; // 相对定位
    z-index: 0;
    width: 368px;
    height: 80px;
    background: #3385ff;
    line-height: 80px;
    text-align: center;
    margin: 0 auto;
    font-size: 34px;
    color: #fff;
  }
  .wx-app {
    position: absolute; // 绝对定位
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    .btn {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
