<template>
  <div class="container">
    <a-row style="flex-flow: nowrap" :gutter="10">
      <a-col flex="auto">
        <a-scrollbar
          style="
            height: calc(100vh - 150px);
            overflow: auto;
            background: var(--color-bg-2);
          "
        >
          <a-card class="general-card">
            <div class="item-container">
              <a-space :size="16" direction="vertical" fill>
                <a-alert :show-icon="false">基本信息</a-alert>
                <a-row
                  style="width: 90%; margin: 0 auto; padding: 0px 0px 20px 0px"
                  :gutter="[20, 20]"
                >
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        项目名称：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        <HoverEditorDetail
                          v-model="modifyParams.name"
                          placeholder="项目名称"
                          :not-allow-null="true"
                          :components-type="ComponentsType.STRINGINPUT"
                          @modify="modifyDetail"
                        />
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        项目编码：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        {{ detail.prj?.id }}
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        所在地区：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        <HoverEditorDetail
                          v-model="modifyParams.region_id"
                          :options="regionTreeData"
                          placeholder="所在地区"
                          :not-allow-null="true"
                          :components-type="ComponentsType.CASCADER"
                          @modify="modifyDetail"
                        />
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        项目类型：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        <HoverEditorDetail
                          v-model="modifyParams.type_id"
                          :options="prjTypeTreeData"
                          placeholder="项目类型"
                          :un-check-strictly="true"
                          :not-allow-null="true"
                          :components-type="ComponentsType.CASCADER"
                          @modify="modifyDetail"
                        />
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        当前阶段：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        <a-tag
                          v-for="item in selectedPhase(
                            detail.prj?.phase_id,
                            prjPhaseList
                          )"
                          :key="item.id"
                          :color="item.color"
                          >{{ item.name }}</a-tag
                        >&nbsp;&nbsp;&nbsp;
                        <a-progress
                          :percent="
                            !detail.prj?.progress
                              ? 0
                              : detail.prj?.progress / 100
                          "
                          :style="{ width: '50%' }"
                          size="large"
                        />
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        预计交付时间：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        <HoverEditorDetail
                          v-model="modifyParams.deliver_at"
                          placeholder="预计交付时间"
                          :not-allow-null="true"
                          :components-type="ComponentsType.DATEPICKER"
                          @modify="modifyDetail"
                        />
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        创建日期：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        {{ detail.prj?.created_at }}
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        项目负责人：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        <HoverEditorDetail
                          v-model="modifyParams.leader_id"
                          placeholder="项目负责人"
                          :options="accountList"
                          :not-allow-null="true"
                          :components-type="ComponentsType.SELECT"
                          @modify="modifyDetail"
                        />
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        商务负责人：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        <HoverEditorDetail
                          v-model="modifyParams.bizman_id"
                          placeholder="商务负责人"
                          :options="accountList"
                          :not-allow-null="true"
                          :components-type="ComponentsType.SELECT"
                          @modify="modifyDetail"
                        />
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        启动日期：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        {{ detail.prj?.started_at }}
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div
                      class="editor-descriptions-container"
                      style="align-items: flex-start"
                    >
                      <div style="" class="editor-descriptions-label">
                        项目简介：
                      </div>
                      <div
                        class="editor-descriptions-content"
                        style="height: auto"
                      >
                        <HoverEditorDetail
                          v-model="modifyParams.intro"
                          placeholder="项目简介"
                          :components-type="ComponentsType.TEXTAREA"
                          @modify="modifyDetail"
                        />
                      </div>
                    </div>

                    <!-- <div style="" class="editor-descriptions-container"> -->
                    <!-- <div style="" class="editor-descriptions-label">项目简介：</div> -->
                    <!-- <div class="editor-descriptions-content" style="">
             
             <HoverEditorDetail
                    v-model="modifyParams.intro"
                    placeholder="项目简介"
                    :components-type="ComponentsType.TEXTAREA"
                    @modify="modifyDetail"
                  /> -->
                    <!-- </div> -->
                    <!-- </div> -->
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        合同信息：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        <HoverEditorDetail
                          v-if="isAuthContract"
                          v-model="modifyParams.contract_id"
                          placeholder="合同信息"
                          :options="contractList"
                          :components-type="ComponentsType.SELECT"
                          @modify="(v:any) => modifyCustomer(v)"
                        />
                        <template v-else>
                          {{ detail.prj?.contract_name }}</template
                        >
                      </div>
                    </div>
                  </a-col>
                </a-row>
                <a-alert :show-icon="false">客户信息</a-alert>
                <a-row
                  style="width: 90%; margin: 0 auto; padding: 0px 0px 20px 0px"
                  :gutter="[20, 20]"
                >
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        客户名称：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        <HoverEditorDetail
                          v-if="isAuthCustomer"
                          v-model="modifyParams.customer_id"
                          placeholder="客户信息"
                          :options="customerList"
                          :components-type="ComponentsType.SELECT"
                          @modify="modifyCustomer"
                        />
                        <template v-else>
                          {{ detail.prj?.customer_name }}</template
                        >
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        客户编码：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        {{ detail.prj?.customer_id }}
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        所在地区：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        {{ detail.prj?.customer_region_name }}
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        客户级别：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        {{ detail.prj?.level_name }}
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div style="" class="editor-descriptions-container">
                      <div style="" class="editor-descriptions-label">
                        商务负责人：
                      </div>
                      <div class="editor-descriptions-content" style="">
                        {{ detail.prj?.customer_bizman_name }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
                <a-alert :show-icon="false">项目组成员</a-alert>
                <a-table
                  class="member-table"
                  :columns="memberTableColumns"
                  :data="memberList"
                  :table-layout-fixed="true"
                  :pagination="false"
                  :bordered="{
                    cell: true,
                    headerCell: true,
                    wrapper: true
                  }"
                  :hoverable="false"
                  @row-click="selectedMemberHandler"
                >
                  <template #footer>
                    <!-- v-if="
                  [PhaseItem.NEW, PhaseItem.APPLY_CREATE].includes(
                    detail.prj?.phase_id
                  )
                " -->
                    <a-button
                      v-permission="[Api.PROJECT_MEMBER_ADD]"
                      type="dashed"
                      long
                      @click="preAddMember"
                    >
                      <IconPlus />项目成员
                    </a-button>
                    <!-- <a-button v-else type="dashed" long @click="preAddMember">
                <IconPlus />项目组成员申请
              </a-button> -->
                  </template>
                  <template #index="{ rowIndex }">
                    {{ rowIndex + 1 }}
                  </template>
                  <template #account="{ record }">
                    <a-select
                      v-model="record.account_id"
                      placeholder="请选择项目成员账号"
                      :disabled="!record.isCreated"
                      :style="{ width: '100%' }"
                      :allow-clear="false"
                      :bordered="!!record.isCreated"
                      size="large"
                      @change="modifyMemberChange(record)"
                    >
                      <template #arrow-icon>
                        <icon-down v-if="record.isCreated" />
                      </template>
                      <template #label="{ data }">
                        <span style="color: rgb(var(--gray-10))">{{
                          data.label
                        }}</span>
                      </template>
                      <a-option
                        v-for="account in accountList"
                        :key="account.id"
                        :disabled="!allowedAccountList.includes(account.id)"
                        :value="account.id"
                      >
                        {{ account.name }}
                      </a-option>
                    </a-select>
                  </template>
                  <template #role="{ record }">
                    <a-select
                      v-model="record.role_id"
                      placeholder="请选择项目成员角色"
                      :style="{ width: '100%' }"
                      :allow-clear="false"
                      :bordered="!!record.isCreated"
                      size="large"
                      @change="modifyMemberChange(record)"
                    >
                      <template #arrow-icon>
                        <icon-down />
                      </template>
                      <template #label="{ data }">
                        <span style="color: rgb(var(--gray-10))">{{
                          data.label
                        }}</span>
                      </template>
                      <a-option
                        v-for="role in roleList"
                        :key="role.id"
                        :value="role.id"
                      >
                        {{ role.name }}
                      </a-option>
                    </a-select>
                  </template>
                  <template #memo="{ record }">
                    <a-input
                      v-if="record.isCreated"
                      v-model="record.memo"
                      placeholder="说明信息"
                    />
                    <HoverEditorDetail
                      v-else
                      v-model="record.memo"
                      :old-value="record.memo"
                      placeholder="备注信息"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyMemberChange(record)"
                    />
                  </template>
                  <template #operater="{ record, rowIndex }">
                    <div v-if="record.isCreated" class="operate-text-button">
                      <a-button type="text" @click="confirmlMemberAdd(record)"
                        >确认添加</a-button
                      >
                      <a-divider direction="vertical" />
                      <a-button
                        type="text"
                        status="warning"
                        @click="cancelAddMember(rowIndex)"
                        >取消添加</a-button
                      >
                    </div>
                    <div v-else class="operate-text-button">
                      <!-- v-if="
                    [PhaseItem.NEW, PhaseItem.APPLY_CREATE].includes(
                      detail.prj?.phase_id
                    )
                  " -->
                      <a-popconfirm
                        content="确认删除该成员?"
                        type="warning"
                        @ok="removeMemberHandler(record, rowIndex)"
                      >
                        <a-button type="text" status="danger">删除</a-button>
                      </a-popconfirm>

                      <!-- <a-button v-else type="text" status="danger">申请删除</a-button> -->
                    </div>
                  </template>
                </a-table>
                <a-alert :show-icon="false">审核组成员</a-alert>
                <a-table
                  class="member-table"
                  :columns="checkerTableColumns"
                  :data="checkers"
                  :table-layout-fixed="true"
                  :pagination="false"
                  :bordered="{
                    cell: true,
                    headerCell: true,
                    wrapper: true
                  }"
                  :hoverable="false"
                  @row-click="selectedMemberHandler"
                >
                  <template #footer>
                    <!-- v-if="
                  [PhaseItem.NEW, PhaseItem.APPLY_CREATE].includes(
                    detail.prj?.phase_id
                  )
                " -->
                    <a-button
                      v-permission="[Api.PROJECT_INFO_SET_CHECKERS]"
                      type="dashed"
                      long
                      @click="preAddChecker"
                    >
                      <IconPlus />审核成员
                    </a-button>
                    <!-- <a-button v-else type="dashed" long @click="preAddMember">
                <IconPlus />项目组成员申请
              </a-button> -->
                  </template>
                  <template #index="{ rowIndex }">
                    {{ rowIndex + 1 }}
                  </template>
                  <template #account="{ record }">
                    <a-select
                      v-model="record.id"
                      placeholder="请选择审核成员账号"
                      :style="{ width: '100%' }"
                      :allow-clear="false"
                      :bordered="!!record.isCreated"
                      size="large"
                      @change="modifyCheckerChange(record)"
                    >
                      <template #arrow-icon>
                        <icon-down />
                      </template>
                      <template #label="{ data }">
                        <span style="color: rgb(var(--gray-10))">{{
                          data.label
                        }}</span>
                      </template>
                      <a-option
                        v-for="account in accountList"
                        :key="account.id"
                        :disabled="!allowedCheckers.includes(account.id)"
                        :value="account.id"
                      >
                        {{ account.name }}
                      </a-option>
                    </a-select>
                    <!-- <HoverEditorDetail
                v-else
                v-model="record.id"
                placeholder="审核成员账号"
                :options="accountList"
                :components-type="ComponentsType.SELECT"
              /> -->
                  </template>
                  <template #due_day="{ record }">
                    <a-input-number
                      v-if="record.isCreated"
                      v-model="record.due_day"
                      placeholder="超时时限"
                    />
                    <HoverEditorDetail
                      v-else
                      v-model="record.due_day"
                      style="width: 100%"
                      placeholder="超时时限"
                      :components-type="ComponentsType.NUMBERINPUT"
                      @modify="modifyCheckerChange(record)"
                    />
                  </template>
                  <template #operater="{ record, rowIndex }">
                    <div v-if="record.isCreated" class="operate-text-button">
                      <a-button type="text" @click="confirmlCheckerAdd(record)"
                        >确认添加</a-button
                      >
                      <a-divider direction="vertical" />
                      <a-button
                        type="text"
                        status="warning"
                        @click="cancelAddChecker(rowIndex)"
                        >取消添加</a-button
                      >
                    </div>
                    <div v-else class="operate-text-button">
                      <!-- v-if="
                    [PhaseItem.NEW, PhaseItem.APPLY_CREATE].includes(
                      detail.prj?.phase_id
                    )
                  " -->
                      <a-popconfirm
                        content="确认删除该成员?"
                        type="warning"
                        @ok="removeCheckerHandler(record, rowIndex)"
                      >
                        <a-button type="text" status="danger">删除</a-button>
                      </a-popconfirm>

                      <!-- <a-button v-else type="text" status="danger">申请删除</a-button> -->
                    </div>
                  </template>
                </a-table>
              </a-space>
            </div>
          </a-card>
        </a-scrollbar>
      </a-col>
      <a-col flex="400px">
        <a-card class="general-card log-card" title="项目动态">
          <a-scrollbar style="height: calc(100vh - 267px); overflow: auto">
            <a-list :bordered="false">
              <a-list-item
                v-for="(item, index) in prjLogs"
                :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>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick, PropType, computed } from 'vue'
