<template>
  <div class="mode-block resi-container">
    <div v-if="showType==='two'">
      <el-card class="resi-card-table">
        <div class="resi-row-btn">

          <el-button @click="handleBackToOne"
                     class="diy-button--search"
                     size="small">返回</el-button>
          <el-button @click="exportHandle"
                     class="diy-button--reset"
                     size="small"
                     :loading="exportLoading">导出</el-button>
        </div>
        <el-table class="resi-table"
                  v-loading="dataListLoading"
                  :data="tableData"
                  border
                  style="width: 100%"
                  :height="tableHeight">

          <el-table-column type="index"
                           label="序号"
                           header-align="center"
                           align="center"
                           width="50"></el-table-column>

          <el-table-column min-width="100"
                           prop="staffName"
                           label="网格员"
                           header-align="center"
                           align="center" />

          <el-table-column min-width="100"
                           prop="projectCount"
                           label="上报数量"
                           header-align="center"
                           align="center">
            <template slot-scope="scope">
              <span><a class="name-a"
                   style="color: #2195fe;"
                   @click="handleClickCount(scope.row)">{{scope.row.projectCount}}</a></span>

            </template>
          </el-table-column>
          <el-table-column min-width="110"
                           prop="closedCount"
                           label="办结数"
                           header-align="center"
                           align="center">
            <template slot-scope="scope">
              <span><a class="name-a"
                   style="color: #2195fe;"
                   @click="handleClickCount(scope.row)">{{scope.row.closedCount}}</a></span>

            </template>
          </el-table-column>

        </el-table>
        <div>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="pageNo"
                         :page-sizes="[20, 50, 100, 200]"
                         :page-size="pageSize"
                         layout="sizes, prev, pager, next, total"
                         :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <div v-if="showType==='three'">
      <grid-member-event :orgId="orgId"
                         :orgType="orgType"
                         :startTime="startDate"
                         :endTime="endDate"
                         :staffName="selStaffName"
                         @handleBackToTwo="handleBackToTwo"></grid-member-event>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { requestPost } from "@/js/dai/request";
import gridMemberEvent from "./gridMemberEvent";

export default {
  data () {
    return {
      showType: 'two',
      exportLoading: false,
      dataListLoading: false,

      total: 0,
      tableData: [],
      pageNo: 1,
      pageSize: 20,

      selStaffName: ''
    }
  },
  components: {
    gridMemberEvent
  },
  created () {

    this.getTableList()

  },
  watch: {

  },

  props: {
    orgId: {
      type: String,
      default: "",
    },
    orgType: {
      type: String,
      default: "",
    },
    startDate: {
      type: String,
      default: "",
    },
    endDate: {
      type: String,
      default: "",
    },

  },
  computed: {
    ...mapGetters(["clientHeight", "iframeHeight"]),
    tableHeight () {
      const h = this.clientHeight - 255 + this.iframeHeigh;
      const _h = this.clientHeight - 255;
      return this.$store.state.inIframe ? h : _h;
    },
  },
  methods: {
    handleBackToOne () {
      this.$emit("handleBackToOne")
    },
    handleClick (row) {
      this.dataForm.agencyId = row.orgId
      this.handleSearch()
    },

    handleClickCount (row) {
      this.selStaffName = row.staffName

      this.showType = 'three'
    },
    handleBackToTwo () {
      this.showType = "two"
    },


    async getTableList () {
      this.dataListLoading = true
      const url = "/data/aggregator/org/memberProjectInfoList"

      let params = {
        orgId: this.orgId,
        orgType: this.orgType,
        startDate: this.startDate ? this.startDate.substring(0, 8) : '',
        endDate: this.endDate ? this.endDate.substring(0, 8) : '',
        pageNo: this.pageNo,
        pageSize: this.pageSize

      }

      const { data, code, msg } = await requestPost(url, params)
      this.dataListLoading = false
      if (code === 0) {
        this.total = data.total || 0;
        this.tableData = data.list

      } else {
        this.$message.error(msg)
      }
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.getTableList();
    },
    exportHandle () {
      const url = '/data/aggregator/org/memberProjectInfoList/export'

      this.exportLoading = true
      this.$http({
        method: 'Post',
        url,
        responseType: 'blob',
        data: {
          orgId: this.orgId,
          orgType: this.orgType,
          startDate: this.startDate ? this.startDate.substring(0, 8) : '',
          endDate: this.endDate ? this.endDate.substring(0, 8) : '',
        }
      }).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对象
          // this.exportLoading = false
        } else this.$message.error('下载失败')
        this.exportLoading = false
      }).catch(err => {
        console.log('err', err)
        this.exportLoading = false
        return this.$message.error('网络错误')
      })
    },
  }
}
</script>
<style>
.block {
  position: absolute;
  left: 0px;
  display: inline-block;
  width: 35px;
  height: 50px;
  background: #fff;
}
.cascader-block .el-cascader-node > .el-radio {
  display: none;
}
</style>
<style lang="scss" scoped>
.blacklist-reason {
  width: 100%;
  height: 80px;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  resize: none;
  padding: 8px;
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";

.resi-container .resi-card-table {
  ::v-deep .el-table th {
    color: #fff;
    background-color: rgba(33, 149, 254, 1);
    // border-right: 1px solid rgba(33, 149, 254, 1);
  }
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
  ::v-deep .btn-color-del {
    margin-left: 10px;
    color: rgba(213, 16, 16, 1);
  }
  ::v-deep .btn-color-edit {
    color: rgba(0, 167, 169, 1);
  }
}
.form-wr {
  .input-width {
    width: 260px;
  }
  .input-width-textarea {
    width: 500px;
  }
  .imsg-list {
    display: flex;
    align-items: center;
    .imgs-item {
      position: relative;
      margin-right: 10px;
      .el-icon-delete {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 18px;
        color: red;
        z-index: 3;
        cursor: pointer;
      }
    }
  }
}
.div-content {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resi-row-btn {
  margin-bottom: 13px;
  .upload-btn {
    display: inline-block;
    margin: 0 10px;
  }
}
</style>
