<template>
  <div
    class="container"
    :class="{
      'slide-out': draft,
      'slide-in': !draft
    }"
  >
    <a-space direction="vertical" :size="8" fill>
      <a-card class="general-card">
        <a-page-header
          :style="{ background: 'var(--color-bg-2)' }"
          @back="redirectTaskListPage"
        >
          <template #title>
            {{ detail.task?.name
            }}<span style="color: rgb(var(--danger-6))">{{
              props.draft ? '（草稿）' : ''
            }}</span>
          </template>
          <template #subtitle>
            <a-space :size="1" align="center" class="project-detail-nav">
              <template #split>
                <a-divider direction="vertical" />
              </template>
              <span>{{ props.taskId }}</span>
              <span v-for="item in detail.task?.works" :key="item.id">
                <a-button
                  type="primary"
                  size="mini"
                  @click="showWorkModal(item.id)"
                >
                  {{ item.name }}
                </a-button>
              </span>
            </a-space>
          </template>
          <a-space :size="70">
            <template #split>
              <a-divider direction="vertical" />
            </template>
            <a-space align="center">
              <icon-font type="my-handler" :size="50" />
              <a-space direction="vertical" :size="2">
                <a-typography-text>{{
                  detail.task?.handler_name
                }}</a-typography-text>
                <a-typography-text type="secondary">主责人</a-typography-text>
              </a-space>
            </a-space>
            <a-space align="center">
              <icon-font type="my-progressing" :size="50" />
              <a-space direction="vertical" :size="2">
                <a-typography-text
                  >{{ detail.task?.progress }}%</a-typography-text
                >
                <a-typography-text type="secondary">当前进度</a-typography-text>
              </a-space>
            </a-space>
            <a-space align="center">
              <icon-font type="my-start-time" :size="50" />
              <a-space direction="vertical" :size="2">
                <a-typography-text>{{
                  detail.task?.begin_at
                }}</a-typography-text>
                <a-typography-text type="secondary">开始时间</a-typography-text>
              </a-space>
            </a-space>
            <a-space align="center">
              <icon-font type="my-end-time" :size="50" />
              <a-space direction="vertical" :size="2">
                <a-typography-text>{{ detail.task?.end_at }}</a-typography-text>
                <a-typography-text type="secondary"
                  >预计结束时间</a-typography-text
                >
              </a-space>
            </a-space>
            <a-space align="center">
              <icon-font type="my-plan-date" :size="45" />
              <a-space direction="vertical" :size="2">
                <a-typography-text>{{
                  detail.task?.completed_at || '-'
                }}</a-typography-text>
                <a-typography-text type="secondary">完成时间</a-typography-text>
              </a-space>
            </a-space>
          </a-space>
        </a-page-header>
      </a-card>
      <a-row style="flex-flow: nowrap" :gutter="8">
        <a-col flex="auto">
          <a-scrollbar
            style="
              height: calc(100vh - 300px);
              overflow: auto;
              background: var(--color-bg-2);
            "
            class="item-container"
          >
            <a-card class="general-card" title="基本信息">
              <a-row style="padding: 15px 20px" :gutter="[10, 10]">
                <a-col :span="8">
                  <div class="editor-descriptions-container">
                    <div
                      class="editor-descriptions-label"
                      style="min-width: inherit"
                    >
                      创建人：
                    </div>
                    <div class="editor-descriptions-content">
                      {{ detail.task?.creator_name }}
                    </div>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="editor-descriptions-container">
                    <div
                      class="editor-descriptions-label"
                      style="min-width: inherit"
                    >
                      创建日期：
                    </div>
                    <div class="editor-descriptions-content">
                      {{ detail.task?.created_at }}
                    </div>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="editor-descriptions-container">
                    <div
                      class="editor-descriptions-label"
                      style="min-width: inherit"
                    >
                      修改日期：
                    </div>
                    <div class="editor-descriptions-content">
                      {{ detail.task?.updated_at }}
                    </div>
                  </div>
                </a-col>
                <a-col :span="24">
                  <div
                    class="editor-descriptions-container"
                    style="align-items: flex-start"
                  >
                    <div
                      class="editor-descriptions-label"
                      style="min-width: inherit"
                    >
                      任务描述：
                    </div>
                    <div
                      class="editor-descriptions-content"
                      style="height: auto"
                    >
                      <HoverEditorDetail
                        v-model="description"
                        placeholder="任务描述："
                        :old-value="description"
                        :components-type="ComponentsType.TEXTAREA"
                        @modify="oldValue => modifyDesc(oldValue)"
                      />
                    </div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
            <checkersPage
              :account-list="accountList"
              :task-id="props.taskId"
              :draft="props.draft"
            ></checkersPage>
            <outcome-layout
              :account-list="accountList"
              :task-id="props.taskId"
              :draft="props.draft"
            ></outcome-layout>
          </a-scrollbar>
        </a-col>
        <a-col flex="400px">
          <a-card class="general-card log-card" title="任务动态">
            <a-scrollbar style="height: calc(100vh - 418px); overflow: auto">
              <a-list
                :bordered="false"
                max-height="calc(100vh - 428px)"
                style="min-height: 500px"
              >
                <a-list-item
                  v-for="(item, index) in taskLogs"
                  :key="index"
                  action-layout="vertical"
                >
                  <template #actions> {{ item.ts }} </template>
                  <a-list-item-meta :title="item.creator_name">
                    <template #avatar>
                      <a-avatar
                        shape="square"
                        :style="{ backgroundColor: '#14C9C9' }"
                      >
                        <icon-font type="my-log-bell" />
                      </a-avatar>
                    </template>
                    <template #description>
                      <div style="font-size: 12px" v-html="item.content"></div>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-scrollbar>
            <template #actions>
              <Page
                :page="page"
                :simple="true"
                @change="logsPageChangehandle"
              />
            </template>
          </a-card>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import { IconFontUrl, ComponentsType } from '@/enums/api'