import {
  Checker,
  Members,
  ModifyProjectReqParams,
  OverviewProjectResParams,
  ProjectLog
} from '@/types/project'
import {
  TableColumnData,
  TableData
} from '@arco-design/web-vue/es/table/interface'
import { selectedPhase } from '@/utils'
import HoverEditorDetail from '@/components/hover-editor-detail/index.vue'
import { ComponentsType, IconFontUrl, Project as Api } from '@/enums/api'
import {
  getProjectCheckers,
  getProjectLogs,
  modifyProject,
  setProjectCheckers
} from '@/api/project/info'
import {
  addMember,
  getMemberList,
  modifyMember,
  removeMember
} from '@/api/project/member'
import { DomainTree } from '@/types/domain'
import { Customer } from '@/types/customer'
import Message from '@arco-design/web-vue/es/message'
import { getMemberRoleList, getPrjTypeList } from '@/api/base/base'
import { useEmitt } from '@/logics/mitt/useEmitt'
import Page from '@/components/page/index.vue'
import usePage, { IPage } from '@/components/page/index'
import { Icon } from '@arco-design/web-vue'
import { getRegionTree } from '@/api/base/region'

const { page } = usePage()
const roleList = ref<{ id: string; name: string }[]>([])
const selectMemberIndex = ref()

