<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import ProjectForm from './ProjectForm.vue'
import { UserFilled } from '@element-plus/icons-vue'
import TableBase from '@/components/TableBase/index.vue'
import { View, CircleCheck, Share } from '@element-plus/icons-vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { useTablePublic, Project_F_State } from '@/hooks/useTablePublic'
import { Project_Finance_List, Project_User_List, Project_Approval, Project_Word } from '@/api/project/index'

interface UserInfoIn {
  T_name: string
  T_type_name: string
  T_text: string
  T_uuid: string
  T_dept_name: string
  T_post_name: string
}
const userInfo = ref<UserInfoIn>({
  T_name: '',
  T_type_name: '',
  T_text: '',
  T_uuid: '',
  T_dept_name: '',
  T_post_name: ''
})

const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const projctFormRef = ref<InstanceType<typeof ProjectForm> | null>(null)
const { tableRowClassName, globalStore, updateOnTableList } = useTablePublic()
const initParamProject = reactive({ User_tokey: globalStore.GET_User_tokey, T_uuid: userInfo.value.T_uuid, page_z: 99 })

const columns: ColumnProps[] = [{ prop: 'T_name', label: '姓名' }]
const columnsProject: ColumnProps[] = [
  { type: 'index', label: '序号' },
  { prop: 'T_name', label: '项目名称' },
  { prop: 'T_user_name', label: '项目负责人' },
  { prop: 'T_set_up_date', label: '立项日期' },
  { prop: 'T_end_date', label: '结束时间' },
  { prop: 'T_planning_cycle', label: '计划完成周期（工作日）', width: 125 },
  { prop: 'T_Perf', label: '绩效总金额' },
  { prop: 'T_State', label: '状态', name: 'T_State', width: 120 },
  { prop: 'operation', label: '操作', width: 160, fixed: 'right' }
]

const getSalaryParams = (row: any) => {
  userInfo.value.T_uuid = ''
  setTimeout(() => {
    userInfo.value = { ...row }
    initParamProject.T_uuid = userInfo.value.T_uuid
  }, 100)
}
const changeState = async (id: number, row: any) => {
  const res: any = await Project_Approval({ User_tokey: globalStore.GET_User_tokey, T_id: row.Id, T_State: id })
  if (res.Code === 200) {
    ElMessage.success('审核成功！')
    updateOnTableList(TableRef.value)
  }
}
const exportWord = async (row: any) => {
  const res: any = await Project_Word({ User_tokey: globalStore.GET_User_tokey, T_id: row.Id })
  if (res.Code === 200) window.open(res.Data)
}
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.T_uuid, userInfo.value.T_uuid)
const openProjectDrawer = (type: string, row?: any) => projctFormRef.value?.projectFromOpen(type, row)
</script>
<template>
  <div class="project-finance">
    <div style="width: 290px" class="project-table">
      <TableBase
        :columns="columns"
        :requestApi="Project_User_List"
        :initParam="{ User_tokey: globalStore.GET_User_tokey, T_Finance: 1 }"
        layout="prev, pager, next"
        :rowClick="getSalaryParams"
        :tableRowClassName="tableRowClassNameHandle"
      >
        <template #table-header>
          <h3 class="title">员工列表</h3>
        </template>
      </TableBase>
    </div>
    <transition
      leave-active-class="animate__animated animate__fadeOutRight"
      enter-active-class="animate__animated animate__fadeInLeft"
    >
      <div class="project-container" v-if="userInfo.T_uuid">
        <el-card class="box-card">
          <h3 class="text title m-b-5">员工基本信息</h3>
          <!-- <el-button type="primary" @click="exportWord">导出</el-button> -->
          <div class="info-content">
            <el-avatar shape="square" size="large" :icon="UserFilled" />
            <div class="info-name">
              <h4>名字：{{ userInfo.T_name }}</h4>
              <h4>部门： {{ userInfo.T_dept_name }}</h4>
              <h4>岗位： {{ userInfo.T_post_name }}</h4>
            </div>
          </div>
        </el-card>
        <TableBase
          ref="TableRef"
          :columns="columnsProject"
          :requestApi="Project_Finance_List"
          :initParam="initParamProject"
          :displayHeader="true"
          :pagination="false"
        >
          <template #T_State="{ row }">
            <el-dropdown trigger="click" size="small">
              <el-button type="primary" size="small" :disabled="row.T_State === 4">
                {{ ['待审核', '进行中', '已完成', '已发绩效'][row.T_State - 1]
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in Project_F_State"
                    :key="item.id"
                    :icon="CircleCheck"
                    @click="changeState(item.id, row)"
                    >{{ item.name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template #right="{ row }">
            <el-button link type="success" size="small" :icon="View" @click="openProjectDrawer('view', row)"
              >详情</el-button
            >
            <el-button link type="primary" size="small" :icon="Share" @click="exportWord(row)">导出</el-button>
          </template>
        </TableBase>
      </div>
    </transition>
    <ProjectForm ref="projctFormRef" projectName="projectFinance" @onTableList="updateOnTableList(TableRef)" />
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';
.project-finance {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  .project-table {
    z-index: 1;
    @include f-direction;
  }
  .project-container {
    @include f-direction;
    width: calc(100% - 290px);
    z-index: 0;
    margin-left: 12px;
    .box-card {
      border-radius: 8px;
    }
    :deep(.el-table .cell) {
      white-space: normal !important;
    }
    .text {
      text-align: left;
    }
    .info-content {
      display: flex;
      color: #606266;
      .info-name {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-left: 0.75rem;
      }
    }
  }
  :deep(.table-header),
  :deep(.card) {
    margin: 0;
    border-radius: 8px;
  }
  .title {
    width: 100%;
    text-align: center;
    line-height: 1.7em;
    font-size: 20px;
    color: #707b84;
  }
}
</style>
