<template>
  <div class="box">
    <!-- 查询 -->
    <div class="inquire">
      <span>ID</span>
      <el-input v-model="inquire.userId"
                placeholder=""
                class="input"></el-input>
    </div>
    <!-- 工会昵称 -->
    <div class="inquire">
      <span>工会名称</span>
      <el-input v-model="inquire.nick"
                placeholder=""
                class="input"></el-input>
    </div>
    <!-- 时间选择器 -->
    <div class="inquire">
      <div class="block">
        <span class="demonstration">日期</span>
        <el-date-picker v-model="inquire.time"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </div>
    <!-- 查询按钮 -->
    <el-button class="primary"
               type="primary"
               @click="getData()">查询</el-button>
    <!-- 导出按钮 -->
    <el-button class="primary"
               type="primary"
               @click="exportFamilyMemberFun()">导出</el-button>

    <!-- 表格 -->
    <el-table v-loading="loading"
              :data="tableData"
              border
              style="width: 100%; margin-top: 25px">
      <el-table-column prop="familyName"
                       align="center"
                       label="公会昵称" />
      <el-table-column prop="erbanNo"
                       align="center"
                       label="成员ID" />
      <el-table-column prop="nick"
                       align="center"
                       label="成员昵称" />
      <el-table-column prop="partitionName"
                       align="center"
                       label="成员分区" />
      <el-table-column prop="goldIncome"
                       align="center"
                       label="金币总收入" />
      <el-table-column prop="diamondRemain"
                       align="center"
                       label="钻石总收入" />
      <el-table-column prop="micRemainTime"
                       align="center"
                       label="开播时长" />
      <el-table-column prop="sendGiftUserNum"
                       align="center"
                       label="送礼用户数" />
      <el-table-column align="center"
                       label="成员状态">
        <template v-slot="scope">{{
          scope.row.enable ? "有效" : "无效"
        }}</template>
      </el-table-column>
      <el-table-column align="center"
                       label="是否违规">
        <template v-slot="scope">{{ scope.row.violationNum }}</template>
      </el-table-column>
      <el-table-column align="center"
                       label="操作"
                       width="300">
        <template v-slot="scope">
          <el-button @click="warnClick(scope)"
                     class="primary"
                     type="primary"
                     size="default">违规警告</el-button>
          <el-button @click="listRecordFun(scope.row)"
                     class="primary"
                     type="primary"
                     size="default"
                     :disabled="scope.row.violationNum == 0 ? 'disabled' : ''">警告详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情设备信息弹窗 -->
    <el-dialog v-model="dialogTableVisible"
               title="警告详情">
      <el-table style="width: 100%"
                :data="tableData2">
        <el-table-column property="x"
                         label="成员ID"
                         min-width="100px" />
        <el-table-column property="x"
                         label="成员昵称"
                         min-width="100px" />
        <el-table-column property="x"
                         label="违规日期"
                         min-width="100px" />
        <el-table-column property="x"
                         label="被警告日期"
                         min-width="100px" />
        <el-table-column property="x"
                         label="违规类型"
                         min-width="100px" />
      </el-table>
      <el-button class="dialogTableVisibleBut"
                 type="primary"
                 @click="dialogTableVisible = false">
        关闭
      </el-button>
    </el-dialog>

    <!-- 违规弹窗 -->
    <el-dialog v-model="violationDialog"
               title="新增"
               width="28%"
               center>
      <div style="margin-bottom: 25px">
        <span style="display: inline-block; margin-right: 20px; width: 100px"
              class="col-sm-2 control-label">成员ID</span>
        <el-input v-model="violationObj.id"
                  style="width: 75%"
                  class="input"
                  disabled></el-input>
      </div>

      <div style="margin-bottom: 25px">
        <span style="display: inline-block; margin-right: 20px; width: 100px"
              class="col-sm-2 control-label">成员昵称</span>
        <el-input v-model="violationObj.nick"
                  style="width: 75%"
                  class="input"
                  disabled></el-input>
      </div>

      <div style="margin-bottom: 25px">
        <span style="display: inline-block; margin-right: 20px; width: 100px"
              class="col-sm-2 control-label">违规日期</span>
        <el-date-picker v-model="violationObj.time"
                        type="datetime"
                        placeholder="选择日期时间">
        </el-date-picker>
      </div>

      <div style="margin-bottom: 25px">
        <span style="display: inline-block; margin-right: 20px; width: 100px"
              class="col-sm-2 control-label">违规类型</span>
        <el-select v-model="violationObj.nowValue"
                   placeholder="请选择">
          <el-option v-for="item in violationObj.options"
                     :key="item.id"
                     :label="item.type"
                     :value="item.id">
          </el-option>
        </el-select>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="violationDialog = false">取消</el-button>
          <el-button type="primary"
                     @click="add(violationObj)">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <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" />
  </div>
