<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 项目列表
                </el-breadcrumb-item>
                <el-button size="small" type="primary" @click="handleAdd()">
                    <el-icon size="small"><plus /></el-icon>
                </el-button>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="项目名称"></el-table-column>
                <el-table-column prop="company" label="客户名称"></el-table-column>
                <el-table-column prop="user_name" label="负责人"></el-table-column>
                <el-table-column prop="amount" label="金额"></el-table-column>
                <el-table-column prop="received" label="已回款"></el-table-column>
                <el-table-column prop="pending" label="待回款"></el-table-column>
                <el-table-column prop="contract_end_date" label="合同结束"></el-table-column>
                <el-table-column prop="estimated_start_date" label="预估开始"></el-table-column>
                <el-table-column prop="estimated_end_date" label="预估结束"></el-table-column>
                <el-table-column prop="start_date" label="实际开始"></el-table-column>
                <el-table-column prop="end_date" label="实际结束"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">
                            <el-icon><edit-pen /></el-icon>
                            编辑
                        </el-button>
                        <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">
                            <el-icon><delete /></el-icon>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 添加弹出框 -->
        <el-dialog title="新增" v-model="addVisible" width="40%">
            <el-form :model="addForm" ref="tableAddData" label-width="120px" :rules="rules">
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="客户" prop="customer_id">
                    <el-select v-model="addForm.customer_id" class="m-2" placeholder="客户" size="small" name="customer_id">
                        <el-option
                        v-for="item in customerListData"
                        :key="item.id"
                        :value="item.id"
                        :label="item.company"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="项目对接人" prop="user_id">
                    <el-select v-model="addForm.user_id" class="m-2" placeholder="项目对接人" size="small" name="user_id">
                        <el-option
                        v-for="item in userListData"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="合同日期">
                    <el-col :span="11">
                        <el-form-item prop="contract_signing_date">
                            <el-date-picker type="date" placeholder="合同签订日期" v-model="addForm.contract_signing_date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="contract_end_date">
                            <el-date-picker type="date" placeholder="合同约定项目结束日期" v-model="addForm.contract_end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="项目工期" prop="contract_construction_period">
                    <el-input-number v-model="addForm.contract_construction_period" :min="1" />
                </el-form-item>
                <el-form-item label="预估日期">
                    <el-col :span="11">
                        <el-form-item prop="estimated_start_date">
                            <el-date-picker type="date" placeholder="预估开始日期" v-model="addForm.estimated_start_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="estimated_end_date">
                            <el-date-picker type="date" placeholder="预估结束日期" v-model="addForm.estimated_end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="预估工期" prop="estimated_construction_period">
                    <el-input-number v-model="addForm.estimated_construction_period" :min="1" />
                </el-form-item>
                <el-form-item label="实际日期">
                    <el-col :span="11">
                        <el-form-item prop="start_date">
                            <el-date-picker type="date" placeholder="实际开始日期" v-model="addForm.start_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="end_date">
                            <el-date-picker type="date" placeholder="实际结束日期" v-model="addForm.end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="实际工期" prop="construction_period">
                    <el-input-number v-model="addForm.construction_period" :min="1" />
                </el-form-item>
                <el-form-item label="项目金额" prop="amount">
                    <el-input-number v-model="addForm.amount" :precision="2" :step="0.1" />
                </el-form-item>
                <el-form-item label="已回款金额" prop="received">
                    <el-input-number v-model="addForm.received" :precision="2" :step="0.1" />
                </el-form-item>
                <el-form-item label="待回款金额" prop="pending">
                    <el-input-number v-model="addForm.pending" :precision="2" :step="0.1" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveAdd">确 定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" v-model="editVisible" width="40%">
            <el-form :model="editForm" ref="tableEditData" label-width="120px" :rules="rules">
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="客户" prop="customer_id">
                    <el-select v-model="editForm.customer_id" class="m-2" placeholder="客户" size="small" name="customer_id">
                        <el-option
                        v-for="item in customerListData"
                        :key="item.id"
                        :value="item.id"
                        :label="item.company"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="项目对接人" prop="user_id">
                    <el-select v-model="editForm.user_id" class="m-2" placeholder="项目对接人" size="small" name="user_id">
                        <el-option
                        v-for="item in userListData"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="合同日期">
                    <el-col :span="11">
                        <el-form-item prop="contract_signing_date">
                            <el-date-picker type="date" placeholder="合同签订日期" v-model="editForm.contract_signing_date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="contract_end_date">
                            <el-date-picker type="date" placeholder="合同约定项目结束日期" v-model="editForm.contract_end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="项目工期" prop="contract_construction_period">
                    <el-input-number v-model="editForm.contract_construction_period" :min="1" />
                </el-form-item>
                <el-form-item label="预估日期">
                    <el-col :span="11">
                        <el-form-item prop="estimated_start_date">
                            <el-date-picker type="date" placeholder="预估开始日期" v-model="editForm.estimated_start_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="estimated_end_date">
                            <el-date-picker type="date" placeholder="预估结束日期" v-model="editForm.estimated_end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="预估工期" prop="estimated_construction_period">
                    <el-input-number v-model="editForm.estimated_construction_period" :min="1" />
                </el-form-item>
                <el-form-item label="实际日期">
                    <el-col :span="11">
                        <el-form-item prop="start_date">
                            <el-date-picker type="date" placeholder="实际开始日期" v-model="editForm.start_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="end_date">
                            <el-date-picker type="date" placeholder="实际结束日期" v-model="editForm.end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="实际工期" prop="construction_period">
                    <el-input-number v-model="editForm.construction_period" :min="1" />
                </el-form-item>
                <el-form-item label="项目金额" prop="amount">
                    <el-input-number v-model="editForm.amount" :precision="2" :step="0.1" />
                </el-form-item>
                <el-form-item label="已回款金额" prop="received">
                    <el-input-number v-model="editForm.received" :precision="2" :step="0.1" />
                </el-form-item>
                <el-form-item label="待回款金额" prop="pending">
                    <el-input-number v-model="editForm.pending" :precision="2" :step="0.1" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage } from "element-plus";
