<template>
  <div class="on-the-right-side-of-the-list">
    <div class="title">我的申请</div>
    <div class="sousuokuang">
      <a-input-search
        v-model:value="name"
        placeholder="请输入关键词"
        enter-button="搜索"
        size="large"
        @change="onSearch"
        @search="getApplyList(name)"
      />
      <a-button
        type="primary"
        style="width: 90px; height: 36px; margin-left: 10px"
        @click="replacement"
      >
        重置
      </a-button>
    </div>
    <div class="tab">
      <span>排序</span>

      <div
        :class="tabIndex == index ? 'tabclass' : ' '"
        @click="tabqiehuan(item, index)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        <a-badge
          :count="item === '审核中' ? num.unfinished : num.finished"
          v-if="item !== '全部'"
        >
          {{ item }}
        </a-badge>
        <template v-else>
          {{ item }}
        </template>
      </div>
    </div>
    <div v-if="contentList.data.length > 0">
      <div class="content">
        <div
          class="content-body"
          v-for="item in contentList.data"
          :key="item.index"
        >
          <a-tooltip>
            <template #title>{{ item.name }}</template>
            <div class="content-body-title">
              <span v-if="item.name ==='申请摄像头列表'" @click="showVideoList(item)"> 名称：{{ item.name }} </span>
              <span v-else> 名称：{{ item.name }} </span>
              <div></div>
            </div>
          </a-tooltip>
          <div class="content-body-content">
            <p class="content-body-content-son">
              流程类型：{{ item.processDefinitionName }}
            </p>
          </div>
          <div class="content-body-content">
            <p class="content-body-content-son">
              审核结果：{{
                item.ended ? '审核完成' : item.backToFirst ? '被终止' : '审核中'
              }}
            </p>
          </div>
          <div class="content-body-content" v-if="item.currentTaskList">
            <p class="content-body-content-son">
              当前节点：{{ item.currentTaskList[0].taskName }}
            </p>
          </div>
          <div v-else>
            <p class="content-body-content-son">
              <span v-if="item.name ==='申请摄像头列表'">申请结果：{{ '列表地址：' + backUrl +  'resource/getApplyCameraList/' + item.processInstanceId+';'+ '视频流地址：'+backUrl + '/resource/hls/getHls/?channelId='}}</span>
              <span v-else>申请结果：{{ item.comment || '暂无' }}</span>
              <a-button
                type="primary"
                size="small"
                @click="copyComment(item.comment)"
              >
                复制
              </a-button>
            </p>
          </div>
          <!-- <div class="content-body-title"></div>
          <div class="content-body-content">
            <p class="content-body-content-son"></p>
            <div></div>
          </div> -->
          <div class="content-body-bottom" v-if="item.currentTaskList">
            <div>申请日期：{{ item.currentTaskList[0].createTime }}</div>
            <div>审批人：{{ item.currentTaskList[0].assigneeName }}</div>
          </div>
          <div class="content-body-bottom" v-else>
            <div>申请日期：{{ item.startTime }}</div>
            <div></div>
          </div>
          <div class="button-box">
            <div
              class="button"
              @click="showDetail(item)"
              v-if="!(item.processDefinitionName == '能力申请')"
            >
              查看流程
            </div>
            <!-- <div class="button" @click="showAdd(item)" v-if="item.backToFirst">
              修改
            </div> -->
            <div
              v-if="
                !(
                  (item.processDefinitionName == '能力需求申请' ||
                    item.processDefinitionName == '能力资源上架') &&
                  item.ended == false
                )
              "
              v-show="
                item.resourceStatusTip == '正常' &&
                item.ended &&
                item.processDefinitionName !== '能力申请'
              "
              class="button button-details"
              @click="
                viewDetail(
                  item.processDefinitionName,
                  item.resourceId,
                  item.ended,
                  item.businessKey
                )
              "
            >
              查看详情
            </div>
            <!-- <div
              class="button button-state"
              :class="{
                buttonAgree: item.ended,
                backToFirst: item.backToFirst,
              }"
            >
              {{
                item.ended ? '审核完成' : item.backToFirst ? '被驳回' : '审核中'
              }}
            </div> -->
            <svg
              t="1652233950228"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5970"
              data-spm-anchor-id="a313x.7781069.0.i8"
              width="80"
              height="80"
              v-if="
                item.processDefinitionName != '能力资源下架' &&
                (item.resourceStatus == 4 || item.resourceStatus == 5)
              "
              style="position: absolute; top: 20px; left: -850px"
            >
              <path
                d="M955.22053 256C813.82053 11.2 500.72053-72.6 255.92053 68.8S-72.67947 523.2 68.72053 768 523.22053 1096.6 768.02053 955.2c244.7-141.2 328.6-454.1 187.4-698.8 0-0.1-0.1-0.3-0.2-0.4zM762.02053 944.7c-239 138.1-544.8 56.2-682.9-182.8S22.92053 217.1 261.92053 79.1s544.8-56.2 682.9 182.8c137.9 239 56.1 544.6-182.8 682.8z"
                fill="#515151"
                opacity=".5"
                p-id="5971"
              ></path>
              <path
                d="M898.12053 289.2C775.02053 76 502.42053 2.9 289.22053 126 76.02053 249.1 3.02053 521.6 126.02053 734.8 249.12053 948 521.62053 1021.1 734.82053 898 947.92053 774.9 1021.02053 502.4 898.12053 289.2zM731.62053 892.8C521.32053 1014.3 252.42053 942.2 131.02053 731.9 9.52053 521.6 81.62053 252.7 291.92053 131.3 502.12053 9.9 771.02053 81.8 892.42053 292c121.5 210.3 49.5 479.3-160.8 600.8z"
                fill="#515151"
                opacity=".5"
                p-id="5972"
              ></path>
              <path
                d="M323.62053 176.8c3.6-2 6 0.8 8.8 2.8 6 4.4 12.4 8.8 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.4 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.6 0.6-2zM200.72053 289.2c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 14.8 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.4-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.4-1.2 0-1.6 0.8-2.4l0.2 0.4z m276.6-159.6c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.8-1.2-0.4-1.6 0.4-2.4l0.2 0.4z m141.9 29.6c3.6-2 6 0.8 8.8 2.8l18.8 12.8c7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4-7.7 0.4-15.2 0.8-22.4 0.8-4.4 6.8-8.4 13.2-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.5-1.2 0.2-1.6 0.6-2zM150.02053 430c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-4 14-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.5 0.6-2z m558.9 414.4c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.1 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-1.1 0.8-1.1 1.6-1.1h0.1z m-158.8 50c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.1-3.7-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2-1 4.2-1.7 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.4-0.8 0.8-0.8 1.7-0.7z m276.5-159.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8s-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.2 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0-0.8 0.8-1.2 1.6-1.2l0.1 0.1z m45.6-137.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.2-0.7 0.6-0.7 1.4-0.7h0.3zM402.72053 868c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-0.8 1-1.1 1.7-1.1z"
                fill="#515151"
                opacity=".5"
                p-id="5973"
              ></path>
              <path
                d="M386.42053 590.4l-43.8-75.9L207.02053 592.7l10.2 17.7L334.02053 543l23.4 40.4-90.5 52.2-13.5-23.4-18.7 10.8 53.1 92c9.1 15.8 21.2 19.5 36.4 10.7l98.8-57c6.2-3.6 11-9.3 13.4-16.1-1.4-15.9-6.2-31.2-14.2-45l-21.4 4.8c6.7 10.3 11 21.9 12.8 34-1 3.3-3.2 6-6.1 7.8l-88.3 51c-6.2 3.6-11.1 2.1-14.8-4.3l-27.3-47.4 109.3-63.1z m2.9-103.2l10.4 18.1 65.6-37.9 79.9 138.4 18.6-10.8-55.9-96.9c18.8-0.9 43.2-0.6 73 0.7l1.5-23.1c-29.8-0.3-58.4 0.4-86 2.6l-12.5-21.6 74.9-43.2-10.4-18.1-159.1 91.8zM669.52053 329l38.2 66.2 61.4-35.4-38.1-66.1-61.5 35.3z m72.4 24.2l-26.3 15.2-19-33 26.3-15.2 19 33zM599.02053 356.7l7.9 13.7-23.3 13.5 9.8 17 21.8-12.6c7.5 18.7 6.6 39.6-2.5 57.6l20.7 4.4c10.3-23.1 10.3-49.4 0-72.5l18.8-10.9c6 9.2 10.7 19.2 14.2 29.7 0.3 5-2.6 9.7-7.2 11.7-2.9 1.2-6.4 2.8-10.9 4.9l14.1 14.1c3.7-1.3 7.3-2.9 10.7-4.8 8.6-3.9 14.4-12.2 15.2-21.6-5.4-22.1-14.6-43-27.4-61.8l-36.1 20.8-7.9-13.7-17.9 10.5z m29.9 108.1l10 17.4 53.2-30.7c-7.8 23.7-20.6 45.4-37.5 63.6l20.6 11.1c18.6-24.2 30-53.1 33-83.4l29.8 51.5 18.4-10.7-29.8-51.5c27.4 11.5 57.2 16.3 86.9 14.1l3.5-23.5c-24.7 5.1-50.1 5-74.8-0.1l53.5-30.9-10-17.3-69.3 40-7.3-12.6-18.4 10.7L698.02053 425l-69.1 39.8z"
                fill="#515151"
                opacity=".5"
                p-id="5974"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="bottom">
        <a-pagination
          size="small"
          pageSize="4"
          :total="total"
          @change="handleCurrentChange"
          @showSizeChange="handlePageSizeChange"
          :showSizeChanger="false"
        />
      </div>
    </div>
    <a-empty v-else />
    <a-modal
      v-model:visible="detailsVisible"
      title="申请流程"
      style="width: 900px"
      :footer="null"
      destroyOnClose="true"
      :maskClosable="false"
    >
      <apply-details
        :processDefinitionName="processDefinitionName"
        :businessKey="businessKey"
        :processInstanceId="processInstanceId"
        :resourceId="resourceId"
      ></apply-details>
    </a-modal>
    <a-modal
      v-model:visible="visible"
      title="下架原因"
      @ok="del()"
      @cancel="reason = ''"
    >
      <a-input v-model:value="reason" placeholder="请输入下架原因" />
    </a-modal>
    <a-modal
      v-model:visible="videoVisible"
      title="已申请摄像头列表"
      @ok="videoVisible=false"
    >
      <a-table :columns="columns" :data-source="xVideoList" bordered :pagination="{defaultPageSize: 6}">
      <template #bodyCell="{ column, text }">
      <!-- <template>
        <a>{{ text }}</a>
      </template> -->
      </template>
  </a-table>
    </a-modal>
  </div>
