<script lang="ts" setup>
import { computed, onUnmounted, reactive, ref, unref, watch } from 'vue'
import { useDialog } from 'naive-ui'
import ConfrimModal from '../modal/ConfrimModal.vue'
import BatchModal from '../modal/BatchModal.vue'
import TaskTable from './TaskTable.vue'
import PictureTable from './PictureTable.vue'
import { useTask } from '@/store/modules/task'
import { approval } from '@/api/task/task'
import type { ApprovalParam, PictureSortParam } from '/#/api'
import { getTaskDetailInfo, getTaskDetailPictureList } from '@/api/work/work'

const batch = ref(false)
const selectItems = ref<any[]>([])
const sortBy: PictureSortParam = {
  orderbyname: 'asc',
  orderbyvalue: 'fromuptime',
}

function setBatch(value: boolean) {
  batch.value = value
  if (value === false) {
    selectItems.value.forEach(item => item.checked = false)
    selectItems.value.length = 0
  }
}

function onCheckChange(checked: any, item: any) {
  const index = selectItems.value.indexOf(item)
  item.checked = checked

  if (index === -1 && checked)
    selectItems.value.push(item)

  else
    selectItems.value.splice(index, 1)
}

const showActions = computed(() => {
  return selectItems.value.length > 0 && batch
})

const dialog = useDialog()

function handleConfirm() {
  dialog.info({
    title: '确认提示',
    content: '确认给该任务审批为【通过】吗?',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      approvalHandler()
    },
    onNegativeClick: () => { },
  })
}

const taskpagination = reactive({
  pageNo: 1,
  pageSize: 10,
})
const taskStore = useTask()
const overTask = ref<any>(null)
const taskDetailInfo = ref<any>({})
const taskDetailPictureList = ref<any[]>([])

function approvalHandler() {
  let ids: any[] = []

  if (batch.value === true)
    ids = selectItems.value.map(item => item.id)
  else if (overTask.value !== null)
    ids = [overTask.value.id]

  const param: ApprovalParam = {
    formid: '',
    taskId: '',
    approvd: true,
    taskComment: '',
  }

  approval(param)
}

function rejectHandler(idOrDesc: string, isOther: boolean) {
  let ids: any[] = []

  if (batch.value === true)
    ids = selectItems.value.map(item => item.id)
  else if (overTask.value !== null)
    ids = [overTask.value.id]

  const param: ApprovalParam = {
    formid: '',
    taskId: '',
    approvd: false,
    taskComment: '',
  }

  if (isOther)
    param.taskComment = idOrDesc
  else
    param.taskComment = idOrDesc

  approval(param)
}

const confrimModalRef = ref(null)
const batchModalRef = ref(null)

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

function forwardHandler() {
  taskStore.forward()
}

function backHandler() {
  taskStore.back()
}

watch(() => taskStore.activeId, async (newValue, oldValue) => {
  const packageid = taskStore.getPackageid
  const taskId = taskStore.getActiveId
  taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)

  const res = await getTaskDetailPictureList(packageid, taskId, { ...taskpagination, ...sortBy })
  taskDetailPictureList.value = res.data
})

const currentTaskId = computed(() => {
  const index = taskStore.getCurrentIndex
  return taskStore.getApprovalList[index]?.formid || ''
})

function overTaskHandelr(item: any) {
  // TODO：如果此item没有判定过真假，显示快速审批操作
  overTask.value = item
}

function leaveTaskHandler() {
  overTask.value = null
}

onUnmounted(() => {
  taskStore.reset()
})
</script>

