<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" @click="handleAdd" v-auth="'research_project.create'">新增</el-button>
            </div>

        </el-header>
        <el-main class="nopadding">
            <scTable
            ref="table"
            :apiObj="API.rem.project.list"
            row-key="id"
            stripe
            :query="query"
            >
            <el-table-column label="项目名称" prop="name" width="300" show-overflow-tooltip>
                <template #default="scope">
                    <el-link type="primary" @click.stop="()=>{t_id=scope.row.id;mode='show';drawerVisible=true;}">{{ scope.row.name }}</el-link>
                </template>
            </el-table-column>
            <!-- <el-table-column label="审批状态" width="250" show-overflow-tooltip>
                <template #default="scope">
                                <el-tag :type="actStateEnum[scope.row.ticket_?.act_state]?.type">
                        {{ actStateEnum[scope.row.ticket_?.act_state]?.text }}
                    </el-tag>
            <el-tag type="info" effect="plain">{{ scope.row.ticket_?.state_.name }}</el-tag>

          </template>
            </el-table-column> -->
            <el-table-column label="项目负责人" prop="leader_name" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="项目成员" prop="participants" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column label="开始日期" prop="start_date" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="结束日期" prop="end_date" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="附件数" prop="files" width="200" show-overflow-tooltip>
                <template #default="scope">
                    {{ scope.row.files.length }}
                </template>
            </el-table-column>
            <el-table-column label="项目介绍" prop="description" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" fixed="right" align="right" width="100">
              <template #default="scope">
                <el-button
                  type="warning"
                  link
                  size="small"
                  @click.stop="table_edit(scope.row)"
				    v-auth="'research_project.update'"
                  >编辑
                </el-button>
              </template>
            </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <el-drawer title="科研项目" v-model="drawerVisible" :size="'80%'" destroy-on-close>
        <project_form :mode="mode" :t_id="t_id" @success="()=>{drawerVisible = false; $refs.table.refresh()}"></project_form>
    </el-drawer>
</template>
<script setup>
import { ref } from 'vue'
import API from '@/api'
import project_form from './project_form.vue'
import { actStateEnum, interveneTypeEnum } from "@/utils/enum.js";
const query = ref({});
const drawerVisible = ref(false);
const mode = ref('add');
const t_id = ref(null);
const handleAdd = () => {
    t_id.value = null;
    mode.value = 'add';
    drawerVisible.value = true;
}
const table_edit = (row) => {
    t_id.value = row.id;
    mode.value = 'edit';
    drawerVisible.value = true;
}
</script>