const detail = reactive<{ prj?: OverviewProjectResParams }>({
  prj: undefined
}) // 客户详情

const props = defineProps({
  // detail: {
  //   type: Object as PropType<OverviewProjectResParams>,
  //   required: false
  // },
  prjId: {
    type: String,
    required: true
  },
  isAuthCustomer: {
    type: Boolean
  },
  isAuthContract: {
    type: Boolean
  },
  accountList: {
    type: Array as PropType<{ id: string; name: string }[]>,
    required: true
  },
  contractList: {
    type: Array as PropType<{ id: string; name: string }[]>,
    required: true
  },
  // prjTypeTreeData: {
  //   type: Array as PropType<DomainTree[]>
  // },
  prjPhaseList: {
    type: Array as PropType<{ id: string; name: string; color: string }[]>,
    required: true
  },
  customerList: {
    type: Array as PropType<Customer[]>,
    required: true
  }
})

const modifyParams = ref<ModifyProjectReqParams>({
  id: props.prjId
})

const memberTableColumns: TableColumnData[] = [
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index'
  },
  {
    title: '成员',
    dataIndex: 'name',
    slotName: 'account'
  },
  {
    title: '角色',
    dataIndex: 'role_name',
    slotName: 'role'
  },
  {
    title: '说明',
    dataIndex: 'memo',
    slotName: 'memo'
  },
  {
    title: '操作',
    slotName: 'operater',
    width: 180
  }
]

