<template>
  <div class="contain">
    <sidebarUserInfo></sidebarUserInfo>
    <div class="rightbox" style="width: 100%">
      <topBanner></topBanner>
      <navBar :myId="5"></navBar>

      <div class="topbox">
        <el-form ref="form" :model="queryParams" label-width="80px">
          <el-row>
            <el-col :span="5">
              <el-form-item :label="'会员编号'" prop="memberCode">
                <el-input v-model="queryParams.memberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="'会员姓名'" prop="memberName">
                <el-input v-model="queryParams.memberName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="'注册等级'" prop="pkRegisterGrade">
                <el-select
                  v-model="queryParams.pkRegisterGrade"
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in gradeList"
                    :key="index"
                    :label="item.gradeName"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="'查询时间'" prop="teamCode">
                <el-date-picker
                  @change="changeTime"
                  v-model="thedata"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :range-separator="'至'"
                  :start-placeholder="'开始日期'"
                  :end-placeholder="'结束日期'"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div class="searchbox">
                <el-button class="btn2" @click="research">{{ '搜索' }}</el-button>
                <el-button class="btn1" @click="chongzhi">{{ '重置' }}</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="tablebox">
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            align="center"
            prop="memberCode"
            :label="'会员编号'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="memberName"
            :label="'会员姓名'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="parentCode"
            :label="'推荐编号'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="parentName"
            :label="'推荐姓名'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="placeParentCode"
            :label="'安置编号'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="placeParentName"
            :label="'安置姓名'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="placeDeptVal"
            :label="'安置部门'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="regMoney"
            :label="'注册金额'+'(￥)'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="regPv"
            :label="'注册业绩'+'(PV)'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="registerGradeVal"
            :label="'注册等级'"
          ></el-table-column>

          <el-table-column
            align="center"
            prop="creationTime"
            :label="'创建时间'"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="payTime"
            :label="'支付时间'"
          ></el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="research"
        />
      </div>
    </div>
  </div>
</template>
      
      <script>
import sidebarUserInfo from "@/views/index/components/sidebarUserInfo.vue";
import topBanner from "@/components/topBanner.vue";
import pagination from "@/components/pagination.vue";
import { getRegList, getGradeList } from "@/api/bonus.js";
import navBar from "@/components/navBar.vue";
export default {
  name: "Registration",
  components: {
    navBar,
    sidebarUserInfo,
    topBanner,
    pagination,
  },
  data() {
    return {
      marketList: [
        {
          text: '月度业绩',
          id: 0,
          path: "/marketDynamics",
        },
        {
          text: '活动专区',
          id: 7,
          path: "/activeZone",
        },
        {
          text: '奖金明细',
          id: 1,
          path: "/incomeDetail",
        },
        {
          text: '奖金来源',
          id: 3,
          path: "/bonusSource",
        },
        // {
        //   text: "云代奖金",
        //   id: 2,
        //   path: "/generation",
        // },

        {
          text: '考核明细',
          id: 4,
          path: "/appraisal",
        },
        {
          text: '注册列表',
          id: 5,
          path: "/registration",
        },
        {
          text: '招商列表',
          id: 6,
          path: "/investment",
        },
      ],
      specialArea: 0,
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 50,

        startCreationTime: "",
        endCreationTime: "",
      },
      gradeList: [], //收益类型
      thedata: "",
    };
  },
  watch: {
    $route(n, o) {
      this.specialArea = n.query.id;
    },
  },
  created() {},
  mounted() {
    this.specialArea = this.$route.query.id;
    this.research();
    this.getGradeList();
  },
  methods: {
    changeTime(val) {
      this.queryParams.startCreationTime = val[0];
      this.queryParams.endCreationTime = val[1];
    },
    getGradeList() {
      getGradeList().then((res) => {
        this.gradeList = res.data;
      });
    },
    chongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
      };
      this.thedata= ""
      this.research();
    },
    changeArea(item) {
      this.specialArea = item.id;
      this.$router.push({
        path: item.path,
        query: { id: item.id },
      });
    },
    research() {
      getRegList(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
      
      <style lang="scss" scoped>
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
  font-size: 14px;
}
.contain {
  background: rgba(249, 249, 249, 1);
  height: 100vh;
  padding: 47px 62px 7px 0;
  display: flex;
  .goodArea {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    width: 100%;
    height: 80px;
    border-bottom: 5px solid rgba(0, 0, 0, 0.05);
    .goodArea_i {
      margin: 0 35px;
      text-align: center;
      cursor: pointer;
    }
    .actArea {
      color: #b42b2a;
    }
  }
  .topbox {
    // height: 109px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.5);
    border-radius: 8px 8px 8px 8px;
    margin: 20px 0 40px 0;
    padding: 30px 16px 10px 16px;
    .searchbox {
      display: flex;
      align-items: center;
      .btn1 {
        background: #cccccc;
        border-radius: 5px 5px 5px 5px;
        color: #ffffff;
      }
      .btn2 {
        border-radius: 5px 5px 5px 5px;
        background: rgba(214, 24, 32, 1);
        color: #ffffff;
      }
    }
  }
  .tablebox {
    box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
    border-radius: 10px 10px 10px 10px;
  }
}
</style>