<template>
  <view class="container">
    <uni-section class="mb-10" title="基本信息" type="line"></uni-section>
    <uni-list :border="true">
      <uni-list-item title="创建日期" :rightText="prj?.created_at" />
      <uni-list-item title="项目名称" :rightText="prj?.name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.name" placeholder="项目名称" :old-value="prj?.name"
              :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT" @modify="modifyProjectInfo" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="项目编号" :rightText="prj?.id" />
      <uni-list-item title="所属地区" :rightText="prj?.region_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.region_id" placeholder="所属地区"
              :options="regionTreeData" :old-value="prj?.region_id" :components-type="ComponentsType.CASCADER"
              @modify="modifyProjectInfo" :showAuxiliaryLine="true" :selectParent="true" :not-allow-null="true" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="项目类型" :rightText="prj?.type_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.type_id" placeholder="项目类型"
              :options="prjTypeTreeData" :old-value="prj?.type_id" :components-type="ComponentsType.CASCADER"
              @modify="modifyProjectInfo" :showAuxiliaryLine="true" :selectParent="true" :not-allow-null="true" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="当前阶段">
        <template #footer>
          <view class="uni-list-item__extra" style="text-align: right;">
            <uni-tag :text="prj?.phase_name" :inverted="true" style="margin-left: 10px;"
              v-for="tag in selectedPhase(prjPhaseList, prj?.phase_id)" :key="tag.id"
              :custom-style='"font-weight:bolder;border: 1px solid transparent;background:" + tagColor(tag.color).bg + ";color:" + tagColor(tag.color).color'>
            </uni-tag>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="项目进度">
        <template #footer>
          <view class="uni-list-item__extra" style="text-align: right;width: 80%;">
            <custom-progress :value="prj?.progress" style="min-width: 200px" :stroke-width="16"></custom-progress>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="预计交付时间" :rightText="prj?.deliver_at">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.deliver_at" placeholder="预计交付时间"
              :old-value="prj?.deliver_at" :components-type="ComponentsType.DATEPICKER" @modify="modifyProjectInfo"
              :not-allow-null="true" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="项目负责人">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.leader_id" placeholder="项目负责人"
              :options="accountList" :old-value="prj?.leader_id" :components-type="ComponentsType.SELECT"
              @modify="modifyProjectInfo" :not-allow-null="true" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="商务负责人" :rightText="prj?.bizman_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.bizman_id" placeholder="商务负责人"
              :options="accountList" :old-value="prj?.bizman_id" :components-type="ComponentsType.SELECT"
              @modify="modifyProjectInfo" :not-allow-null="true" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="启动日期" :rightText="prj?.started_at || '-'">
      </uni-list-item>
      <uni-list-item title="合同信息" :rightText="prj?.contract_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem v-if="props.isAuthContract"  style="width:100%" v-model="modifyParams.contract_id" placeholder="合同信息"
              :options="contractList" :old-value="prj?.contract_id" :components-type="ComponentsType.SELECT"
              @modify="modifyProjectInfo" />
              <view class="uni-list-item__extra" style="text-align: right;" v-else>
              <text class="uni-list-item__extra-text">{{ prj?.contract_name }}</text>
            </view>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="项目简介" :rightText="prj?.intro">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.intro" placeholder="项目简介" :old-value="prj?.intro"
              :components-type="ComponentsType.TEXTAREA" @modify="modifyProjectInfo" />
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <uni-section title="客户信息" type="line"></uni-section>
    <uni-list :border="true">
      <uni-list-item title="客户名称" :rightText="prj?.customer_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem v-if="props.isAuthCustomer" tyle="width:100%" v-model="modifyParams.customer_id"
              placeholder="客户信息" :options="customerList" :old-value="prj?.customer_id"
              :components-type="ComponentsType.SELECT" @modify="modifyProjectInfo" />
            <view class="uni-list-item__extra" style="text-align: right;" v-else>
              <text class="uni-list-item__extra-text">{{ prj?.customer_name }}</text>
            </view>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="客户编号" :rightText="prj?.customer_id || '-'" />
      <uni-list-item title="所在地区" :rightText="prj?.customer_region_name || '-'" />
      <uni-list-item title="客户级别" :rightText="prj?.level_name || '-'" />
      <uni-list-item title="商务负责人" :rightText="prj?.customer_bizman_name || '-'" />
    </uni-list>
    <uni-section title="项目组成员" type="line">
      <template v-slot:right>
        <button size="default" @click="redirectaddMemberPage(prj?.id)" class="mini-btn"
          hover-class="is-hover">添加</button>
      </template>
    </uni-section>

    <uni-list :border="true">
      <uni-swipe-action ref="member_action">
        <uni-swipe-action-item :right-options="options" v-for="member in prj.members" :threshold="80"
          @click="(e: any) => handlerMember(e, member)" :key="member.account_id">
          <uni-list-item>
            <template v-slot:header>
              <view class="slot-box">
                <uni-icons :size="40" type="person" color="#fff" style="padding:3px;"></uni-icons>
              </view>
            </template>
            <template v-slot:body>
              <view class="slot-content">
                <view class="slot-panel">
                  <view class="slot-title">{{ member.name }}</view>
                  <view class="slot-subtitle">{{ member.role_name }}</view>
                </view>
                <view class="slot-desc">
                  {{ member.memo }}
                </view>
              </view>
            </template>
          </uni-list-item>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </uni-list>

    <uni-section title="审核组成员" type="line">
      <template v-slot:right>
        <button size="default" @click="redirectaddCheckerPage(prj?.id)" class="mini-btn"
          hover-class="is-hover">添加</button>
      </template>
    </uni-section>
    <uni-list :border="true">
      <uni-swipe-action ref="checker_action">
        <uni-swipe-action-item :right-options="options" v-for="checker in checkers" :key="checker.id"
          @click="(e: any) => handlerChecker(e, checker)" :threshold="50">
          <uni-list-item>
            <template v-slot:header>
              <view class=" slot-box">
                <uni-icons :size="40" type="auth" color="#fff" style="padding:3px;"></uni-icons>
              </view>
            </template>
            <template v-slot:body>
              <view class="slot-content">
                <view class="slot-panel">
                  <view class="slot-title">{{ accountList?.find(item => item.id === checker.id)?.name || checker.name ||
                    checker.id }}</view>
                  <view class="slot-subtitle">超时时限：<text style="color:#dd524d; font-weight: bold;">{{ checker.due_day
                      }}</text>天</view>
                </view>
                <view class="slot-desc">
                </view>
              </view>
            </template>
          </uni-list-item>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </uni-list>
    <uni-section title="项目动态" type="line">
      <template v-slot:right>
        <button size="default" @click="redirectProjectLogsPage(prj?.id, prj?.name)" class="mini-btn"
          hover-class="is-hover">查看</button>
      </template>
    </uni-section>
  </view>
