<script lang="ts" setup>
import { computed, defineProps, onMounted, reactive, ref, unref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { chunk, cloneDeep } from 'lodash-es'
import { useDialog, useMessage } from 'naive-ui'
import dayjs from 'dayjs'
import { RepeatModal, RepeatTaskTableModal } from '../comp'
import testImg from '@/assets/images/test.png'
import type { RowData } from '@/config/final'
import { getFinalList } from '@/api/final'
import { useFinal } from '@/store/modules/final'
import { formatToDateHMS } from '@/utils/dateUtil'
import { audit } from '@/api/task/task'
import DataHeader from '@/components/DataHeader/index.vue'
import NotPassed from '@/components/Approval/NotPassed.vue'
import { useDataHeaderStore } from '@/store/modules/DataHeader'

const props = defineProps({

  taskvalue: {
    type: String,
    default: '',
  },
  asidevalue:{
    type:Object,
    default:{}
  }
})
const emit = defineEmits(['changeShow','goDetailx'])
const aa = ref(true)
const haeaderstore = useDataHeaderStore()
const headerref = ref(null)
const dialog = useDialog()
const message = useMessage()
const router = useRouter()
const notPassModalRef = ref(null) // 不通过弹窗
const sortorder = ref('asc')
const sortname = ref('states')
const loading = ref(true)
const total = ref(0)
const scrollContainer = ref(null)
const tableData = ref<any>([])
const finalStore = useFinal()
let num = 1
const pagination = reactive({
  page: 1,
  pageCount: 20,
  pageSize: 20,
})
const repeatModalRef = ref(null)
const repeatTaskTableModalRef = ref(null)
const selectionIds = ref([])
const showActions = computed(() => {
  return selectionIds.value.length
})

console.log(haeaderstore)
function handleCheck(row: any, showcheck: any) {
  if (showcheck == false) {
    console.log(tableData.value)
    tableData.value.forEach((item) => {
      if (item.length > 0) {
        item.forEach((itemx, index) => {
          if (row.id == itemx.id)
            itemx.showcheck = true

          // newlistx.push(itemx)
        })
      }
    })
    selectionIds.value.push(row)
  }
  else {
    tableData.value.forEach((item) => {
      if (item.length > 0) {
        item.forEach((itemx, index) => {
          if (row.id == itemx.id)
            itemx.showcheck = false

          // newlistx.push(itemx)
        })
      }
    })
    selectionIds.value.pop(row)
  }
}
function switchBatch() {
  tableData.value.forEach((item) => {
    item.forEach((itemx, index) => {
      itemx.showcheck = false
    })
  })
  selectionIds.value = []
}
function changeContent() {
  emit('changeShow')
}
function initRem() {
  const designWidth = 1440
  const rempPx = 16
  const scale = window.innerWidth / designWidth
  document.documentElement.style.fontSize = `${scale * rempPx}px`
}

async function initData(
  page: number,
  pageSize: number,
  filterId?: any,
  taskName?: string,
) {
  const asideParmas = unref(finalStore.getAsideValue)
  if (asideParmas.izyear) {
    // console.log(asideParmas.izyear)
    // asideParmas.izuptime = cloneDeep(asideParmas.izyear)
    // asideParmas.izuptime = asideParmas.izyear.split(",");
    const ontime = dayjs(asideParmas.izyear[0]).format(
      'YYYY/MM/DD',
    )
    const twotime = dayjs(asideParmas.izyear[1]).format(
      'YYYY/MM/DD',
    )
    asideParmas.izuptime = `${ontime}-${twotime}`
    // delete asideParmas.izyear
  }
  // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数
  // let params = filterId ? { userSearchId: filterId } : asideParmas
  const params = asideParmas
  if (params?.izshowall == true) {
    params.isFail = true
    delete params.izshowall
  }
  const result = await getFinalList({
    sortorder: sortorder.value,
    pageSize,
    currPage: page,
    sortname: sortname.value,
    taskName,

    ...params,
  })
  const { data, pageCount, totalCount } = result
  // console.log(data, pageCount, totalCount)
  // tableData.value =  tableData.value.concat(data);
  tableData.value = data
  // console.log(tableData.value)
  total.value = totalCount
  pagination.page = page
  pagination.pageCount = Math.ceil(totalCount / pageSize)
  loading.value = false
  tableData.value.forEach((item) => {
    item.showcheck = false
    if (isValidTimestamp(item.fromuptime))
      item.fromuptime = formatToDateHMS(item.fromuptime)
  })

  tableData.value = chunk(tableData.value, 4)
}
async function query(
  page: number,
  pageSize: number,
  filterId?: any,
  taskName?: string,
) {
  console.log('query', taskName)

  const asideParmas = unref(finalStore.getAsideValue)
  // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数
  // let params = filterId ? { userSearchId: filterId } : asideParmas
  if (asideParmas.izyear) {
    // console.log(asideParmas.izyear)
    // asideParmas.izuptime = cloneDeep(asideParmas.izyear)
    // asideParmas.izuptime = asideParmas.izyear.split(",");
    const ontime = dayjs(asideParmas.izyear[0]).format(
      'YYYY/MM/DD',
    )
    const twotime = dayjs(asideParmas.izyear[1]).format(
      'YYYY/MM/DD',
    )
    asideParmas.izuptime = `${ontime}-${twotime}`
    // delete asideParmas.izyear
  }
  let params = asideParmas
  if (params?.izshowall == true) {
    params.isFail = true
    delete params.izshowall
  }
  params = params?.izshowall ? { isFail: true } : params
  const result = await getFinalList({
    sortorder: sortorder.value,
    pageSize,
    currPage: page,
    sortname: sortname.value,
    taskName,
    // isFail: true,
    ...params,
  })
  const { data, pageCount, totalCount } = result
  console.log(data, pageCount, totalCount)
  const newlist = []
  const oldlist = tableData.value
  if (oldlist.length > 0) {
    oldlist.forEach((item) => {
      // console.log(item);
      if (item.length > 0) {
        item.forEach((itemx: any) => {
          itemx.showcheck = false
          newlist.push(itemx)
        })
      }
    })
    data.forEach((item) => {
      item.showcheck = false
      newlist.push(item)
    })
  }
  else {
    data.forEach((item) => {
      item.showcheck = false
      newlist.push(item)
    })
  }
  // tableData.value =  tableData.value.concat(data);
  tableData.value = newlist
  // console.log(tableData.value);
  total.value = totalCount
  pagination.page = page
  pagination.pageCount = Math.ceil(totalCount / pageSize)
  loading.value = false
  tableData.value.forEach((item) => {
    if (isValidTimestamp(item.fromuptime))
      item.fromuptime = formatToDateHMS(item.fromuptime)
  })

  tableData.value = chunk(tableData.value, 4)
}
function isValidTimestamp(value) {
  if (typeof value !== 'number' || !Number.isInteger(value))
    return false // 首先确保值是一个整数数字

  const date = new Date(value)
  return !Number.isNaN(date.getTime()) // 验证能否转换为有效日期
}

// 查看详情页
function goDetail(row) {
  console.log(props.asidevalue.asideValue
)
 const tempobj = cloneDeep(props.asidevalue.asideValue)
      console.log('tempObj', tempobj)
      finalStore.setAsideValue(tempobj)
 
   emit('goDetailx',{ id: row.id, packageid: row.packageid, taskindex: row.taskNode, type: 'card' })
 /* router.push({
    name: 'final-detail',
    query: { id: row.id, packageid: row.packageid, taskindex: row.taskNode, type: 'card' },
  })*/
}
// 小结批量不通过
function repeatBatchReject(items) {
  console.log(items)
  rejectHandler(items)
}
// 审核不通过
function rejectHandler(list) {
  console.log(list)
  const msg = validate(list)
  if (msg !== null) {
    message.error(msg)
    return
  }
  function validate(items: any[]) {
    if (items.length === 0)
      return '至少选中一个任务'
    return null
  }
  console.log(notPassModalRef)
  const modal = unref(notPassModalRef)! as any
  modal.showModal(list)
}

function showModal(modalRef: any) {
  const modal = unref(modalRef)! as any
  modal.showModal()
}
onMounted(() => {
  initRem()

  initData(1, 20, {}, props.taskvalue)
})
const item = {
  img: testImg,
  checked: false,
  title: 'YP45678',
  date: '2023-12-19 12:09:18',
}
const data = ref<any[]>([])
function actionHandler(action: any, row: any) {
  const { key } = action
  switch (key) {
    case 'view':
      goDetail(row)
      break
    case 'reset':
      // resetHandler()
      break
    case 'approval':
      singleApproval(row)
      break
    case 'reject':
      rejectHandler(row)
      break
    default:
      break
  }
}
// 审核通过
function doAudit(param: any, row: any) {
  const modal = unref(headerref)! as any

  dialog.info({
    title: '确认提示',
    content: '确认给该任务审批为【通过】吗?',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      audit(param).then((res) => {
        const { code } = res
        if (code === 'OK') {
          message.success(res.message)
          // changecardstatus(3, row);
          initData(1, 20, {}, props.taskvalue)
          num = 1
          reload()
          selectionIds.value = []
          modal.getData()
        }
        else {
          message.error(res.message)
          selectionIds.value = []
        }
      })
      // alert("X")

      //  haeaderstore.setDataConfig(true)
    },
    onNegativeClick: () => {},
  })
}
// 单个审批通过
function singleApproval(row) {
  console.log(row)
  const param = {
    result: true,
    comment: '',
    disposeType: '',
    disposeTypeId: '',
    failCauseId: '',
    failCauseName: '',
    flowTaskInfoList: [
      {
        formId: row.id,
        taskId: row.taskId,
        taskName: row.fromTaskName,
      },
    ],
  }
  doAudit(param, row)
}
// 批量通过
function batchApproval() {
  const items: any = selectionIds.value
  const msg = validate(items)
  function validate(items: any[]) {
    if (items.length === 0)
      return '至少选中一个任务'
    return null
  }
  if (msg !== null) {
    message.error(msg)
    return
  }
  console.log(items)
  const list: any = []
  items.forEach((item) => {
    list.push({
      formId: item.id,
      taskId: item.taskId,
      taskName: item.fromtaskname,
    })
  })

  const param = {
    result: true,
    comment: '',
    disposeType: '',
    disposeTypeId: '',
    failCauseId: '',
    failCauseName: '',
    flowTaskInfoList: list,
  }

  doAudit(param, {})
  selectionIds.value = []
  num = 1
}
// 批量不通过
function batchReject() {
  const items: any = selectionIds.value
  rejectHandler(items)
  selectionIds.value = []
  num = 1
}
// 修改卡片状态渲染效果
function changecardstatus(states, item) {
  // let index = tableData.value.findIndex(itemx => itemx.id === item.id);
  const newlist = []
  tableData.value.forEach((itemarr, indexarr) => {
    itemarr.forEach((itemobj, indexobj) => {
      if (item.id == itemobj.id)
        itemobj.states = states

      newlist.push(itemobj)
    })
  })
  tableData.value = chunk(newlist, 4)
}

