<template>
    <div class="g-main">
        <div class="m-search">
            <el-form :inline="true" ref="ref_searchform" :label-width="'100px'">
                <div>
                    <el-form-item label="发布单位">
                        <el-input v-model.trim="formData.publishUnitName" size="small" class="item_width_1" clearable
                            placeholder="请输入">
                        </el-input>
      
                    </el-form-item>
                    <el-form-item label="标题">
                        <el-input v-model.trim="formData.projectTitle" size="small" class="item_width_1" clearable
                            placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="formData.onlineStatus" placeholder="请选择" clearable>
                            <el-option v-for="item in onlineList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="block">
                    <div style="display: flex; justify-content: flex-end;">
                        <el-button style="margin-left:10px" class="diy-button--blue" size="small"
                            @click="handleSearch">查询</el-button>
                        <el-button style="margin-left:10px" class="diy-button--white" size="small"
                            @click="resetSearch">重置</el-button>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="m-table">
            <el-button style="" class="diy-button--add" size="small" @click="handleAdd">新增</el-button>
            <!-- <el-button class="diy-button--white" size="small">
                <el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" action="uploadUlr"
                    :limit="1" :accept="'.xls,.xlsx'" :with-credentials="true" :show-file-list="false"
                    :auto-upload="true" :on-progress="handleProgress" :on-success="handleExcelSuccess"
                    :before-upload="beforeExcelUpload" :http-request="uploadHttpRequest">
                    导入
                </el-upload>
            </el-button> -->
            <el-table class="table" :data="tableData" border style="width: 100%">
                <el-table-column label="序号" header-align="center" align="center" type="index"
                    width="80"></el-table-column>
                    <el-table-column prop="projectTitle" header-align="center" align="center" label="名称"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="publishUnitName" header-align="center" align="center" label="发布单位"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="createdTime" header-align="center" align="center" label="发布时间"
                    :show-overflow-tooltip="true">
                    <!-- <template slot-scope="scope">
        <span>{{ scope.row.enabled === 1 ? '关闭' : '显示' }}</span>
      </template> -->
                </el-table-column>
                <el-table-column prop="projectScopeOrgName" header-align="center" align="center" label="服务区域"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceClassNameStr" header-align="center" align="center" label="服务类型"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="projectLevelName" header-align="center" align="center" label="级别"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="contractorName" header-align="center" align="center" label="承接单位"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="projectStatusName" header-align="center" align="center" label="状态"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <!-- <el-table-column prop="createdTime" header-align="center" align="center" label="注册时间" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="points" header-align="center" align="center" label="积分":show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="actNum" header-align="center" align="center" label="活动次数":show-overflow-tooltip="true">
          </el-table-column> -->
                <el-table-column label="操作" fixed="right" width="350" header-align="center" align="center"
                    class="operate">
                    <template slot-scope="scope">
                        <el-button type="text" style="color:#1C6AFD;" size="small"
                            @click="handleDetail(scope.row)">查看</el-button>
                        <el-button type="text" style="color:#1C6AFD;" size="small" v-if="scope.row.onlineStatus==0&&scope.row.projectStatus==10"
                            @click="handleEdit(scope.row)">修改</el-button>
                        <el-button type="text" style="color:#1C6AFD;"v-if="scope.row.onlineStatus==1"
                        size="small" @click="handleupOnline(scope.row)" >下线</el-button>
                        <el-button  type="text" v-if="scope.row.onlineStatus==0"
                            style="color:#1C6AFD;" size="small" @click="handleupOnline(scope.row)">上线</el-button>
                        <el-button type="text" style="color:#1C6AFD;" size="small" v-if="scope.row.onlineStatus==0&&scope.row.projectStatus==10"
                            @click="handledelete(scope.row)">删除</el-button>
                        <el-button type="text" style="color:#1C6AFD;" size="small" v-if="scope.row.source==1"
                            @click="handlerecruit(scope.row)">招募</el-button>
                        <!-- <el-button type="text" style="color:#1C6AFD;" size="small"
                            @click="handleprocessl(scope.row)">审核</el-button> -->
                            <el-button type="text" style="color:#1C6AFD;" size="small"
                            @click="handlerecord(scope.row)">记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="pageNo" :page-sizes="[10, 20, 50]" :page-size="pageSize"
                    layout="sizes, prev, pager, next, total" :total="total">
                </el-pagination>
            </div>
            <el-dialog :visible.sync="showAdd" :close-on-click-modal="false" :close-on-press-escape="false" title="新增"
                width="850px" top="10vh" class="dialog-h" @closed="showAddClose">
                <add v-if="showAdd" @showAddClose="showAddClose" />
            </el-dialog>
            <el-dialog :visible.sync="showInfo" :close-on-click-modal="false" :close-on-press-escape="false" title="查看"
                width="850px" top="10vh" class="dialog-h" @closed="showInfoClose">
                <info v-if="showInfo" :VolunteerList="infoList" @showInfoClose="showInfoClose" />
            </el-dialog>
            <el-dialog :visible.sync="showEdit" :close-on-click-modal="false" :close-on-press-escape="false" title="修改"
                width="850px" top="10vh" class="dialog-h" @closed="showEditClose">
                <edit v-if="showEdit" :VolunteerList="EditList" @showEditClose="showEditClose" />
            </el-dialog>
            <el-dialog :visible.sync="showrecruit" :close-on-click-modal="false" :close-on-press-escape="false"
                title="招募" width="1000px" top="10vh" class="dialog-h" @closed="handlerecruitClose">
                <recruit v-if="showrecruit" :EditList="EditList" @handlerecruitClose="handlerecruitClose" />
            </el-dialog>
            <el-dialog :visible.sync="showprocess" :close-on-click-modal="false" :close-on-press-escape="false"
                title="审查" width="850px" top="10vh" class="dialog-h" @closed="handleprocesslClose">
                <process v-if="showprocess" @handleprocesslClose="handleprocesslClose" :VolunteerList="EditList" />
            </el-dialog>
            <el-dialog :visible.sync="showrecord" :close-on-click-modal="false" :close-on-press-escape="false"
                title="查看记录" width="850px" top="10vh" class="dialog-h" @closed="handlerecordClose">
                <Record v-if="showrecord" @handlerecordClose="handlerecordClose" :VolunteerList="EditList" />
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import add from "./add.vue"
import info from "./info.vue"
import edit from "./edit.vue"
import recruit from "./recruit"

