<template>
    <div class="app-container">
        <el-card class="elHeader">
            <el-button type="primary" icon="el-icon-plus" @click="handleAddFile">新增</el-button>
        </el-card>
        <el-card style="margin-top: 10px">
            <el-table v-loading="listLoading" 
            :data="tableData.results"  
            border fit stripe height="500px"
                highlight-current-row>
                <el-table-column type="index" width="50" />
                <el-table-column label="活动名称" prop="name"></el-table-column>
                <el-table-column label="活动角色" prop="roles">
                    <template slot-scope="scope">
                        <span>{{ac_options[scope.row.roles]}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合作方" prop="collaborators"></el-table-column>
                <el-table-column label="组织单位" prop="orgunits"></el-table-column>
                <el-table-column label="活动地点" prop="place"></el-table-column>
                <el-table-column label="活动参与单位数量" prop="participations"></el-table-column>
                <el-table-column label="活动中发挥的作用" prop="function"></el-table-column>
                <el-table-column label="活动收益" prop="earnings"></el-table-column>
                <!-- <el-table-column align="center" label="文件下载">
                    <template slot-scope="scope" v-if="scope.row.file_.file">
                        <el-link :href="scope.row.file_.file" type="primary">下载</el-link>
                    </template>
                </el-table-column> -->
                <el-table-column align="center" label="操作" width="120px" fixed="right">
                    <template slot-scope="scope">
                        <el-link :disabled="!checkPermission(['infoCollect_RS'])" type="primary" size="small"
                            @click="handleEdit(scope)">编辑</el-link>
                        <el-divider direction="vertical"
                            v-if="checkPermission(['infoCollect_RS']) && checkPermission(['infoCollect_RS'])"></el-divider>
                        <el-link :disabled="!checkPermission(['infoCollect_RS'])" type="danger" size="small"
                            @click="handleDelete(scope)">删除</el-link>
                    </template>
                </el-table-column>
                <el-col :span="12" style="margin-top: 5px;">
             <div class="cardHead">
                <span class="cardTitle">质量活动</span>
              </div>
              
        </el-col>
            </el-table>
            <pagination v-show="tableData.count > 0" :total="tableData.count" :page.sync="listQuery.page"
                :limit.sync="listQuery.page_size" @pagination="getTableList" />
        </el-card>
        <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'edit' ? '编辑' : '新增'">
            <el-form ref="Form" :model="Content" label-width="80px" label-position="right" :rules="rule">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="Content.name" placeholder="名称"/>
                </el-form-item>
                <el-form-item label="活动角色">
                    <el-select 
                        v-model="Content.roles"
                        placeholder="请选择"
                        >
                        <el-option
                            v-for="item in activateOptions"
                            :key="item.value"
                            :label="item.key"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="合作方" prop="collaborators">
                    <el-input v-model="Content.collaborators" ></el-input>     
                </el-form-item>
                <el-form-item label="组织单位" prop="orgunits">
                    <el-input v-model="Content.orgunits" ></el-input>     
                </el-form-item>
                <el-form-item label="活动地点" prop="place">
                    <el-input v-model="Content.place"></el-input>     
                </el-form-item>
                <el-form-item label="活动参与单位数量" prop="participations" >
                    <el-input-number
                        v-model="Content.participations"
                        :min="1"
                        controls-position="right"
                        :step="1"
                        step-strictly="true"
                    />
                    <!-- <el-input v-model="Content.participations"></el-input>      -->
                </el-form-item>
                <el-form-item label="活动中发挥的作用" prop="function" >
                    <el-input v-model="Content.function"></el-input>     
                </el-form-item>
                <el-form-item label="活动收益" prop="earnings" >
                    <el-input v-model="Content.earnings"></el-input>     
                </el-form-item>
                <el-form-item label="活动时间" prop="activate_time">
                    <el-date-picker
                        v-model="Content.activate_time"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        style="width:50%"
                    >
                    </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="文件" prop="file" v-if="dialogVisible">
                    <el-upload ref="upload" :action="upUrl" :on-preview="handlePreview" :on-success="handleUpSuccess"
                        :on-remove="handleRemove" :headers="upHeaders" :file-list="fileList" :limit="1"
                        accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf">
                        <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 checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getDictList, getDictTypeList } from "@/api/dict";
