<script lang="ts">
export default {
    name: "project",//项目管理
};
</script>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import Page from '@/components/Pagination/page.vue'
import { projectPage, addSdproject, updateSdproject, deleteSdprojectById, deleteSdprojectByIds } from "@/api/project";
import { getDict } from '@/api/dict'
//定义表格数据
const tableData: any = ref([{}, {}]);
// 查询数据
const queryParams: any = ref({
    current: 1,
    size: 20,
    projectType: '',
    projectName: '',
    projectCode: ''
});
const total = ref(0);
// 表格加载
const loading = ref(false)
//获取表格数据
function getdata() {
    loading.value = true
    projectPage(queryParams.value).then((res: any) => {
        loading.value = false
        tableData.value = res.data.records
        queryParams.value.current = res.data.current
        queryParams.value.size = res.data.size
        total.value = res.data.total
    })
}
//获取字典项目类型
const dictType = ref([])
function getDictOne() {
    getDict({ dictcode: 'zxxmlx' }).then((res: any) => {
        dictType.value = res.data
    })
}
//弹框命名
const title = ref("")
//控制弹框显隐
const frame = ref(false)
//新增项目弹框
function addproject() {
    frame.value = true
    title.value = "新增项目"
    projectForme.value = {
        description: "",//描述
        projectCode: "",//编号
        projectName: "",//名称
        projectProps: "",//信息
        projectTime: "",//时间
        projectType: ""//类型
    }
}
//修改项目弹框
function editproject(row: any) {
    title.value = "修改项目"
    frame.value = true
    projectForme.value = JSON.parse(JSON.stringify(row))
}
//删除项目弹框
function delproject(row: any) {
    ElMessageBox.confirm(
        '您确定要删除该项目及其中的节点和文件吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            loading.value = true
            deleteSdprojectById({ id: row.id }).then((res: any) => {
                if (res.code == 0) {
                    getdata()
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                }

            })

        })

}
//表格多选
const tableIdarr = ref([])
function handleSelectionChange(val: any) {
    tableIdarr.value = val
}
//多选删除
function delprojectArr() {
    const ids = []
    tableIdarr.value.forEach((item: any) => {
        ids.push(item.id)
    })
    ElMessageBox.confirm(
        '您确定要删除这些项目及其中的节点和文件吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            loading.value = true
            deleteSdprojectByIds({ ids: ids.join(',') }).then((res: any) => {
                if (res.code == 0) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getdata()
                }

            })

        })
}
//弹框关闭
function handleClose(formEl: any) {
    // if (!formEl) return
    // formEl.resetFields()
    frame.value = false
}
//表单数据
const ruleFormRef = ref()
const projectForme: any = ref({
    description: "",//描述
    projectCode: "",//编号
    projectName: "",//名称
    projectProps: "",//信息
    projectTime: "",//时间
    projectType: ""//类型
})
//表单确定
async function submitForm(formEl: any) {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            if (projectForme.value.id) {
                updateSdproject(projectForme.value).then((res: any) => {
                    getdata()
                    ElMessage.success("修改成功")
                    frame.value = false
                })
            } else {
                addSdproject(projectForme.value).then((res: any) => {
                    getdata()
                    ElMessage.success("添加成功")
                    frame.value = false
                })
            }


        }
    })
}
//用户弹窗规则定义
const moderules = ref({
    projectCode: [{ required: true, message: "请输入项目编号", trigger: "blur" }],
    projectType: [{ required: true, message: "请输入项目类型", trigger: "blur" }],
    projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
    projectTime: [{ type: 'date', required: true, message: "请选择项目启动时间", trigger: "change" }],
});
onMounted(() => {
    getdata()
    getDictOne()
});
//项目类型转换
function typeName(arr:any,itemCode:any){
    let nameone:any
    arr.forEach((item:any) => {
        if(item.itemcode==itemCode){
            nameone = item.dictname
        }
    });
    return nameone
}

</script>

