<template>
  <div class="BodyStyle">
    <div class="sortList">
      <div class="iconStyle">
        <div class="iconStyleLeft">
          <i class="el-icon-s-marketing icons" />
        </div>
        <div class="iconStyleRight">
          <div class="stats">{{ dataAll.userCnt }}</div>
          <div style="height: 10px" />
          <div class="textStyle">总用户数量</div>
        </div>
      </div>

      <div class="iconStyle">
        <div class="iconStyleLeft" style="background: #945bb6">
          <i class="el-icon-s-custom icons" />
        </div>
        <div class="iconStyleRight">
          <div class="stats">{{ dataAll.residentCnt }}</div>
          <div style="height: 10px" />
          <div class="textStyle">瓦钵乡居民人数</div>
        </div>
      </div>

      <div class="iconStyle" style="background: #af5555">
        <div class="iconStyleLeft">
          <i class="el-icon-s-data icons" />
        </div>
        <div class="iconStyleRight">
          <div class="stats">{{ dataAll.partyCnt }}</div>
          <div style="height: 10px" />
          <div class="textStyle">党员人数</div>
        </div>
      </div>

      <div class="iconStyle">
        <div class="iconStyleLeft" style="background: #af9055">
          <i class="el-icon-s-grid icons" />
        </div>
        <div class="iconStyleRight">
          <div class="stats">{{ dataAll.swindleCnt }}</div>
          <div style="height: 10px" />
          <div class="textStyle">反电诈协议签署人数</div>
        </div>
      </div>
    </div>
    <el-card shadow="hover" class="C1Echart">
      <div class="echartHeader">
        <span class="chartTitle">小程序数据概览</span>
        <el-select v-model="value" placeholder="请选择" @change="toChangeAll">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div id="c1" />
    </el-card>

    <el-card shadow="hover" style="margin-top: 5px">
      <div class="newTCH">
        <div class="TCH_title">居民心愿列表</div>
        <el-button
          type="primary"
          size="small"
          @click="() => $router.push({ name: 'userWishList' })"
          >查看更多</el-button
        >
      </div>

      <el-table
        :header-cell-style="headClass"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="id" align="center" label="序号" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="phone" label="电话" align="center" />
        <el-table-column prop="idcard" label="身份证" align="center" />
        <el-table-column prop="isResident" label="是否居民" align="center">
          <template slot-scope="scope">
            {{ scope.row.isResident == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="心愿类型" align="center" />
        <el-table-column prop="createdAt" label="提交时间" align="center" />
        <el-table-column prop="statusName" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 2 ? 'success' : 'primary'">
              {{ scope.row.statusName }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tableTotal > 0"
        :total="tableTotal"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getUserWishList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import * as G2 from "@antv/g2";
import sortEchart from "./components/sortEachart.vue";

export default {
  components: {
    sortEchart,
    Pagination,
  },
  data() {
    return {
      dataAll: "",
      tableData: [],
      tableTotal: 0,
      listQuery: {
        page: 1,
        limit: 3,
        status: 1
      },
      loading: false,
      options: [
        {
          value: 1,
          label: "今天",
        },
        {
          value: 2,
          label: "昨天",
        },
        {
          value: 3,
          label: "近7日",
        },
        {
          value: 4,
          label: "最近一个月",
        },
      ],
      value: 3,
    };
  },
  mounted() {
    this.getTableList();
    this.getUserWishList();
  },
  methods: {
    getEchar(item) {
      var data = item;
      // Step 1: 创建 Chart 对象
      // eslint-disable-next-line no-undef
      const chart = new G2.Chart({
        container: "c1", // 指定图表容器 ID
        width: window.innerWidth - 350, // 指定图表宽度
        height: 300, // 指定图表高度
      });
      // Step 2: 载入数据源
      chart.source(data);
      chart.scale("value", {
        min: 0,
      });
      chart.scale("year", {
        range: [0, 1],
      });
      chart.tooltip({
        crosshairs: {
          type: "line",
        },
      });
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart.line().position("x*y").color("name");
      chart
        .point()
        .position("x*y")
        .color("name")
        .size(4)
        .shape("circle")
        .style({
          stroke: "#fff",
          lineWidth: 1,
        });
      // Step 4: 渲染图表
      chart.render();
    },
    toChangeAll() {
      this.getTableList();
      this.closeG2();
    },
    getTableList() {
      var data = {
        mode: this.value,
      };
      // this.$api.statsIndexData(data).then((res) => {
      //   this.dataAll = res.data.listShow;
      //   console.log(this.dataAll)
      //
      //   this.getEchar(res.data.chart);
      // }).catch(() => {
      //
      // });
    },
    getUserWishList() {
      this.loading = true;
      this.$api
        .userWishList(this.listQuery)
        .then((res) => {
          this.tableData = res.data.data;
          this.tableTotal = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    closeG2() {
      document.getElementById("c1").getElementsByTagName("div")[0].remove();
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
  },
};
</script>

<style scoped>
.iconStyleRight {
  width: 66%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0 6px 6px 0;
}
.iconStyleLeft {
  width: 34%;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px 0 0 6px;
  background: #5579af;
  height: 99px;
}
.iconStyle {
  box-sizing: border-box;
  width: 19%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  border: 1px solid #cdc7c7;
  border-left: none;
  border-radius: 6px;
  margin-top: 5px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.iconStyle:hover {
  box-shadow: 0 0 5px #cdc7c7;
}
.C1Echart {
  margin-top: 5px;
  width: 100%;
  background: #fff;
  text-align: center;
}

.echartHeader {
  display: flex;
  justify-content: space-between;
}

.chartTitle {
  font-size: 18px;
  font-weight: bold;
}

.BodyStyle {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.sortList {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}

::v-deep .el-card {
  width: 100%;
}
.stats {
  font-size: 20px;
  font-weight: bold;
}
.icons {
  font-size: 40px;
  color: #fff;
}
.textStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.newTCH {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-bottom: 10px;
}

.TCH_title {
  font-size: 24px;
}
</style>