import { Icon, Message } from '@arco-design/web-vue'
import { useEmitt } from '@/logics/mitt/useEmitt'
import { ref, onMounted, reactive, PropType } from 'vue'
import {
  getPlanLogs,
  getPlanTaskDetail,
  modifyPlanTask
} from '@/api/project/plan-task'
import { PlanLogList, TaskDetailResParams } from '@/types/plan-task'
import { useDebounceFn } from '@vueuse/core'
import { useRouter } from 'vue-router'
import Page from '@/components/page/index.vue'
import usePage, { IPage } from '@/components/page/index'
import HoverEditorDetail from '@/components/hover-editor-detail/index.vue'

import outcomeLayout from './outcome-layout.vue'
import checkersPage from './checkers-page.vue'

const { page } = usePage()
const IconFont = Icon.addFromIconFontCn({
  src: IconFontUrl.URL
})
const props = defineProps({
  draft: {
    type: Boolean,
    required: true,
    default: () => {
      return false
    }
  },
  taskId: {
    type: String,
    required: true
  },
  accountList: {
    type: Array as PropType<{ id: string; name: string }[]>,
    required: true
  }
})

const router = useRouter()
const { emitter } = useEmitt()
const description = ref()
const taskLogs = ref<PlanLogList[]>([])
const redirectTaskListPage = () => {
  router.push({
    name: 'ProjectPlan',
    params: { prjId: detail.task?.prj_id }
  })
  emitter.emit('redirectTaskListPage')
}

const detail = reactive<{ task?: TaskDetailResParams }>({
  task: undefined
}) //

const getDetail = async () => {
  if (props.taskId) {
    detail.task = await getPlanTaskDetail({
      draft: props.draft,
      task_id: props.taskId
    })
    description.value = detail.task?.description || ''
  }
}

// 获取任务动态日志
const getLogs = async () => {
  if (props.taskId) {
    const { list, total } = await getPlanLogs({
      page_no: page.pageIndex,
      page_size: page.pageSize,
      prj_id: detail.task?.prj_id,
      task_id: props.taskId
    })
    page.total = total
    taskLogs.value = list
  }
}

/**
 * 分页变化事件
 * @param argPage
 */
const logsPageChangehandle = (argPage: IPage): void => {
  page.pageIndex = argPage.pageIndex
  page.pageSize = argPage.pageSize
  getLogs().then(() => console.log('获取日志列表'))
}

/**
 * 显示工作任务对话框
 */
const showWorkModal = (id: string) => {
  emitter.emit('show_work_modal', id)
}

const modifyDesc = async (oldValue?: string) => {
  console.log(oldValue)
  try {
    await modifyPlanTask({
      draft: props.draft,
      task_id: props.taskId!,
      description: description.value
    })
    Message.success('修改成功！')
  } catch (e) {
    getDetail()
  }
}

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
  name: 'get_task_log',
  callback: () => {
    getLogs()
  }
})

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
  name: 'get_task_detail',
  callback: () => {
    getDetail()
  }
})

const debounceChange = useDebounceFn(modifyDesc, 1500)

onMounted(async () => {
  await getDetail()
  getLogs()
})
</script>

<script lang="ts">
export default {
  name: 'TaskDetail'
}
</script>

<style scoped lang="less">
.container {
  padding: 20px 20px 20px 20px;
  .general-card {
    :deep(.arco-card-header) {
      padding: 20px 20px 0 20px;
    }
    .item-container {
      padding-top: 20px;
      :deep(.arco-descriptions-item-label) {
        font-weight: normal;
      }
    }
    :deep(.arco-card-actions) {
      justify-content: center;
      margin-top: 0;
    }
  }
  .log-card {
    :deep(.arco-card-body) {
      padding-right: 0;
    }
    :deep(.arco-card-actions) {
      justify-content: center;
      margin-top: 0;
    }
  }
}
:deep(.arco-page-header) {
  padding: 16px 0 0 0;
}
:deep(.arco-page-header-wrapper) {
  padding-left: 0;
}
:deep(.arco-page-header-content) {
  padding: 16px 0 0 0;
  border: none;
  .arco-tabs {
    padding-top: 10px;
    padding-left: 5px;
    .arco-tabs-nav-type-line .arco-tabs-tab {
      margin: 0 20px;
    }
  }
}
:deep(.arco-typography-secondary) {
  color: var(--color-text-3);
}
:deep(.arco-table-th) {
  background: none;
}
:deep(.arco-list-item-action) {
  margin-left: 56px;
  color: var(--color-text-3);
  font-size: 12px;
}
div.arco-typography,
p.arco-typography {
  margin-bottom: 0;
}
:deep(.arco-page-header-title) {
  font-size: 16px;
}
:deep(.arco-page-header-subtitle) {
  font-size: 12px;
}
.arco-textarea-wrapper:focus-within,
.arco-textarea-wrapper.arco-textarea-focus {
  border-color: rgb(var(--primary-6)) !important;
}
.arco-textarea-wrapper,
.arco-textarea-wrapper.arco-textarea-focus {
  // border: 1px solid var(--color-fill-4);
  border: 1px solid var(--color-fill-4);
}

@keyframes in {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes out {
  0% {
    transform: translateX(120%);
  }

  100% {
    transform: translateX(0%);
  }
}
.slide-in {
  animation: in 0.5s;
}
.slide-out {
  animation: out 0.5s;
}
</style>