import { projectData, projectAdd, projectEdit } from "../api/project";
import { customerData } from '../api/customer';
import { userData } from '../api/user';

export default{
    setup() {
        const tableData = ref([]);
        const customerListData = ref([]);
        const userListData = ref([]);
        const rules = reactive({
            name: [
                { required: true, message: "请输入项目名称", trigger: "blur"},
            ],
            customer_id: [
                { required: true, message: "请选择客户", trigger: "blur" },
            ],
            user_id:[
                { required: true, message: "请选负责人", trigger: "blur" },
            ]
        });

        // 获取初始数据
        const query = reactive({
            page: 1
        });
        const pageTotal = ref(0);
        const getData = () => {
            //项目列表数据
            projectData(query).then((res) => {
                tableData.value = res.data.data;
                pageTotal.value = res.data.pageTotal || 0;
            });

            //客户列表谁
            customerData({}).then((res) => {
                console.log(res.data.data)
                customerListData.value = res.data.data;
            });
            //负责人列表数据
            userData({}).then((res) => {
                console.log(res.data.data)
                userListData.value = res.data.data;
            });
        };
        getData();

        //新增
        const addVisible = ref(false);
        const tableAddData = ref(null);
        const addForm = reactive({
            name:'',
            customer_id: 0,
            user_id: 0,
            contract_signing_date:'',
            contract_end_date:'',
            contract_construction_period: 0,
            estimated_start_date:'',
            estimated_end_date:'',
            estimated_construction_period:0,
            start_date:'',
            end_date:'',
            construction_period:0,
            amount:0,
            received:0,
            pending:0
        });
        const handleAdd = () => {
           addVisible.value = true;
        };
        const saveAdd = () => {
            tableAddData.value.validate((valid) => {
                if(!valid){
                    ElMessage.error('验证失败');
                    return false;
                }
                projectAdd(addForm).then((res) => {
                    if(res.data.code == 0){
                        ElMessage.success("添加成功");
                        addVisible.value = false;
                    }else{
                        ElMessage.error(res.data.msg);
                        return false;
                    }
                });
            });
        };

        //编辑
        const editVisible = ref(false);
        const tableEditData = ref(null);
        const editForm = reactive({
            name:'',
            customer_id: 0,
            user_id: 0,
            contract_signing_date:'',
            contract_end_date:'',
            contract_construction_period: 0,
            estimated_start_date:'',
            estimated_end_date:'',
            estimated_construction_period:0,
            start_date:'',
            end_date:'',
            construction_period:0,
            amount:0.00,
            received:0.00,
            pending:0.00,
            id:0
        });
        let idx = -1;
        const handleEdit = (index, row) => {
            idx = index;
            Object.keys(editForm).forEach((item) => {
                editForm[item] = row[item];
            });
            editVisible.value = true;
        };
        const saveEdit = () => {
            tableEditData.value.validate((valid) => {
                if(!valid){
                    ElMessage.error('验证失败');
                    return false;
                }
                projectEdit(editForm).then((res) => {
                    if(res.data.code == 0){
                        ElMessage.success(`修改第 ${idx + 1} 行成功`);
                        editVisible.value = false;
                    }else{
                        ElMessage.error(res.data.msg);
                        return false;
                    }
                });
            });
        };

        return {
            tableData,
            customerListData,
            userListData,
            rules,
            addVisible,
            tableAddData,
            addForm,
            handleAdd,
            saveAdd,
            projectAdd,
            projectData,
            customerData,
            userData,
            ElMessage,
            editVisible,
            tableEditData,
            editForm,
            idx,
            handleEdit,
            saveEdit
        }
    }
}

</script>