<template>
    <div class="page">
      <topBar
        v-if="topList.length > 0"
        :topList="topList"
        :moren="moren"
      ></topBar>
      <div class="thetopbox">
        <el-form label-width="100px">
          <el-row>
            <el-col :span="4">
              <el-form-item :label="'会员编号'" prop="memberCode">
                <el-input clearable v-model="queryParams.memberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员姓名'" prop="memberName">
                <el-input clearable v-model="queryParams.memberName"></el-input>
              </el-form-item>
            </el-col>
  
            <el-col :span="4">
              <el-form-item :label="'联系方式'" prop="phone">
                <el-input clearable v-model="queryParams.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'注册等级'" prop="pkRegisterGrade">
                <el-select
                clearable
                :placeholder="'请选择'"
                v-model="queryParams.pkRegisterGrade"
              >
                <el-option
                  v-for="item in gradeRangList"
                  :key="item.pkId"
                  :label="item.gradeName"
                  :value="item.pkId"
                ></el-option>
              </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'真实奖衔'" prop="pkAwards">
                <el-select
                  clearable
                  :placeholder="'请选择'"
                  v-model="queryParams.pkAwards"
                >
                  <el-option
                    v-for="item in awardsList"
                    :key="item.pkId"
                    :label="item.awardsName"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'隶属体系'" prop="pkVertex">
                <el-select
                  clearable
                  :placeholder="'请选择'"
                  v-model="queryParams.pkVertex"
                >
                  <el-option
                    v-for="item in vertexList"
                    :key="item.pkId"
                    :label="item.vertexName"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'隶属团队'" prop="pkTeamCode">
                <el-select
                  clearable
                  :placeholder="'请选择'"
                  v-model="queryParams.pkTeamCode"
                >
                  <el-option
                    v-for="item in memberTeamList"
                    :key="item.pkId"
                    :label="item.teamName"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
           
           
            <el-col :span="4">
              <el-form-item :label="'推荐编号'" prop="memberCode">
                <el-input clearable v-model="queryParams.parMemberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'推荐姓名'" prop="memberName">
                <el-input clearable v-model="queryParams.parMemberName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="'注册日期'" prop="thetimes">
                <el-date-picker
                  v-model="queryParams.thetimes"
                  @change="changeTime"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  :clearable="false"
                  :range-separator="'至'"
                  :start-placeholder="'开始日期'"
                  :end-placeholder="'结束日期'"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="searchbox">
                <el-button
                  class="my_search"
                  @click="
                    () => {
                      getSearch();
                      getCzNum();
                    }
                  "
                >
                  {{ '搜索' }}</el-button
                >
                <el-button class="my_reset" @click="reChongzhi">
                  {{ '重置' }}</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="main">
        <div class="maintop">
          <div class="mainbtn">
            <el-button size="small" class="thebtn1" @click="handleExport">
              {{ '导出' }}</el-button
            >
          </div>
        </div>
        <div class="maintable">
          <el-table
            :data="tableData"
            v-loading="loading"
            height="680px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="colsele" type="selection" width="55">
            </el-table-column>
  
            <el-table-column
              align="center"
              prop="memberCode"
              :label="'会员编号'"
              min-width="120px"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="memberName"
              :label="'会员姓名'"
            >
            </el-table-column>
  
            <el-table-column
              align="center"
              prop="phone"
              :label="'联系方式'"
              min-width="120px"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="pkRegisterGradeVal"
              :label="'注册等级'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="pkAwardsVal"
              :label="'真实奖衔'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="vertexName"
              :label="'隶属体系'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="teamName"
              :label="'隶属团队'"
            >
            </el-table-column>
  
            <el-table-column
              align="center"
              prop="parMemberCode"
              :label="'推荐编号'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="parMemberName"
              :label="'推荐姓名'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="placeMemberCode"
              :label="'安置编号'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="placeMemberName"
              :label="'安置姓名'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="orderAchieve"
              min-width="100px"
              :label="'消费业绩' + `(PV)`"
            >
            </el-table-column>

            <el-table-column   min-width="150px" align="center" prop="creationTime" :label="'注册日期'">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getSearch"
      />
    </div>
  </template>
    
        <script>
  import topBar from "@/components/topBar";
  import * as sta from "@/api/statistics";
  import { getAwardsListChiose,getgradeRanglist } from "@/api/level";
  import { getvertexValue, getmemberTeamList } from "@/api/financialCase";
  import { isLocals, isLocalSymbol } from "@/utils/numberToCurrency";
  export default {
    name: "UnderDirectpush",
    components: {
      topBar,
    },
    data() {
      return {
        moren: "underDirectpush",
        topList: [
          {
            name:'伞下直推',
            path: "underDirectpush",
          },
        ],
        tableData: [],
        loading:false,
        queryParams: {
          pageNum: 1,
          pageSize: 50,
          thetimes: [],
        },
        total: 0,
        multipleSelection: [],
        awardsList: [],
        memberTeamList: [],
        vertexList: [],
        gradeRangList:[]
      };
    },
    created() {
      this.getSearch();
      this.getOthers();
    },
    methods: {
      isLocalSymbol,
      isLocals,
      changeTime(val) {
        this.queryParams.startDate = val[0];
        this.queryParams.endDate = val[1];
      },
      getOthers() {
        getAwardsListChiose().then((res) => {
          this.awardsList = res.rows;
        });
        getmemberTeamList().then((res) => {
          this.memberTeamList = res.rows;
        });
        getvertexValue().then((res) => {
          this.vertexList = res.data;
        });
        getgradeRanglist().then((res) => {
        this.gradeRangList = res.data;
      });
       
      },
      //导出
      handleExport() {
        this.$confirm('是否确认导出所有数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "warning",
        }).then((_) => {
          this.download(
            "/report/manage/umbrella-below-push/export",
            { ...this.queryParams },
            `${'伞下直推'}${new Date().getTime()}.xlsx`
          );
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      reChongzhi() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 50,
          thetimes: [],
        };
        this.getSearch();
      },
      getSearch() {
        this.loading = true
        sta.getUmbrellaPushList(this.queryParams).then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.loading = false
        });
      },
      getCzNum() {
        this.queryParams.pageNum = 1;
      },
    },
  };
  </script>
    
    <style lang="scss" scoped>
  ::v-deep .el-image-viewer__close {
    right: 500px;
  }
  ::v-deep .dizhi .el-cascader {
    width: 100%;
  }
  ::v-deep .el-range-editor.el-input__inner {
    width: 100%;
  }
  ::v-deep .el-table thead {
    color: #000000;
  }
  ::v-deep .el-table .warning-row {
    background: #f9f9f9;
  }
  .page {
    padding: 10px 20px;
    background: #f9f9f9;
    font-size: 14px;
    .thetopbox {
      padding: 15px 20px 15px 0;
      background: #ffffff;
      border-radius: 8px;
      .searchbox {
        display: flex;
        align-items: center;
        margin-left: 40px;
      }
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #08143f;
        color: #ffffff;
      }
    }
    .main {
      //margin-top: 20px;
      background: #f9f9f9;
      //border-radius: 8px;
      //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  
      .maintop {
        display: flex;
        // padding: 10px 0;
        justify-content: space-between;
        align-items: center;
        .mainbtn {
          .thebtn1 {
            color: #ffffff;
            background: #ffad41;
            width: 68px;
            height: 32px;
          }
          .thebtn2 {
            color: #ffffff;
            background: #009b58;
            width: 68px;
            height: 32px;
          }
          .thebtn3 {
            color: #ffffff;
            background: #c8161d;
            width: 68px;
            height: 32px;
          }
        }
      }
    }
  }
  </style>
    