function reload() {
  // query(1, 20)
  // num=1
  // selectionIds.value = []
  // checkedRowKeys.value = []
  //  const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps
  //  query(page!, pageSize!)
}

let debounceTimer
// 检查是否滚动到底部
function checkBottom() {
  const container = scrollContainer.value
  // console.log(1)
  if (!container)
    return

  // const { scrollTop, clientHeight, scrollHeight } = container;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop

  // 获取视口的内部高度
  const clientHeight
    = window.innerHeight || document.documentElement.clientHeight

  // 获取整个文档的高度
  const scrollHeight = document.documentElement.scrollHeight

  clearTimeout(debounceTimer)
  // console.log(pagination)
  debounceTimer = setTimeout(() => {
    if (scrollTop + clientHeight >= scrollHeight - 500 && !(pagination.pageCount < num)) {
      num = num + 1
      console.log(num)
      console.log(pagination.pageCount)
      query(num, 20, {}, props.taskvalue)
      //  fetchData(); // 接近底部时加载更多数据
    }
  }, 500)
}
function changesort(sortnamex) {
  if (sortorder.value == 'asc' && sortnamex == 'submit_date_timestamp') {
    sortorder.value = 'desc'
    sortname.value = 'submit_date_timestamp'
  }
  else if (sortorder.value == 'desc' && sortnamex == 'submit_date_timestamp') {
    sortorder.value = 'asc'
    sortname.value = 'submit_date_timestamp'
  }
  else if (sortorder.value == 'desc' && sortnamex == 'similarity_score') {
    sortorder.value = 'asc'
    sortname.value = 'similarity_score'
  }
  else if (sortorder.value == 'asc' && sortnamex == 'similarity_score') {
    sortorder.value = 'desc'
    sortname.value = 'similarity_score'
  }
  else if (sortorder.value == 'asc' && sortnamex == 'field1') {
    sortorder.value = 'desc'
    sortname.value = 'field1'
  }
  else if (sortorder.value == 'desc' && sortnamex == 'field1') {
    sortorder.value = 'asc'
    sortname.value = 'field1'
  }
  initData(1, 20, {}, props.taskvalue)
  num = 1
}
function notpass() {
  const modal = unref(headerref)! as any
  initData(1, 20, {}, props.taskvalue)

  selectionIds.value = []
  modal.getData()
  // haeaderstore.setDataConfig(true)
}
watch(
  () => finalStore.asideValue,
  (newVal, oldVal) => {
    initData(1, 20, {}, props.taskvalue)
    num = 1
  },
  { deep: true },
)