import { getRcs, createRc, del_activate, updateRc, getMyRcs } from "@/api/qa";
import { upUrl, upHeaders } from "@/api/file";

const defaultContent = {
                name: "",
                roles: "",
                collaborators: "",
                orgunits: "",
                place: "",
                activate_time: "",
                participations: "",
                function: "",
                earnings: ""
                };

export default {
    components: { Pagination, Treeselect },
    data(){
        return {
            form: {
                name: "",
                roles: "",
                collaborators: "",
                orgunits: "",
                place: "",
                activate_time: "",
                participations: "",
                function: "",
                earnings: "",
            },
            upHeaders: upHeaders(),
            upUrl: upUrl(),
            fileList: [],
            Content: defaultContent,
            typeOptions: [],
            listLoading: false,
            dialogVisible: false,
            listQuery: {
                page: 1,
                page_size: 20,
            },
            tableData: {
                count: 0
            },
            dialogType: "new",
            rule: {
                name: [{ required: true, message: "请输入名称", trigger: "blur" }],
            },
            filterOrgText: "",
            // tableHeight: '300px',
            activateOptions:[
                {key:'组织方',value:0},
                {key:'参与方',value:1}
                ],
            ac_options:{0:'组织方', 1:'参与方'}
        }
    },
    mounted() {
                let that = this;
                let height1 = document.getElementsByClassName('app-main')[0].clientHeight;
                let height2 = document.getElementsByClassName('elHeader')[0].clientHeight;
                that.tableHeight = height1 - height2 - 70;
                console.log(that.tableHeight)
                that.getList();

            },
    methods: {
      
        //提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.dialogType == "new") {
                        this.addData();
                    } else {
                        this.editData();
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        getTableList(){
            this.getList()
            
        },
        handlePreview(file) {
            if ("url" in file) {
                window.open(file.url);
            } else {
                window.open(file.response.data.path);
            }
        },
        handleUpSuccess(res, file, filelist) {
            this.Content.file = res.data.id;

        },
        handleRemove(file, filelist) {
            this.Content.file = null;
        },
        checkPermission,

        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },

        getList() {
            this.listLoading = true;
            this.tableData.results =[];
            this.tableData.count =0;
            getMyRcs(this.listQuery).then((response) => {
                console.log(response);
                if (response.data) {
                  this.tableData = response.data;

                }
                this.listLoading = false;
            });
        },

        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },
        handleAddFile() {
            this.Content = Object.assign({}, defaultContent);
            this.dialogType = "new";
            this.dialogVisible = true;
            this.fileList = []
            this.$nextTick(() => {
                this.$refs["Form"].clearValidate();
            });
        },
        handleEdit(scope) {
            this.Content = Object.assign({}, scope.row); // copy obj
            this.dialogType = "edit";
            this.dialogVisible = true;
            if (this.Content.file) {
                this.fileList = [
                    {
                        name: this.Content.file_.name,
                        url: this.Content.file,
                    },
                ];
            }
            this.$nextTick(() => {
                this.$refs["Form"].clearValidate();
            });
        },
        handleDelete(scope) {
            this.$confirm("确认删除?", "警告", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "error",
            })
                .then(async () => {
                    await del_activate(scope.row.id).then(() => {
                    this.getList();
                    this.$message.success("成功");
                    this.getTableList();
                    })
                    
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        async confirm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    const isEdit = this.dialogType === "edit";
                    if (isEdit) {
                        console.log(this.Content)
                        updateRc(this.Content.id, this.Content).then((response) => {
                        if (response.data) {
                        this.tableData = response.data;
                        }
                        this.listLoading = false;
                        this.dialogVisible = false;
                        this.getTableList();
                });
                    } else {
                        createRc(this.Content).then((response) => {
                        if (response.data) {
                        this.tableData = response.data;
                        }
                        this.listLoading = false;
                        this.dialogVisible = false;
                        this.getTableList();
            });
                    }
                } else {
                    return false;
                }
            });
        },
    },
           
};
</script>
<style></style>
@/api/qa