<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.name" size="small" class="item_width_1" clearable placeholder="请输入">
              </el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="formData.StatusName" placeholder="请选择">
                <el-option v-for="item in formData.optionsStatus" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上架时间">
              <el-date-picker v-model="formData.activeTime" type="datetimerange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </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-table class="table" :data="tableData" border v-loading="tableLoading" style="width: 100%">
          <el-table-column label="序号" header-align="center" align="center" type="index"></el-table-column>
          <el-table-column prop="Community" header-align="center" align="center" label="发布区域">
          </el-table-column>
          <el-table-column prop="Nickname" header-align="center" align="center" label="分类">
            <!-- <template slot-scope="scope">
          <span>{{ scope.row.enabled === 1 ? '关闭' : '显示' }}</span>
        </template> -->
          </el-table-column>
          <el-table-column prop="Name" header-align="center" align="center" label="标题">
            <template slot-scope="scope">
              <el-button style="width: 100%" type="text" @click="showAwoList(scope.row)">{{scope.row.exportNum}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="Identity" header-align="center" align="center" label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.status === 0 ? '已下线' : '已发布' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="PhoneNumber" header-align="center" align="center" label="上架时间">
          </el-table-column>
          <!-- <el-table-column prop="IDNumber" header-align="center" align="center" label="发布时间">
          </el-table-column>
          <el-table-column prop="RegistrationTime" header-align="center" align="center" label="状态">
          </el-table-column>
          <el-table-column prop="Points" header-align="center" align="center" label="来源">
          </el-table-column>
          <el-table-column prop="ActivityCount" header-align="center" align="center" label="所属项目">
          </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="handleEdit(scope.row)">上架</el-button>
              <el-button type="text" style="color:#1C6AFD;" size="small" @click="handleEdit(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="add" :close-on-click-modal="false" :close-on-press-escape="false" title="新增"
          width="1000px" top="10vh" class="dialog-h" @closed="diaClose">
          <add :list="fmData" />
        </el-dialog>
        <el-dialog :visible.sync="recordshow" :close-on-click-modal="false" :close-on-press-escape="false" title="兑换记录"
          width="1000px" top="10vh" class="dialog-h" @closed="diaClose">
          <record :list="fmData" />
        </el-dialog>
        <el-dialog :visible.sync="ActivityCountshow" :close-on-click-modal="false" :close-on-press-escape="false" title="报名管理"
          width="1000px" top="10vh" class="dialog-h" @closed="diaClose">
          <ActivityCountshow :list="fmData" />
        </el-dialog>
      </div>
  
    </div>
  </template>
  
      <script>
      import record from "./record"
      import { requestPost } from "@/js/dai/request";
      import nextTick from "dai-js/tools/nextTick";
      import { mapGetters } from "vuex";
      import add from "./add";
      export default {
        components: {add,record},
      
        data() {
          return {
            recordshow:false,
            HandlePointsshow:false,
            ActivityCountshow:false,
            add:false,
            formData:{
              name:"",
              StatusName:"",
              activeTime:"",
              optionsStatus: [{
            value: '选项1',
            label: '已发布'
          }, {
            value: '选项2',
            label: '未发布'
          },],
            },
            integral:false,
            tableLoading: false,
            formShow:false,
          //   pageType: "list", // 列表list 处理dispose 详情info 议题详情issue-info
            pageNo: 1,
            pageSize: window.localStorage.getItem("pageSize") || 20,
            total: 1,
            tableData: [
      {
        Community: "Stellar Community",
        Nickname: "Dawn",
        Name: "Li Xiaoming",
        Identity: "Regular Member",
        PhoneNumber: "13800138000",
        IDNumber: "420123198901011234",
        RegistrationTime: "2024-01-15T08:30:00Z",
        Points: 1250,
        ActivityCount: 15
      },
      {
        Community: "Stellar Community",
        Nickname: "Dawn",
        Name: "Li Xiaoming",
        Identity: "Regular Member",
        PhoneNumber: "13800138000",
        IDNumber: "420123198901011234",
        RegistrationTime: "2024-01-15T08:30:00Z",
        Points: 1250,
        ActivityCount: 15
      },
      {
        Community: "Stellar Community",
        Nickname: "Dawn",
        Name: "Li Xiaoming",
        Identity: "Regular Member",
        PhoneNumber: "13800138000",
        IDNumber: "420123198901011234",
        RegistrationTime: "2024-01-15T08:30:00Z",
        Points: 1250,
        ActivityCount: 15
      },
      {
        Community: "Stellar Community",
        Nickname: "Dawn",
        Name: "Li Xiaoming",
        Identity: "Regular Member",
        PhoneNumber: "13800138000",
        IDNumber: "420123198901011234",
        RegistrationTime: "2024-01-15T08:30:00Z",
        Points: 1250,
        ActivityCount: 15
      },
      {
        Community: "Stellar Community",
        Nickname: "Dawn",
        Name: "Li Xiaoming",
        Identity: "Regular Member",
        PhoneNumber: "13800138000",
        IDNumber: "420123198901011234",
        RegistrationTime: "2024-01-15T08:30:00Z",
        Points: 1250,
        ActivityCount: 15
      },
      {
        Community: "Stellar Community",
        Nickname: "Dawn",
        Name: "Li Xiaoming",
        Identity: "Regular Member",
        PhoneNumber: "13800138000",
        IDNumber: "420123198901011234",
        RegistrationTime: "2024-01-15T08:30:00Z",
        Points: 1250,
        ActivityCount: 15
      },
    ],
  
            Record:false,
            fmData:[],
         
          };
        },
        computed: {
          maxTableHeight() {
            return this.$store.state.inIframe
              ? this.clientHeight - 400 + this.iframeHeigh
              : this.clientHeight - 400;
          },
          ...mapGetters(["clientHeight", "iframeHeight"]),
        },
        watch: {
          "fmData.endDate": function (val) {
            if (val && val != "") {
              console.log(val);
              let arrayTemp = val.split(" ");
              this.fmData.endDate = arrayTemp[0] + " 23:59:59";
            }
          },
        },
        mounted() {
          // this.getTableData();
        },
        methods: {
          handelRegister(command, row) {
        if (command == "signup") {
          this.HandleRegistration(row);
        } else if (command == "clockin") {
          this.HandlePoints(row);
        } else if (command == "qcdj") {
          this.handleChangeTransfer(row);
        }
      },
          HandleRegistration(row){
            console.log(row,"报名管理");
            this.ActivityCountshow=true
          },
          HandlePoints(row){
            console.log(row,"报名管理");
            this.HandlePointsshow=true
          },
          handleTimeChange (time) {
          if (time) {
            const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
            const endTimeArray = util.dateFormatter(time[1], 'date').split('-')
    
            this.formData.startTime = startTimeArray[0] + '-' + startTimeArray[1] + '-' + startTimeArray[2] + ' 00:00:00'
            this.formData.endTime = endTimeArray[0] + '-' + endTimeArray[1] + '-' + endTimeArray[2] + ' 23:59:59'
          } else {
            this.formData.startTime = ''
            this.formData.endTime = ''
          }
        },
    
          handleintegral(row){
            this.integral=true
            console.log(row,"row");
          },
          diaClose(){
            this.formShow=false
          },
          resetSearch(){
            this.formData=[]
          },
          handleDetail(row){
            console.log(row,"row");
            this.formShow=true
            this.fmData=row
    
          },
          async handleExportModule() {
            let url = "/heart/iccommunityselforganization/import-template-download";
      
            let params = {};
            await this.$http({
              method: "POST",
              url,
              responseType: "blob",
              data: params,
            })
              .then((res) => {
                // this.download(res.data, title + '.xls')
                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("网络错误");
              });
          },
          // 上传大图标成功
          handleExcelSuccess(res, file) {
            if (res.code === 0 && res.msg === "success") {
              console.log("resss---ppp", res);
            } else {
              this.$message.error(res.msg);
            }
          },
          handleProgress(event, file, fileList) {
            console.log("percentage", file.percentage);
          },
      
          beforeExcelUpload(file) {
            console.log("file", 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;
          },
          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); //添加文件对象
            await this.$http
              .post(
                "/heart/iccommunityselforganization/importcommunityselforganization",
                formData
              )
              .then((res) => {
                console.log("res-up", res);
                if (res.data.code == 0 && res.data.msg == "success") {
                  // this.$message.success('导入成功')
                  this.getTableData();
                } else this.$message.error(res.data.msg);
              })
              .catch((err) => {
                console.log("失败", err);
                file.onError(); //上传失败的文件会从文件列表中删除
                // this.$message.error('导入失败')
              });
            // axios({
            //   url:
            //     window.SITE_CONFIG["apiURL"] +
            //     "/heart/iccommunityselforganization/importcommunityselforganization",
            //   method: "post",
            //   data: formData,
            //   // responseType: "blob",
            // })
            //   .then((res) => {
            //     this.importLoading = false;
            //     this.importBtnTitle = "导入";
            //     console.log("resresresresresresres", res);
      
            //     this.getTableData();
            //     if (res.data.code == 0) {
            //       return this.$message.success(res.data.data || "导入成功");
            //     } else {
            //       return this.$message.error(res.data.msg);
            //     }
            //   })
            //   .catch((err) => {
            //     console.log("失败", err);
            //   });
            this.importLoading = false;
            this.importBtnTitle = "导入";
            this.$refs.upload.clearFiles();
          },
          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();
          },
          resetForm(formName) {
            (this.fmData = {
              title: "",
              status: "",
              startDate: "",
              endDate: "",
              date: ["", ""],
            }),
              this.handleSearch();
          },
          async handleChu() {
            const url = "/governance/project/project-list-export";
            const { pageSize, pageNo, fmData } = this;
            axios({
              url: window.SITE_CONFIG["apiURL"] + url,
              method: "post",
              data: {
                pageSize,
                pageNo,
                ...fmData,
              },
              responseType: "blob",
            })
              .then((res) => {
                console.log(res);
                // 明明响应标头中有content-disposition但是打印的res中没有这个字段,暂时写死一个吧
                // let fileName = window.decodeURI(
                //   res.headers["content-disposition"].split(";")[1].split("=")[1]
                // );
                let yy = new Date().getFullYear();
                var mm =
                  new Date().getMonth() > 9
                    ? new Date().getMonth() + 1
                    : new Date().getMonth() == 9
                    ? new Date().getMonth() + 1
                    : "0" + (new Date().getMonth() + 1);
                var dd =
                  new Date().getDate() < 10
                    ? "0" + new Date().getDate()
                    : new Date().getDate();
                let time = `${yy}-${mm}-${dd} `;
                let fileName = `项目管理${time}`;
                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对象
              })
              .catch((err) => {
                console.log("获取导出情失败", err);
                return this.$message.error("网络错误");
              });
          },
          async handleAdd() {
            this.add=true
          },
          async handleWatch(rowIndex) {
            let item = this.tableData[rowIndex];
            this.currentProject = {
              projectId: item.projectId,
            };
            this.pageType = "info";
          },
          async handleEdit(row) {
            
            this.recordshow=true
          },
          handleClose() {
            this.pageType = "list";
            this.currentProject = {
              projectId: "",
            };
          },
          handleEditSuccess() {
            this.handleClose();
            this.getTableData();
          },
          async handleDel(rowData, rowIndex) {
            console.log(rowData, rowIndex);
            const url =
              "/heart/iccommunityselforganization/delcommunityselforganization";
            const { tableData } = this;
      
            const { data, code, msg } = await requestPost(url, {
              orgId: tableData[rowIndex].orgId,
            });
      
            if (code === 0) {
              this.$message.success("删除成功！");
              this.getTableData();
            } else {
              this.$message.success("操作失败！");
            }
          },
          async getTableData() {
            // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/project-list";
            const url = "/governance/project/project-list";
            const { pageSize, pageNo, fmData } = this;
            const { data, code, msg } = await requestPost(url, {
              pageSize,
              pageNo,
              ...fmData,
            });
            if (code === 0) {
              console.log("列表请求成功！！！！！！！！！！！！！！");
              this.total = data.total || 0;
              this.tableData = data.list
                ? data.list.map((item) => {
                    return item;
                  })
                : [];
      
              this.tableData.forEach((item) => {
                if (item.origin === "issue") {
                  item.originName = "议题 ";
                } else if (item.origin === "agency") {
                  item.originName = "项目立项";
                } else if (item.origin === "resi_event") {
                  item.originName = "旧版事件上报";
                } else if (item.origin === "work_event") {
                  item.originName = "巡查上报";
                } else if (item.origin === "ic_event") {
                  item.originName = "事件";
                } else {
                  item.sourceTypeName = "--";
                }
              });
            } else {
            }
          },
        },
      };
      </script>
      
      <style lang="scss" scoped>
     @import "@/assets/scss/modules/management/detail-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>
      