defineExpose({
  initData,
})
</script>

<template>
  <div class="wrapper">
    <div class="wrapper-header">
      <div class="wrapper-header-left">
        <span class="wrapper-header-font">任务管理列表</span>
        <SvgIcon
          style="cursor: pointer"
          size="16"
          name="card-mode"
          @click="changeContent"
        />
      </div>
      <div>
        <SvgIcon
          style="margin-right: 6px"
          size="13"
          name="summary"
          @click="showModal(repeatModalRef)"
        />
        <NButton class="xjcc" text @click="showModal(repeatModalRef)">
          小结查重
        </NButton>

        <div v-show="!showActions" style="display: flex; align-items: center">
          <div class="btn">
            <!--   <SvgIcon style="margin-right: 6px" size="22" name="batch" />
            批量审批 -->
          </div>
        </div>
        <div v-show="showActions" class="batch">
          <NButton text @click="switchBatch()">
            <template #icon>
              <SvgIcon name="revoke" />
            </template>
            取消
          </NButton>

          <img
            class="btn-approval btn-left"
            src="@/assets/images/task/btn-not-pass.png"
            alt=""
            @click.stop="batchReject"
          >
          <SvgIcon size="24" name="vs" />
          <img
            style="margin-right:16px"
            class="btn-approval"
            src="@/assets/images/task/btn-pass.png"
            alt=""
            @click.stop="batchApproval"
          >
        </div>

        <n-popover
          :style="{ padding: '0px' }"
          style="width: 148px"
          :show-arrow="false"
          placement="bottom-start"
          trigger="click"
        >
          <template #trigger>
            <div class="icon-wrap">
              <SvgIcon size="20" name="more-blue" />
            </div>
          </template>
          <ul class="wrapper-header-action">
            <li @click="importHandler">
              <SvgIcon size="20" name="import" /><span style="margin-left: 5px">批量导入数据</span>
            </li>
            <li @click="exportHandler">
              <SvgIcon size="20" name="download" /><span
                style="margin-left: 5px"
              >导出待审数据</span>
            </li>
            <li>
              <SvgIcon size="20" name="download" /><span
                style="margin-left: 5px"
              >导出全部数据</span>
            </li>
            <li>
              <SvgIcon size="20" name="look" /><span style="margin-left: 5px">查看导入记录</span>
            </li>
          </ul>
        </n-popover>
      </div>
    </div>

    <div class="header_data">
      <DataHeader v-if="aa" ref="headerref" :has-color="true" />
    </div>
    <div class="wrapper-settings">
      <div>
        <div @click="changesort('submit_date_timestamp')">
          <span>提报时间排序</span><SvgIcon style="margin-left: 6px" name="sort" size="13" />
        </div>
        <div @click="changesort('similarity_score')">
          <span>相似度排序</span><SvgIcon style="margin-left: 6px" name="sort" size="13" />
        </div>
        <div @click="changesort('field1')">
          <span>提报人排序</span><SvgIcon style="margin-left: 6px" name="sort" size="13" />
        </div>
      </div>
      <div style="width: 3vw">
        <!-- <SvgIcon name="magnifying-1" size="18" style="margin-right: 8px" />
        <SvgIcon
          style="cursor: pointer"
          size="18"
          name="column"
          @click="showModal(customTabelRef)"
        /> -->
      </div>
    </div>
    <div ref="scrollContainer" :class="tableData.length > 4 ? 'cotnet_wrapeer' : 'cotnet_wrapeertwo'" @scroll="checkBottom">
      <div
        v-for="(sitem, sindex) in tableData"
        :key="sindex"
        class="data_wrapper"
        :style="
          sitem.length == 1
            ? { width: '25%' }
            : sitem.length == 2
              ? { width: '50%' }
              : sitem.length == 3
                ? { width: '75%' }
                : {}
        "
      >
        <div
          v-for="(item, index) in sitem"
          :key="index"
          class="item"
          :style="
            sitem.length == 1
              ? { margin: '0 4% 0 4%' }
              : sitem.length == 2
                ? { margin: '0 2% 0 2%' }
                : sitem.length == 3
                  ? { margin: '0 1.2% 0 1.2%' }
                  : {}
          "
        >
          <div class="top">
            <div
              class="img"
              :style="
                item.serverThumbnailUrl != null
                  ? `background:url(${item.serverThumbnailUrl});background-size:100% 100%;background-repeat: no-repeat;`
                  : `background:url(${item.imgUrl});background-size:100% 100%;background-repeat: no-repeat;`
              "
              @click="goDetail(item)"
            >
              <div v-if="item.similarityscore != -1" class="percent">
                <SvgIcon size="30" :name="item.similarityscore == 100 ? 'error_tag' : 'tag'" />
                <div class="val">
                  {{ `${item.similarityscore}%` }}
                </div>
              </div>
            </div>
            <div v-show="item.states == 2" class="check_box">
              <n-checkbox
                size="medium"
                label=" "
                :checked="item.showcheck"
                @click="handleCheck(item, item.showcheck)"
              />
            </div>
            <div class="content" @click="goDetail(item)">
              <div class="title">
                <n-ellipsis style="max-width: 100%">
                  任务ID：{{ item.fromtaskid }}
                </n-ellipsis>
              </div>
              <div class="date">
                <n-ellipsis style="max-width: 100%">
                  {{ item.fromuptime }}
                </n-ellipsis>
              </div>
              <div class="tag_box">
                <div
                  v-for="index in 2"
                  :key="index"
                  class="tag_item"
                  :style="
                    index == 2 || item.states == 3
                      ? 'color:#02C984'
                      : item.states == 2
                        ? 'color: #fe9800;background:#f7eac075'
                        : item.states == 5
                          ? 'color:#FF4E4F;background:#f7c0c06b'
                          : 'color:#02C984'
                  "
                >
                  {{
                    index == 1
                      ? item.states == 3
                        ? "通过"
                        : item.states == 2
                          ? "待审核"
                          : item.states == 5
                            ? "不通过"
                            : ""
                      : item.fromusername
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div
              v-show="item.states != 2"
              class="resovle_action"
              @click="goDetail(item)"
            >
              查看
            </div>
            <div
              v-show="item.states == 2"
              class="resovle_action"
              @click="actionHandler({ key: 'approval' }, item)"
            >
              通过
            </div>
            <div
              v-show="item.states == 2"
              class="reject_action"
              @click="actionHandler({ key: 'reject' }, [item])"
            >
              不通过
            </div>
          </div>
        </div>
      </div>
    </div>
    <NotPassed ref="notPassModalRef" @success="notpass" />
    <RepeatModal
      ref="repeatModalRef"
      @reject="repeatBatchReject"
      @viewrepeat="showModal(repeatTaskTableModalRef)"
    />
    <RepeatTaskTableModal ref="repeatTaskTableModalRef" />
  </div>
</template>

<style scoped lang="less">
.wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;
  margin-left: 16px;
     margin-right: 16px;
  width: 100%;
  background: #fff;
  padding: 0px 24px 24px 24px;
  .btn-approval {
    width: 68px;
    height: 28px;
    cursor: pointer;
  }

  .btn-left {
    margin-left: 16px;
  }
  .icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(80, 122, 253, 0.1);
    border-radius: 8px;
    cursor: pointer;
  }
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 64px;
    width: 100%;
    div {
      display: flex;
      align-items: center;
    }

    .xjcc {
      font-weight: bold;
      color: #507afd;
      margin-right: 20px;
    }

    .title {
      color: #507afd;
      font-weight: bold;
      font-size: 14px;
      margin-left: 8px;
    }

    .btn {
       width: 163px;
    height: 27px;
    background: url(/src/assets/images/pocitypass.png) no-repeat;
    background-size: 100% 100%;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
     margin-right: 16px;
    cursor: pointer;
    }

    .more {
      width: 30px;
      height: 30px;
      line-height: 30px;
      opacity: 0.1;
      background: linear-gradient(144deg, #73a7f9 0%, #3e6ef1 96%);
      border-radius: 8px;
    }

    &-font {
      font-size: 20px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 600;
      color: #0d0b22;
      margin-right: 8px;
    }

    &-action {
      padding: 8px;

      li {
        height: 32px;
        line-height: 32px;
        cursor: pointer;

        &:hover {
          background-color: #f3f8ff;
        }
      }
    }
  }
  &-settings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0px;
    > div {
      display: flex;

      //  justify-content: space-between;
      //width: 20vw;
      > div {
        cursor: pointer;
        margin-right: 30px;
        font-size: 13px;
        height: 18px;
        line-height: 18px;
        /* font-family: PingFang SC, PingFang SC-Regular; */
        font-weight: 600;
        text-align: left;
        color: #666666;
        line-height: 0.88rem;
      }
    }
  }
  .header_data {
    width: 100%;
  }
  .data_wrapper {
    // padding-right: 10px;
    display: flex;
    //box-sizing: border-box;
    flex-flow: row wrap;
    align-items: center;
    // justify-content: flex-start;
    // justify-content: space-between;
    // flex: 1;
    .item {
      flex: 1;
      width: 23%;
      margin-left: 2.3%;
      height: 7rem;

      background: url("@/assets/images/cardbg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // border: 0.075rem solid #e8e8e8;
      border-radius: 0.18rem;
      padding: 0.5rem 0.625rem;
      // margin-right: 20px;
      margin: 0 1% 0 1%;
      margin-bottom: 1rem;
      cursor: pointer;
      .top {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-start;
        height: 75%;
        border-bottom: 0.05rem solid #e8e8e8;
        position: relative;
        .img {
          //width: 35%;

          width: 5.25rem;
          height: 3.43rem;
          // height: auto;
          object-fit: cover;
          border-radius: 0.18rem;
          position: relative;
        }
        .check_box {
          position: absolute;
          left: 0.25rem;
          top: 0.6rem;
        }
        .content {
          margin-left: 0.8rem;
          width: calc(100% - 6rem);
          .title,
          .date {
            font-size: 11px;
            font-weight: 500;
            text-align: left;
            color: #323233;
            line-height: 1rem;
          }
        }
        .tag_box {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: flex-start;
          margin-top: 0.5rem;
          .tag_item {
            min-width: 2rem;
            min-height: 0.875rem;
            font-size: 0.52rem;
            padding: 0.0625rem 0.18rem;
            font-weight: bolder;
            text-align: left;
            //   color: #507afd;
            line-height: 0.875rem;
            letter-spacing: 0.006rem;
            margin-right: 0.2rem;
            // opacity: 0.1;
            background: #c0f7ec69;
            border-radius: 0.125rem;
            text-align: center;
            white-space: nowrap;
          }
        }
      }
      .bottom {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        margin-top: 0.375rem;
        div {
          cursor: pointer;
        }
        .reset_action {
          font-size: 12px;
          font-weight: bolder;
          text-align: left;
          color: #666666;
        }
        .resovle_action {
          font-size: 12px;
          font-weight: bolder;
          text-align: left;
          color: #507afd;
          line-height: 1rem;
          margin-left: 0.9rem;
        }
        .reject_action {
          font-size: 12px;
          font-weight: bolder;
          text-align: left;
          color: #ff4e4f;
          line-height: 1rem;
          margin-left: 0.9rem;
        }
      }
    }
  }
  .cotnet_wrapeer {
    width: 100%;
    height: 67vh;
    //padding-right: 10px; /* 右侧内边距 */
    overflow: hidden; /* 默认隐藏滚动条 */
  }  .cotnet_wrapeertwo {
    width: 100%;
    height: 67vh;
    //padding-right: 10px; /* 右侧内边距 */
    overflow: hidden; /* 默认隐藏滚动条 */
  }
  .cotnet_wrapeer:hover {
    overflow: auto;
    width: calc(100% + 5px);
  }
  .percent {
      position: absolute;
      text-align: center;
      z-index: 3;
     right: 2px;
      top: -6px;
      color: #fff;

      .val {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
        color: #ffffff;
        line-height: 24px;
      }
    }
  /* 定义滚动条的宽度及背景颜色 */
  ::-webkit-scrollbar {
    position: fixed;
    width: 5px; /* for vertical scrollbars */
    height: 10px; /* for horizontal scrollbars */
    background: #f1f1f1;
  }

  /* 定义滚动条轨道的样式 */
  ::-webkit-scrollbar-track {
    background-color: #e1e1e1;
    border-radius: 10px; /* 圆角 */
  }

  /* 定义滚动条滑块的样式 */
  ::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px; /* 圆角 */
  }

  /* 滑块hover时的样式 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
  :deep(.n-checkbox .n-checkbox-box) {
    width: 0.85rem;
    height: 0.85rem;
  }
}
</style>
