<template>
    <div class="app-container">
        <el-card>
            <div>
                <el-input
                    v-model="listQuery.year"
                    placeholder="请输入年份"
                    style="width: 300px"
                    class="filter-item"
                    @keyup.enter.native="handleFilter"
                />
                <el-button
                    class="filter-item"
                    type="primary"
                    icon="el-icon-search"
                    @click="handleFilter"
                >搜索</el-button>
                <el-button
                    class="filter-item"
                    type="primary"
                    icon="el-icon-refresh-left"
                    @click="resetFilter"
                >重置</el-button>
            </div>
            <div style="margin-top: 10px">
                <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    @click="handleCreate"
                >创建任务</el-button>
            </div>
        </el-card>
        <el-card style="margin-top: 10px">
            <el-table
                v-loading="listLoading"
                :data="taskList.results"
                border
                fit
                stripe
                highlight-current-row
                max-height="600"
            >
                <el-table-column type="index" width="50" />
                <el-table-column label="类型">
                    <template slot-scope="scope">{{ typeOptions[scope.row.type] }}</template>
                </el-table-column>
                <el-table-column label="年份" prop="year"></el-table-column>
                <el-table-column label="周期">
                    <template slot-scope="scope">{{ cycleList[scope.row.cycle] }}</template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state=='10'" type="warning">创建中</el-tag>
                        <el-tag v-else-if="scope.row.state=='20'" type="primary">进行中</el-tag>
                        <el-tag v-else type="success">已关闭</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="截止日期" prop="end_date"></el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="220px"
                >
                    <template slot-scope="scope">
                        <el-link
                        type="primary"
                        v-if="checkPermission(['task2do'])"
                        @click="handleDo(scope)"
                        >执行</el-link>
                        <el-link
                        v-if="checkPermission(['task2do'])"
                        @click="handleEdit(scope)"
                        >编辑</el-link>
                        <el-link
                        v-if="checkPermission(['task2do'])"
                        @click="handleClose(scope)"
                        >关闭</el-link>
                        <el-link
                        v-if="checkPermission(['task2do'])"
                        type="danger"
                        @click="handleDelete(scope)"
                        >删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="taskList.count > 0"
                :total="taskList.count"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.page_size"
                @pagination="getList"
            />
        </el-card>
        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogType === 'edit' ? '编辑任务' : '新增任务'"
        >
            <el-form
            ref="Form"
            :model="task"
            label-width="80px"
            label-position="right"
            :rules="rule1"
            >
                <el-form-item label="年份" prop="year">
                    <el-date-picker
                        v-model="task.year"
                        type="year"
                        placeholder="选择年"
                        value-format="yyyy"
                        style="width:50%"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="task.type">
                        <el-radio :label="10">目标制定</el-radio>
                        <el-radio :label="20">日常监督</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="周期" prop="cycle" v-if="task.type==20">
                    <el-select
                        v-model="task.cycle"
                        placeholder="周期"
                        clearable
                        style="width: 50%"
                        @change="handleFilter"
                    >
                        <el-option
                            v-for="item in cycleOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="截止日期" prop="end_date">
                    <el-date-picker
                        v-model="task.end_date"
                        type="date"
                        placeholder="选择截止日期"
                        value-format="yyyy-MM-dd"
                        style="width:50%"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div style="text-align: right">
                <el-button type="danger" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirm('Form')">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { getTask2List,createTask2,updateTask2,startTask2,closeTask2,deleteTask2 } from "@/api/task";
    import checkPermission from "@/utils/permission";
    import Pagination from "@/components/Pagination"; 
    const defaulttask = {
        year: "",
        cycle: "",
        type: 10,
        end_date:''
    };
    export default {
        components:{Pagination},
        data(){
            return{
                dialogType:"new",
                task: defaulttask,
                listLoading:false,
                dialogVisible:false,
                taskList:{
                    results:[],
                    count:0,
                },
                listQuery:{
                    page: 1,
                    year:'',
                    page_size: 20,
                },
                typeOptions:{
                    10:"目标制定",
                    20:"日常监督"
                },
                cycleList:["年","1-2月","3-4月","5-6月","7-8月","9-10月","11-12月"],
                cycleOptions:[
                    // {id:0,name:"年"},
                    {id:1,name:"1-2月"},
                    {id:2,name:"3-4月"},
                    {id:3,name:"5-6月"},
                    {id:4,name:"7-8月"},
                    {id:5,name:"9-10月"},
                    {id:6,name:"11-12月"},
                ],

                rule1: {
                    year: [{ required: true, message: "请选择", trigger: "blur" }],
                    cycle: [{ required: true, message: "请选择", trigger: "blur" }],
                    end_date: [{ required: true, message: "请选择", trigger: "blur" }],
                },
            };
        },
        mounted(){
            this.getList();
        },
        methods:{
            checkPermission,
            getList(){
                this.listLoading = true;
                getTask2List(this.listQuery).then((response) => {
                    if (response.data) {
                    this.taskList = response.data;
                    }
                    this.listLoading = false;
                });
            },
            handleFilter() {
                this.listQuery.page = 1;
                this.getList();
            },
            resetFilter() {
                this.listQuery = {
                    page: 1,
                    search:'',
                    page_size: 20,
                }
                this.getList();
            },
            handleCreate() {
                this.task = Object.assign({}, defaulttask);
                this.dialogType = "new";
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.$refs["Form"].clearValidate();
                });
            },
            handleDo(scope) {
                this.$router.push({name: "Task2do", params: { id: scope.row.id }, })
            },
            handleEdit(scope) {
                this.task = Object.assign({}, scope.row); // copy obj
                this.task.year = ''+this.task.year;
                this.task.end_date = ''+this.task.end_date;
                this.dialogType = "edit";
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.$refs["Form"].clearValidate();
                });
            },
            handleClose(scope) {
                this.$confirm("确认关闭该任务吗?", "警告", {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(async () => {
                    await closeTask2(scope.row.id);
                    this.getList();
                    this.$message.success("成功");
                })
                .catch((err) => {
                console.error(err);
                });
            },
            handleDelete(scope) {
                this.$confirm("确认删除?该操作将删除该任务所有报送记录!", "警告", {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "error",
                })
                .then(async () => {
                await deleteTask2(scope.row.id);
                this.getList();
                this.$message.success("成功");
                })
                .catch((err) => {
                console.error(err);
                });
            },
            confirm(form) {
                debugger;
                console.log(this.task)
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        
                        const isEdit = this.dialogType === "edit";
                        if (isEdit) {
                            updateTask2(this.task.id, this.task).then((res) => {
                            if (res.code >= 200) {
                                this.getList();
                                this.dialogVisible = false; 
                                this.$message.success("成功");
                            }
                            });
                        } else {
                            if(this.task.type==10){
                            this.task.cycle = 0;
                        }
                            createTask2(this.task).then((res) => {
                            if (res.code >= 200) {
                                this.getList();
                                this.dialogVisible = false;
                                this.$router.push({name: "Task2do", params: { id: res.data.id }, })
                                this.$message.success("成功");
                            }
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
        },
    };
</script>

<style>
</style>