<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="main">
      <div class="form_all">
        <el-form ref="select" :model="select" label-width="auto">
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="会员编号">
                <el-input clearable v-model="select.memberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="getDataList">搜索 </el-button>
              <el-button type="" @click="reset">重置 </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="maintable">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="700px"
          v-loading="loading"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            align="center"
            prop="memberCode"
            :label="'会员编号'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="memberName"
            :label="'会员姓名'"
          >
          </el-table-column>
          <el-table-column align="center" prop="phone" :label="'联系方式'">
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleGradeVal"
            :label="'注册等级'"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="awardsVal"
            :label="'真实奖衔'"
            width="180"
          >
          </el-table-column>
          <el-table-column align="center" prop="parent" :label="'推荐编号'">
          </el-table-column>
          <el-table-column
            align="center"
            prop="parentName"
            :label="'推荐姓名'"
          >
          </el-table-column>
          <el-table-column align="center" prop="creationTime" label="创建时间">
          </el-table-column>
          <el-table-column
            align="center"
            prop="time"
            :label="'操作'"
            fixed="right"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                class="button-s"
                type="text"
                size="small"
                v-has-buttons="['memberShareDelete']"
                @click="shareDelete(scope.row)"
              >
                删除
              </el-button>
              <el-button
                class="button-s"
                type="text"
                size="small"
                v-has-buttons="['memberShareParentDelete']"
                @click="shareDeleteParentData(scope.row)"
              >
                伞下删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDataList"
    />
  </div>
</template>

<script>
import topBar from "@/components/topBar";
import * as api from "@/api/specialBusiness.js";
import { getvertexValue, getmemberTeamList } from "@/api/member";
import { getgradeRanglist, getAwardsListChiose } from "@/api/level";
import {
  shareDelete,
  shareList,
  shareParentDelete,
  shareParentList,
} from "@/api/specialBusiness.js";

export default {
  name: "Bzpz",
  components: {
    topBar,
  },
  data() {
    return {
      selectData: [],
      select: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      addOrEdit: "",
      total: 0,
      tableData: [],
      loading: false,
      moren: "shareDelete",
      topList: [
        {
          name: "删除空点",
          path: "shareDelete",
          changed: false,
        },
      ],
      gradeRangList: [], //注册等级
      awardsList: [], //真实奖衔
      vertexList: [], //隶属体系
      memberteamList: [], //隶属团队
      delList: [],
      errList: [],
    };
  },
  mounted() {
    // 获取列表
    this.getDataList();
    // this.getData()
  },
  methods: {
    getData() {
      // 注册等级
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data;
      });
      // 真实奖衔
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows;
      });
      //隶属团队下拉选
      getmemberTeamList().then((res) => {
        this.memberteamList = res.rows;
      });
      //隶属体系下拉选 取pkid和name
      getvertexValue().then((res) => {
        this.vertexList = res.data;
      });
    },
    reset() {
      this.select = {};
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      api
        .shareList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          this.loading = false;
          this.tableData = res.rows;
          this.total = res.total;
        });
    },
    shareDelete(row) {
      this.$confirm("是否删除当前数据?", '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        shareDelete({
          pkMember: row.pkId,
        }).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.getDataList();
          }
        });
      });
    },
    shareDeleteParentData(row) {
      shareParentList({
        pkMember: row.pkId,
      }).then((res) => {
        if (res.code === 200) {
          const dataArray = res.data.split(",");
          const groupedData = dataArray.reduce((acc, cur, index) => {
            const groupIndex = Math.floor(index / 3);
            if (!acc[groupIndex]) acc[groupIndex] = [];
            acc[groupIndex].push(cur);
            return acc;
          }, []);
          const formattedMsg = groupedData
            .map((group) => group.join(", "))
            .join("<br>");

          const msg = `本次需要删除会员：<br>${formattedMsg}`;
          this.$confirm('确认删除?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            message: msg,
            dangerouslyUseHTMLString: true,
            type: "warning",
          }).then(() => {
            api
              .shareParentDelete({
                pkMemberStr: res.data,
              })
              .then((res) => {
                if (res.code === 200) {
                  this.$message({
                    message: res.msg,
                    type: "success",
                  });
                  this.getDataList();
                }
              });
          });
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
<style scoped lang="scss">
::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: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

    .form_all {
      padding: 0px 20px 0 20px;
      // margin-bottom: 20px;
      background: #fff;
      border-radius: 8px;
    }

    .maintop {
      display: flex;
      padding: 0px 0px;
      justify-content: space-between;
      align-items: center;

      background: #f8f8f8;

      .mainbtn {
        .thebtn1 {
          background: #3181e5;
          color: #ffffff;
          width: 68px;
          height: 32px;
        }

        .thebtn4 {
          background: #ffad41;
          color: #ffffff;
          width: 68px;
          height: 32px;
        }

        .thebtn2 {
          background: #c73030;
          color: #ffffff;
          width: 68px;
          height: 32px;
        }

        .thebtn3 {
          background: #6962f6;
          color: #ffffff;
          width: 68px;
          height: 32px;
        }
      }

      .maintitle {
        font-size: 10px;
        font-family: MicrosoftYaHei;
        color: #999999;
      }
    }
  }

  .tem {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 28px;
      height: 20px;
      margin-right: 3px;
    }
  }

  .isRed {
    color: #ed1d25;
  }

  .isGreen {
    color: #1ab62b;
  }

  .bgImg {
    width: 48px;
    height: 48px;
  }
}

.openClose {
  text-align: right;
  margin-right: 10px;
  color: #3181e5;
}

.dizhi {
  ::v-deep .el-cascader {
    width: 100%;
  }
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}

.form_all ::v-deep .el-input__suffix {
  top: 0px !important;
}

.form_all ::v-deep .el-select .el-input .el-select__caret.is-reverse {
  transform: translateY(0px) !important;
}

::v-deep .el-input__suffix {
  top: -3px;
}

::v-deep .el-select .el-input__suffix {
  top: 5px;
}

::v-deep .el-select .el-input .el-select__caret.is-reverse {
  transform: translateY(-8px);
}

::v-deep .el-cascader .el-input__suffix {
  top: 0px;
}

::v-deep .el-input__clear {
  margin-bottom: 20px !important;
}

.disFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.allTab {
  max-height: 600px;
  overflow-y: auto;
}

.thebtn2 {
  background: rgba(243, 169, 0, 1);
  border: none;
  color: #ffffff;
}

.thebtn3 {
  color: #ffffff;
  border: none;
  background: rgba(72, 178, 253, 1);
}

.thebtn4 {
  background: rgba(0, 155, 88, 1);
  color: #ffffff;
  border: none;
}

.thebtn5 {
  border: none;
  color: #ffffff;
  background: rgba(228, 27, 27, 1);
}
</style>