<template>
    <div>
        <div class="record-box">
            <div class="sou_title">
                <div class="sou_title_left">
                    <el-input style="margin-right: 10px ;" v-model="queryParams.projectCode" clearable
                        @change="getdata()" placeholder="项目编号"></el-input>
                    <el-select v-model="queryParams.projectType" placeholder="项目类型"  style="margin-right: 10px ;"  clearable @change="getdata()"  >
                        <el-option v-for="item in dictType" :key="item.itemcode" :label="item.dictname" :value="item.itemcode" />
                    </el-select>
                    <!-- <el-input style="margin-right: 10px ;" v-model="queryParams.projectType" clearable
                        @change="getdata()" placeholder="项目类型"></el-input> -->
                    <el-input style="margin-right: 10px ;" v-model="queryParams.projectName" clearable
                        @change="getdata()" placeholder="项目名称"></el-input>
                    <el-button type="primary" @click="getdata()">搜索</el-button>
                </div>
                <div>
                    <el-button type="primary" @click="addproject()">新增</el-button>
                    <el-button type="primary" @click="delprojectArr()" :disabled="tableIdarr.length == 0">删除</el-button>
                </div>
            </div>

            <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange"
                :header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
                style="width: 100%; height: calc(100vh - 275px);margin-bottom: 20px;" border>
                <el-table-column type="selection" width="40" />
                <!-- <el-table-column type="index" label="序号" width="70" align="center"></el-table-column> -->
                <el-table-column prop="projectCode" label="项目编号" width="90" align="center"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" width="200"></el-table-column>
                <el-table-column prop="projectType" label="项目类型" width="200">
                    <template #default="scope">
                        <span>{{ typeName(dictType,scope.row.projectType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="项目描述"></el-table-column>
                <el-table-column prop="projectProps" label="项目信息"></el-table-column>
                <el-table-column prop="projectTime" label="项目启动时间" width="165" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="80" align="center">
                    <template #default="scope">
                        <span
                            style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around; ">
                            <img src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改" @click="editproject(scope.row)"
                                style="cursor: pointer;">
                            <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" @click="delproject(scope.row)"
                                style="cursor: pointer;">
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current"
                @pagination="getdata()">
            </Page>
        </div>
        <el-dialog :title="title" v-model="frame" width="30%" :before-close="handleClose" top="30px" draggable
            destroy-on-close>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="projectForme" :rules="moderules"
                label-width="auto" class="demo-ruleForm" status-icon>
                <el-form-item label=" 项目编号" prop="projectCode">
                    <el-input v-model="projectForme.projectCode" maxlength="40"  show-word-limit />
                </el-form-item>
                <el-form-item label=" 项目类型" prop="projectType">
                    <el-select v-model="projectForme.projectType"  clearable placeholder=" "  style="margin-right: 10px ;" @change="getdata()"  >
                        <el-option v-for="item in dictType" :key="item.itemcode" :label="item.dictname" :value="item.itemcode" />
                    </el-select>
                    <!-- <el-input v-model="projectForme.projectType" /> -->
                </el-form-item>
                <el-form-item label=" 项目名称" prop="projectName">
                    <el-input v-model="projectForme.projectName" maxlength="40" show-word-limit />
                </el-form-item>
                <el-form-item label=" 项目描述">
                    <el-input v-model="projectForme.description" :rows="2" type="textarea" maxlength="400" show-word-limit />
                </el-form-item>
                <el-form-item label=" 项目信息">
                    <el-input v-model="projectForme.projectProps" :rows="2" type="textarea" maxlength="400" show-word-limit />
                </el-form-item>
                <el-form-item label=" 项目启动时间" prop="projectTime">
                    <el-date-picker v-model="projectForme.projectTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                        style="width:100%;" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
                <el-form-item>
                    <div style="width: 100%;display: flex;justify-content: end;">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                        <el-button @click="handleClose(ruleFormRef)">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.record-box {
    padding: 20px;
    width: 100%;
    height: calc(100vh - 130px);
    overflow: auto;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 3px;
    box-sizing: border-box;

    .sou_title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .sou_title_left {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    }
}
</style>
