<template>
    <div class="page">
      <topBar
        v-if="topList.length > 0"
        :topList="topList"
        :moren="moren"
      ></topBar>
      <div class="main">
        <div class="form_all">
          <el-form ref="select" :model="select" label-width="auto">
            <el-row :gutter="10">
              <!-- <el-col :span="4">
                <el-form-item :label="'会员编号'" prop="memberCode">
                  <el-input
                    clearable
                    v-model="select.memberCode"
                    :placeholder="'请输入'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item :label="'会员姓名'" prop="memberName">
                  <el-input
                    clearable
                    v-model="select.memberName"
                    :placeholder="'请输入'"
                  ></el-input>
                </el-form-item>
              </el-col> -->
              <el-col :span="4">
                <el-form-item :label="'新增业绩'" prop="achieve">
                  <el-input
                    clearable
                    v-model="select.achieve"
                    :placeholder="'请输入'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="'统计时间'">
                  <el-date-picker
                    v-model="creationTime"
                    @change="changeTime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    :range-separator="'至'"
                    :start-placeholder="'开始日期'"
                    :end-placeholder="'结束日期'"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="getDataList">
                    {{ '搜索' }}</el-button
                  >
                <el-button type="" @click="reset"> {{ '重置' }}</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="maintop">
          <div class="mainbtn">
            <el-button
              size="small"
              @click="handleExport"
              v-hasButtons="['comNewlyAddPVExport']"
              style="background-color: #ffad41"
              class="thebtn1"
            >
              {{ '导出' }}</el-button
            >
          </div>
        </div>
        <div class="maintable">
          <el-table
            :data="tableData"
            v-loading="loading"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
           
  
            <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="awardsName"
              :label="'真实奖衔'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="vertexName"
              :label="'隶属体系'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="historyLeftSumPv"
              label="左区历史"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="historyRightSumPv"
              label="右区历史"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="dept"
              label="部门"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="achieve"
              label="小区新增PV"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="leftSumPv"
              label="左区新增PV"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="rightSumPv"
              label="右区新增PV"
            >
            </el-table-column>
            
          </el-table>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getDataList"
      />
    </div>
  </template>
        
        <script>
  import topBar from "@/components/topBar";
  import * as api from "@/api/statistics.js";
  export default {
    name: "ComNewlyAddPV",
    components: {
      topBar,
    },
    data() {
      return {
        creationTime: [],
        select: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 50,
        },
        total: 0,
        tableData: [],
        loading:false,
        moren: "comNewlyAddPV",
        topList: [
          {
            name: "小区新增业绩统计",
            path: "comNewlyAddPV",
          },
        ],
      };
    },
    mounted() {
      this.getOthers();
      // 获取列表
      this.getDataList();
    },
    methods: {
      getOthers() {
      },
  
      reset() {
        this.select = {};
        this.creationTime = [];
      },
      changeTime(val) {
        this.select.startDate = val ? val[0] : "";
        this.select.endDate = val ? val[1] : "";
      },
      getDataList() {
        this.loading = true
        api
          .getComNewlyAddPVList(Object.assign({}, this.queryParams, this.select))
          .then((res) => {
            this.tableData = res.rows;
            this.total = res.total;
            this.loading = false
          });
      },
  
      handleSelectionChange(val) {},
      /** 导出按钮操作 */
      handleExport() {
        this.$confirm('是否确认导出所有数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "warning",
        }).then((_) => {
          this.download(
            "/report/manager/small-achieve/achieve-export",
            Object.assign({}, this.queryParams, this.select),
            `小区新增业绩统计${new Date().getTime()}.xlsx`
          );
        });
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 == 1) {
          return "warning-row";
        } else if (rowIndex % 2 == 0) {
          return "success-row";
        }
        return "";
      },
    },
  };
  </script>
        <style scoped lang="scss">
  ::v-deep .el-table .warning-row {
    background: #f9f9f9;
  }
  
  ::v-deep .el-table .success-row {
    background: #ffffff;
  }
  ::v-deep .el-table thead {
    color: #000000;
  }
  ::v-deep .el-select {
    width: 100%;
  }
  .uploadIcon ::v-deep .el-upload--picture-card {
    display: none !important; /* 上传按钮隐藏 */
  }
  .page {
    padding: 20px;
    background: #f9f9f9;
    font-size: 14px;
    .main {
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
      .form_all {
        padding: 0px 20px 0 20px;
        // margin-bottom: 20px;
        background: #fff;
        border-radius: 8px;
      }
      .maintop {
        display: flex;
        padding: 0px 0px;
        justify-content: space-between;
        align-items: center;
  
        background: #f8f8f8;
        .mainbtn {
          .thebtn1 {
            background: #3181e5;
            color: #ffffff;
          }
          .thebtn2 {
            background: #ffad41;
            color: #ffffff;
          }
        }
        .maintitle {
          font-size: 10px;
          font-family: MicrosoftYaHei;
          color: #999999;
        }
      }
    }
    .tem {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 28px;
        height: 20px;
        margin-right: 3px;
      }
    }
    .isRed {
      color: #ed1d25;
    }
    .isGreen {
      color: #1ab62b;
    }
    .bgImg {
      width: 48px;
      height: 48px;
    }
  }
  .openClose {
    text-align: right;
    margin-right: 10px;
    color: #3181e5;
  }
  .dizhi {
    ::v-deep .el-cascader {
      width: 100%;
    }
  }
  ::v-deep .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: auto;
  }
  .lan {
    text-decoration: underline;
    color: #48b2fd;
    cursor: pointer;
  }
  </style>
        