</template>
<script setup lang="ts">
import { Checker, Members, ModifyProjectReqParams, OverviewProjectResParams } from '@/types/project';
import { selectedPhase, tagColor } from '@/utils'
import customProgress from '@/components/cu-progress/index.vue'
import EditorListItem from '@/components/editor-list-item/editor-list-item.vue'
import { ComponentsType } from '@/enums/api'
import { getPrjPhaseList } from '@/api/base/base';
import { getProjectCheckers, modifyProject, setProjectCheckers } from '@/api/project-center/info'
import { getMemberList, removeMember } from '@/api/project-center/member'
import { useEmitt } from '@/logics/mitt/useEmitt';
import { DomainTree } from '@/types/domain';
import { Customer } from '@/types/customer';


const props = defineProps({
  prj: {
    type: Object as PropType<OverviewProjectResParams>,
    required: true
  },
  isAuthCustomer: {
    type: Boolean
  },
  isAuthContract: {
    type: Boolean
  },
  regionTreeData: {
    type: Array as PropType<DomainTree[]>
  },
  accountList: {
    type: Array as PropType<{ id: string; name: string }[]>,
  },
  contractList: {
    type: Array as PropType<{ id: string; name: string }[]>,
    required: true
  },
  prjTypeTreeData: {
    type: Array as PropType<DomainTree[]>
  },
  customerList: {
    type: Array as PropType<Customer[]>,
  }
})

const member_action = ref()

const checker_action = ref()
const options = [
  {
    text: '修改',
    style: {
      backgroundColor: '#4cd964',
      margin: "5px 0"
    }
  },
  {
    text: '删除',
    style: {
      backgroundColor: '#dd524d',
      margin: "5px 0"
    }
  }
]

const modifyParams = ref<ModifyProjectReqParams>({
  id: ''
})


