<template>
    <div class="fullHeight">
        <div v-if="type != 'detail'">
            <div class="searchBox whiteBlock">
                <el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline">
                    <el-form-item>
                        <el-button size="medium" type="primary" @click="refreshBtn">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table_wrap whiteBlock">
                <vue-scroll>
                    <el-table height="650" class="tables" :data="listData1" lazy row-key="id" default-expand-all
                        :tree-props="{ children: 'children' }">
                        <el-table-column width="200" prop="taskName" label="分部分项工程名称">
                            <template slot-scope="scope">
                                <span :title="scope.row.taskName"
                                    style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 150px;">
                                    {{ scope.row.taskName }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="startDate" label="计划开始时间"> </el-table-column>
                        <el-table-column align="center" prop="finishDate" label="计划完成时间"> </el-table-column>
                        <el-table-column align="center" prop="actualStartDate" label="实际开始时间"> </el-table-column>
                        <el-table-column align="center" prop="actualFinishDate" label="实际完成时间"></el-table-column>
                        <el-table-column align="center" prop="dutyUserName" label="负责人"></el-table-column>
                        
                        <el-table-column width="300" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.stop="addBefore(2, scope.row)" size="mini" type="text"
                                    icon="el-icon-circle-plus-outline">
                                    新增
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                    @click.native.stop="editBefore(scope.row)">
                                    编辑
                                </el-button>
                                <el-button size="mini" type="text" class="delete-btn" icon="el-icon-delete"
                                    @click.native.stop="deleteBefore(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </vue-scroll>
                <el-pagination class="pagerBox" style="position: absolute; top: 85%; left: 40%"
                    @size-change="SizeChange" @current-change="CurrentChange" :current-page="pagInfo.pageNo"
                    :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize"
                    layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background></el-pagination>
            </div>
            <!-- '新增父子级工程弹框' -->
            <el-dialog :modal-append-to-body="false" :title="title" :visible.sync="dialogVisible" width="667px"
                @close="close">
                <div class="dialog_content">
                    <el-form ref="addEditForm" label-width="135px" size="medium" class="dialogFormBox"
                        :rules="addEditRules" :model="workerInfo">
                        <el-form-item label="分部分项名称" prop="taskName" v-if="dialogType == 3">
                            <el-input v-model="parentTaskName" placeholder="请输入" :disabled="dialogType == 3"></el-input>
                        </el-form-item>
                        <el-form-item v-else label="分部分项名称" prop="taskName">
                            <el-input v-model="workerInfo.taskName" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item v-if="dialogType == 3" label="子分部分项名称" prop="taskName">
                            <el-input v-model="workerInfo.taskName" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="计划开始时间" prop="startDate">
                            <el-date-picker @change="time1" v-model="workerInfo.startDate" type="date"
                                placeholder="请选择日期" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="计划结束时间" prop="finishDate">
                            <el-date-picker @change="time2" v-model="workerInfo.finishDate" :picker-options="dateBefore"
                                type="date" placeholder="请选择日期" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="实际开始时间" prop="actualStartDate">
                            <el-date-picker v-model="workerInfo.actualStartDate" type="date" placeholder="请选择日期"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="实际结束时间" prop="actualFinishDate">
                            <el-date-picker v-model="workerInfo.actualFinishDate" :picker-options="actualDateBefore"
                                type="date" placeholder="请选择日期" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="负责人" prop="dutyUserName">
                            <el-select v-model="workerInfo.dutyUserId" placeholder="请选择">
                                <el-option v-for="item in principalLsit" :key="item.userId" :label="item.realName"
                                    :value="item.userId"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="进度(%)" prop="progressRatio">
                            <el-input-number :disabled="workerInfo.status === 2" :max="100" style="width: 105%"
                                v-model="workerInfo.progressRatio" @input="validateInput"></el-input-number>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="workerInfo.remark" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="dialog-footer">
                    <el-button class="cancleBtn" @click="dialogVisible = false" icon="el-icon-circle-close"
                        size="medium">取消
                    </el-button>
                    <el-button type="primary" icon="el-icon-circle-check" @click="submitBtn" size="medium">确定
                    </el-button>
                </div>
            </el-dialog>
            <!-- 一级新增弹框 -->
            <el-dialog :modal-append-to-body="false" width="600px" title="导入" :visible.sync="uploadShow"
                @close="close2">
                
                <div class="dialog-footer">
                    <el-button class="cancleBtn" @click="uploadShow = false" icon="el-icon-circle-close"
                        size="medium">取消
                    </el-button>
                    <el-button type="primary" icon="el-icon-circle-check" size="medium" @click="handleUploadConfirm">确定
                    </el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import {
    addTaskProgressApi, deleteTaskProgressApi, editTaskProgressApi, getTaskProgressPageApi
} from '@/assets/js/api/examSystem/subjectManagement'

export default {
    // components: {
    //     detailpage
    // },
    mounted() { },
    data() {
        return {
            subjectList: [
                {id: 1,subjectName: '科目名称01', children:[{id: 1, subjectName: '子科目名称1'},{id: 2, subjectName: '子科目名称2'}]},
                {id: 2,subjectName: '科目名称02', children:[{id: 1, subjectName: '子科目名称1'},{id: 2, subjectName: '子科目名称2'}]},
                {id: 3,subjectName: '科目名称03', children:[{id: 1, subjectName: '子科目名称1'},{id: 2, subjectName: '子科目名称2'}]},
            ],


            rowData: {},
            parentTaskName: '', // 用于存储父级taskName
            pagInfo: {
                pageNo: 1, //页数
                pageSize: 10, //条数
                total: 0 //总条数
            },
            radio: 1,
            uploadShow: false, //导入弹框
            dialogType: 1,
            title: '',
            daterange: [],
            fileList: [], //上传文件
            projectSn: '',
            createUserId: '',
            listData: [],
            listData1: [],
            dialogVisible: false, //新增弹窗
            workerInfo: {
                taskName: '',
                startDate: '',
                finishDate: '',
                actualStartDate: '',
                actualFinishDate: '',
                dutyUserId: '',
                progressRatio: '',
                remark: '',
                parentId: 0,
                status: 0,
            },
            principalLsit: [], //负责人
            seedId: '',
            showTime: false, //工期
            queryInfo: {
                taskName: '',
                status: '',
                actualStartDate: '',
                actualFinishDate: ''
            },
            type: 'add',
            addEditRules: {
                taskName: [
                    {
                        required: true,
                        message: this.$t('message.personnelPosition.required'),
                        trigger: 'blur'
                    }
                ],
                startDate: [
                    {
                        required: true,
                        message: this.$t('message.personnelPosition.required'),
                        trigger: 'blur'
                    }
                ],
                finishDate: [
                    {
                        required: true,
                        message: this.$t('message.personnelPosition.required'),
                        trigger: 'blur'
                    }
                ]
            },
            times: '',
            fileName: ''
        }
    },
    computed: {
        headers() {
            return { Authorization: this.$store.state.userInfo.token }
        },
    },

    created() {
        this.projectSn = this.$store.state.projectSn
        this.getProgressListData()
    },
    methods: {
        //导入确定提交
        handleUploadConfirm() {
            if (this.fileName == '') {
                this.$message.warning('请先上传文件')
                return
            } else {
                this.uploadShow = false
                this.$message.success('操作成功')
                this.getProgressListData()
            }
        },
        handleRadioChange(val) {
            this.radio = val
        },
        //获取列表数据
        getProgressListData() {
            let data = {
                projectSn: this.projectSn,
                pageNo: this.pagInfo.pageNo,
                pageSize: this.pagInfo.pageSize,
                taskName: this.queryInfo.taskName,
                status: this.queryInfo.status,
                actualFinishDate_begin: this.queryInfo.actualStartDate,
                actualFinishDate_end: this.queryInfo.actualFinishDate
            }
            getTaskProgressPageApi(data).then(res => {
                if (res.code == 200) {
                    // this.listData = res.result.records
                    this.listData1 = res.result.records
                    this.pagInfo.total = res.result.total
                }
            })
        },
        //新增
        addBefore(addType, value) {
            if (addType == 1) {
                this.title = '新增分项'
                this.dialogType = 1
            } else {
                console.log('新增子分项点击', value)
                this.title = '新增子分项'
                this.dialogType = 3
                this.workerInfo.parentId = value.id
                this.parentTaskName = value.taskName
            }
            this.dialogVisible = true
        },
        // 编辑按钮
        editBefore(val) {
            this.dialogType = 2
            this.title = '编辑分项'
            console.log('当前点击的行', val)
            this.workerInfo = JSON.parse(JSON.stringify(val))
            this.workerInfo.id = val.id
            this.workerInfo.status = val.status
            this.dialogVisible = true
        },
        //编辑
        submitBtn() {
            this.$refs.addEditForm.validate(valid => {
                if (valid) {
                    let data = {
                        taskName: this.workerInfo.taskName,
                        startDate: this.workerInfo.startDate,
                        finishDate: this.workerInfo.finishDate,
                        actualStartDate: this.workerInfo.actualStartDate,
                        actualFinishDate: this.workerInfo.actualFinishDate,
                        dutyUserId: this.workerInfo.dutyUserId,
                        progressRatio: this.workerInfo.progressRatio,
                        remark: this.workerInfo.remark,
                        parentId: this.workerInfo.parentId,
                        projectSn: this.projectSn
                    }
                    if (this.dialogType == 1) {
                        addTaskProgressApi(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.message)
                                this.dialogVisible = false
                                this.getProgressListData()
                            }
                        })
                    } else if (this.dialogType == 2) {
                        data.id = this.workerInfo.id
                        editTaskProgressApi(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.message)
                                this.dialogVisible = false
                                this.getProgressListData()
                            }
                        })
                    } else if (this.dialogType == 3) {
                        data.parentId = this.workerInfo.parentId
                        data.level = 2
                        addTaskProgressApi(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.message)
                                this.dialogVisible = false
                                this.getProgressListData()
                            }
                        })
                    }
                } else {
                    return false
                }
            })
        },
        //删除
        deleteBefore(value) {
            this.$confirm(this.$t('message.quality.deleteHint'), this.$t('message.quality.hint'), {
                confirmButtonText: this.$t('message.quality.confirm'),
                cancelButtonText: this.$t('message.quality.cancel'),
                type: 'warning'
            })
                .then(() => {
                    let data = {
                        id: value.id
                    }
                    deleteTaskProgressApi(data).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: this.$t('message.quality.successfullyDelete') + '!'
                            })
                            this.getProgressListData()
                        }
                    })
                })
                .catch(() => { })
        },
        close() {
            this.workerInfo = {}
            this.workerInfo.parentId = 0
            this.$nextTick(() => {
                this.$refs.addEditForm.clearValidate()
            })
        },
        close2() {
            this.fileName = ''
            this.radio = 1
        },
        //刷新
        refreshBtn() {
            this.daterange = []
            this.pagInfo.pageNo = 1
            this.pagInfo.pageSize = 10
            this.queryInfo = {
                status: '',
                actualStartDate: '',
                actualFinishDate: '',
                taskName: ''
            }
            this.getProgressListData()
        },
        SizeChange(val) {
            this.pagInfo.pageSize = val
            this.getProgressListData()
        },
        CurrentChange(val) {
            this.pagInfo.pageNo = val
            this.getProgressListData()
        },
        changeDate() {
            if (this.daterange) {
                this.queryInfo.actualStartDate = this.daterange[0]
                this.queryInfo.actualFinishDate = this.daterange[1]
            } else {
                this.queryInfo.actualStartDate = ''
                this.queryInfo.actualFinishDate = ''
            }
        },
        validateInput() {
            let value = parseInt(this.workerInfo.progressRatio, 10)
            if (isNaN(value) || value < 0 || value > 100 || Math.floor(value) !== value) {
                this.workerInfo.progressRatio = ''
            }
        },
    }
}
</script>
<style lang="less" scoped>
.down {
    text-decoration: none;
    color: #fff;
}

.expintBtn {
    display: inline-block !important;
    margin-right: 10px;
}

.table_wrap {
    height: 800px;
    overflow: auto;
}

.delete-btn {
    color: #fe6565;
}

.dialogUplod {
    height: 100px;
    margin-left: 70px;
    margin-top: 40px;

    div {
        margin-bottom: 20px;
    }
}
</style>