<template>
  <div class="wrapper">
    <div class="wrapper-header">
      <div class="left">
        <span class="font">任务ID：{{ currentTaskId }}</span>
        <SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
        <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
      </div>
      <div class="right">
        <div v-show="!showActions" class="btn" @click="setBatch(true)">
          <SvgIcon style="margin-right: 6px;" size="14" name="tf" />
          批量审批
        </div>
        <div v-show="showActions" class="batch">
          <n-button text @click="setBatch(false)">
            <template #icon>
              <SvgIcon name="revoke" />
            </template>
            返回
          </n-button>
          <div style="cursor: pointer;margin-left: 16px;" @click="showModal(confrimModalRef)">
            <SvgIcon width="64" height="28" name="a1" />
          </div>
          <SvgIcon size="24" name="vs" />
          <div style="cursor: pointer;" @click="handleConfirm">
            <SvgIcon width="64" height="28" name="a2" />
          </div>
        </div>
        <SvgIcon name="floder" size="30" />
      </div>
    </div>
    <div class="wrapper-detail">
      <div class="left">
        <img style="overflow: hidden;" src="../../../assets/images/test.png">
      </div>
      <div class="right">
        <n-scrollbar style="max-height: 100%;">
          <div class="header">
            <span>相似图片(9)</span>
            <SvgIcon style="margin-right: 20px;cursor: pointer;" name="max" size="24" @click="showModal(batchModalRef)" />
          </div>
          <div class="list">
            <div v-for="(item, index) in taskDetailPictureList" :key="index" class="item">
              <div style="overflow: hidden;">
                <img src="../../../assets/images/test.png">
              </div>
              <div class="check">
                <n-checkbox
                  v-show="batch" v-model:checked="item.checked" @click.stop
                  @update:checked="onCheckChange($event, item)"
                />
              </div>
              <div class="percent">
                96%
              </div>
            </div>
          </div>
        </n-scrollbar>
      </div>
    </div>
    <div class="info-header">
      <div class="title">
        填报信息
      </div>
      <SvgIcon size="12" name="collapse" />
    </div>
    <n-tabs type="line" animated>
      <n-tab-pane name="task-info" tab="任务信息">
        <TaskTable :data="taskDetailInfo" />
      </n-tab-pane>
      <n-tab-pane name="picture-info" tab="图片信息">
        <PictureTable :data="taskDetailInfo" />
      </n-tab-pane>
      <n-tab-pane name="history" tab="历史审查" />
    </n-tabs>
    <ConfrimModal ref="confrimModalRef" @commit="rejectHandler" />
    <BatchModal ref="batchModalRef" />
  </div>
</template>

<style lang="less" scoped>
.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
  margin-left: 16px;
  padding: 16px 16px 0px 16px;
  background: #FFF;
  border-radius: 3px;
  border: 1px solid rgb(239, 239, 245);
  height: calc(100vh - 88px);
  overflow-y: scroll;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
    box-sizing: border-box;
    border-radius: 3px;
    margin-bottom: 16px;
    width: 100%;
    height: 36px;

    .left {
      display: flex;
      align-items: center;

      .forward {
        cursor: pointer;
        margin-left: 16px;
      }

      .back {
        cursor: pointer;
        margin-left: 6px;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .btn {
        width: 118px;
        height: 36px;
        background: linear-gradient(135deg, #5b85f8, #3c6cf0);
        border-radius: 17px;
        box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.30);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
        margin-right: 6px;
        cursor: pointer;
      }

      .batch {
        display: flex;
        align-items: center;
      }
    }

    .font {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      line-height: 25px;
      margin-left: 12px;
    }
  }

  &-detail {
    display: flex;
    height: calc((100vh - 88px - 72px)/2);

    .left {
      flex: 0.6;

      img {
        max-height: 100%;
        width: auto;
      }
    }

    .right {
      flex: 0.5;
      background: #fafafa;
      border-radius: 8px;
      margin-left: 20px;
      padding: 24px;

      .header {
        display: flex;
        justify-content: space-between;
        font-size: 17px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 16px;
      }

      .list {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        flex-shrink: 0;
      }

      .item {
        flex-basis: calc((100% - 48px) / 3);
        box-sizing: border-box;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        margin: 0px 16px 27px 0px;

        .check {
          position: absolute;
          z-index: 5;
          left: 6px;
          top: 4px;
        }
      }

      .percent {
        position: absolute;
        text-align: center;
        width: 35px;
        height: 18px;
        opacity: 0.9;
        background: #6f92fd;
        border-radius: 6px 0px 6px 0px;
        z-index: 5;
        right: 12px;
        top: 2px;
        color: #FFF;
      }
    }
  }

  .info-header {
    display: flex;
    padding: 16px 0px;
    align-items: center;

    .title {
      display: flex;
      align-items: center;
      margin-right: 8px;

      &:before {
        content: '';
        width: 4px;
        height: 18px;
        background: #507afd;
        border-radius: 3px;
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
}
</style>
