<template>
  <div class="vipList">
    <div class="head">
      <div class="text headrow">
        <el-input placeholder="请输入内容" v-model="params.uid" clearable>
          <template slot="prepend">用户UID</template>
        </el-input>

        <el-input placeholder="请输入内容" v-model="params.loginName" clearable>
          <template slot="prepend">用户账号</template>
        </el-input>

        <div class="range headrow">
          <el-input placeholder="累充金额" v-model="params.payStartRange" clearable />－
          <el-input placeholder="累充金额" v-model="params.payEndRange" clearable />
        </div>

        <el-select v-model="params.cpGameId" placeholder="请选择CP游戏" filterable clearable>
          <el-option
            v-for="item in cpGameList"
            :key="item.cpGameId"
            :label="item.cpGameId + '_' +item.cpGameName"
            :value="item.cpGameId"
          ></el-option>
        </el-select>
      </div>

      <div class="select headrow">
        <el-select v-model="params.lossWarning" placeholder="流失预警" clearable>
          <el-option
            v-for="item in warningOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-select v-model="params.payStatus" placeholder="充值状态" filterable clearable>
          <el-option
            v-for="item in warningOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-select v-model="params.userLossStatus" placeholder="用户流失状态" filterable clearable>
          <el-option
            v-for="item in lossOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-select
          v-model="params.logSysId"
          placeholder="负责人"
          filterable
          clearable
          v-if="userId == '10000'"
        >
          <el-option
            v-for="item in sysUserList"
            :key="item.userId"
            :label="item.loginName+'_'+item.userName"
            :value="item.userId"
          ></el-option>
        </el-select>
      </div>

      <div class="interval headrow">
        <el-date-picker
          v-model="logTime"
          @change="handelLogTimeChange"
          type="datetimerange"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
          start-placeholder="录入日期"
          end-placeholder="录入日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>

        <el-date-picker
          v-model="payTime"
          @change="handelPayTimeChange"
          type="datetimerange"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
          start-placeholder="充值日期"
          end-placeholder="充值日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>

        <el-date-picker
          v-model="loginTime"
          @change="handelLoginTimeChange"
          type="datetimerange"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
          start-placeholder="登陆日期"
          end-placeholder="登陆日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </div>

      <div class="action">
        <el-button plain type="primary" icon="el-icon-search" @click="getVipList">搜索</el-button>
        <el-button
          plain
          type="success"
          icon="el-icon-circle-plus-outline"
          @click="handelOpenDialog"
        >新增</el-button>
        <el-button plain type="danger" icon="el-icon-coin">导出</el-button>
      </div>
    </div>

    <div class="list">
      <el-table
        :data="vipList.slice((curPage-1)*pageSize,curPage*pageSize)"
        border
        stripe
        :fit="false"
        height="100%"
      >
        <el-table-column label="序号" type="index" width="80" show-overflow-tooltip />
        <el-table-column label="用户UID" prop="uid" width="150" show-overflow-tooltip />
        <el-table-column label="账号" prop="loginName" width="150" show-overflow-tooltip />
        <el-table-column label="CP原游戏名" prop="cpGameName" width="150" show-overflow-tooltip />
        <el-table-column label="区服" prop="serverName" width="150" show-overflow-tooltip />
        <el-table-column label="角色名" prop="roleName" width="150" show-overflow-tooltip />
        <el-table-column
          label="平台币余额"
          prop="jqCurrency"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="赠币余额"
          prop="jqGiftCurrency"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="累计赠币"
          prop="sendCoinTotal"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="累充平台币"
          prop="coinTotal"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="当日币充值"
          prop="dayCoinTotal"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="周平台币累充"
          prop="weekCoinTotal"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="维护平台币累充"
          prop="maintainCoinTotal"
          width="120"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="历史累充平台币"
          prop="historyCoinTotal"
          width="120"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="当日渠道充值"
          prop="dayChannelPayTotal"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="当日维护充值"
          prop="allDayVipTotal"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="平台币支付"
          prop="coinPay"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="渠道周累充"
          prop="weekChannelPayTotal"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="维护周累充"
          prop="weekVipPayTotal"
          width="100"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="维护累充"
          prop="vipPayTotal"
          width="150"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column
          label="历史累充"
          prop="allPayTotal"
          width="150"
          show-overflow-tooltip
          :formatter="formatNum"
        />
        <el-table-column label="录入时间" prop="logTime" width="150" show-overflow-tooltip />
        <el-table-column label="最近一次登录时间" prop="lastLoginTime" width="150" show-overflow-tooltip />
        <el-table-column label="最后一次支付时间" prop="lastPayTime" width="150" show-overflow-tooltip />

        <el-table-column label="流失预警" prop="userLossStatus" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag
              :type="tagType(scope.row.userLossStatus)"
            >{{tagWarningText(scope.row.userLossStatus)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="用户支付状态" prop="payStatus" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="tagType(scope.row.payStatus)">{{tagPayText(scope.row.payStatus)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="用户登录状态" prop="userLossStatus" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag
              :type="tagType(scope.row.userLossStatus)"
            >{{tagStatusText(scope.row.userLossStatus)}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="负责人" prop="userName" width="150" show-overflow-tooltip />

        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <div class="headrow">
              <el-button size="mini" @click="handelUpdate(scope.row.id)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handelDelete(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="pageSize"
        :current-page="curPage"
        :pager-count="11"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      center
      width="500px"
      :rules="rules"
      ref="ruleForm"
    >
      <div class="content">
        <el-form
          label-width="100px"
          label-position="left"
          style="width:400px;"
          class="demo-ruleForm"
          :model="addModel"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item label="UID" prop="uid">
            <el-input v-model="addModel.uid" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="CP游戏原名称" prop="cpGameId">
            <el-select
              v-model="addModel.cpGameId"
              placeholder="请选择CP游戏"
              filterable
              clearable
              style="width:100%;"
            >
              <el-option
                v-for="item in cpGameList"
                :key="item.cpGameId"
                :label="item.cpGameId + '_' +item.cpGameName"
                :value="item.cpGameId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区服" prop="serverName">
            <el-input v-model="addModel.serverName"></el-input>
          </el-form-item>
          <el-form-item label="角色名" prop="roleName">
            <el-input v-model="addModel.roleName"></el-input>
          </el-form-item>
          <el-form-item label="称呼" prop="realName">
            <el-input v-model="addModel.realName"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="addModel.birthday"
              type="date"
              :value-format="'yyyy-MM-dd'"
              style="width:100%"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="addModel.phone"></el-input>
          </el-form-item>
          <el-form-item label="微信号" prop="wxNum">
            <el-input v-model="addModel.wxNum"></el-input>
          </el-form-item>
          <el-form-item label="QQ号" prop="qqNum">
            <el-input v-model="addModel.qqNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handelAddVip">确 定</el-button>
        <el-button @click="handelCancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vipApi from "@/api/sysVip";
import { getCookie, getLastDay, formatTime } from "@/utils/util";
import { truncate } from "fs";

export default {
  name: "vipList",
  data() {
    return {
      dialogTitle: "",
      disabled: false,
      rules: {
        uid: [{ required: true, message: "请输入UID", trigger: "blur" }],
        serverName: [
          { required: true, message: "请输入区服名称", trigger: "blur" }
        ],
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ]
      },
      addModel: {},
      userId: "",
      vipList: [],
      total: 0,
      pageSize: 20,
      curPage: 1,
      params: {},
      warningOptions: [
        {
          label: "3天未登录",
          value: 3
        },
        {
          label: "5天未登录",
          value: 5
        },
        {
          label: "7天未登录",
          value: 7
        }
      ],
      lossOptions: [
        {
          label: "活跃",
          value: 1
        },
        {
          label: "疑似流失",
          value: 2
        },
        {
          label: "已流失",
          value: 3
        }
      ],
      cpGameList: [],
      sysUserList: [],
      logTime: "",
      payTime: "",
      loginTime: "",
      dialogVisible: false
    };
  },
  created() {
    this.init();
    this.getVipList();
  },
  methods: {
    init() {
      this.userId = getCookie("user_id");
      let lastDay = getLastDay(7);
      this.logTime = lastDay;
      this.params.logStartTime = lastDay ? formatTime(lastDay[0]) : null;
      this.params.logEndTime = lastDay ? formatTime(lastDay[1]) : null;
      this.getSelectOptions();
    },
    getVipList() {
      if (this.userId != "10000") {
        this.params.logSysId = this.userId;
      }
      vipApi.getVipList(this.params).then(res => {
        this.$log.debug(res);
        this.total = res.length;
        this.vipList = res;
      });
    },

    getSelectOptions() {
      vipApi.getSelectOptions().then(res => {
        this.$log.debug(res);
        this.cpGameList = res.cpGame;
        this.sysUserList = res.sysUser;
      });
    },

    formatNum(row, column, cellValue, index) {
      return cellValue ? cellValue : 0;
    },

    tagType(val) {
      if (val < 1) {
        return "success";
      } else if (val < 3) {
        return "warning";
      } else {
        return "danger";
      }
    },
    tagWarningText(val) {
      if (val < 1) {
        return "活跃";
      } else {
        return val + "天未登录";
      }
    },
    tagPayText(val) {
      if (val < 1) {
        return "活跃";
      } else {
        return val + "天未充值";
      }
    },
    tagStatusText(val) {
      if (val < 1) {
        return "活跃";
      } else if (val < 3) {
        return "疑似流失";
      } else {
        return "已流失";
      }
    },

    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.curPage = val;
    },
    handelLogTimeChange(val) {
      this.params.logStartTime = val ? val[0] : null;
      this.params.logEndTime = val ? val[1] : null;
      this.$log.debug(this.params);
    },
    handelPayTimeChange(val) {
      this.params.payStartTime = val ? val[0] : null;
      this.params.payEndTime = val ? val[1] : null;
      this.$log.debug(this.params);
    },
    handelLoginTimeChange(val) {
      this.params.loginStartTime = val ? val[0] : null;
      this.params.loginEndTime = val ? val[1] : null;
      this.$log.debug(this.params);
    },
    handelAddVip() {
      if (this.disabled) {
        vipApi.updateVip(this.addModel).then(res => {
          this.dialogVisible = false;
          this.$refs["ruleForm"].resetFields();
          this.getVipList();
          this.disabled = false;
          this.$message({
            type: "success",
            message: "修改成功!"
          });
        });
      } else {
        this.addModel.logSysId = this.userId;
        vipApi.addVip(this.addModel).then(res => {
          this.dialogVisible = false;
          this.$refs["ruleForm"].resetFields();
          this.getVipList();
          this.disabled = false;
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        });
      }
    },
    handelOpenDialog() {
      this.dialogTitle = "新增VIP用户";
      this.dialogVisible = true;
    },
    handelDelete(id) {
      if (id) {
        let dto = {};
        dto.id = id;
        dto.isDelete = 0;
        this.$confirm("此操作将永久该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            vipApi.updateVip(dto).then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getVipList();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    handelUpdate(id) {
      vipApi.getById(id).then(res => {
        if (res) {
          this.addModel = res;
          this.dialogTitle = "编辑VIP用户";
          this.disabled = true;
          this.dialogVisible = true;
        }
      });
    },
    handelCancel() {
      this.disabled = false;
      this.addModel = {};
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
    }
    // handleCheckedFieldChange(val) {
    //   this.$log.debug(val)
    //   let checkedCount = val.length
    //   this.checkAll = checkedCount === this.fieldList.length
    //   this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
    // },
    // handleCheckAllChange(val) {
    //   this.$log.debug(val)
    //   this.checkedFieldList = val
    //     ? this.fieldList.map(obj => {
    //         return obj.javaField
    //       })
    //     : []
    //   this.isIndeterminate = false
    // },
    // handelExcelExport() {
    //   if (JSON.stringify(this.params) === '{}') {
    //     this.$message({ message: '查询条件不能为空', type: 'warning' })
    //     return
    //   }
    //   let map = {}
    //   map.vo = this.fieldList.filter(f => this.checkedFieldList.indexOf(f.javaField) != -1)
    //   map.dto = this.params
    //   this.$log.debug(map)
    //   orderApi.getExcel(map).then(body=> {
    //     this.$log.debug(body)
    //     let a = document.createElement('a')
    //     a.href = `${orderApi.baseUrl}/v1/excel/${body}`
    //     a.click();
    //   })
    //   this.dialogVisible = false;
    // },
    // handelChannelChange(val) {
    //   this.params.channelId = val.join(",")
    // }
  }
};
</script>

<style lang="less" scoped>
.vipList {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .head {
    margin: 4px;
    .text {
      .el-input {
        margin: 4px;
        width: 25%;
      }
      .range {
        margin: 4px;
        width: 25%;
        .el-input {
          width: 45%;
        }
      }
      .el-select {
        margin: 4px;
        width: 25%;
      }
    }
    .select {
      .el-select {
        margin: 4px;
        width: 25%;
      }
    }
    .interval {
      .el-range-editor {
        margin: 4px;
        width: 33%;
      }
    }
    .action {
      margin: 4px;
    }
  }
}
</style>
