<route lang="yaml">
name: indexNewBigScreen
</route>

<script lang="ts" setup name="indexNewBigScreen">
import { ref } from "vue";
import {
  getStatisticsInfo,
  getRegisterInfo,
  getDaTradeInfo,
  getQualityInfo,
  getFinanceInfo,
  getRegisterUrl,
} from "@/api/modules/dataAssetIndex";
import { getImageContent } from "@/api/modules/queryService";
import { ElMessage } from "element-plus";
import { changeNum } from "@/utils/common";
import useUserStore from "@/store/modules/user";
import Moment from "moment";
import platformIndexNewBigScreen from "./platformIndexNewBigScreen.vue";
import { getDownFileSignByUrl, obsDownloadRequest, parseAndDecodeUrl } from "@/api/modules/obsService";
//  import platformIndex from "./data_asset/platformIndex.vue";

const router = useRouter();

const userStore = useUserStore();
const userData = JSON.parse(userStore.userData);

const { proxy } = getCurrentInstance() as any;

/** 资产登记数 */
const registerNum = ref(0);
const registerNumUrl = new URL(
  "@/assets/images/registerNumNew.png",
  import.meta.url
).href;

/** 质量评估数 */
const qualityAssessNum = ref(0);
const qualityAssessNumUrl = new URL(
  "@/assets/images/qualityAssessNumNew.png",
  import.meta.url
).href;

/** 价值评估数 */
const costAssessNum = ref(0);
const costAssessNumUrl = new URL(
  "@/assets/images/costAssessNew.png",
  import.meta.url
).href;

/** 证书url */
const docUrl: any = ref([]);
const docData: any = ref([]);
const docUrlList: any = ref([]);

const cardList = ref([
  {
    name: "assessmentMoney",
    value: 0,
    label: "资产估值",
    unit: "万元",
  },
  {
    name: "tableNum",
    value: 0,
    label: "表数量",
    unit: "",
  },
  {
    name: "fieldNum",
    value: 0,
    label: "字段数量",
    unit: "",
  },
  {
    name: "intableNum",
    value: 0,
    label: "入表资产数",
    unit: "",
  },
  {
    name: "noIntableNum",
    value: 0,
    label: "未入表资产数",
    unit: "",
  },
  {
    name: "lastIntableTime",
    value: "--",
    label: "最近入表时间",
    unit: "",
  },
  {
    name: "dataCategoryNum",
    value: 0,
    label: "数据分类",
    unit: "",
  },
  {
    name: "dataGradeNum",
    value: 0,
    label: "数据分级",
    unit: "",
  },
]);