/**
 * 获取客户详情
 * @param customerId
 */
const getDetail = async () => {
  const prjDetail = props.prj
  nextTick(() => {
    modifyParams.value.id = prjDetail.id
    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
  })
}

const { emitter } = useEmitt()
const memberList = ref<Members[]>([])
const checkers = ref<Checker[]>([])
const prjPhaseList = ref<{ id: string; name: string; color: string }[]>([])
const getPrjPhase = async () => {
  const { list } = await getPrjPhaseList()
  prjPhaseList.value = list
}

// 修改项目详情
const modifyProjectInfo = async () => {
  const params = modifyParams.value
  try {
    await modifyProject(params)
    uni.showToast(({
      icon: 'success',
      title: '修改成功'
    }))
    emitter.emit('get_project_detail', params.id)
  } catch (e) {
    emitter.emit('get_project_detail', params.id)
  }
}



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

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

// 项目组成员左滑菜单点击
const handlerMember = async (e: { index: number }, member: Members) => {
  const isEdit = e.index === 0;
  member_action.value?.closeAll()
  if (isEdit) {
    uni.navigateTo({ url: `/pages/project/overview/edit-member?id=${props.prj.id}&account_id=${member.account_id}` })
  } else {
    uni.showModal({
      title: '删除项目组成员',
      content: `确认删除项目成员${member.name}吗？`,
      success: async (res: { confirm: boolean }) => {
        const { confirm } = res;
        if (confirm) {
          await removeMember({ account_id: member.account_id!, prj_id: props.prj.id })
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            mask: true
          })
          emitter.emit('get_project_detail', props.prj.id)
        }
      }
    })
  }

}

// 审核组左滑菜单点击
const handlerChecker = async (e: { index: number }, checker: Checker) => {
  checker_action.value?.closeAll()
  const isEdit = e.index === 0;
  if (isEdit) {
    uni.navigateTo({ url: `/pages/project/overview/edit-checker?id=${props.prj.id}&account_id=${checker.id}` })
  } else {
    uni.showModal({
      title: '删除审核组成员',
      content: `确认删除审核成员${checker.name ? checker.name : checker.id}吗？`,
      success: async (res: { confirm: boolean }) => {
        const { confirm } = res;
        if (confirm) {
          const list = checkers.value.filter(item => item.id !== checker.id)
          await setProjectCheckers({ checkers: list, id: props.prj.id })
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            mask: true
          })
          getCheckers()
        }
      }
    })
  }

}

// 跳转
const redirectaddMemberPage = async (id: string) => {
  uni.navigateTo({ url: `/pages/project/overview/add-member?id=${id}` })
}


const redirectaddCheckerPage = async (id: string) => {
  uni.navigateTo({ url: `/pages/project/overview/add-checker?id=${id}` })
}

// 跳转项目动态日志page
const redirectProjectLogsPage = async (id: string, name: string) => {
  uni.navigateTo({ url: `/pages/project/components/logs?prj_id=${id}&name=${name}` })
}

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

onMounted(async () => {
  getPrjPhase()
  getMembers()
  getCheckers()
  getDetail()
})

</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared', //解除样式隔离
  }
}
</script>
<style scoped>
.container {
  padding: 0 5px 40px 5px;
}


.slot-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  width: 45px;
  background-color: rgb(201, 205, 212);
  border-radius: 4px;
  margin-right: 10px;
  height: 45px;
}


.slot-content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  /* height: 45px; */
}

.slot-panel {
  display: flex;
  flex-direction: column;
  height: 45px;
  justify-content: space-around;
}

.slot-title {
  display: flex;
  font-size: 14px;
  color: #3b4144;
}

.slot-subtitle {
  display: flex;
  font-size: 12px;
  color: #999
}

.slot-desc {
  color: #999;
  font-size: 13px;
  width: 200px;
  text-overflow: ellipsis;
  text-align: right;
  text-wrap: wrap;
  overflow-wrap: anywhere;
  white-space-collapse: collapse;

}

.mini-btn {
  color: #ffffff !important;
  background-color: #007aff;
  border-color: #007aff !important;
  font-size: 24rpx !important;
  -webkit-tap-highlight-color: transparent;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  line-height: 2.55555556;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-left: 28rpx;
  padding-right: 28rpx;
  position: relative;
  text-align: center;
  text-decoration: none;
  height: auto;
}
</style>