<template>
  <div class="g-main">
    <div class="m-search">
      <el-form :inline="true"
               :model="form"
               ref="ref_searchform"
               :label-width="'110px'">
        <div>
          <el-form-item prop="mySelectOrg"
                        label-width="130px"
                        label="参加活动党组织">
            <el-cascader class="list_item_width_1"
                         v-model="joinOrgIds"
                         size="small"
                         :options="orgList"
                         placeholder="请选择党组织"
                         :props="{
                      checkStrictly: true,
                      label: 'partyOrgName',
                      value: 'id',
                      children: 'children'
                    }"
                         @change="handleChangeOrg"
                         clearable />
          </el-form-item>
          <el-form-item label="活动开始时间"
                        prop="serviceTimeArea">
            <el-date-picker v-model="serviceTimeArea"
                            clearable
                            type="daterange"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-button style="margin-left:10px"
                     class="diy-button--search"
                     size="small"
                     @click="handleSearch">查询</el-button>
          <el-button style="margin-left:10px"
                     class="diy-button--reset"
                     size="small"
                     @click="resetSearch">重置</el-button>
        </div>
      </el-form>
    </div>
    <div class="m-table">
      <div class="div_btn">
        <el-button style="margin-left:10px"
                   class="diy-button--reset"
                   size="small"
                   @click="handleExport">导出</el-button>
      </div>
      <el-table class="table"
                :data="tableData"
                border
                :height="tableHeight"
                v-loading="tableLoading"
                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
                style="width: 100%">
        <el-table-column label="序号"
                         header-align="center"
                         align="center"
                         type="index"
                         width="50"></el-table-column>

        <el-table-column prop="joinOrgName"
                         header-align="center"
                         align="center"
                         label="参加活动党组织"
                         min-width="100">
        </el-table-column>
        <el-table-column prop="dydhNum"
                         header-align="center"
                         align="center"
                         label="支部党员大会(次)">
        </el-table-column>
        <el-table-column prop="wyhNum"
                         header-align="center"
                         align="center"
                         label="支部委员会(次)"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="dxzhNum"
                         header-align="center"
                         show-overflow-tooltip
                         align="center"
                         label="党小组会(次)">
        </el-table-column>
        <el-table-column prop="dkNum"
                         header-align="center"
                         align="center"
                         show-overflow-tooltip
                         label="党课(次)">
        </el-table-column>
        <el-table-column prop="ztdrNum"
                         header-align="center"
                         align="center"
                         show-overflow-tooltip
                         label="主题党日(次)">
        </el-table-column>
        <el-table-column prop="wmfwNum"
                         header-align="center"
                         align="center"
                         show-overflow-tooltip
                         label="为民服务活动(次)">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      form: {
        joinOrgId: '',
        joinOrgType: '',
        startTime: '',
        endTime: ''
      },
      tableData: [],
      orgList: [],
      serviceTimeArea: '',
      partyOrg: {
        partyOrgType: '',
        id: ''
      },
      joinOrgIds: [],
      tableLoading: false,
      agencyId: ''
    }
  },
  components: {

  },
  async created () {
    await this.getOrgList()
    await this.handleSearch()
  },
  async mounted () {
    const { user } = this.$store.state
    this.agencyId = user.agencyId

  },

  methods: {
    handleSearch () {
      this.loadTable()
    },
    handleChangeOrg () {
      if (this.joinOrgIds.length > 0 && this.joinOrgIds) {
        this.form.joinOrgId = this.joinOrgIds[this.joinOrgIds.length - 1]
      } else {
        this.form.joinOrgId = ''
      }
    },
    getOrgList () {
      return this.$http
        .get('/resi/partymember/icPartyOrg/getSearchTreelist', {
          params: { agencyId: localStorage.getItem('agencyId') }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            this.orgList = this.deepArrTOnull(res.data)
          }
        }).catch(() => { return this.$message.error("网络错误"); })
    },
    deepArrTOnull (arr) {
      let a = []
      a = arr.map(item => {
        return {
          ...item,
          children: (item.children.length > 0 && this.deepArrTOnull(item.children)) || null
        }
      })
      return a
    },
    async loadTable () {
      this.tableLoading = true
      if (Array.isArray(this.serviceTimeArea) && this.serviceTimeArea.length > 0) {
        this.form.startTime = this.serviceTimeArea[0];
        this.form.endTime = this.serviceTimeArea[1];
      } else {
        this.form.startTime = '';
        this.form.endTime = '';
      }

      if (this.form.joinOrgId === '' || this.form.joinOrgId === null || this.form.joinOrgId === undefined) {
        let a = this.orgList[0]
        this.form.joinOrgId = a.id;
        this.joinOrgIds = this.form.joinOrgId
      } else {
        if (Array.isArray(this.joinOrgIds)) {
          this.form.joinOrgId = this.joinOrgIds[this.joinOrgIds.length - 1];
        }
      }
      const url = "/resi/partymember/icPartyAct/patryactstatis"
      // const url = "http://yapi.elinkservice.cn/mock/245/resi/partymember/icPartyAct/patryactstatis"
      let params = {
        ...this.form
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.tableData = data
      } else {
        this.$message.error(msg)
      }
      this.tableLoading = false
    },

    //重置搜索条件
    resetSearch () {
      this.form = {
        joinOrgId: '',
        joinOrgType: '',
        startTime: '',
        endTime: ''
      }
      this.serviceTimeArea = ''
      this.joinOrgIds = []
      this.partyOrg = {
        id: '',
        partyOrgType: ''
      }
      this.loadTable()
    },

    //导出表格
    async handleExport () {
      let title = '党建数据统计'
      const url = "/resi/partymember/icPartyAct/export"
      // const url = "http://yapi.elinkservice.cn/mock/245/resi/partymember/icPartyAct/export"
      let params = {
        ...this.form
      }
      app.ajax.exportFilePost(
        url,
        params,
        (data, rspMsg) => {
          this.download(data, title + '.xls')
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg);
        }
      );

    },
    // 下载文件
    download (data, fileName) {
      if (!data) {
        return
      }

      var csvData = new Blob([data])

      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(csvData, fileName);
      }
      // for Non-IE (chrome, firefox etc.)
      else {
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.style = 'display: none';
        var url = window.URL.createObjectURL(csvData);
        a.href = url;
        a.download = fileName;
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
      }

    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    tableHeight () {
      return this.$store.state.inIframe ? this.clientHeight - 350 + this.iframeHeight : this.clientHeight - 350
    },

    ...mapGetters(['clientHeight', 'iframeHeight'])
  },
  watch: {

  },
  props: {

  }
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/buttonstyle.scss";
@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: 620px;
}

.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;
  }
}

.el-row {
  /* margin-bottom: 20px; */
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: 50px;
}
</style>
