<template>
  <div class="L-task-info">
    <div
      class="info-left"
      id="L-size-main"
    >
      <div
        class="content-info"
        id="L-header"
      >
        <div class="info-title">任务详情</div>
        <el-button
          type="primary"
          @click="sendBack"
          class="fanhuipiaofu"
          size="default"
          >返回</el-button
        >
        <div class="teshu-top-info">
          <div class="top-info">
            <el-row class="top-row">
              <!-- <el-col :span="8">
                任务编号：<span>{{ titleInfoObj.id }}</span>
              </el-col> -->
              <el-col :span="8">
                任务名称：<span>{{ titleInfoObj.taskName }}</span>
              </el-col>
              <el-col :span="8">
                任务状态：<span>{{ taskstatus(titleInfoObj.taskStatus) }}</span>
              </el-col>
              <el-col :span="8">
                任务期限：<span>{{ titleInfoObj.taskDeadline }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                任务下发时间：<span>{{ titleInfoObj.taskTime }}</span>
              </el-col>
              <el-col :span="16">
                核查资产类型：<span>{{ listTow.join(",") }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div
        class="info-cut-off-rule"
        id="L-tab"
      >
        <div
          class="left-tab"
          :class="index == 1 ? 'active-tab' : ''"
          @click="activeTab(1)"
        >
          资产核查信息
        </div>
        <div
          :class="index == 2 ? 'active-tab' : ''"
          @click="activeTab(2)"
        >
          单位完成情况
        </div>
      </div>
      <div class="info-bottom-box">
        <el-form
          :inline="true"
          :model="formInline"
          size="default"
          class="demo-form-inline"
          v-if="index == 1"
        >
          <el-row>
            <el-col :span="5">
              <el-form-item label="核查单位:">
                <el-input
                  v-model="formInline.dwmc"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="9">
              <el-form-item label="系统类型:">
                <el-select v-model="formInline.xtlx" placeholder="请选择">
                  <el-option v-for="dict in dict.type.zc_xtlx" :key="dict.label" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="5">
              <el-form-item label="系统名称:">
                <el-input
                  v-model="formInline.xtmc"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="审核状态:" style="width: 95%;">
                <el-select
                  v-model="formInline.status"
                  placeholder="请选择"
                 
                >
                  <el-option
                    label="待核查"
                    value="0"
                  >
                  </el-option>
                  <el-option
                    label="待审核"
                    value="1"
                  >
                  </el-option>
                  <el-option
                    label="审核通过"
                    value="3"
                  >
                  </el-option>
                  <el-option
                    label="审核不通过"
                    value="4"
                  >
                  </el-option>
                  <el-option
                    label="已关停"
                    value="5"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button
                  size="default"
                  type="primary"
                  @click="handleQuery()"
                  >查询</el-button
                >
                <el-button
                  size="default"
                  @click="resetQuery()"
                  >重置</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form
          :inline="true"
          :model="formInlineTwo"
          size="default"
          class="demo-form-inline"
          v-if="index == 2"
        >
          <el-row>
            <el-col :span="5">
              <el-form-item label="单位名称：">
                <el-input
                  v-model="formInlineTwo.dwmc"
                  placeholder="请输入"
                ></el-input>
                <!-- <el-select v-model="formInline.unit" placeholder="请选择"> -->
                <!-- <el-option
                        v-for="dict in dict.type.bms_approval_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value">
                      </el-option> -->
                <!-- </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="完成状态：" style="width: 95%;">
                <el-select
                  v-model="formInlineTwo.taskStatus"
                  placeholder="请选择"
                >
                  <el-option
                    label="进行中"
                    value="1"
                  >
                  </el-option>
                  <el-option
                    label="正常完成"
                    value="2"
                  >
                  </el-option>
                  <el-option
                    label="超期完成"
                    value="3"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button
                  size="default"
                  type="primary"
                  @click="handleQuery()"
                  >查询</el-button
                >
                <el-button
                  size="default"
                  @click="resetQuery()"
                  >重置</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <section v-if="index == 1">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              :label="item.conent"
              :name="item.lable"
              :xtmcName="item.xtmcName"
              v-for="item in chanckListTow"
            >
            </el-tab-pane>
          </el-tabs>
          <el-table
            v-loading="loading"
            :data="tableData"
            :height="tabHeader"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              type="index"
              width="70"
              label="序号"
              align="center"
            />
            <!-- <el-table-column label="资产编号" key="id" width="200px" prop="id" align="center" /> -->
            <el-table-column
              :label="xtmcName"
              prop="xtmc"
              align="center"
            />
            <!-- <el-table-column label="系统类型" key="xtlx" prop="xtlx" align="center">
              <template #default="scope" >
                <div v-if='scope.row.xtlx'>
                  <dict-tag :options="dict.type.zc_xtlx" :value="scope.row.xtlx" />
                </div>
              </template>
            </el-table-column> -->
            <el-table-column
              label="核查单位"
              prop="zcdwmc"
              align="center"
            />
            <el-table-column
              label="单位核查时间"
              prop="updateTime"
              align="center"
            />
            <el-table-column
              label="审核状态"
              key="status"
              width="120px"
              prop="status"
              class-name="table-status"
              align="center"
            >
              <template #default="scope">
                <span
                  v-if="scope.row.status == 0"
                  style="color: #e6a230"
                >
                  待核查
                </span>
                <span
                  v-if="scope.row.status == 1"
                  style="color: #e6a23c"
                >
                  待审核
                </span>
                <span
                  v-if="scope.row.status == 3"
                  style="color: #67c23a"
                >
                  审核通过
                </span>
                <span
                  v-if="scope.row.status == 4"
                  style="color: #f56c6c"
                >
                  审核不通过
                </span>
                <span
                  v-if="scope.row.status == 5"
                  style="color: #f56c6c"
                >
                  已关停
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              prop="userId"
              class-name="table-operation"
              align="center"
            >
              <template #default="scope">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div
                    style="display: flex; align-items: center; cursor: pointer"
                    @click="goInfo(1, scope.row)"
                    v-if="
                      scope.row.status != 1 ||
                      $route.query.pageType == 'look' ||
                      $route.meta.pageType == 'look'
                    "
                  >
                    <img
                      src="@/assets/images/icon-ck@2x.png"
                      alt=""
                      style="width: 20px; margin-right: 5px"
                    />
                    <span
                      class="look-info"
                      style="color: #1485ef"
                      >查看</span
                    >
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                      margin-left: 5px;
                    "
                    @click="goInfo(2, scope.row)"
                    v-if="
                      $route.query.pageType == 'info' ||
                      $route.meta.pageType == 'info'
                    "
                    v-show="scope.row.status == 1"
                  >
                    <img
                      src="@/assets/images/icon-shenhe@2x.png"
                      alt=""
                      style="width: 15px; margin-right: 5px"
                    />
                    <span
                      class="look-info"
                      style="color: #1485ef"
                      >审核</span
                    >
                  </div>
                  <!-- scope.row.status == 4  -->
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                      margin-left: 5px;
                    "
                    @click="goInfo(3, scope.row)"
                    v-show="scope.row.btgyy"
                  >
                    <img
                      src="@/assets/images/icon-ck@2x.png"
                      alt=""
                      style="width: 20px; margin-right: 5px"
                    />
                    <span
                      class="look-info"
                      style="color: #1485ef"
                      >查看原因</span
                    >
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                      margin-left: 5px;
                    "
                    @click="looklishi(scope.row)"
                    v-if="scope.row.status != 0 && scope.row.status != 5"
                  >
                    <img
                      src="@/assets/images/icon-ck@2x.png"
                      alt=""
                      style="width: 20px; margin-right: 5px"
                    />
                    <span
                      class="look-info"
                      style="color: #1485ef"
                      >提交记录</span
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </section>
        <section
          v-if="index == 2"
          class="shuangchongbox"
        >
          <div
            class="shuangchongboxleftbox"
            :class="isshow ? '' : 'shuangchongboxleftboxShow'"
          >
            <div style="margin-bottom: 10px">
              <el-button
                size="default"
                type="primary"
                @click="daochu()"
                >导出</el-button
              >
            </div>
            <el-table
              v-loading="loading"
              :data="tableDataTwo"
              :height="tabHeader"
              :max-height="tabHeader"
              :row-class-name="tableRowClassName"
              style="width: 100%"
            >
              <el-table-column
                type="index"
                width="70"
                label="序号"
                align="center"
              />
              <el-table-column
                label="单位名称"
                key="dwmc"
                width="150px"
                prop="dwmc"
                align="center"
              />
              <el-table-column
                label="完成状态"
                key="taskStatus"
                prop="taskStatus"
                class-name="table-status"
                align="center"
              >
                <template #default="scope">
                  <span
                    v-if="scope.row.taskStatus == 0"
                    style="color: #f56c6c"
                  >
                    已关闭
                  </span>
                  <span
                    v-if="scope.row.taskStatus == 1"
                    style="color: #e6a23c"
                  >
                    进行中
                  </span>
                  <span
                    v-if="scope.row.taskStatus == 2"
                    style="color: #67c23a"
                  >
                    正常完成
                  </span>
                  <span
                    v-if="scope.row.taskStatus == 3"
                    style="color: #67c23a"
                  >
                    超期完成
                  </span>
                  <span
                    v-if="scope.row.taskStatus == 4"
                    style="color: #f56c6c"
                  >
                    审核不通过
                  </span>
                  <span
                    v-if="scope.row.taskStatus == 5"
                    style="color: #f56c6c"
                  >
                    审核驳回
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="核查资产数量"
                width="120px"
                prop="total"
                align="center"
              />
              <el-table-column
                label="待核查数量"
                width="120px"
                prop="notChecked"
                align="center"
              />
              <el-table-column
                label="待审批数量"
                width="120px"
                prop="dsp"
                align="center"
              />
              <el-table-column
                label="完成数量"
                key="checked"
                prop="checked"
                align="center"
              >
                <!-- <template #default="scope">
                    <dict-tag :options="dict.type.project_middle_type" :value="scope.row.projectMiddleType"/>
                  </template> -->
              </el-table-column>
              <!-- <el-table-column label="未完成数量" key="wwcsl" prop="notChecked" align="center" /> -->
              <el-table-column
                label="审核退回次数"
                key="wwcsl"
                width="180px"
                prop="shthcs"
                align="center"
              />
              <el-table-column
                label="完成比例"
                key="checkedRatio"
                prop="checkedRatio"
                align="center"
              >
                <template #default="scope">
                  <span style="color: #192a92"
                    >{{ scope.row.checkedRatio }}%</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div
            class="shouqiwenzi"
            @click="shouqiisis"
          >
            {{ isshow ? "收起" : "展开" }}>>
          </div>
          <div
            v-show="isshow"
            class="myEcharts"
            id="myEcharts"
            ref="myEchartsRef"
            :style="{ height: tabHeader }"
          >
            <!-- 123 -->
          </div>
        </section>
        <my-pagination
          id="L-pagination"
          :total="total"
          :page="pagination.current"
          :limit="pagination.size"
          @pagination="getPagination"
          :current-page.sync="pagination.current"
        ></my-pagination>
      </div>
    </div>
    <div
      class="info-right"
      v-if="$route.query.pageType == 'look' || $route.meta.pageType == 'look'"
    >
      <div class="info-title">任务流程节点</div>
      <div class="timeline">
        <div
          class="timeline-items"
          v-for="(item, index) in timeLineData"
        >
          <div class="left-box">
            <img
              class="main-img"
              :src="returnidimg(item.assetName)"
              alt=""
            />
            <!-- <img class="main-img" v-if="item.status == 2" src="" alt="">
            <img class="main-img" v-if="item.status == 3" src="" alt="">
            <img class="main-img" v-if="item.status == 4" src="" alt=""> -->
            <img
              class="icon-jt"
              v-if="index + 1 != timeLineData.length"
              src="@/assets/images/icon-jt@2x.png"
              alt=""
            />
          </div>
          <div class="right-box">
            <span class="span-title">{{ item.assetName }}:</span>
            <span class="span-time">{{ item.xfTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <my-dialog
      title="查看原因"
      ref="liebiaoDialog"
      @close="importClose"
      class="taskDialogBox"
      width="40%"
    >
      <el-descriptions>
        <el-descriptions-item label="不通过原因">
          {{ chakanyuanyin }}
        </el-descriptions-item>
      </el-descriptions>
    </my-dialog>

    <my-dialog
      title="资产提交记录"
      ref="zichantijiaojil"
      @close="importClose"
      class="taskDialogBox"
      width="40%"
    >
      <el-table
        v-loading="loading"
        :data="tableDatajilu"
        :height="tabHeader"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          :label="xtmcName"
          prop="xtmc"
          align="center"
        />
        <el-table-column
          label="提交时间"
          prop="updateTime"
          align="center"
        />
        <el-table-column
          label="提交状态"
          width="120px"
          prop="status"
          class-name="table-status"
          align="center"
        >
          <template #default="scope">
            <span
              v-if="scope.row.status == 1 || scope.row.status == 3"
              style="color: #e6a23c"
            >
              核查提交
            </span>
            <span
              v-if="scope.row.status == 4"
              style="color: #f56c6c"
            >
              审核驳回后提交
            </span>
            <span
              v-if="scope.row.status == 5"
              style="color: #f56c6c"
            >
              资产关停
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="userId"
          class-name="table-operation"
          align="center"
        >
          <template #default="scope">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div
                style="display: flex; align-items: center; cursor: pointer"
                @click="tjiaojilchakan(scope.row)"
              >
                <img
                  src="@/assets/images/icon-ck@2x.png"
                  alt=""
                  style="width: 20px; margin-right: 5px"
                />
                <span
                  class="look-info"
                  style="color: #1485ef"
                  >查看</span
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </my-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
import * as echarts from "echarts";
import myPagination from "@/views/components/Pagination/index.vue";
import myDialog from "@/views/components/myDialog/index.vue";
import {
  getassetTaskid,
  geassetTaskcHc,
  assetTaskdwHc,
  assetLcpage,
  assetTaskdwHcBl,
  assetTaskzcTj,
} from "@/api/renwuApi/index.js";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

// Reactive state
const index = ref(1);
const formInline = ref({});
const formInlineTwo = ref({
  dwmc: "",
  taskStatus: "",
});
const total = ref(0);
const pagination = ref({
  current: 1,
  size: 10,
});
const tableData = ref([]);
const tableDataTwo = ref([]);
const tableDatajilu = ref([]);
const loading = ref(false);
const tabHeader = ref(undefined);
const timeLineData = ref([]);
const titleInfoObj = ref({});
const chakanyuanyin = ref("");
const activeName = ref("0");
const xtmcName = ref("系统名称");
const chanckList = ref([
  { lable: "0", conent: "web资产", xtmcName: "系统名称" },
  { lable: "1", conent: "小程序资产", xtmcName: "小程序名称" },
  { lable: "2", conent: "公众号资产", xtmcName: "公众号名称" },
  { lable: "3", conent: "电子邮件资产", xtmcName: "电子邮箱后缀" },
  { lable: "4", conent: "移动应用程序资产", xtmcName: "移动应用程序名称" },
]);
const chanckListTow = ref([]);
const listTow = ref([]);
const option = ref(null);
const myChart = ref(null);
const isshow = ref(true);
const echartsdata = ref([
  { value: 0, name: "进行中", taskStatus: "1" },
  { value: 0, name: "正常完成", taskStatus: "2" },
  { value: 0, name: "超期完成", taskStatus: "3" },
]);
const lookassetId = ref("");
const pageTypetow = ref("");
const taskisid = ref("");

// Template refs
const liebiaoDialog = ref(null);
const zichantijiaojil = ref(null);
const myEchartsRef = ref(null);

// Methods
const sendBack = () => {
  router.go(-1);
};

const shouqiisis = () => {
  isshow.value = !isshow.value;
};

const daochu = () => {
  formInlineTwo.value.taskId = route.query.id;
  download(
    "/unit/assetTask/export",
    {
      ...formInlineTwo.value,
    },
    `单位完成情况${new Date().getTime()}.xlsx`
  );
};

const handleClick = (tab) => {
  activeName.value = tab.props.name;
  xtmcName.value = tab.props.xtmcName;
  localStorage.setItem("activeName", activeName.value);
  handleQuery();
};

const returnidimg = (iswenzi) => {
  const listsna = [
    {
      name: "下发",
      imgdata: new URL("@/assets/images/rwxf.png", import.meta.url).href,
    },
    {
      name: "提交",
      imgdata: new URL("@/assets/images/wctj.png", import.meta.url).href,
    },
    {
      name: "不通过",
      imgdata: new URL("@/assets/images/shbh.png", import.meta.url).href,
    },
    {
      name: "审核通过",
      imgdata: new URL("@/assets/images/shtg.png", import.meta.url).href,
    },
    {
      name: "驳回",
      imgdata: new URL("@/assets/images/shbh.png", import.meta.url).href,
    },
  ];
  const item = listsna.find((item) => iswenzi.includes(item.name));
  return item
    ? item.imgdata
    : new URL("@/assets/images/wctj.png", import.meta.url).href;
};

const assetLcpageList = () => {
  assetLcpage({ taskId: route.query.id || route.meta.id }).then((res) => {
    timeLineData.value = res.data;
  });
};

const importClose = () => {};

const goInfo = (type, row) => {
  if (type == 1) {
    router.push({
      name: "taskAuditInfo",
      query: {
        pageType: "look",
        taskId: row.taskId,
        assetId: row.id,
        type: activeName.value,
      },
    });
  } else if (type == 2) {
    router.push({
      name: "taskAuditInfo",
      query: {
        pageType: "change",
        taskId: row.taskId,
        assetId: row.id,
        type: activeName.value,
        zcdwmc: row.zcdwmc,
        taskInfo: "taskInfo",
      },
    });
  } else if (type == 3) {
    chakanyuanyin.value = row.btgyy;
    liebiaoDialog.value.open();
  }
};

const taskstatus = (id) => {
  const statusMap = {
    0: "已关闭",
    1: "进行中",
    2: "正常完成",
    3: "超期完成",
    4: "正常完成",
    5: "审核驳回",
  };
  return id ? statusMap[id] : "-";
};

const titleInfoObjtype = (type = "0,1") => {
  const list = type.split(",");
  listTow.value = [];
  chanckListTow.value = [];

  chanckList.value.forEach((res) => {
    list.forEach((element) => {
      if (element == res.lable) {
        listTow.value.push(res.conent);
        chanckListTow.value.push(res);
      }
    });
  });

  activeName.value = chanckListTow.value[0].lable;
  if (localStorage.getItem("activeName")) {
    activeName.value = localStorage.getItem("activeName");
    localStorage.setItem("activeName", activeName.value);
  }

  const listname = chanckListTow.value.find(
    (item) => item.lable == activeName.value
  );
  if (listname) {
    xtmcName.value = listname.xtmcName;
  }

  if (route.query.istijiaoshow) {
    looklishi({
      taskId: route.query.id,
      id: route.query.lookassetId,
    });

    const query = { ...route.query };
    delete query.istijiaoshow;
    router.replace({ query });
  }

  handleQuery();
};

const titleInfo = () => {
  getassetTaskid(route.query.id || route.meta.id).then((res) => {
    if (res.code == 200) {
      titleInfoObj.value = res.data;
      taskisid.value = res.data.id;
      titleInfoObjtype(titleInfoObj.value.type);
    }
  });
};

const resetQuery = () => {
  activeName.value = chanckListTow.value[0].lable;
  xtmcName.value = "系统名称";
  pagination.value = {
    current: 1,
    size: 10,
    type: activeName.value,
  };

  if (index.value == 1) {
    formInline.value = { type: activeName.value };
    localStorage.removeItem("ismypaginationTow");
    getList();
  } else if (index.value == 2) {
    formInlineTwo.value = { dwmc: "", taskStatus: "" };
    getListTwo();
  }
};

const handleQuery = () => {
  pagination.value = {
    current: 1,
    size: 10,
    type: activeName.value,
  };

  if (index.value == 1) {
    pagination.value = { ...pagination.value, ...formInline.value };
    formInline.value.isfanhuiTow = false;
    localStorage.setItem("ismypaginationTow", JSON.stringify(formInline.value));
    getList();
  } else if (index.value == 2) {
    pagination.value = { ...pagination.value, ...formInlineTwo.value };
    getListTwo();
  }
};

const getPagination = (pages) => {
  pagination.value.current = pages.page;
  pagination.value.size = pages.limit;
  if (index.value == 1) {
    getList();
  } else if (index.value == 2) {
    getListTwo();
  }
};

const activeTab = (id) => {
  pagination.value.current = 1;
  pagination.value.size = 10;
  total.value = 0;
  index.value = id;
  resetQuery();

  if (id == 2) {
    nextTick(() => {
      myEchartsis();
    });
  }
};

const getList = () => {
  loading.value = true;
  pagination.value.taskId = route.query.id || route.meta.id;
  pagination.value.type = activeName.value;

  geassetTaskcHc(pagination.value).then((res) => {
    tableData.value = res.data.records;
    total.value = res.data.total;
    loading.value = false;
  });
};

const getListTwo = () => {
  loading.value = true;
  pagination.value.taskId = route.query.id || route.meta.id;
  assetTaskdwHc(pagination.value).then((res) => {
    tableDataTwo.value = res.data.records;
    total.value = res.data.total;
    loading.value = false;
  });
};

const getEchartsdata = () => {
  assetTaskdwHcBl({ taskId: route.query.id }).then((res) => {
    if (res.code == 200) {
      const datalsit = res.data;
      echartsdata.value.forEach((res) => {
        datalsit.forEach((datares) => {
          if (res.taskStatus == datares.taskStatus) {
            res.value = datares.count;
          }
        });
      });
    }
  });
};

const myEchartsis = () => {
  console.log("开始初始化");

  if (!myEchartsRef.value) {
    console.warn("DOM 元素未找到");
    return;
  }

  try {
    // 销毁旧实例（防止重复初始化）
    if (myChart.value) {
      myChart.value.dispose();
      myChart.value = null;
    }

    // 初始化图表
    myChart.value = echarts.init(myEchartsRef.value);

    // 构建配置项
    const option = {
      legend: { top: "bottom" },
      toolbox: { show: true },
      tooltip: {
        trigger: "item",
        formatter: "{b}：{c}({d}%)",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: echartsdata.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    // 设置配置项（关键步骤）
    myChart.value.setOption(option);

    // 绑定点击事件
    myChart.value.on("click", (params) => {
      formInlineTwo.value.taskStatus = params.data.taskStatus;
      handleQuery();
    });

    console.log("图表初始化完成");

  } catch (error) {
    console.error("初始化 echarts 失败:", error);
  }
};

const tjiaojilchakan = (row) => {
  router.push({
    name: "taskAuditInfolishichakan",
    query: {
      pageType: "look",
      taskId: taskisid.value,
      assetId: row.id,
      lookassetId: lookassetId.value,
      type: activeName.value,
      pageTypetow: pageTypetow.value,
      istijiaoshow: true,
    },
  });
};

const looklishi = (row) => {
  lookassetId.value = row.id;
  const obj = {
    assetId: row.id - 0,
    taskId: row.taskId - 0,
    type: activeName.value - 0,
  };

  assetTaskzcTj(obj).then((res) => {
    tableDatajilu.value = res.data;
    if (tableDatajilu.value.length != 0) {
      tableDatajilu.value.forEach((res) => {
        res.status = 4;
      });
      tableDatajilu.value[0].status = 1;
    }
    zichantijiaojil.value.open();
  });
};

const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 !== 0 ? "evenNumber-row" : "";
};

const cancalDebounce = () => {
  const element = document.getElementById("L-size-main");
  const header = document.getElementById("L-header");
  const tab = document.getElementById("L-tab");
  const pagination = document.getElementById("L-pagination");

  if (element && header && tab && pagination) {
    const elementHeight = element.offsetHeight;
    const headerHeight = header.offsetHeight;
    const paginationtHeight = pagination.offsetHeight;
    const tabHeight = tab.offsetHeight;
    tabHeader.value =
      elementHeight - headerHeight - paginationtHeight - tabHeight - 160;
  }
};

// Lifecycle hooks
onMounted(() => {
  cancalDebounce();
  window.addEventListener("resize", cancalDebounce);
  titleInfo();
  assetLcpageList();
  getEchartsdata();

  if (localStorage.getItem("ismypaginationTow")) {
    if (JSON.parse(localStorage.getItem("ismypaginationTow")).isfanhuiTow) {
      formInline.value = JSON.parse(localStorage.getItem("ismypaginationTow"));
      titleInfo();
    } else {
      localStorage.removeItem("ismypaginationTow");
    }
  }

  pageTypetow.value = route.query.pageType;
});

onUnmounted(() => {
  window.removeEventListener("resize", cancalDebounce);
  if (myChart.value) {
    myChart.value.dispose();
  }
});

// Watch for route changes
watch(
  () => route.query,
  (newVal) => {
    if (newVal.pageType) {
      pageTypetow.value = newVal.pageType;
    }
  }
);
</script>

<style lang="scss" scoped>
:deep(.el-timeline) {
  padding-left: 0;
  font-size: 12px;
}

:deep(.el-form-item__label) {
  padding-right: 3px;
}

:deep(.el-dialog) {
  margin-top: 20vh !important;
}

.shuangchongbox {
  width: 100%;
  display: flex;
  position: relative;

  .shuangchongboxleftbox {
    width: 70%;
  }

  .shuangchongboxleftboxShow {
    width: 100%;
  }

  .myEcharts {
    width: 30%;
    // height: 100%;
  }
}

.shouqiwenzi {
  position: absolute;
  top: 10px;
  right: -30px;
  width: 100px;
  font-size: 14px;
  font-weight: bold;
  color: #409eff;
  cursor: pointer;
  z-index: 999;
}

.content-info {
  position: relative;
}

.fanhuipiaofu {
  position: absolute;
  right: 20px;
  top: 10px;
}
</style>
