<template>
    <div class="app-container">
        <el-card>
            <div>
                <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="dataList.results"
                border
                fit
                stripe
                highlight-current-row
                max-height="600"
            >
                <el-table-column type="index" width="50" />
                <el-table-column label="年份" prop="year"></el-table-column>
                <el-table-column label="重大质量事故(件)" prop="pgoal_1"></el-table-column>
                <el-table-column label="报告/证书合格率(%)" prop="pgoal_2"></el-table-column>
                <el-table-column label="报告/证书及时率(%)" prop="pgoal_3"></el-table-column>
                <el-table-column label="能力验证满意率(%)" prop="pgoal_4"></el-table-column>
                <el-table-column label="客户投诉处理满意率(%)" prop="pgoal_5"></el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="220px"
                >
                    <template slot-scope="scope">
                        <el-link
                        v-if="checkPermission(['task2'])"
                        @click="handleEdit(scope)"
                        >编辑</el-link>
                        <el-link
                        v-if="checkPermission(['task2'])"
                        type="danger"
                        @click="handleDelete(scope)"
                        >删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="dataList.count > 0"
                :total="dataList.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="form"
            label-width="160px"
            label-position="right"
            :rules="rule1"
            >
                <el-form-item label="年份" prop="year">
                    <el-date-picker
                        v-model="form.year"
                        type="year"
                        placeholder="选择年"
                        value-format="yyyy"
                        style="width:90%"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="重大质量事故" prop="pgoal_1">
                    <el-input-number style="width:90%" v-model="form.pgoal_1" :precision="0" :min="0" controls-position="right" size="large"/>
                    <span>件</span>
                </el-form-item>
                <el-form-item label="报告/证书合格率" prop="pgoal_2">
                    <el-input-number style="width:90%" v-model="form.pgoal_2" :precision="1" :min="0" :max="100" controls-position="right" size="large"/>
                    <span>%</span>
                </el-form-item>
                <el-form-item label="报告/证书及时率" prop="pgoal_3">
                    <el-input-number style="width:90%" v-model="form.pgoal_3" :precision="1" :min="0" :max="100" controls-position="right" size="large"/>
                    <span>%</span>
                </el-form-item>
                <el-form-item label="能力验证满意率" prop="pgoal_4">
                    <el-input-number style="width:90%" v-model="form.pgoal_4" :precision="1" :min="0" :max="100" controls-position="right" size="large"/>
                    <span>%</span>
                </el-form-item>
                <el-form-item label="客户投诉处理满意率" prop="pgoal_5">
                    <el-input-number style="width:90%" v-model="form.pgoal_5" :precision="1" :min="0" :max="100" controls-position="right" size="large"/>
                    <span>%</span>
                </el-form-item>
                <el-form-item label="模板文件" prop="template" v-if="dialogVisible">
                    <el-upload
                        ref="upload1"
                        :action="upUrl"
                        :on-preview="handlePreview"
                        :on-success="handleUpSuccess1"
                        :on-remove="handleRemove1"
                        :headers="upHeaders"
                        :file-list="fileList1"
                        :limit="5"
                        accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"
                    >
                        <el-button size="small" type="primary">上传文件</el-button>
                    </el-upload>
                </el-form-item>
                <!-- <el-form-item label="模板文件" prop="template" v-if="dialogVisible">
                    <el-upload
                        ref="upload1"
                        :action="upUrl"
                        :on-preview="handlePreview"
                        :on-success="handleUpSuccess2"
                        :on-remove="handleRemove2"
                        :headers="upHeaders"
                        :file-list="fileList2"
                        :limit="1"
                        accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx"
                    >
                        <el-button size="small" type="primary">上传文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="模板文件" prop="template" v-if="dialogVisible">
                    <el-upload
                        ref="upload1"
                        :action="upUrl"
                        :on-preview="handlePreview"
                        :on-success="handleUpSuccess3"
                        :on-remove="handleRemove3"
                        :headers="upHeaders"
                        :file-list="fileList3"
                        :limit="1"
                        accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx"
                    >
                        <el-button size="small" type="primary">上传文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="模板文件" prop="template" v-if="dialogVisible">
                    <el-upload
                        ref="upload1"
                        :action="upUrl"
                        :on-preview="handlePreview"
                        :on-success="handleUpSuccess4"
                        :on-remove="handleRemove4"
                        :headers="upHeaders"
                        :file-list="fileList4"
                        :limit="1"
                        accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx"
                    >
                        <el-button size="small" type="primary">上传文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="模板文件" prop="template" v-if="dialogVisible">
                    <el-upload
                        ref="upload1"
                        :action="upUrl"
                        :on-preview="handlePreview"
                        :on-success="handleUpSuccess5"
                        :on-remove="handleRemove5"
                        :headers="upHeaders"
                        :file-list="fileList5"
                        :limit="1"
                        accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx"
                    >
                        <el-button size="small" type="primary">上传文件</el-button>
                    </el-upload>
                </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 { getPgoalList,createPgoal,updatePgoal,deletePgoal } from "@/api/task";
    import checkPermission from "@/utils/permission";
    import Pagination from "@/components/Pagination"; 
    import { upUrl, upHeaders } from "@/api/file";
    const defaultForm = {
        year: "",
        pgoal_1: null,
        pgoal_2: null,
        pgoal_3: null,
        pgoal_4: null,
        pgoal_5: null,
        pgoal_1_file: null,
        pgoal_2_file: null,
        pgoal_3_file: null,
        pgoal_4_file: null,
        pgoal_4_file: null,
    };
    export default {
        components:{Pagination},
        data(){
            return{
                upHeaders: upHeaders(),
                upUrl: upUrl(),
                fileList1:[],
                // fileList2:[],
                // fileList3:[],
                // fileList4:[],
                // fileList5:[],
                dialogType:"new",
                form: defaultForm,
                listLoading:false,
                dialogVisible:false,
                dataList:{
                    results:[],
                    count:0,
                },
                listQuery:{
                    page: 1,
                    search:'',
                    page_size: 20,
                },
                rule1: {
                    year: [{ required: true, message: "请选择", trigger: "blur" }],
                    pgoal_1: [{ required: true, message: "请填写", trigger: "blur" }],
                    pgoal_2: [{ required: true, message: "请填写", trigger: "blur" }],
                    pgoal_3: [{ required: true, message: "请填写", trigger: "blur" }],
                    pgoal_4: [{ required: true, message: "请填写", trigger: "blur" }],
                    pgoal_5: [{ required: true, message: "请填写", trigger: "blur" }],
                },
            };
        },
        mounted(){
            this.getList();
        },
        methods:{
            handlePreview(file) {
            if ("url" in file) {
                window.open(file.url);
            } else {
                window.open(file.response.data.path);
            }
            },
            handleUpSuccess1(res, file, filelist) {
                this.form.pgoal_1_file = '';
                this.form.pgoal_2_file = '';
                this.form.pgoal_3_file = '';
                this.form.pgoal_4_file = '';
                this.form.pgoal_5_file = '';
                for(let i=0;i<filelist.length;i++){
                    let key = 'pgoal_'+(i+1)+'_file';
                    if(filelist[i].response){
                        this.form[key] = filelist[i].response.data.id;
                    }else{
                        this.form[key] = filelist[i].id;
                    }
                }
            },
            // handleUpSuccess2(res, file, filelist) {
            //     this.form.pgoal_2_file = res.data.id;
            // },
            handleRemove1(file, filelist){
                this.form.pgoal_1_file = '';
                this.form.pgoal_2_file = '';
                this.form.pgoal_3_file = '';
                this.form.pgoal_4_file = '';
                this.form.pgoal_5_file = '';
                for(let i=0;i<filelist.length;i++){
                    let key = 'pgoal_'+(i+1)+'_file';
                    if(filelist[i].response){
                        this.form[key] = filelist[i].response.data.id;
                    }else{
                        this.form[key] = filelist[i].id;
                    }
                }
            },
            // handleRemove2(file, filelist){
            //     this.form.pgoal_2_file = null;
            // },
            checkPermission,
            getList(){
                this.listLoading = true;
                getPgoalList(this.listQuery).then((response) => {
                    if (response.data) {
                        let data = response.data.results;
                        for(let i=0;i<data.length;i++){
                            let 
                            pgoal_2 = data[i].pgoal_2+'',
                            pgoal_3 = data[i].pgoal_3+'',
                            pgoal_4 = data[i].pgoal_4+'',
                            pgoal_5 = data[i].pgoal_5+'';
                            
                            if(pgoal_2.indexOf('.')>-1){}else{
                                pgoal_2 = pgoal_2+'.0';
                                data[i].pgoal_2 = pgoal_2;
                            }
                            if(pgoal_3.indexOf('.')>-1){}else{
                                pgoal_3 = pgoal_3+'.0';
                                data[i].pgoal_3 = pgoal_3;
                            }
                            if(pgoal_4.indexOf('.')>-1){}else{
                                pgoal_4 = pgoal_4+'.0';
                                data[i].pgoal_4 = pgoal_4;
                            }
                            if(pgoal_5.indexOf('.')>-1){}else{
                                pgoal_5 = pgoal_5+'.0';
                                data[i].pgoal_5 = pgoal_5;
                            }
                        }
                        this.dataList.results = data;
                        this.dataList.count = response.data.count;
                    }
                    this.listLoading = false;
                });
            },
            handleCreate() {
                this.form = Object.assign({}, defaultForm);
                this.dialogType = "new";
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.$refs["Form"].clearValidate();
                });
            },
            handleEdit(scope) {
                this.form = Object.assign({}, scope.row); // copy obj
                this.form.year = ''+this.form.year;
                this.fileList1=[];
                if(scope.row.pgoal_1_file_!==null){
                    this.fileList1.push({
                        name:scope.row.pgoal_1_file_.name,
                        url: scope.row.pgoal_1_file_.path,
                        id: scope.row.pgoal_1_file
                    })
                }
                if(scope.row.pgoal_2_file_!==null){
                    this.fileList1.push({
                        name:scope.row.pgoal_2_file_.name,
                        url: scope.row.pgoal_2_file_.path,
                        id: scope.row.pgoal_2_file
                    })
                }
                if(scope.row.pgoal_3_file_!==null){
                    this.fileList1.push({
                        name:scope.row.pgoal_3_file_.name,
                        url: scope.row.pgoal_3_file_.path,
                        id: scope.row.pgoal_3_file
                    })
                }
                if(scope.row.pgoal_4_file_!==null){
                    this.fileList1.push({
                        name:scope.row.pgoal_4_file_.name,
                        url:scope.row.pgoal_4_file_.path,
                        id:scope.row.pgoal_4_file
                    })
                }
                if(scope.row.pgoal_5_file_!==null){
                    this.fileList1.push({
                        name:scope.row.pgoal_5_file_.name,
                        url: scope.row.pgoal_5_file_.path,
                        id: scope.row.pgoal_5_file
                    })
                }
                // this.fileList2=[{
                //     name:this.form.pgoal_2_file_.name,
                //     url: this.form.pgoal_2_file_.path,
                // }];
                this.dialogType = "edit";
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.$refs["Form"].clearValidate();
                });
            },
            handleDelete(scope) {
                this.$confirm("确认删除?该操作将删除该任务所有报送记录!", "警告", {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "error",
                }).then(async () => {
                    await deletePgoal(scope.row.id);
                    this.getList();
                    this.$message.success("成功");
                    })
                    .catch((err) => {
                    console.error(err);
                });
            },
            confirm(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        const isEdit = this.dialogType === "edit";
                        if (isEdit) {
                            updatePgoal(this.form.id, this.form).then((res) => {
                            if (res.code >= 200) {
                                this.getList();
                                this.dialogVisible = false; 
                                this.$message.success("成功");
                            }
                            });
                        } else {
                            createPgoal(this.form).then((res) => {
                            if (res.code >= 200) {
                                this.getList();
                                this.dialogVisible = false;
                                this.$message.success("成功");
                            }
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
        },
    };
</script>

<style>
</style>