<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.orgName" size="small" class="item_width_1" clearable
                            placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="组织类型">
                        <el-select v-model="formData.serviceType" placeholder="请选择" clearable>
                            <el-option v-for="item in formData.optionstype" :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 style="" class="diy-button--add" size="small" @click="handleExportModule()">下载模板</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="agencyName" header-align="center" align="center" label="所属组织"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="orgName" 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="serviceTypeName" header-align="center" align="center" label="服务类型"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="numberNum" header-align="center" align="center" label="成员数"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="operator" header-align="center" align="center" label="管理员"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="mobile" 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="250" 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"
                            @click="handleEdit(scope.row)">修改</el-button>
                        <el-button type="text" style="color:#1C6AFD;" size="small"
                            @click="handleshowMember(scope.row)">成员管理</el-button>
                        <el-button type="text" style="color:#1C6AFD;" size="small"
                            @click="handleDel(scope.row)">删除</el-button>
                        <el-button v-if="scope.row.status == 'processing'" type="text" style="color:#1C6AFD;" size="small"
                            @click="handleprocessl(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="fmData" @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="showMember" :close-on-click-modal="false" :close-on-press-escape="false"
                title="成员管理" width="1000px" top="10vh" class="dialog-h" @closed="MemberManagementClose">
                <MemberManagement v-if="showMember" :list="fmData" @MemberManagementClose="MemberManagementClose" />
            </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>
        </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 MemberManagement from "./MemberManagement.vue"
import process from "./process.vue"
// import Record from "./activeRecord"
// import integral from "./integral"
// //   import projectInfo from "./cpts/project-info";
import axios from "axios";

export default {
    components: { add, info,edit,MemberManagement,process},

    data() {
        return {
            formData: {
                orgName: "",
                serviceType: "",
                optionstype: [
                    { value: 1, label: "志愿者服务组织" },
                    { value: 2, label: "志愿者服务团队" },
                ]
            },
            showprocess:false,
            EditList:{},

            showAdd: false,
            showMember: false,
            showEdit: false,
            //   pageType: "list", // 列表list 处理dispose 详情info 议题详情issue-info
            pageNo: 1,
            pageSize: 20,
            total: 0,
            tableData: [
               
          ],
          importLoading:false,
          showInfo:false,

        };
      },
      computed: {
        maxTableHeight() {
          return this.$store.state.inIframe
            ? this.clientHeight - 400 + this.iframeHeigh
            : this.clientHeight - 400;
        },
        ...mapGetters(["clientHeight", "iframeHeight"]),
      },
      watch: {
    
      },
      mounted() {
        this.getTableData();
      },
      methods: {
        //审查
        handleprocessl(row){
            this.showprocess=true
            this.EditList=row
            console.log(row,this.fmData,"row");
        },
        //关闭审查
        
        handleprocesslClose(){
            this.showprocess=false
        },
        //成员管理
        handleshowMember(row){
          console.log    (row,this.fmData,"row");
            this.showMember=true
            this.fmData=row
   
        },
        //关闭成员管理
        MemberManagementClose(){
            this.showMember=false  
        },
        //修改
        handleEdit(row){
            this.showEdit=true,
            this.EditList=row
             console.log(row,this.EditList,"row");
        },
        //关闭修改
        showEditClose(){
            this.showEdit=false
        },
        //新增
        handleAdd(){
            this.showAdd=true
        },
        //关闭新增
        showAddClose(){
            console.log("sdlkfjklsdf1");
            
            this.showAdd=false
            this.getTableData()
        },
        //关闭查看
        showInfoClose(){
            this.showEdit=false
        },
        //查询列表
        async getTableData() {
          // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/project-list";
          const url = "/voluntary/volunteerOrg/page";
  
          let params={
              orgName: this.formData.orgName,
              serviceType: this.formData.serviceType,
              pageNo:this.pageNo,
              pageSize: this.pageSize
          }
          const { data, code, msg } = await requestPost(url,params);
          if (code === 0) {
            console.log("列表请求成功！！！！！！！！！！！！！！");
            this.total = data.total || 0;
            this.tableData = data.list
          } else {
          }
        },
        //模板
        async uploadHttpRequest(file) {
          debugger
      
              // this.importLoading = true;
            console.log(this.importLoading,"this.importLoading");
            debugger
              // this.importBtnTitle = '正在上传中...';
              this.$message({
                  showClose: true,
                  dangerouslyUseHTMLString: true,
                  message: "导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度",
                  duration: 3000
              });debugger
              let than = this;
              console.log(than,"than");
              debugger
              // 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', ''); //添加文件对象
              debugger
              console.log(formData,"formData");
              
              let url = '/voluntary/volunteerOrg/import'
              // if (this.importType == 2) {
              //   url = '/governance/icEvent/importAwo'
              // }
              console.log(url)
              await this.$http
                  .post(url, formData)
                  .then(res => {
                    log("res", 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) {
              console.log(file,"file1");
              debugger
              const isType = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
              debugger
              const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
              const fileType = isType || isTypeComputer;
              debugger
              const isLt1M = file.size / 1024 / 1024 < 10;
              debugger
              if (!fileType) {
                  this.$message.error('上传文件只能是xls/xlsx格式！');
              }
              debugger
              if (!isLt1M) {
                  this.$message.error('上传文件大小不能超过 10MB!');
              }
              console.log(isLt1M,"isLt1M");
              debugger
              return fileType && isLt1M;
          },
          handleDel(row){
        console.log(row,"row");
        let url="/voluntary/volunteerOrg/delete";
        let params={
          id:row.id
        }
        requestPost(
        url,params
        ).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getTableData()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
         
        },
        diaClose(){
          this.formShow=false
        },
        resetSearch(){
          this.formData=[]
          this.getTableData()
        },
        handleDetail(row){
          console.log(row,"row");
          this.showInfo=true
          this.fmData=row
  
        },
        summDetailClose(){
            this.showAdd=false
          this.getTableData()
        },
        async handleExportModule() {
          let url = "/voluntary/volunteerOrg/downloadImportTemplate";
          let params = {};
          await this.$http({
            method: "GET",
            url,
            responseType: "blob",
            data: params,
          })
            .then((res) => {
              console.log(res,"resskfk");
              
              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>
    