<template>
  <div>
    <el-card shadow="never">
      <div class="mb-10" v-for="(item, index) in list" :key="index">
        <div class="flex">
          <div class="title">
            <h4>{{ item.name }}:</h4>
          </div>
          <div class="flex items-center">
            <el-text class="ml-2" tag="b">
              <el-link type="primary" @click="handleJump(item.url)">{{
                item.url
              }}</el-link>
            </el-text>
            <ComponentCopy :content="item.url"></ComponentCopy>
          </div>
        </div>
        <el-text class="ml-5">{{ item.remark }} </el-text>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import ComponentCopy from "@/components/Copy/index.vue";
const { VITE_APP_ADDRESS, VITE_APP_LARGEN, VITE_APP_H5, VITE_APP_CQMZ_H5 } =
  import.meta.env;
import { useUserStoreHook } from "@/store/modules/user";
import { request } from "@/utils";

const channelAccount = useUserStoreHook()?.profile.account;
const channelId = useUserStoreHook()?.profile.id;
const h5WebTemplateValue =
  useUserStoreHook()?.profile.defaultWebTemplateId || "defaultWebTemplateId";
const h5WebTemplate = {
  CQDDK: {
    name: "用户H5登录地址",
    url: `${VITE_APP_H5}/#/${channelId}/m`,
    remark: "作用：用户H5登录"
  },
  CQMZ: {
    name: "民政H5登录地址",
    url: `${VITE_APP_CQMZ_H5}/#/pages/login/index?mechanismId=${channelId}`,
    remark: "作用：用户H5登录"
  }
};
const list = ref([
  {
    name: "员工PC后台登录地址",
    url: `${VITE_APP_ADDRESS}#/login?channel=${channelAccount}`,
    remark: "作用：员工PC后台登录"
  },
  {
    name: "员工手机端登录地址",
    url: `${VITE_APP_H5}/#/${channelId}/archives`,
    remark: "作用：员工手机端登录"
  },
  h5WebTemplate[h5WebTemplateValue]
  // {
  //   name: "用户H5登录地址",
  //   url: `${VITE_APP_H5}/#/${channelId}/m`,
  //   remark: "作用：用户H5登录"
  // }
  // {
  //   name: "民政H5登录地址",
  //   url: `${VITE_APP_H5}/#/${channelId}/m`,
  //   remark: "作用：用户H5登录"
  // }
]);
const handleJump = url => {
  window.open(url);
};
// 获取大屏数据功能范围
const getChannelLargeConfig = () => {
  return new Promise((resolve, reject) => {
    request
      .get(`/platformApi/statisticsService/mechanism/config`)
      .then(resp => {
        let response = resp?.data;
        if (response) {
          list.value = [
            ...list.value,
            {
              name: "数据大屏登录地址",
              url: `${VITE_APP_LARGEN}/login?channel=${channelAccount}`,
              remark: "作用：用于登录数据大屏使用"
            },
            {
              name: "健康互动栏地址",
              url: `${VITE_APP_LARGEN}/interaction`,
              remark: "作用：用于展示健康互动栏使用"
            }
          ];
        }
        resolve();
      });
  });
};
getChannelLargeConfig();
</script>
<style scoped>
.title {
  border-radius: 2px;
  border-left: 10px solid var(--el-color-primary);
  padding-left: 10px;
}
</style>
