<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="thetopbox">
      <el-form ref="form" :model="queryParams" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
              <el-select
                v-model="queryParams.memberSettlePeriodId"
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="item in memberSettlePeriodList"
                  :key="item.pkId"
                  :label="item.settleDate"
                  :value="item.pkId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'会员编号'" prop="memberCode">
              <el-input
                v-model="queryParams.memberCode"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="4" style="margin-left: 30px">
            <div class="searchbox">
              <el-button
                :loading="loading"
                class="searchbtn"
                @click="handleSearch"
              > {{ '搜索' }}</el-button>
              <el-button @click="resetHandle"> {{ '重置' }}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="maintop">
      <div class="mainbtn">
        <el-button v-hasButtons="['MemberPointInfoExport']" size="small" class="thebtn2" @click="handleExport">导出</el-button>
      </div>
    </div>
    <div class="main">
      <div class="maintable">
        <el-table
          ref="table"
          v-loading="loading"
          :data="tableData"
          :height="'630px'"
          :header-cell-style="{ background: '#EEEEEE' }"
          lass="content"
          style="width: 100%;"
          :row-class-name="tableRowClassName"
          @sort-change="sortChange"
        >
          <el-table-column type="selection" />

          <el-table-column
            align="center"
            prop="memberCode"
            label="会员编号"
            width="180"
          />
          <el-table-column
            align="center"
            prop="memberName"
            label="会员姓名"
          />

          <el-table-column
            align="center"
            prop="pointCount"
            label="子点位总数"
            sortable="custom"
          />
          <el-table-column
            align="center"
            prop="waitPointCount"
            label="待激活点位总数"
            sortable="custom"
          />
          <el-table-column
            align="center"
            prop="repPvBalance"
            label="复购业绩余额"
            sortable="custom"
          />

        </el-table>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import {
  getMemberPointList,
  getMemberSettlePeriod
} from '@/api/archityecture'
import { isLocals } from '../../../utils/numberToCurrency'

const initParmas = {
  pageNum: 1,
  pageSize: 50,
  memberSettlePeriodId: '',
  memberCode: '',
  sort: '',
  sortColumn: ''
}
export default {
  name: 'MemberPointInfo',
  components: {
    topBar
  },
  data() {
    return {
      moren: 'memberPointInfo',
      queryParams: {
        ...initParmas
      },

      tableData: [],
      memberSettlePeriodList: [], // 期数
      loading: false,
      total: 0,
      nodeInfo: {},
      nodeInfoDialogVisible: false,
      tempMemberCode: '',
      topList: [
        {
          name: '会员点位信息',
          path: 'memberPointInfo'
        }
      ]
    }
  },
  created() {
    getMemberSettlePeriod().then((res) => {
      if (res.code === 200) {
        this.memberSettlePeriodList = (res.data || []).filter(item => item.isThisDay !== 0)
        this.queryParams.memberSettlePeriodId = this.memberSettlePeriodList[0].pkId
        this.handleSearch()
      }
    })
  },
  methods: {
    isLocals,
    handleSearch() {
      this.tempMemberCode = this.queryParams.memberCode
      this.queryParams.pageNum = 1
      this.getList()
    },
    getList() {
      this.loading = true
      getMemberPointList(this.queryParams).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.rows
          this.total = res.data.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleExport() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((_) => {
        this.download(
          '/member/manager/member/member-point-export',
          { ...this.queryParams },
          `${'会员点位信息'}${new Date().getTime()}.xlsx`
        )
      })
    },
    resetHandle() {
      this.queryParams = {
        ...initParmas
      }
      this.queryParams.memberSettlePeriodId = this.memberSettlePeriodList[0].pkId
      // 清除表格排序状态
      this.$refs.table.clearSort()
      this.handleSearch()
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else if (rowIndex % 2 === 0) {
        return 'success-row'
      }
      return ''
    },
    copyContent(content) {
      // this.$message.success('复制成功')
    },
    // 处理表格排序
    sortChange({ column, prop, order }) {
      if (order) {
        // 根据字段名映射到后端需要的排序字段名
        const sortColumnMap = {
          pointCount: 'POINT_COUNT',
          waitPointCount: 'WAIT_POINT_COUNT',
          repPvBalance: 'REP_PV_BALANCE'
        }

        this.queryParams.sortColumn = sortColumnMap[prop] || ''
        this.queryParams.sort = order === 'ascending' ? 'ASC' : 'DESC'
      } else {
        // 取消排序
        this.queryParams.sortColumn = ''
        this.queryParams.sort = ''
      }

      // 重新加载数据
      this.handleSearch()
    }

  }
}
</script>
<style scoped lang="scss">

::v-deep .el-range-editor.el-input__inner{
  width: 100%!important;
}
::v-deep .el-button{
  padding: 8px 20px;
}
::v-deep .el-date-editor .el-range__close-icon{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon{
  margin-top: -10px;
}
::v-deep .el-form-item__label{
  color: #333;
  font-weight: inherit;
}
::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: #f9f9f9;
    .maintop {
      display: flex;
      padding: 0 0;
      justify-content: space-between;
      align-items: center;

    }
  }
}

.searchbtn {
  width: 68px;
  background: #c8161d;
  color: #ffffff;
}
.node-wrapper {
  width: 20px;
  height: 20px;
  // 激活颜色
  background-color: #007bff;
  border-radius: 50%;
  cursor: pointer;
}
.empty-node {
  background-color: #fff;
  border: 2px dashed #95a5a6;
}
.title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 18px;
}
.thebtn2 {
  color: #ffffff !important;
  background: #ffad41 !important;
}
</style>
