<template>
  <!-- 表格 -->
  <el-table
    v-loading="loading"
    :data="tableData"
    border
    style="width: 100%; margin-top: 25px"
  >
    <el-table-column align="center" label="日期" width="220px">
      <template v-slot="scope">
        {{ scope.row.date }} ~ {{ scope.row.endDate }}
      </template>
    </el-table-column>

    <el-table-column
      prop="totalNewCount"
      align="center"
      label="全服公会总新增"
    />

    <el-table-column align="center" label="阿拉伯公会总新增" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '阿拉伯公会总新增' + scope.row.date;
            edi(scope.row.arNewCountDetail, false);
          "
          type="text"
          size="small"
        >
          {{ scope.row.arNewCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="英语区总新增" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '英语区总新增' + scope.row.date;
            edi(scope.row.enNewCountDetail, false);
          "
          type="text"
          size="small"
        >
          {{ scope.row.enNewCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="华语区总新增" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '华语区总新增' + scope.row.date;
            edi(scope.row.zhNewCountDetail, false);
          "
          type="text"
          size="small"
        >
          {{ scope.row.zhNewCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="土耳其区总新增" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '土耳其区总新增' + scope.row.date;
            edi(scope.row.trNewCountDetail, false);
          "
          type="text"
          size="small"
        >
          {{ scope.row.trNewCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="英语2区总新增" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '英语2区总新增' + scope.row.date;
            edi(scope.row.en2NewCountDetail, false);
          "
          type="text"
          size="small"
        >
          {{ scope.row.en2NewCount }}
        </el-button>
      </template>
    </el-table-column>

    <el-table-column
      prop="totalActiveCount"
      align="center"
      label="全服公会活跃度"
    />

    <el-table-column align="center" label="阿拉伯公会活跃度" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '阿拉伯公会活跃度' + scope.row.date;
            edi(scope.row.arActiveCountDetail, true);
          "
          type="text"
          size="small"
        >
          {{ scope.row.arActiveCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="英语区活跃度" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '英语区活跃度' + scope.row.date;
            edi(scope.row.enActiveCountDetail, true);
          "
          type="text"
          size="small"
        >
          {{ scope.row.enActiveCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="华语区活跃度" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '华语区活跃度' + scope.row.date;
            edi(scope.row.zhActiveCountDetail, true);
          "
          type="text"
          size="small"
        >
          {{ scope.row.zhActiveCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="土耳其区活跃度" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '土耳其区活跃度' + scope.row.date;
            edi(scope.row.trActiveCountDetail, true);
          "
          type="text"
          size="small"
        >
          {{ scope.row.trActiveCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="英语2区活跃度" width="">
      <template v-slot="scope">
        <el-button
          @click="
            detailsTitle = '英语2区活跃度' + scope.row.date;
            edi(scope.row.en2ActiveCountDetail, true);
          "
          type="text"
          size="small"
        >
          {{ scope.row.en2ActiveCount }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <!-- <el-pagination
    style="margin-top: 10px"
    class="paginationClass"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
    layout="sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  /> -->

  <!-- 详情 -->
  <el-dialog v-model="detailsDialog" :title="detailsTitle" width="50%" center>
    <!-- 内表格 -->
    <el-table
      v-loading="loading"
      :data="tableDataIn"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="date" align="center" label="日期" />
      <el-table-column prop="endDate" align="center" label="结束时间" />
      <el-table-column prop="guildId" align="center" label="公会ID" />
      <el-table-column prop="ownerErbanNo" align="center" label="公会长ID" />
      <el-table-column
        prop="ownerRegionName"
        align="center"
        label="公会长所属国家"
      />
      <el-table-column prop="operatorName" align="center" label="公会负责人" />
      <el-table-column
        prop="activeMemberCount"
        align="center"
        label="本周收礼主播数"
      />
      <el-table-column
        prop="guildGoldFlow"
        align="center"
        label="本周公会钻石流水"
      >
      <template v-slot="scope">
          {{
            formattedNumber(scope.row.guildGoldFlow)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="guildDiamondFlow"
        align="center"
        label="本周公会金币流水"
      >
      <template v-slot="scope">
          {{
            formattedNumber(scope.row.guildDiamondFlow)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="lastGuildGoldFlow"
        align="center"
        label="上周公会钻石流水"
        v-if="detailsIsShow"
      />
      <el-table-column
        prop="guildGoldFlowWow"
        align="center"
        label="周环比"
        v-if="detailsIsShow"
      >
        <template v-slot="scope">
          {{
            scope.row.lastGuildGoldFlow === 0
              ? "--"
              : formatPercentage(
                  scope.row.guildGoldFlow / scope.row.lastGuildGoldFlow
                ) + "%"
          }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 操作 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" class="primary" @click="detailsDialog = false"
          >关闭</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { guiildPage } from "@/api/statistics/statistics";
import { dateFormat } from "@/utils/system-helper";
import { ElMessage } from "element-plus";
export default {
  name: "guildStatisticsData",
  data() {
    return {
      loading: false,
      // 查询条件
      inquire: {
        time: [],
      },
      // 表格
      tableData: [],
      // 分页
      total: 10, //总页数
      currentPage: 1, //页码
      pageSize: 10, //条数
      //   内表格
      detailsDialog: false,
      detailsTitle: "金币明细",
      tableDataIn: [],
      detailsIsShow: false,
    };
  },
  created() {
    this.getData();
  },
  computed: {
    // 千分位
    formattedNumber() {
      return (num) => {
        if (num === null || num === undefined) return "";
        return Math.floor(num)
          .toString()
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      };
    },
  },
  methods: {
    // 查询
    getData() {
      this.loading = true;
      let time = this.inquire.time;
      let startTime = null;
      let endTime = null;
      if (time.length > 0) {
        startTime = this.inquire.time[0]
          ? dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss")
          : null;
        endTime = this.inquire.time[1]
          ? dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss")
          : null;
      }
      guiildPage({
        page: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.tableData = res.data.rows;
          this.loading = false;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 详情
    edi(res, type) {
      this.detailsIsShow = type;
      this.tableDataIn = JSON.parse(res);
      this.detailsDialog = true;
    },
    formatPercentage(value) {
      return parseFloat((value * 100).toFixed(2));
    },
    // 分页导航
    handleSizeChange() {
      this.getData();
    },
    handleCurrentChange() {
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.outer {
  padding-top: 20px;
  background: #ecf0f5;
  border-top: 3px solid #d2d6de;
  .demonstration {
    margin-right: 20px;
  }
  .inquire {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    float: left;
    margin-right: 20px;
  }
  .search {
    width: 100%;
    height: 41px;
    .searchLeft,
    .searchRight {
      width: 20%;
      float: left;
      span {
        margin-right: 10px;
      }
      .input {
        width: 75%;
      }
    }
  }
  .buttonBox {
    margin-top: 10px;
  }
  .authorityBox {
    .authoritySpan {
      margin-right: 20px;
    }
    .authorityInpput {
      width: 50%;
    }
  }
  .dialogTableVisibleBut {
    margin: -25px 0 20px 0px;
  }
}
</style>