const checkImage = () => {
  let a: any = document.querySelector(".el-image-viewer__actions__inner");
  let lenBtn = a.getElementsByClassName("el-icon");
  if (lenBtn.length == 6) {
    return;
  }
  let ff = document.createElement("i");
  ff.classList.add("el-icon");
  ff.addEventListener("click", () => {
    let imgsrc = (<HTMLImageElement>(
      document.querySelector(".el-image-viewer__img")
    ))?.src;
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function () {
      let canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      let context: any = canvas.getContext("2d");
      context.drawImage(image, 0, 0, image.width, image.height);
      let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
      let a = document.createElement("a"); // 生成一个a元素
      let event = new MouseEvent("click"); // 创建一个单击事件
      a.download = "资产登记证书"; // 设置图片名称
      a.href = url; // 将生成的URL设置为a.href属性
      a.dispatchEvent(event); // 触发a的单击事件
    };
    image.src = imgsrc;
  });
  ff.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>`;
  a.appendChild(ff);
};

const assetTableInfo = ref({
  id: "asset-table",
  multiple: false,
  showHeader: false,
  border: false,
  minPanelHeight: '60px',
  minHeight: '60px',
  fields: [
    // { label: "序号", type: "index", width: 56, align: "center" },
    {
      label: "资产名称",
      field: "daName",
      width: 200,
      // type: "text_btn",
      // columClass: 'text_btn',
      // value: "detail",
    },
    {
      label: "登记日期",
      field: "registerTime",
      width: 120,
      getName: (scope) => {
        if (!scope.row.registerTime) {
          return "--";
        }
        return Moment(scope.row.registerTime).format("YYYY-MM-DD");
      },
    },
    { label: "交易所", field: "exchangeName", width: 250 },
    {
      label: "资产登记",
      field: "register",
      width: 100,
      getSvg: (scope) => {
        return scope.row.register == "已登记" ? "icon-success" : "icon-audit";
      },
    },
    {
      label: "质量评价",
      field: "quality",
      width: 100,
      getSvg: (scope) => {
        return scope.row.quality == "已评价" ? "icon-success" : "icon-audit";
      },
    },
    {
      label: "价值评估",
      field: "cost",
      width: 100,
      getSvg: (scope) => {
        return scope.row.cost == "已评估" ? "icon-success" : "icon-audit";
      },
    },
    {
      label: "入表",
      field: "intable",
      width: 100,
      getSvg: (scope) => {
        return scope.row.intable == "已入表" ? "icon-success" : "icon-audit";
      },
    },
    {
      label: "交易",
      field: "trade",
      width: 100,
      getSvg: (scope) => {
        return scope.row.trade == "已交易" ? "icon-success" : "icon-audit";
      },
    },
    {
      label: "融资",
      field: "financing",
      minWidth: 100,
      getSvg: (scope) => {
        return scope.row.financing == "已融资" ? "icon-success" : "icon-audit";
      },
    },
  ],
  data: [],
  showPage: false,
  actionInfo: {
    show: false,
  },
  loading1: false,
});

const getAssetTableData = () => {
  assetTableInfo.value.loading1 = true;
  getRegisterInfo({
    pageSize: 200,
    pageIndex: 1,
    startTime: startTime.value || '',
    endTime: endTime.value || '',
  }).then((res: any) => {
    assetTableInfo.value.loading1 = false;
    if (res.code == proxy.$passCode) {
      let data = res.data || {};
      assetTableInfo.value.data = data.records || [];
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  let row = scope.row;
  if (type == "detail") {
    router.push({
      name: "registerInfoDetail",
      query: {
        guid: row.registerGuid,
        type: "asset",
        daTenantGuid: userData.tenantGuid,
      },
    });
  }
};

const qualityPieData: any = ref([]);

const tradeTableInfo = ref({
  id: "trade-table",
  multiple: false,
  showHeader: false,
  border: false,
  heightlightRow: false,
  minPanelHeight: '60px',
  minHeight: '60px',
  fields: [
    // { label: "序号", type: "index", width: 56, align: "center" },
    {
      label: "资产名称",
      field: "daName",
      width: 140,
      // type: "text_btn",
      // columClass: 'text_btn',
      // value: "detail",
    },
    { label: "交易日期", field: "tradeTime", width: 120 },
    { label: "交易对象", field: "tradeObject", minWidth: 250 },
  ],
  data: [],
  showPage: false,
  actionInfo: {
    show: false,
  },
  loading1: false,
});

const getTradeTableData = () => {
  tradeTableInfo.value.loading1 = true;
  getDaTradeInfo({
    pageSize: 200,
    pageIndex: 1,
    startTime: startTime.value || '',
    endTime: endTime.value || '',

  }).then((res: any) => {
    tradeTableInfo.value.loading1 = false;
    if (res.code == proxy.$passCode) {
      let data = res.data || {};
      tradeTableInfo.value.data = data.records || [];
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const tradeTableBtnClick = (scope, btn) => {
  const type = btn.value;
  let row = scope.row;
  if (type == "detail") {
    router.push({
      name: "registerInfoDetail",
      query: {
        guid: row.registerGuid,
        type: "asset",
        daTenantGuid: userData.tenantGuid,
      },
    });
  }
};

const financingTableInfo = ref({
  id: "financing-table",
  multiple: false,
  showHeader: false,
  border: false,
  heightlightRow: false,
  minPanelHeight: '60px',
  minHeight: '60px',
  fields: [
    {
      label: "资产名称",
      field: "daName",
      width: 140,
      // type: "text_btn",
      // columClass: 'text_btn',
      // value: "detail",
    },
    // { label: "授信日期", field: "creditGrantingTime", width: 110 },
    {
      label: "授信金额(万元)",
      field: "creditGrantingMoney",
      width: 140,
      align: "right",
      getName: (scope) => {
        return changeNum(scope.row.creditGrantingMoney ?? 0, 2, true) + '万元';
      },
    },
    {
      label: "授信期限(月)",
      field: "creditGrantingTerm",
      width: 90,
      align: "right",
      getName: (scope) => {
        return changeNum(scope.row.creditGrantingTerm ?? 0) + '月';
      },
    },
    { label: "授信主体", field: "creditGrantingGenerality", minWidth: 100 },
  ],
  data: [],
  showPage: false,
  actionInfo: {
    show: false,
  },
  loading1: false,
});

const getFinancingTableData = () => {
  financingTableInfo.value.loading1 = true;
  getFinanceInfo({
    pageSize: 200,
    pageIndex: 1,
    startTime: startTime.value || '',
    endTime: endTime.value || '',
  }).then((res: any) => {
    financingTableInfo.value.loading1 = false;
    if (res.code == proxy.$passCode) {
      let data = res.data || {};
      financingTableInfo.value.data = data.records || [];
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const financingTableBtnClick = (scope, btn) => {
  const type = btn.value;
  let row = scope.row;
  if (type == "detail") {
    router.push({
      name: "registerInfoDetail",
      query: {
        guid: row.registerGuid,
        type: "asset",
        daTenantGuid: userData.tenantGuid,
      },
    });
  }
};

/** 统计数量加载状态。 */
const statisticsInfoLoading = ref(false);

/** 饼图数据质量加载状态。 */
const qualityPieLoading = ref(false);

/** 证书图片加载 */
const docUrlLoading = ref(false);

const assetTableRef = ref();

const rolltimer = ref();

onBeforeMount(() => {
  if (userData.tenantType != 1) {
    // 获取数据表格
    getAssetTableData();

    // 获取统计信息
    fetchStatisticsInfo();

    // 获取质量饼图数据
    fetchQualityInfo();

    // 获取交易和融资数据
    getTradeTableData();
    getFinancingTableData();

    // 获取注册文档数据
    fetchRegisterUrl();
  }
});
// 获取统计信息
function fetchStatisticsInfo() {
  statisticsInfoLoading.value = true;
  getStatisticsInfo({
    startTime: startTime.value || '',
    endTime: endTime.value || '',
  }).then((res: any) => {
    statisticsInfoLoading.value = false;
    if (res.code == proxy.$passCode) {
      const data = res.data || {};
      registerNum.value = changeNum(data.registerNum ?? 0);
      costAssessNum.value = changeNum(data.costAssessNum ?? 0);
      qualityAssessNum.value = changeNum(data.qualityAssessNum ?? 0);

      cardList.value.forEach((card) => {
        if (card.name === 'assessmentMoney') {
          card.value = changeNum((data[card.name] ?? 0) / 10000, 2, true);
        } else if (card.name === 'lastIntableTime') {
          card.value = data[card.name] ?? '--';
        } else if (card.name === 'dataScale') {
          card.value = changeNum(data[card.name] ?? 0, 2, true);
        } else {
          card.value = changeNum(data[card.name] ?? 0);
        }
      });
    } else {
      ElMessage.error(res.msg);
    }
  });
}

// 获取质量信息
function fetchQualityInfo() {
  qualityPieLoading.value = true;
  getQualityInfo({
    startTime: startTime.value || '',
    endTime: endTime.value || '',
  }).then((res: any) => {
    qualityPieLoading.value = false;
    if (res.code == proxy.$passCode) {
      const qualityData = res.data || [];
      const sum = qualityData.reduce((acc, item) => acc + item.value, 0);
      qualityPieData.value = qualityData.map((item) => ({
        ...item,
        percent: changeNum((item.value / sum) * 100, 2, true) + '%',
      }));
    } else {
      ElMessage.error(res.msg);
    }
  });
}

// 获取注册文档 URL
// function fetchRegisterUrl() {
//   docUrlLoading.value = true;
//   getRegisterUrl({
//     startTime: startTime.value || '',
//     endTime: endTime.value || '',
//   }).then((res: any) => {
//     docUrlLoading.value = false;
//     if (res.code == proxy.$passCode) {
//       const data = res.data || [];
//       if (data.length) {
//         const promises = data.map(async (d) => {
//           d.documentTypeDesc = d.documentType === 1 ? 'A证' : d.documentType === 2 ? 'B证' : 'C证';

//           // const refSignInfo: any = await getDownFileSignByUrl(parseAndDecodeUrl(d.documentFile[0]).fileName);
//           // if (!refSignInfo?.data) {
//           //   refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
//           //   return;
//           // }
//           // const res: any = await obsDownloadRequest(refSignInfo?.data);
//           return getImageContent(d.documentFile[0]).then((res: any) => (res ? URL.createObjectURL(res) : null));
//         });

//         Promise.all(promises).then((urls: any[]) => {
//           docUrl.value = urls;
//           docUrlList.value = urls.map((url) => [{ url }]);
//           nextTick(() => {
//             processImgDesc();
//           });
//         });
//       } else {
//         docUrl.value = [];
//         docUrlList.value = [];
//       }
//     } else {
//       ElMessage.error(res.msg);
//     }
//   });
// }

// 获取注册文档 URL
function fetchRegisterUrl() {
  docUrlLoading.value = true;
  getRegisterUrl({
    startTime: startTime.value || '',
    endTime: endTime.value || '',
  }).then((res: any) => {
    docUrlLoading.value = false;
    if (res.code == proxy.$passCode) {
      let data = docData.value = res.data || [];
      if (data.length) {
        console.log(data, 'data');
        const promises = data.map(async (d) => {
          d.documentTypeDesc = d.documentType === 1 ? 'A证' : d.documentType === 2 ? 'B证' : 'C证';

          // 使用注释替换的代码逻辑
          const refSignInfo: any = await getDownFileSignByUrl(parseAndDecodeUrl(d.documentFile[0]).fileName);
          if (!refSignInfo?.data) {
            refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
            return null;
          }
          const res: any = await obsDownloadRequest(refSignInfo?.data);
          console.log(res, 'res');
          return res ? URL.createObjectURL(res) : null;
        });

        Promise.all(promises).then((urls: any[]) => {
          docUrl.value = urls;
          docUrlList.value = urls.map((url) => [{ url }]);
          nextTick(() => {
            processImgDesc();
          });
        });
      } else {
        docUrl.value = [];
        docUrlList.value = [];
      }
    } else {
      ElMessage.error(res.msg);
    }
  });
}


const processImgDesc = () => {
  let domImg = document.getElementById('register-img');
  if (!domImg) {
    return;
  }
  let domImgs = domImg.getElementsByClassName('top-img');
  if (!domImgs.length) {
    return;
  }
  let height = domImgs[0].clientHeight;
  let rowLen = Math.floor((height - 58) / 21);
  let domDesc = domImg.getElementsByClassName('desc');
  console.log(rowLen);
  Array.prototype.forEach.call(domDesc, function (element) {
    element.style.WebkitLineClamp = rowLen;
    if (!rowLen) {
      element.style.display = 'none';
    } else {
      element.style.display = '';
    }
  });
}

onMounted(() => {
  nextTick(() => {
    autoRoll();
  })
  window.addEventListener("resize", () => {
    processImgDesc();
  });
})

const autoRoll = (stop = false) => {
  if (!assetTableRef.value?.tableRef) {
    return;
  }
  if (stop) {
    clearInterval(rolltimer.value)
    return
  }
  // 拿到表格挂载后的真实DOM
  const table = assetTableRef.value.tableRef;
  // 拿到表格中承载数据的div元素
  const divData = table?.$el.querySelector('.el-table__body');
  if (!divData) {
    return;
  }
  // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
  rolltimer.value = setInterval(() => {
    // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    let domScroll = divData.parentElement.parentElement;
    if (domScroll.clientHeight + domScroll.scrollTop >= domScroll.scrollHeight) {
      // 重置table距离顶部距离
      table?.setScrollTop(0)
    } else {
      // 元素自增距离顶部像素
      table?.setScrollTop(domScroll.scrollTop + 36)
    }
  }, 4000)
}
/** 快捷筛选项 */
const filterDate = ref('today'); //默认选中今天
/** 日期时间范围值 */
const daterange = ref([Moment(new Date()).format("YYYY-MM-DD 00:00:00"), Moment(new Date()).format("YYYY-MM-DD HH:mm:ss")]);
/** 日期面板的默认显示时分秒 */
const defaultTime1 = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]; // '12:00:00'
const filterDateClickTimestamp = ref(Date.now()); // 记录点击时间
const handleFilterClick = (type) => {
  filterDate.value = type; // 更新按钮状态
  filterDateClickTimestamp.value = Date.now(); // 更新时间标记
};
watch(
  () => filterDateClickTimestamp.value,
  () => {
    let date = new Date();
    if (filterDate.value === 'today') {
      daterange.value = [
        Moment(new Date()).format("YYYY-MM-DD 00:00:00"),
        Moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      ];
    } else if (filterDate.value === 'week') {
      const dayOfWeek = date.getDay();
      const diff = date.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
      const startOfWeek = new Date(date.setDate(diff));
      startOfWeek.setHours(0, 0, 0, 0);
      daterange.value = [
        Moment(startOfWeek).format("YYYY-MM-DD 00:00:00"),
        Moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      ];
    } else if (filterDate.value === 'month') {
      const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
      firstDayOfMonth.setHours(0, 0, 0, 0);
      daterange.value = [
        Moment(firstDayOfMonth).format("YYYY-MM-DD 00:00:00"),
        Moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      ];
    }
    handleChangeTime(daterange.value);
  },
);
const handleDatePickerChange = (val) => {
  // 更新开始时间和结束时间
  startTime.value = val[0];
  endTime.value = val[1];

  // 获取数据表格
  getAssetTableData();

  // 获取统计信息
  fetchStatisticsInfo();

  // 获取质量饼图数据
  fetchQualityInfo();

  // 获取交易和融资数据
  getTradeTableData();
  getFinancingTableData();

  // 获取注册文档数据
  fetchRegisterUrl();
  // 取消选择按钮的 is-active 状态
  filterDate.value = '';
};

const startTime = ref()
const endTime = ref()
const handleChangeTime = (val) => {
  console.log(val)
  startTime.value = val[0]
  endTime.value = val[1]
  // 获取数据表格
  getAssetTableData();

  // 获取统计信息
  fetchStatisticsInfo();

  // 获取质量饼图数据
  fetchQualityInfo();

  // 获取交易和融资数据
  getTradeTableData();
  getFinancingTableData();

  // 获取注册文档数据
  fetchRegisterUrl();

}

</script>

<template>
  <div style="width: 100%;height: 100%">
    <div class="right-filter-main" v-if="userData.tenantType != 1">
      <div class="right-filter">
        <div class="filter-btns">
          <div class="btn" :class="{ 'is-active': filterDate == 'today' }" @click="handleFilterClick('today')">今日</div>
          <div class="btn" :class="{ 'is-active': filterDate == 'week' }" style="border-left: none;"
            @click="handleFilterClick('week')">本周</div>
          <div class="btn" :class="{ 'is-active': filterDate == 'month' }" style="border-left: none;"
            @click="handleFilterClick('month')">本月</div>
        </div>
        <el-date-picker v-model="daterange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
          :clearable="false" end-placeholder="截止时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
          ref="datePickerRef" @change="handleDatePickerChange" />
      </div>
    </div>
    <div v-if="userData.tenantType != 1" class="main-content">
      <div class="one-row">
        <div class="row-per">
          <div class="header">
            <div class="left-pd"></div>
            <div class="header-title">数据服务资产情况</div>
          </div>
          <div class="num-content">
            <div class="icon-sum num-sum" v-if="!statisticsInfoLoading" v-for="item in cardList">
              <div class="tags_item">
                <div class="tag_text">{{ item.label }}</div>
                <div class="tag_num">
                  <span>{{ item.value }}</span>
                  <span class="unit">{{ item.unit }}</span>
                </div>
              </div>
            </div>
            <el-skeleton v-else :rows="5" animated />
          </div>
        </div>
        <div class="row-per">
          <div class="header">
            <div class="left-pd"></div>
            <div class="header-title">数据资产登记情况</div>
          </div>
          <div class="dam-content">
            <template v-if="!statisticsInfoLoading">
              <div class="img_tags_card">
                <img :src="registerNumUrl" alt="" />
                <div class="tag_text" style="color: #3F6ED0;">资产登记数</div>
                <div class="tag_num"
                  style="-webkit-text-fill-color: transparent;background: linear-gradient(180deg, #76A6F1, #2C5AC5);-webkit-background-clip: text;background-clip: text">
                  {{ registerNum }}</div>
              </div>
              <div class="img_tags_card">
                <img :src="qualityAssessNumUrl" alt="" />
                <div class="tag_text" style="color: #008E3F">质量评估数</div>
                <div class="tag_num"
                  style="-webkit-text-fill-color: transparent;background: linear-gradient(180deg, #72D26E, #3C8F28);-webkit-background-clip: text;background-clip: text">
                  {{ qualityAssessNum }}</div>
              </div>
              <div class="img_tags_card">
                <img :src="costAssessNumUrl" alt="" />
                <div class="tag_text" style="color: #E17A3A;">价值评估数</div>
                <div class="tag_num"
                  style="-webkit-text-fill-color: transparent;background: linear-gradient(180deg, #F29A70, #C88938);-webkit-background-clip: text;background-clip: text">
                  {{ costAssessNum }}</div>
              </div>
            </template>
            <el-skeleton v-else :rows="5" animated />
          </div>
        </div>
        <div class="row-per">
          <div class="header">
            <div class="left-pd"></div>
            <div class="header-title">数据资产质量情况</div>
          </div>
          <div class="dam-content">
            <template v-if="!qualityPieLoading">
              <div class="score_img_tag_card">
                <div class="img-bg">
                  <img src="@/assets/images/qualityAssessScore90.png" alt="" />
                  <div class="tag_text" style="color: #00A29E;">{{ qualityPieData?.[0]?.name || '90分以上' }}</div>
                  <div class="tag_num"
                    style="-webkit-text-fill-color: transparent;background: linear-gradient(180deg, #16A199, #168D8B);-webkit-background-clip: text;background-clip: text">
                    {{ qualityPieData?.[0]?.percent || '0%' }}</div>
                </div>
              </div>
              <div class="score_img_tag_card">
                <div class="img-bg">
                  <img src="@/assets/images/qualityAssessScore80.png" alt="" />
                  <div class="tag_text" style="color:#F1A730">{{ qualityPieData?.[1]?.name || '80～90分' }}</div>
                  <div class="tag_num"
                    style="-webkit-text-fill-color: transparent;background: linear-gradient(180deg, #FFC178, #EC981F);-webkit-background-clip: text;background-clip: text">
                    {{ qualityPieData?.[1]?.percent || '0%' }}</div>
                </div>
              </div>
              <div class="score_img_tag_card">
                <div class="img-bg">
                  <img src="@/assets/images/qualityAssessScore70.png" alt="" />
                  <div class="tag_text" style="color:#E21F1F">{{ qualityPieData?.[2]?.name || '80分以下' }}</div>
                  <div class="tag_num"
                    style="-webkit-text-fill-color: transparent;background: linear-gradient(180deg, #F65959, #C01E0B);-webkit-background-clip: text;background-clip: text">
                    {{ qualityPieData?.[2]?.percent || '0%' }}</div>
                </div>
              </div>
            </template>
            <el-skeleton v-else :rows="5" animated />
          </div>
        </div>
      </div>
      <div class="one-row">
        <div class="row-per">
          <div class="header">
            <div class="left-pd"></div>
            <div class="header-title">资产交易情况</div>
          </div>
          <div style="height: calc(100% - 40px);">
            <Table class="drak-table" v-if="!tradeTableInfo.loading1" :tableInfo="tradeTableInfo"
              @tableBtnClick="tradeTableBtnClick" />
            <el-skeleton v-else :rows="5" animated />
          </div>
        </div>
        <div class="row-per">
          <div class="header">
            <div class="left-pd"></div>
            <div class="header-title">资产登记证书情况</div>
          </div>
          <div style="height: calc(100% - 40px);">
            <template v-if="!docUrlLoading">
              <el-carousel id="register-img" v-show="docUrlList.length" :interval="2000" :autoplay="true">
                <el-carousel-item class="img-card" v-for="(imgData, i) in docUrlList" :key="i" @click="checkImage">
                  <template v-for="(img, index) in imgData" :key="index">
                    <el-image class="top-img" :src="img.url" :zoom-rate="1.2" :max-scale="10" :min-scale="0.2"
                      :preview-src-list="docUrl" :initial-index="i" :preview-teleported="true" />
                    <div class="right-content">
                      <div class="title">{{ docData[i]?.damName || '--' }}</div>
                      <div class="desc">{{ docData[i]?.applicationScenarios || '--' }}</div>
                      <div class="desc1">{{ docData[i]?.issuingEntity || '--' }}</div>
                      <!-- <el-tag class="dam-tag">{{ docData[i].documentTypeDesc }}</el-tag> -->
                    </div>
                  </template>
                </el-carousel-item>
              </el-carousel>
              <div class="carousel-placeholder" v-show="!docUrlList.length">暂无数据</div>
            </template>
            <el-skeleton v-show="docUrlLoading" :rows="5" animated />
          </div>
        </div>
        <div class="row-per">
          <div class="header">
            <div class="left-pd"></div>
            <div class="header-title">资产授信情况</div>
          </div>
          <div style="height: calc(100% - 40px);">
            <Table class="drak-table" v-if="!financingTableInfo.loading1" :tableInfo="financingTableInfo"
              @tableBtnClick="financingTableBtnClick" />
            <el-skeleton v-else :rows="5" animated />
          </div>
        </div>
      </div>
      <div class="one-row">
        <div class="row-sum">
          <div class="header">
            <div class="left-pd"></div>
            <div class="header-title">数据服务资产情况</div>
          </div>
          <div style="height: calc(100% - 40px);">
            <Table class="drak-table" ref="assetTableRef" v-show="!assetTableInfo.loading1" :tableInfo="assetTableInfo"
              @tableBtnClick="tableBtnClick" />
            <el-skeleton v-show="assetTableInfo.loading1" :rows="6" animated />
          </div>
        </div>
      </div>
    </div>
    <!-- <platformIndex v-else-if="userData.tenantType != 1" /> -->
    <platformIndexNewBigScreen v-else-if="userData.tenantType == 1" />
    <div v-else class="main-placeholder">
      <img style="width: 468px; height: 96px;" src="../../public/swzl_logo.gif" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.right-filter-main {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 11px 0 11px;

  .right-filter {
    display: flex;
    width: 50%;
    align-items: center;

    :deep(.el-date-editor--datetimerange) {
      width: 120px;
    }

    .filter-btns {
      display: flex;
      margin: 0px 8px;

      .btn {
        height: 28px;
        width: 52px;
        border: 1px solid #4FA1A4;
        color: #4FA1A4;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &.is-active {
          background: #4FA1A4;
          color: #fff;
        }
      }
    }
  }
}

.main-placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-content {
  background-image: linear-gradient(180deg, #F8FAFA 0%, #F4F8F9 100%);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-evenly;
}

.one-row {
  height: 32%;
  display: inline-flex;
  width: 100%;
  justify-content: space-evenly;

  .row-sum {
    width: 98%;
  }

  .row-per {
    width: 32%;
  }

  .icon-sum {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;

    &.num-sum {
      width: 33.3%;
      padding-left: 12px;
      display: flex;
      align-items: center;
    }

    .tags_item {
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;

      .tag_text {
        font-family: TRENDS;
        font-size: 14px;
        color: #292929;
        font-weight: 400;
        margin: 0;
        line-height: 21px;
      }

      .tag_num {
        font-family: DINAlternate-Bold;
        font-weight: 700;
        font-size: 20px;
        color: #2CAEB3;

        .unit {
          font-size: 16px;
        }
      }
    }
  }

  .dam-content {
    display: flex;
    height: calc(100% - 40px);
    width: 100%;

    // 资产登记张数
    .img_tags_card {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      justify-content: center;
      white-space: nowrap;

      img {
        width: 88px;
        height: 88px;
      }

      .tag_text {
        font-family: TRENDS;
        font-size: 14px;
        font-weight: 400;
      }

      .tag_num {
        font-family: DINAlternate-Bold;
        font-size: 36px;
        line-height: 46px;
        color: #fff;
        font-weight: 700;
      }
    }

    // 分数区间
    .score_img_tag_card {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      justify-content: center;

      .img-bg {
        position: relative;
        max-width: 132px;
        max-height: 144px;
        display: flex;
        justify-content: center;
        white-space: nowrap;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .tag_text {
        font-family: PingFangSC-Medium;
        position: absolute;
        font-size: 16px;
        font-weight: 500;
        top: 29px;
      }

      .tag_num {
        position: absolute;
        font-family: DINAlternate-Bold;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 47px;
        font-weight: 700;
        bottom: 33px;
      }
    }
  }
}

.header {
  height: 40px;
  border-bottom: 1px solid #e5e5e566;
  display: flex;
  align-items: center;

  .left-pd {
    width: 12px;
    height: 100%;
    opacity: 0.5;
    background-image: linear-gradient(90deg, #ACD9D9 0%, rgba(255, 255, 255, 0.00) 100%);
  }

  .header-title {
    width: calc(100% - 12px);
    background-image: linear-gradient(90deg, rgba(142, 210, 211, 0.5) 0%, rgba(213, 254, 254, 0.17 * 0.5) 95%, rgba(255, 255, 255, 0.00 * 0.5) 100%);
    font-family: TRENDS;
    font-size: 18px;
    color: #292929;
    height: 100%;
    display: flex;
    align-items: center;
    line-height: 21px;
    font-weight: 400;
    padding-left: 12px;
  }
}

.num-content {
  height: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
}

:deep(.el-carousel) {
  height: 100%;

  .el-carousel__arrow--left {
    left: 0px;
  }

  .el-carousel__arrow--right {
    right: 0px;
  }

  .el-carousel__arrow {
    width: 20px;
    height: 48px;
    opacity: 0.5;
    background: #000000;
    border-radius: 4px 0px 0px 4px;
  }

  .el-carousel__indicators--horizontal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;

    .el-carousel__indicator--horizontal {
      padding: 8px 4px;
      display: flex;

      &.is-active {
        .el-carousel__button {
          background: #4FA1A4;
          border-radius: 2px;
        }
      }

      .el-carousel__button {
        width: 8px;
        height: 4px;
        background: #D6E8E9;
        border-radius: 2px;
      }
    }
  }

  .el-carousel__container {
    height: 100%;

    .img-card {
      width: 100%;
      display: flex;
      padding: 20px 12px;
      align-items: center;

      .top-img {
        width: 33%;
        margin-right: 15px;
        cursor: pointer;
        max-height: 155px;
        height: 100%;

        img {
          background-size: 100% 100%;
          background-position: center right;
          background-repeat: no-repeat;
        }
      }

      .right-content {
        width: calc(77% - 15px);
        white-space: nowrap;
        max-height: 155px;
        height: 100%;

        .title {
          font-family: PingFangSC-Semibold;
          font-size: 18px;
          color: #212121;
          font-weight: 400;
          margin-bottom: 4px;
        }

        .desc {
          opacity: 0.8;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #292929;
          letter-spacing: 0;
          line-height: 21px;
          font-weight: 400;
          max-height: calc(100% - 58px);
          overflow: hidden;
          white-space: pre-wrap;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .desc1 {
          opacity: 0.8;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #292929;
          letter-spacing: 0;
          line-height: 21px;
          font-weight: 400;
          margin-top: 8px;
        }

        // .dam-tag {
        //   border: none;
        //   background: #006466;
        //   border-radius: 2px;
        //   font-family: PingFangSC-Regular;
        //   font-size: 12px;
        //   color: #FFFFFF;
        //   letter-spacing: 0;
        //   text-align: center;
        //   line-height: 18px;
        //   font-weight: 400;
        //   padding: 1px 8px;
        //   margin-top: 8px;
        // }
      }
    }
  }
}

:deep(.el-skeleton) {
  height: 100%;
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;

  //&.is-animated .el-skeleton__item {
  //  background: #ffffff1a;
  //}
}

.carousel-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #999;
  font-size: 18px;
  font-family: PingFangSC-Regular;
}
</style>