</template>

<script setup>
  import qs from 'qs'
  import { onMounted, reactive, ref } from 'vue'
  import {
    getMyProcessInstancePage,
    getTaskHandleDetailInfo,
    // getProcDefBizRoute,
  } from '@/api/personalCenter'
  import { updateRes, relaunch, selectOne,getApplyCameraList } from '@/api/home'
  import { useRouter } from 'vue-router'
  import { message } from 'ant-design-vue'
  import ApplyDetails from '@/views/personalCenter/components/ApplyDetails'
  const router = useRouter()
  let tabList = ref(['全部', '审核中', '审核完成'])
  const contentList = reactive({ data: [] })
  // const contentListClone = reactive({ data: [] })
  // let contentListLength = contentList.length
  let tabIndex = ref(0)
  const videoVisible = ref(false)
  const columns = ref([{
    title: '摄像头名称',
    dataIndex: 'name'
  }])
  const xVideoList = ref([{
    name: '111'
  }, {
    name: '222'
  },{
    name: '111'
  }, {
    name: '222'
  },{
    name: '111'
  }, {
    name: '222'
  },{
    name: '111'
  }, {
    name: '222'
  },{
    name: '111'
  }, {
    name: '222'
  },{
    name: '111'
  }, {
    name: '222'
  },{
    name: '111'
  }, {
    name: '222'
  },])
  function tabqiehuan(item, index) {
    // debugger
    tabIndex.value = index
    switch (item) {
      case '审核中':
        page.value = 1
        ended.value = false
        getApplyList()
        break
      case '审核完成':
        page.value = 1
        ended.value = true
        getApplyList()
        break
      case '全部':
        page.value = 1
        ended.value = ''
        getApplyList()
        break
    }
  }
  let name = ref('')
  const detailsVisible = ref(false)
  const businessKey = ref('')
  const processInstanceId = ref('')
  const processDefinitionName = ref('')
  const resourceId = ref('')
  const reason = ref('')
  const visible = ref(false)
  const delObj = ref({})
  const taskId = ref('')
  const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
  const showDetail = (item) => {
    console.log('showDetail', item)
    // getProcDefBizRoute(item.processDefinitionId)
    detailsVisible.value = true
    processDefinitionName.value = item.processDefinitionName
    businessKey.value = item.businessKey
    processInstanceId.value = item.processInstanceId
    resourceId.value = item.resourceId
  }
  const showVideoList = (item) => {
    // getApplyCameraList(item.processInstanceId).then(res=>{
    //   console.log('res', res)
    // })
    videoVisible.value = true
  }
  const copyComment = (data) => {
    let url = data
    let oInput = document.createElement('input')
    oInput.value = url
    document.body.appendChild(oInput)
    oInput.select() // 选择对象;
    console.log(oInput.value)
    document.execCommand('Copy') // 执行浏览器复制命令
    message.success('复制成功')
    oInput.remove()
  }
  const showAdd = (item) => {
    // resourcemountapply 上架申请
    // resourcundercarriageapply 下架申请
    // abilitydemandapply 需求申请
    // abilityprocess 能力申请
    if (item.processDefinitionKey == 'resourcemountapply') {
      const newpage = router.resolve({
        path: '/nenglishangjia', // 跳转的页面路由
        query: {
          id: item.resourceId,
          taskId: item.currentTaskList[0].taskId,
        },
      })
      console.log('上架申请修改=================》', item)
      window.open(newpage.href, '_blank')
    } else if (item.processDefinitionKey == 'resourcundercarriageapply') {
      selectOne(item.resourceId).then((res) => {
        if (res.data.code == 0) {
          delObj.value = res.data.data
          reason.value = delObj.value.undercarriageReason
          taskId.value = item.currentTaskList[0].taskId
          visible.value = true
          console.log('下架申请修改=================》', res.data.data)
        }
      })
    } else if (item.processDefinitionKey == 'abilitydemandapply') {
      const newpage = router.resolve({
        path: '/addApplication', // 跳转的页面路由
        query: {
          id: item.businessKey,
          taskId: item.currentTaskList[0].taskId,
        },
      })
      console.log('需求申请修改=================》', item)
      window.open(newpage.href, '_blank')
    } else if (item.processDefinitionKey == 'abilityprocess') {
      const newpage = router.resolve({
        path: '/apply', // 跳转的页面路由
        query: {
          id: item.businessKey,
          resourceId: item.resourceId,
          name: item.name,
          taskId: item.currentTaskList[0].taskId,
        },
      })
      console.log('能力申请修改=================》', item)
      window.open(newpage.href, '_self')
    }
  }
  const num = ref({
    finished: 0,
    unfinished: 0,
  })
  const initNum = (name) => {
    num.value = []
    getMyProcessInstancePage({
      page: 1,
      limit: 4,
      ended: 'false',
      name: name,
    }).then((res) => {
      if (res.data.code == 0) {
        num.value.unfinished = res.data.data.total
        getMyProcessInstancePage({
          page: 1,
          limit: 4,
          ended: 'true',
          name: name,
        }).then((res) => {
          if (res.data.code == 0) {
            num.value.finished = res.data.data.total
          }
        })
      }
    })
  }
  initNum()
  const total = ref('')
  const page = ref('1')
  const ended = ref('')
  // 搜索框
  const onSearch = (name) => {
    console.log(name.value)
  }
  //重置
  function replacement() {
    name.value = ''
    getApplyList(name.value)
  }
  const getApplyList = () => {
    const params = {
      page: page.value,
      limit: 4,
      ended: ended.value,
      name: name.value,
    }
    console.log('==============>', ended.value)
    getMyProcessInstancePage(params).then((res) => {
      initNum(name.value)
      console.log(res.data.data.list)
      contentList.data = res.data.data.list
      total.value = res.data.data.total
      if (contentList.data && contentList.data.length > 0) {
        contentList.data.map((item) => {
          const param = {
            page: 1,
            limit: 4,
            processInstanceId: item.processInstanceId,
          }
          getTaskHandleDetailInfo(qs.stringify(param)).then((res) => {
            console.log('申请结果', res.data.data, res.data.data[0].comment)
            const result = res.data.data
            if (result && result.length > 2) {
              item.comment =
                result[0].comment.length > result[1].comment.length
                  ? result[0].comment
                  : result[1].comment
            } else {
              item.comment = result[0].comment
            }
          })
          return item
        })
      }
    })
  }
  const handleCurrentChange = (val) => {
    page.value = val
    getApplyList()
  }

  const handlePageSizeChange = (val) => {
    page.value = val
    getApplyList()
  }

  const viewDetail = (processDefinitionName, id, ended, businessKey) => {
    if (processDefinitionName == '能力申请流程') {
      router.push({
        path: '/details',
        query: {
          id: id,
          ended: ended,
        },
      })
    }
    if (processDefinitionName == '能力资源上架') {
      console.log('showDetail', id, businessKey, ended)
      router.push({
        path: '/details',
        query: {
          id: id,
        },
      })
    }
    if (processDefinitionName == '能力需求申请') {
      router.push({
        path: '/demandDetails',
        query: {
          id: businessKey,
        },
      })
    }
  }

  // 下架能力
  const del = () => {
    console.log('下架================》', delObj.value, reason.value)
    delObj.value.undercarriageReason = reason.value
    updateRes(delObj.value).then((upres) => {
      if (upres.data.code == 0) {
        relaunch({
          data: { undercarriageReason: reason.value },
          taskId: taskId.value,
        }).then((res) => {
          console.log('驳回================>', res)
          if (res.data.code == 0) {
            message.success('重新发起流程成功！')
            visible.value = false
            reason.value = ''
          } else {
            message.error('重新发起流程失败！')
          }
        })
      } else {
        message.error('数据更新失败！')
      }
    })
  }
  onMounted(() => {
    getApplyList()
  })