const checkerTableColumns: TableColumnData[] = [
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index'
  },
  {
    title: '成员',
    dataIndex: 'name',
    slotName: 'account'
  },
  {
    title: '超时时限（天',
    dataIndex: 'due_day',
    slotName: 'due_day'
  },
  {
    title: '操作',
    slotName: 'operater',
    width: 180
  }
]

const { emitter } = useEmitt()
const memberList = ref<Members[]>([])
const checkers = ref<Checker[]>([])
const regionTreeData = ref<DomainTree[]>([]) // 区域树

const prjTypeTreeData = ref<DomainTree[]>([]) // 项目类型
const prjLogs = ref<ProjectLog[]>([])

const IconFont = Icon.addFromIconFontCn({
  src: IconFontUrl.URL
})
const allowedAccountList = computed(() => {
  const accounts: string[] = []
  props.accountList.map(item => {
    if (memberList.value.findIndex(m => m.account_id === item.id) === -1) {
      accounts.push(item.id)
    }
    return item
  })
  return accounts
})

const allowedCheckers = computed(() => {
  const accounts: string[] = []
  props.accountList.map(item => {
    if (checkers.value.findIndex(m => m.id === item.id) === -1) {
      accounts.push(item.id)
    }
    return item
  })
  return accounts
})

const getDetail = async (prjDetail: OverviewProjectResParams) => {
  // const prjDetail = props.detail

  nextTick(() => {
    detail.prj = prjDetail
    modifyParams.value.name = prjDetail?.name
    modifyParams.value.leader_id = prjDetail?.leader_id
    modifyParams.value.region_id = prjDetail?.region_id
    modifyParams.value.type_id = prjDetail?.type_id
    modifyParams.value.bizman_id = prjDetail?.bizman_id
    modifyParams.value.deliver_at = prjDetail?.deliver_at
    modifyParams.value.intro = prjDetail?.intro
    modifyParams.value.customer_id = prjDetail?.customer_id
    modifyParams.value.contract_id = prjDetail?.contract_id
    // emits('get-detail', prjDetail.name)
    // emits('setContractId', prjDetail.contract_id)
  })
}

