<template>
  <div>
    <div class="pt20 pb20">
      <span
        class="font14"
        style="margin: 0px 20px; display: inline-block; font-weight: 600"
        >请选择代理</span
      >
      <el-select clearable v-model="ProxySchoolSelected" placeholder="">
        <el-option
          v-for="(item, index) in proxySchoolList"
          :value="item.openid"
          :label="item.nickName"
          :key="index"
          >{{ item.nickName }}</el-option
        >
      </el-select>
      <el-button
        class="ml20"
        @click="getPage"
        @keydown.enter="getPage"
        type="primary"
        >搜索</el-button
      >

      <span class="pl20 font14" :underline="false"
        >总积分 {{ allProxySCore }}</span
      >
    </div>
    <div class="pl20 pr20">
      <el-table :data="tableData">
        <el-table-column label="微信名" prop="nickName"></el-table-column>
        <el-table-column label="微信头像" prop="extensionCount">
          <template slot-scope="scope">
            <img class="w40" :src="scope.row.headImage" />
          </template>
        </el-table-column>
        <el-table-column sortable label="推广人数" prop="extensionCount">
          <template slot-scope="scope">
            <span>{{ scope.row.extensionCount }}</span>
            <span
              v-if="scope.row.extensionCount"
              @click="
                () => {
                  subTableVisible = true;
                  getSubPage(scope.row.openid);
                }
              "
              style="color: #1890ff; cursor: pointer; padding-left: 5px"
              type="primary"
              >查看</span
            >
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="未结算推广积分"
          prop="achievement"
        ></el-table-column>
        <el-table-column
          sortable
          label="已结算推广积分"
          prop="achievementSettled"
        ></el-table-column>

        <el-table-column
          sortable
          label="总结算积分"
          prop="achievementTotal"
        ></el-table-column>
        <!-- achievement -->
      </el-table>
    </div>
    <!-- 代理的 -->
    <el-drawer class="draw-scroll" size="60%" :visible.sync="subTableVisible">
      <el-table :data="subTableData">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="微信名" prop="nickName"></el-table-column>
        <el-table-column label="微信头像" prop="extensionCount">
          <template slot-scope="scope">
            <img class="w40" :src="scope.row.headImage" />
          </template>
        </el-table-column>
        <el-table-column sortable label="推广人数" prop="extensionCount">
          <template slot-scope="scope">
            <span>{{ scope.row.extensionCount }}</span>
            <span
              @click="
                () => {
                  sub1TableVisible = true;
                  getSub1Page(scope.row.openid);
                }
              "
              style="color: #1890ff; cursor: pointer; padding-left: 5px"
              type="primary"
              v-if="scope.row.extensionCount"
              >查看</span
            >
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="未结算推广积分"
          prop="achievement"
        ></el-table-column>
        <el-table-column
          sortable
          label="已结算推广积分"
          prop="achievementSettled"
        ></el-table-column>

        <el-table-column
          sortable
          label="总结算积分"
          prop="achievementTotal"
        ></el-table-column>
      </el-table>
    </el-drawer>
    <!-- 代理下一级 -->
    <el-drawer class="draw-scroll" size="60%" :visible.sync="sub1TableVisible">
      <el-table :data="sub1TableData">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="微信名" prop="nickName"></el-table-column>
        <el-table-column label="微信头像" prop="extensionCount">
          <template slot-scope="scope">
            <img class="w40" :src="scope.row.headImage" />
          </template>
        </el-table-column>
        <el-table-column sortable label="推广人数" prop="extensionCount">
          <template slot-scope="scope">
            <span>{{ scope.row.extensionCount }}</span>
            <!-- <span
              @click="
                () => {
                  sub1TableVisible = true;
                  getSub1Page(scope.row.openid);
                }
              "
              style="color: #1890ff; cursor: pointer; padding-left: 5px"
              type="primary"
              >查看</span
            > -->
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="未结算推广积分"
          prop="achievement"
        ></el-table-column>
        <el-table-column
          sortable
          label="已结算推广积分"
          prop="achievementSettled"
        ></el-table-column>

        <el-table-column
          sortable
          label="总结算积分"
          prop="achievementTotal"
        ></el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import proxyscoreApi from "@/api/proxyscore";
export default {
  data() {
    return {
      proxySchoolList: [],
      ProxySchoolSelected: "",
      tableData: [],
      subTableVisible: false,
      subTableData: [],

      sub1TableVisible: false,
      sub1TableData: [],
    };
  },
  computed: {
    allProxySCore() {
      let allProxySCore = 0;
      this.tableData.forEach((item) => {
        allProxySCore +=
          Number(item.achievementSettled) + Number(item.achievement);
      });
      return allProxySCore;
    },
  },
  methods: {
    getSubPage(openid) {
      proxyscoreApi
        .extensionIncomeExtensionPoints({
          openid,
        })
        .then((res) => {
          this.subTableData = res.data;
        });
    },

    getSub1Page(openid) {
      proxyscoreApi
        .extensionIncomeExtensionPoints({
          openid,
        })
        .then((res) => {
          this.sub1TableData = res.data;
        });
    },

    getPage() {
      let query = this.ProxySchoolSelected
        ? {
            openid: this.ProxySchoolSelected,
          }
        : {};
      proxyscoreApi.extensionIncomeExtensionPoints(query).then((res) => {
        this.tableData = res.data;
      });
    },
  },
  mounted() {
    proxyscoreApi.extensionIncomeInfo({}).then((res) => {
      this.proxySchoolList = res.data;
      this.ProxySchoolSelected = res.data[0].openid;
      this.getPage();
      //   console.log(res.data);
    });
  },
};
</script>

<style lang="scss" scoped>
// .draw-scroll {
//   .el-drawer__container {
//     ::v-deep .el-drawer__body {
//       overflow-y: scroll;
//     }
//   }
// }
 ::v-deep .el-drawer__body{
   overflow-y: scroll;
 }
.overflow-scroll-y {
  overflow-y: scroll;
}
.font14 {
  font-size: 18px;
}
.lh36 {
  line-height: 36px;
}
.pl20 {
  padding-left: 20px;
}
.pr20 {
  padding-right: 20px;
}
.pb20 {
  padding-bottom: 20px;
}
.w40 {
  width: 40px;
}
.font12 {
  font-size: 14px;
}
.pt15 {
  padding-top: 15px;
}
.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.pt20 {
  padding-top: 20px;
}
</style>