</template>
<script>
import {
  pageFamilyMember,
  listFun,
  addRecord,
  listRecord,
  exportFamilyMember,
} from "@/api/nobleman/nobleman";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
  name: "GuildMemberInfo",
  data () {
    return {
      loading: false,
      //查询所需条件对象
      inquire: {
        userId: "",
        nick: "",
        time: "",
      },
      //新增所需对象
      resource: {
        id: "",
        nick: "",
        time: "",
        nowValue: "",
        options: [],
        familyMemberId: null,
      },
      // 表格
      tableData: [],
      //   新增弹窗
      addDialog: false,
      // 分页
      total: 10, //总页数
      currentPage: 1, //页码
      pageSize: 10, //条数
    };
  },
  created () {
    this.getData();
    listFun().then((res) => {
      this.violationObj.options = res.data;
    });
  },
  methods: {
    // 查询接口
    getData () {
      this.loading = true;
      let time = this.inquire.time;
      let startTime = "";
      let endTime = "";
      if (time && time.length > 0) {
        startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss");
        endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss");
      }
      console.log(this.inquire);

      pageFamilyMember({
        erbanNo: this.inquire.userId,
        familyName: this.inquire.nick,
        startDate: startTime,
        endDate: endTime,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.rows;
        this.loading = false;
      });
    },
    // 导出
    exportFamilyMemberFun () {
      this.loading = true;
      let time = this.inquire.time;
      let startTime = "";
      let endTime = "";
      if (time && time.length > 0) {
        startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss");
        endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss");
      }
      exportFamilyMember({
        erbanNo: this.inquire.userId,
        familyName: this.inquire.nick,
        startDate: startTime,
        endDate: endTime,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
      });
    },
    // 违规警告
    warnClick (val) {
      console.log(val.row);
      var obj = val.row;
      this.violationObj.id = val.row.erbanNo;
      this.violationObj.nick = val.row.nick;
      this.violationObj.familyMemberId = val.row.familyMemberId;
      this.violationDialog = true;
    },
    add (val) {
      var num = this.violationObj.options.map((item, i) => {
        return this.violationObj.nowValue == item.id ? i : null;
      });
      let time = dateFormat(this.violationObj.time, "yyyy-MM-dd hh:mm:ss");
      addRecord({
        familyMemberId: this.violationObj.familyMemberId,
        violationId: this.violationObj.nowValue,
        date: time,
        content: this.violationObj.options[num].content,
      }).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "success",
          });
          this.getData();
          this.violationDialog = false;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    listRecordFun (val) {
      let time = this.inquire.time;
      let startTime = "";
      let endTime = "";
      if (time && time.length > 0) {
        startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss");
        endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss");
      }
      listRecord({
        familyMemberId: val.familyMemberId,
        startTime: startTime,
        endTime: endTime,
      }).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "success",
          });
          this.dialogTableVisible = true;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 分页导航
    handleSizeChange () {
      this.getData();
    },
    handleCurrentChange () {
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-top: 20px;
  background: #ecf0f5;
  .inquire {
    display: inline-block;
    margin-right: 20px;
    span {
      margin-right: 10px;
    }
    .input {
      width: 180px;
      margin-right: 10px;
    }
  }
  .dialogTableVisibleBut {
    display: block;
    margin: 30px 0 0 830px;
  }
  .paginationClass {
    margin: 15px 0 5px 0px;
  }
}
</style>