import process from "./process.vue"
import Record from "./record"
// import integral from "./integral"
// //   import projectInfo from "./cpts/project-info";
import axios from "axios";

export default {
    components: {
        add,info,edit,recruit,process,Record
    },

    data() {
        return {
            onlineList: [
                    { value: 1, label: "上线" },
                    { value: 0, label: "下线" },
                ],
            formData: {
                publishUnitName:"",
                projectTitle:"",
                onlineStatus:"",
        
            },
            showrecord:false,
            infoList:{},
            showrecruit:false,
            showprocess:false,
            EditList:{},
            showAdd: false,
            showMember: false,
            showEdit: false,
            //   pageType: "list", // 列表list 处理dispose 详情info 议题详情issue-info
            pageNo: 1,
            pageSize: 20,
            total: 1,
            tableData: [
          ],
          showInfo:false,
          fmData:{}

        };
      },
      computed: {
        maxTableHeight() {
          return this.$store.state.inIframe
            ? this.clientHeight - 400 + this.iframeHeigh
            : this.clientHeight - 400;
        },
        ...mapGetters(["clientHeight", "iframeHeight"]),
      },
      watch: {
    
      },
      mounted() {
        this.getTableData();
      },
      methods: {
        //记录
        handlerecord(row){
        this.showrecord=true
        this.EditList=row
        console.log(row,this.fmData,"row");  
        },
        //关闭记录
        handlerecordClose(){
        this.showrecord=false 
        },
        //删除活动
        handledelete(row){
      let url="/voluntary/project/admin/delete"
      let params={
        id:row.id
      }
      requestPost(url,params).then((res)=>{
        if(res.code==0){
          this.$message.success("删除成功")
          this.getTableData()
        }else{
          this.$message.error(res.msg)
        }
      })
    },
         //活动上下线
         handleupOnline(row){
          console.log(row,"row");
          if (row.onlineStatus==1) {
            row.onlineStatus=0
            
          }else{
            row.onlineStatus=1
          }

          let url="/voluntary/project/admin/toogleOnlineStatus",
          params={
            id:row.id,
            onlineStatus:row.onlineStatus
          }
          requestPost(url,params).then(res=>{
            console.log(res);
            this.getTableData()
            
          })
          
        },
        //招募
        handlerecruit(row){
            this.showrecruit=true
            this.EditList=row
            console.log(row,this.fmData,"row");  
        },
        //关闭招募
        handlerecruitClose(){
            this.showrecruit=false
            this.getTableData()
        },
        //审查
        handleprocessl(row){
            this.showprocess=true
            this.EditList=row
            console.log(row,this.fmData,"row");
        },
        //关闭审查
        
        handleprocesslClose(){
            this.showprocess=false
            this.getTableData()
        },
        //成员管理
        handleshowMember(){
            this.showMember=true
        },
        //关闭成员管理
        MemberManagementClose(){
            this.showMember=false 
            this.getTableData() 
        },
        //修改
        handleEdit(row){
            this.showEdit=true,
            this.EditList=row
             console.log(row,this.EditList,"row");
        },
        //关闭修改
        showEditClose(){
            this.showEdit=false
            this.getTableData()
        },
        //新增
        handleAdd(){
            this.showAdd=true
        },
        //关闭新增
        showAddClose(){
            console.log("sdlkfjklsdf1");
            this.showAdd=false
            this.getTableData()
        },
        //关闭查看
        showInfoClose(){
            this.showEdit=false
            this.getTableData()
        },
        //查询列表
        async getTableData() {
          // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/project-list";
          const url = "/voluntary/project/admin/list";
  
          let params={
            pageSize:this.pageSize,
            pageNo:this.pageNo,
            ...this.formData
          }
          const { data, code, msg } = await requestGet(url,params);
          if (code === 0) {
            console.log("列表请求成功！！！！！！！！！！！！！！");
            this.total = data.total || 0;
            this.tableData = data.list
          } else {
          }
        },
        //模板
        async uploadHttpRequest(file) {
              this.importLoading = true;
              this.importBtnTitle = '正在上传中...';
              this.$message({
                  showClose: true,
                  dangerouslyUseHTMLString: true,
                  message: "导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度",
                  duration: 3000
              });
              let than = this;
              document.getElementById('clickA').addEventListener('click', function () {
                  than.$router.replace('/main/importRecord-index');
              });
              const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
              formData.append('file', file.file); //添加文件对象
              formData.append('code', ''); //添加文件对象
              let url = '/governance/icEvent/importEvent'
              if (this.importType == 2) {
                url = '/governance/icEvent/importAwo'
              }
              console.log(url)
              await this.$http
                  .post(url, formData)
                  .then(res => {
                      if (res.data.code == 0 && res.data.msg == 'success') {
                          const data = res.data.data;
                          this.dataList = [
                              ...Object.keys(data.option.exist).map(k => {
                                  return {
                                      index: k,
                                      srcField: data.option.exist[k],
                                      exist: true,
                                      field: data.option.exist[k]
                                  };
                              }),
                              ...Object.keys(data.option.notExist).map(k => {
                                  return {
                                      index: k,
                                      srcField: data.option.notExist[k],
                                      exist: false,
                                      field: ''
                                  };
                              })
                          ];
                          this.importOption = data.option;
                          this.importCode = data.code;
                          this.fileData = file;
                      } else this.$message.error(res.data.msg);
                  })
                  .catch(err => {
                      console.log('失败', err);
                      file.onError(); //上传失败的文件会从文件列表中删除
                  });
              this.importLoading = false;
              this.importBtnTitle = '导入';
              this.$refs.upload.clearFiles();
              this.getTableData();
          },
  
        handleExcelSuccess(res, file) {
              if (!res.code === 0 && !res.msg === 'success') {
                  this.$message.error(res.msg);
              }
        },
        beforeExcelUpload(file) {
              const isType = file.type === 'application/vnd.ms-excel';
              const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
              const fileType = isType || isTypeComputer;
              const isLt1M = file.size / 1024 / 1024 < 10;
              if (!fileType) {
                  this.$message.error('上传文件只能是xls/xlsx格式！');
              }
  
              if (!isLt1M) {
                  this.$message.error('上传文件大小不能超过 10MB!');
              }
              return fileType && isLt1M;
          },
        handleintegral(row){
          this.fmData=row
          this.integral=true
          console.log(row,"row");
        },
        diaClose(){
          this.formShow=false
        },
        resetSearch(){
          this.formData=[]
          this.getTableData()
        },
        handleDetail(row){
          this.showInfo=true
          this.infoList=row
          console.log( this.infoList,"fmData");
  
        },
        summDetailClose(){
            this.showAdd=false
          this.getTableData()
        },
        async handleExportModule() {
          let url = "/heart/iccommunityselforganization/import-template-download";
          let params = {};
          await this.$http({
            method: "POST",
            url,
            responseType: "blob",
            data: params,
          })
            .then((res) => {
              if (res.headers["content-disposition"]) {
                let fileName = window.decodeURI(
                  res.headers["content-disposition"].split(";")[1].split("=")[1]
                );
                console.log("filename", fileName);
                let blob = new Blob([res.data], {
                  type: "application/vnd.ms-excel",
                });
                var url = window.URL.createObjectURL(blob);
                var aLink = document.createElement("a");
                aLink.style.display = "none";
                aLink.href = url;
                aLink.setAttribute("download", fileName);
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink); //下载完成移除元素
                window.URL.revokeObjectURL(url); //释放掉blob对象
              } else this.$message.error("下载失败");
            })
            .catch((err) => {
              console.log("err", err);
              return this.$message.error("网络错误");
            });
        },
     
        handleProgress(event, file, fileList) {
          console.log("percentage", file.percentage);
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pageSize = val;
          window.localStorage.setItem("pageSize", val);
          this.getTableData();
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.pageNo = val;
          this.getTableData();
        },
        //查询
        handleSearch(val) {
          console.log(this.fmData);
          this.pageNo = 1;
          this.getTableData();
        },
        handleClose() {
          this.pageType = "list";
          this.currentProject = {
            projectId: "",
          };
        },
        handleEditSuccess() {
          this.handleClose();
          this.getTableData();
        },
  
      },
    };
    </script>
    
    <style lang="scss" scoped>
    @import "@/assets/scss/modules/management/list-main.scss";
    .g-main {
            width: 100%;
          }
          .m-search {
            background: #ffffff;
            border-radius: 4px;
            padding: 30px 20px 5px;
            box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          }
          .item_width_1 {
            width: 260px;
          }
          .item_width_2 {
            width: 495px;
          }
          .m-table {
            background: #ffffff;
            box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            margin-top: 15px;
            padding: 23px 30px 10px;
            .table {
              margin-top: 20px;
            }
          }
          .div_btn {
            display: flex;
            justify-content: space-between;
          }
          .el-row {
            /* margin-bottom: 20px; */
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
            margin-right: 50px;
          }
        
    
    </style>
    