<template>
  <div class="mode-block resi-container">
    <el-card ref="searchCard" class="search-card">
      <el-form ref="searchForm" :inline="true" :model="dataForm" size="small">
        <el-form-item label="所属组织" label-width="100px"
                      prop="orgId">
          <el-cascader ref="cascaderUnit" v-model="orgId" 
          :options="optionsA" 
          :props="{ checkStrictly: true, emitPath: false,children:'subOrgList',label:'orgName'}" 
          clearable 
          @change="handleCalscChange"/>
            <!-- <template slot-scope="{ node, data }">
              <div @click="cascaderClick(data)">
                <span>{{ data.objectName }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </div>
            </template> -->
        </el-form-item>
        <el-form-item label="时间范围"
                      prop="startDate">
          <el-date-picker v-model="timeRange"
                          type="datetimerange"
                          clearable
                          size="small"
                          :picker-options="pickerOptions"
                          range-separator="至"
                          start-placeholder="选择日期"
                          end-placeholder="选择日期"
                          value-format="yyyyMMddHHmmss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" class="diy-button--add" @click="handleSearch">查询</el-button>
          <el-button
            size="small"
            @click="resetForm('searchForm')"
            >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="resi-card-table">
      <div class="resi-row-btn">
        <!-- <el-button @click="totalHandle"
                    class="diy-button--add"
                    size="small">总计</el-button> -->
        <el-button @click="exportHandle"
                    class="diy-button--add"
                    size="small" :loading="exportLoading">导出</el-button>
      </div>
      <el-table class="resi-table" v-loading="dataListLoading" :data="dataList" border style="width: 100%"
      :height="tableHeight">
        <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
        <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="orgName" label="所属社区" header-align="center" align="center" />
        <el-table-column min-width="100" prop="projectCount" label="上报数量" header-align="center" align="center" />
        <el-table-column min-width="110" prop="closedCount" label="办结数" header-align="center" align="center" />
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, total"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
            title="总计"
            :visible.sync="totalVisible"
            width="60%">
      <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                height="200">
          <el-table-column type="selection" 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="orgName" label="所属社区" header-align="center" align="center" />
          <el-table-column min-width="100" prop="projectCount" label="上报数量" header-align="center" align="center" />
          <el-table-column min-width="110" prop="closedCount" label="办结数" header-align="center" align="center" />
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import AddOrUpdate from './factagencyuserhousedaily-add-or-update'
export default {
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/data/stats/factAgencyUserHouseDaily/page',
        getDataListIsPage: true,
        deleteURL: '/data/stats/factAgencyUserHouseDaily',
        deleteIsBatch: true,
        exportURL: '/data/stats/factAgencyUserHouseDaily/export'
      },
      exportLoading: false,
      dataListLoading: false,
      dataList: [],
      optionsA: [],
      totalVisible: false,
      pickerOptions: {
        disabledDate(time) {
            return time.getTime() > Date.now();
          },
      },
      timeRange: '',
      dataForm: {
        orgId: '',
        startDate: '',
        endDate: '',
        orgType: ''
      },
      total: 0,
      tableData: [],
      pageNo: 1,
      pageSize:window.localStorage.getItem('pageSize') || 20,
      orgId: ''
    }
  },
  components: {
    // AddOrUpdate
  },
  created () {
    this.getGridList()
    this.getTableList()
    // this.getValiheList()
  },
  watch: {
    timeRange (val) {
      if (Array.isArray(val) && val.length == 2) {
        this.dataForm.startDate = val[0];
        this.dataForm.endDate = val[1];
      } else {
        this.dataForm.startDate = "";
        this.dataForm.endDate = "";
      }
    }
  },
  computed: {
    ...mapGetters(["clientHeight", "iframeHeight"]),
    tableHeight() {
      const h = this.clientHeight - 360 + this.iframeHeigh;
      const _h = this.clientHeight - 360;
      return this.$store.state.inIframe ? h : _h;
    },
  },
  methods: {
    handleCalscChange(val) {
      console.log('val-----', val)
      const arr = val.split('-')
      this.dataForm.orgId = arr[1]
      this.dataForm.orgType = arr[0]
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.timeRange = "";
      this.orgId = ''
      this.dataForm.startDate = "";
      this.dataForm.endDate = "";
      this.dataForm.orgType = "";
      this.handleSearch();
    },
    handleSearch() {
      this.pageNo = 1
      this.getTableList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.getTableList();
    },
    exportHandle () {
      this.exportLoading = true
      const url = '/data/aggregator/org/memberProjectInfoList/export'
      this.$http({
        method: 'Post',
        url,
        responseType: 'blob',
        data: this.dataForm
      }).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('网络错误')
      })
    },
    cascaderClick (nodeData) {
      this.dataForm.agencyId = nodeData.objectId;
      this.dataForm.level = nodeData.objectType
      this.$refs.cascaderUnit.checkedValue = nodeData.objectId;
      this.$refs.cascaderUnit.computePresentText();
      this.$refs.cascaderUnit.toggleDropDownVisible(false);

    },
    totalHandle () {
      this.tableData = []
      this.dataForm.type = 0
      this.$http
              .get('/data/stats/factAgencyUserHouseDaily/total',{params: this.dataForm})
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                } else {
                  console.log('获取查询详情成功', res.data)
                  if (res.data) this.tableData.push(res.data)
                }
              })
              .catch(() => {
                return this.$message.error('网络错误')
              })
      this.totalVisible = true
    },
    getTableList() {
      this.dataListLoading = true
      const { user } = this.$store.state
      const _data = {
        ...this.dataForm,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$http
        .post('/data/aggregator/org/memberProjectInfoList', _data)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            this.dataList = res.data.list
            this.total = res.data.total
          }
        })
        .catch(() => {
          this.dataListLoading = false
          return this.$message.error('网络错误')
        })
        this.dataListLoading = false
    },
    getGridList() {
      const { user } = this.$store.state
      const params = {
        agencyId: user.agencyId,
        client: 'gov'
      }
      this.$http
        // .post('/gov/org/userhouse/service/serviceScopeTree')
        .post('/data/aggregator/org/agencytree', params)
        // .post('/gov/org/customeragency/staffinagencylist')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log('获取查询详情成功', res.data)
            // let { agencyList, subAgencyList } = res.data
            this.optionsA = this.deepTree(res.data)
            // console.log(this.optionsA);
            // const _arr = [{...agencyList, subAgencyList: [...subAgencyList] }]
            // this.optionsA = this.deepTree(_arr)
            console.log('optionsA----', this.optionsA)
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    },
    deepTree(arr) {
      if (Array.isArray(arr)) {
        return arr.map(item => {
          return {
            ...item,
            value: item.orgType + '-' + item.orgId,
            subOrgList: item.subOrgList.length > 0 && this.deepTree(item.subOrgList) || null
          }
        })
      }
    }
  }
}
</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>