</script>

<style scoped lang="less">
  .on-the-right-side-of-the-list {
    background: #ffffff;
    padding: 20px 0px 30px 20px;
    position: absolute;
    width: 1087px;
    height: 810px;
    top: 0px;
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    font-size: 16px;
    justify-content: left;
    .title {
      font-size: 20px;
      color: #000000;
      font-family: 'Alibaba PuHuiTi';
      font-weight: 500;
    }
    .sousuokuang {
      margin: 20px 0px 21px 0px;
      .ant-input-search {
        max-width: 490px;
      }
      :deep(.ant-input) {
        width: 400px;
        height: 36px;
        font-size: 14px;
        color: #b2b2b2;
        background: #f5f5f5;
      }
      :deep(.ant-input-group-addon) {
        display: inline-block;
        margin-left: 10px;
        .ant-input-search-button {
          width: 80px;
          height: 36px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
    }
    .tab {
      display: flex;
      font-size: 14px;
      color: #999999;
      div {
        width: 70px;
        height: 24px;
        border: 1px solid #cccccc;
        border-radius: 12px;
        margin-left: 10px;
        text-align: center;
        color: #666666;
        cursor: pointer;
      }
      .tabclass {
        border: 1px solid #0087ff;
        color: #0087ff;
      }
    }
    .content {
      padding-right: 10px;
      height: 510px;
      .content-body {
        padding-bottom: 20px;
        padding-top: 20px;
        margin-right: 10px;
        height: 150px;
        border-bottom: #cccccc 1px solid;
        position: relative;
        .content-body-title {
          min-width: 100px;
          max-width: 900px;
          width: fit-content;
          font-size: 14px;
          color: #333333;
          font-family: 'Alibaba PuHuiTi';
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .content-body-content {
          margin-top: 10px;
          margin-bottom: 10px;
          margin-right: 40px;
          /* width: 720px; */
          display: inline-block;
        }
        .content-body-content-son {
          line-height: 16px;
          font-size: 12px;
          width: 100%;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          color: #999999;
        }
        .content-body-bottom {
          display: flex;
          color: #cccccc;
          font-size: 12px;
          div:first-child {
            margin-right: 30px;
          }
        }
      }
    }
    .bottom {
      position: absolute;
      bottom: 30px;
      right: 20px;
    }

    .button-box {
      position: absolute;
      right: 20px;
      top: 10px;
      display: flex;
      flex-direction: column;
    }

    .button {
      width: 96px;
      height: 30px;
      margin: 5px 0;
      background: #0087ff;
      font-size: 14px;
      color: #fff;
      border-radius: 4px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }
    .buttonAgree {
      background-color: #49c988;
    }
    .backToFirst {
      background-color: rgb(214, 91, 91);
    }
  }
  :deep(.ant-badge-count) {
    top: -5px;
    right: -10px;
  }
</style>