// 获取项目组成员
const getMembers = async () => {
  const { list } = await getMemberList({ prj_id: props.prjId })
  memberList.value = list
}

// 获取项目动态日志
const getLogs = async () => {
  const { list, total } = await getProjectLogs({
    page_no: page.pageIndex,
    page_size: page.pageSize,
    id: props.prjId
  })
  page.total = total
  prjLogs.value = list
}

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

// 获取审核组成员
const getCheckers = async () => {
  const { checkers: list } = await getProjectCheckers({ id: props.prjId })
  checkers.value = list
}

const getRoles = async () => {
  const { list } = await getMemberRoleList()
  roleList.value = list
}

/**
 * 鼠标放上
 * @param group
 */
const selectedMemberHandler = (member: TableData) => {
  selectMemberIndex.value = memberList.value.findIndex(
    item => item.account_id === member.account_id
  )
}

// 预添加项目组成员
const preAddMember = () => {
  memberList.value.push({
    isCreated: true,
    account_id: undefined,
    name: undefined,
    role_id: undefined,
    role_name: undefined,
    memo: undefined
  })
}

// 预添加审核组成员
const preAddChecker = () => {
  checkers.value.push({
    isCreated: true,
    id: '',
    due_day: 3
  })
}

// 修改项目信息
const modifyDetail = async () => {
  try {
    const params = modifyParams.value
    await modifyProject(params)
    Message.success('修改成功')
    emitter.emit('get_project_detail', true)
  } catch (e) {
    emitter.emit('get_project_detail', true)
  }
}

const modifyCustomer = async (v?: any) => {
  console.log(v)
  await modifyDetail()
}

/**
 * 取消添加项目组成员
 * @param index
 */
const cancelAddMember = (index: number) => {
  memberList.value.splice(index, 1)
}

const cancelAddChecker = (index: number) => {
  checkers.value.splice(index, 1)
}

/**
 * 确认添加
 * @param record
 */
const confirmlMemberAdd = async (record: Members) => {
  if (!record.account_id) {
    Message.warning('账号信息不能为空')
    return
  }
  if (!record.role_id) {
    Message.warning('角色信息不能为空')
    return
  }
  await addMember({
    prj_id: modifyParams.value.id,
    account_id: record.account_id!,
    role_id: record.role_id,
    memo: record.memo
  })
  delete record.isCreated
  Message.success('添加成功')
}

/**
 * 确认添加审核组
 * @param record
 */
