<template>
  <div class="popularActiveRecord H100">
    <div class="head_box">
      <h6>预约记录 / 热门活动</h6>
      <h4>热门活动</h4>

    </div>
    <div class="content_box">
      <div class="form_box h778px" >
        <el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
          <el-form-item label="活动名称:">
            <el-input  size="mini" placeholder="请输入活动名称"  v-model="form.name" @keyup.enter.native="Search" clearable></el-input>
          </el-form-item>
          <el-form-item label="网点归属:"  v-if="roleId != 3">
            <el-select size="mini" v-model="form.value" placeholder="请选择网点归属" filterable clearable @change="Search">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini"  type="primary" class="btn_form_search" @click="Search">查询</el-button>
          </el-form-item>
          <el-form-item class="r-float">
            <el-button size="mini" type="primary"   class="btn_form_add"  @click="exportExcel">下载数据</el-button>
          </el-form-item>
        </el-form>
        <div class="scrool">
          <el-table id="out-table" style="width:100%;" ref="multipleTable"  :data="tableData">
          <el-table-column label="预约人" prop="name"  ></el-table-column>
          <el-table-column label="预约人数" prop="numberOfPeople"></el-table-column>
          <el-table-column label="预约手机号" prop="phoneNumber"></el-table-column>
          <el-table-column label="活动名称" show-overflow-tooltip prop="proActName"></el-table-column>
          <el-table-column label="预约时间" prop="createTime" width="160">
            <template slot-scope="scope">
              {{scope.row.appointTime | dateformat('YYYY-MM-DD HH:mm:ss')}}
            </template>
          </el-table-column>
          <el-table-column label="归属网点" prop="bankName"></el-table-column>
        </el-table>
        </div>
        <el-pagination small background
                       @current-change="handleCurrentChange"
                       :current-page="page.currentPage"
                       :page-size="page.pageSize"
                       layout="prev, pager, next"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: {
          currentPage: 1, //当前页
          pageSize: null, //每页条数
          total: null, //总条数
        },
        tableData: [],
        options: [],

        roleId: '',
        bankBranchId: '',
        form:{
          name: '',
          value: '',
        }


      }
    },
    computed: {
    },
    mounted() {
      this.initData();
    },
    components: {

    },
    methods: {
      initData() {
        this.roleId = localStorage.getItem('roleId');
        this.bankBranchId = localStorage.getItem('bankBranchId');
        this.onSearch();
        this.getBranch();
      },
      // 归属网点列表渲染
      getBranch() {
        let _this = this;
        _this.$https({
          method: 'get',
          url: 'bankBranchInfo/getBankBox?action=appInfoQuery&roleId='+_this.roleId+'&bankId='+_this.bankBranchId,
          authType: this.backToken
        }).then((res) => {
          _this.options =  res.data;
          }, (error) => {
            console.log(error)
          }
        )
      },
      // 获得数据接口
      getTableData(param) {
        let vm = this;
        vm.$https({
          url : "productAppointmentRecord/getList?type=2",
          method: 'get',
          authType: this.backToken
        },param).then((res)=>{
          let data = res.data;
          vm.page.pageSize = data.size;
          vm.page.total = data.total;
          vm.tableData = data.records;
        }).catch(function(err){
          console.log(err);
        })
      },
      // 分页
      handleCurrentChange(val) {
        let _this = this;
        _this.page.currentPage = val;
        _this.onSearch();
      },
      onSearch() {
        let _this = this;
        let param = _this.getSearchQuery();
        _this.getTableData(param)
      },
      Search(){
        let _this = this;
        _this.page.currentPage = 1;
        let searchObj = {
          "_index": 1,
          "_size": _this.page.pageSize,
          "proActName": _this.form.name,
          "bankId": _this.form.value,
          'roleId': _this.roleId,
          'currentBankId': _this.bankBranchId
        };
        this.getTableData(searchObj);
      },
      // // 获取当前查询参数
      getSearchQuery() {
        let _this = this;
        let searchObj = {
          "_index":  _this.page.currentPage,
          "_size": _this.page.pageSize,
          'roleId': _this.roleId,
          'currentBankId': _this.bankBranchId
        };
        for (let key in _this.form) {
          if (_this.form[key]) {
            searchObj[key] = _this.form[key];
          }
        }
        return searchObj;
      },
      exportExcel () {
        window.location.href= this.$baseUrl+'productAppointmentRecord/generalCaseDownload?proActName='+this.form.name
          +'&bankId='+this.form.value+'&type=2&roleId='+this.roleId+'&currentBankId='+this.bankBranchId;
      },
    }
  }
</script>

<style lang="less">
  @import '../../style/common';
  .popularActiveRecord{
    .content_box{
      .input_box{
        width: 100%;
        min-width: 815px;
        margin-bottom: 30px;
        .el-input, .el-select{
          max-width:272px;
          background:rgba(255,255,255,1);
          border-radius:4px;
          .el-input__inner{
            height:32px;
          }
          .el-input__suffix{
            height: 110%;
          }
        }
        .btn_form_search,.btn_form_add{
          height: 32px;
          text-align: center;
          padding: 0 15px;
        }
      }
      .scrool {
        width: 100%;
        height: calc(100% - 100px);
        overflow-x: hidden;
        overflow-y: scroll;
        .el-table {
          .el-table__header-wrapper {
            .el-table__header {
              .has-gutter tr th {
                background: rgba(250, 250, 250, 1);
              }

            }
          }
          .el-table__body-wrapper {
            width: 100%;
            table tbody tr td {
              padding: 6px 0px;
            }
          }
        }
      }
    }
  }
</style>