<template>
  <div class="g-cpt">
    <div class="m-tb">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>公益达人</span>
        </div>

        <div class="tb">
          <cpt-tb
            :highlight-top3="true"
            :col-list="tb3.colList"
            :loading="tb3.loading"
            :header="tb3.header"
            :list="tb3.list"
          ></cpt-tb>
        </div>
      </cpt-card>
    </div>

    <div class="m-tb">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>党员先锋</span>
        </div>

        <div class="tb">
          <cpt-tb
            :highlight-top3="true"
            :col-list="tb2.colList"
            :loading="tb2.loading"
            :header="tb2.header"
            :list="tb2.list"
          ></cpt-tb>
        </div>
      </cpt-card>
    </div>

    <div class="m-tb">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>动力网格</span>
        </div>

        <div class="tb">
          <cpt-tb
            :highlight-top3="true"
            :col-list="tb1.colList"
            :loading="tb1.loading"
            :header="tb1.header"
            :list="tb1.list"
          ></cpt-tb>
        </div>
      </cpt-card>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";

export default {
  name: "heart",
  data() {
    return {
      agencyId: "",
      areaCode: "",

      // 先进网格/支部
      tb1: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "60%",
          },
          {
            align: "center",
            width: "30",
          },
        ],
        header: ["序号", "网格名称", "活力值"],
        list: [],
        srcList: [],
        currentIndex: 0,
      },

      // 先进网格/支部
      tb2: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "30%",
          },
          {
            align: "center",
            width: "40%",
          },
          {
            align: "center",
            width: "20",
          },
        ],
        header: ["序号", "党员姓名", "所属网格", "积分总数"],
        list: [],
        srcList: [],
        currentIndex: 0,
      },

      // 先进网格/支部
      tb3: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "30%",
          },
          {
            align: "center",
            width: "40%",
          },
          {
            align: "center",
            width: "20",
          },
        ],
        header: ["序号", "居民姓名", "所属网格", "积分总数"],
        list: [],
        srcList: [],
        currentIndex: 0,
      },
    };
  },

  props: {},

  computed: {},

  components: {
    cptCard,
    cptTb,
  },

  watch: {},

  async mounted() {
    this.userId = this.uid;
    this.getApiData();
  },

  methods: {
    handleSearch() {},

    async getApiData() {
      await this.getAgencyInfo();
      this.getTb1();
      this.getTb2();
      this.getTb3();
    },

    toUserInfo(uid) {
      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
    },

    // 获取当前组织信息
    async getAgencyInfo() {
      const { data, code, msg } = await requestPost(
        "/data/report/screen/agency/agencydetail-multic",
        {
          agencyId: this.$store.state.user.agencyId,
        }
      );
      if (msg === "success" && code === 0) {
        this.agencyId = data.agencyId;
        this.areaCode = data.areaCode;
      }
    },

    //加载组织数据
    async getTb1() {
      const { agencyId, areaCode } = this;
      const url = "/data/report/screen/index/advancedbranchrank";
      let params = {
        agencyId,
        areaCode,
        orgType: "agency",
        topNum: 50,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.tb1.loading = false;

      if (code === 0) {
        this.tb1.list = data.map((item) => {
          return [{ type: "index" }, item.name, item.scroe];
        });
        this.tb1.srcList = data;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getTb2() {
      const { agencyId, areaCode } = this;
      const url = "/data/report/screen/user/partypointrank";
      let params = {
        orgId: agencyId,
        areaCode,
        orgType: "agency",
        topNum: 50,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.tb2.loading = false;

      if (code === 0) {
        this.tb2.list = data.map((item) => {
          return [
            { type: "index" },
            item.userName,
            item.gridName,
            item.pointTotal,
          ];
        });
        this.tb2.srcList = data;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getTb3() {
      const { agencyId, areaCode } = this;
      const url = "/data/report/screen/user/userpointrank/withoutpartymember";
      let params = {
        orgId: agencyId,
        areaCode,
        orgType: "agency",
        topNum: 50,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.tb3.loading = false;

      if (code === 0) {
        this.tb3.list = data.map((item) => {
          return [
            { type: "index" },
            item.userName,
            item.gridName,
            item.pointTotal,
          ];
        });
        this.tb3.srcList = data;
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/modules/visual/heart.scss" scoped></style>