const confirmlCheckerAdd = async (record: Checker) => {
  if (!record.id) {
    Message.warning('账号信息不能为空')
    return
  }
  if (!record.due_day) {
    Message.warning('超时时限不能为空')
    return
  }
  try {
    delete record.isCreated
    await setProjectCheckers({
      id: modifyParams.value.id,
      checkers: checkers.value.filter(item => !item.isCreated) as unknown as {
        id: string
        name: string
      }[]
    })
    Message.success('添加成功')
  } catch (e) {
    getCheckers()
  }
}

/**
 * 递归获取ng-tree需要的结构体
 * @param domains 接口返回的树状数组
 */
const getNodesTree = (domains: DomainTree): DomainTree => {
  domains.key = domains.id.toString()
  domains.title = domains.name
  if (domains.children && domains.children.length > 0) {
    domains.children.map(res => getNodesTree(res))
  } else {
    domains.children = undefined
  }
  return domains
}

/**
 * 修改项目组成员角色
 */
const modifyMemberChange = async (record: Members) => {
  if (record.isCreated) {
    return
  }
  try {
    await modifyMember({
      prj_id: props.prjId,
      account_id: record.account_id!,
      role_id: record.role_id,
      memo: record.memo
    })
    Message.success('修改成功')
  } catch (e) {
    getMembers()
  }
}

const getProjectType = async () => {
  const { tree } = await getPrjTypeList()
  prjTypeTreeData.value = tree.map(domains => {
    return getNodesTree(domains)
  })
}

const modifyCheckerChange = async (record: Members) => {
  if (record.isCreated) {
    return
  }
  try {
    await setProjectCheckers({
      id: modifyParams.value.id,
      checkers: checkers.value.filter(item => !item.isCreated) as unknown as {
        id: string
        name: string
      }[]
    })
    Message.success('修改成功')
  } catch {
    getCheckers()
  }
}

/**
 * 获取区域树
 */
const getRegions = async () => {
  const { tree } = await getRegionTree()
  regionTreeData.value = tree.map(domains => {
    return getNodesTree(domains)
  })
}

/**
 * 删除项目组成员
 */
const removeMemberHandler = async (record: Members, index: number) => {
  try {
    await removeMember({
      prj_id: props.prjId,
      account_id: record.account_id!
    })
    memberList.value.splice(index, 1)
    Message.success('删除成功')
  } catch (_e) {
    getMembers()
  }
}

const removeCheckerHandler = async (_record: Checker, index: number) => {
  try {
    checkers.value.splice(index, 1)
    await setProjectCheckers({
      id: modifyParams.value.id,
      checkers: checkers.value.filter(item => !item.isCreated) as unknown as {
        id: string
        name: string
      }[]
    })
    Message.success('删除成功')
  } catch (_e) {
    getCheckers()
  }
}

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

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

onMounted(async () => {
  await Promise.all([getProjectType(), getRegions()])
  emitter.emit('get_project_detail', true)
  await Promise.all([getMembers(), getCheckers(), getLogs()])
  getRoles()
  // console.log(props.detail)
})
</script>

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

<style lang="less" scoped>
.container {
  padding: 20px 20px 20px 20px;
  .general-card {
    // min-height: calc(100vh - 150px);
    :deep(.arco-card-header) {
      padding: 20px 20px 0 20px;
    }
    .item-container {
      padding-top: 20px;
      :deep(.arco-descriptions-item-label) {
        font-weight: normal;
      }
      .member-table {
        :deep(.arco-table-footer) {
          padding: 3px;
        }
      }
    }
  }
  .log-card {
    :deep(.arco-card-body) {
      padding-right: 0;
    }
    :deep(.arco-card-actions) {
      justify-content: center;
      margin-top: 0;
    }
  }
}
:deep(.arco-list-item-action) {
  margin-left: 56px;
  color: var(--color-text-3);
  font-size: 12px;
}

:deep(.arco-alert) {
  text-align: center;
  font-size: 16px;
}
:deep(.arco-table-th) {
  background: none;
}
:deep(.row-select-bg) {
  .arco-table-td {
    cursor: pointer;
    background-color: rgb(var(--primary-1));
  }
}
</style>
