<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="filter-container">
      <!-- 系统选择框 -->
      <el-select
        v-model="listQuery.sysOrigin"
        placeholder="系统"
        style="width: 120px"
        class="filter-item"
        @change="handleSearch"
      >
        <el-option
          v-for="item in permissionsSysOriginPlatforms"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span style="float: left;">
            <sys-origin-icon :icon="item.value" :desc="item.value"
          /></span>
          <span style="float: left;margin-left:10px">{{ item.label }}</span>
        </el-option>
      </el-select>

      <!-- 用户ID -->
      <div class="filter-item">
        <account-input
          v-model="listQuery.userId"
          :sys-origin="listQuery.sysOrigin"
          placeholder="用户ID"
        />
      </div>

      <!-- 搜索按钮 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        :disabled="searchDisabled"
        @click="handleSearch"
      >
        搜索
      </el-button>
    </div>

    <!-- 数据列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <!-- 来源系统 -->
      <el-table-column prop="sysOrigin" label="来源系统" align="center">
        <template slot-scope="scope">
          <sys-origin-icon
            :icon="scope.row.sysOrigin"
            :desc="scope.row.sysOrigin"
          />
        </template>
      </el-table-column>

      <!-- ID -->
      <el-table-column prop="applyAccount" label="ID" align="center" />

      <!-- 财富等级 -->
      <el-table-column prop="wealthLevel" label="财富等级" align="center" />

      <!-- 申请人 -->
      <el-table-column label="申请人" align="center">
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.userBaseInfo.id"
            @click="queryUserDetails(scope.row.userBaseInfo.id)"
          >
            {{ scope.row.userBaseInfo.userNickname }} /
            {{ scope.row.userBaseInfo.account }}
          </el-link>
        </template>
      </el-table-column>

      <!-- 状态 -->
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="0 == scope.row.state">待处理</span>
          <span v-if="1 == scope.row.state" style="color:#13ce66">同意</span>
          <span v-if="2 == scope.row.state" style="color:red">驳回</span>
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | dateFormat }}
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            :disabled="scope.row.state != 0"
            @click.native="showAgreeWindow(scope.row.id)"
            >同意</el-button
          >
          <el-button
            type="text"
            :disabled="scope.row.state != 0"
            @click.native="showRejectWindow(scope.row.id)"
            >驳回</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页按钮 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.cursor"
      :limit.sync="listQuery.limit"
      @pagination="renderData"
    />

    <user-deatils-drawer
      v-if="userDeatilsDrawerVisible"
      :user-id="thatSelectedUserId"
      @close="userDeatilsDrawerVisible = false"
    />

    <!-- 同意确认窗口 -->
    <el-dialog
      title="是否同意该申请"
      :visible="AgreeWindowVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div
        style="width: 100%;display: flex;justify-content: space-around;align-items: center;"
      >
        <el-button type="danger" @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleApply(AgreeTargetID, 1)"
          >同意</el-button
        >
      </div>
    </el-dialog>

    <!-- 驳回操作窗口 -->
    <apply-handle
      v-if="RejectWindowVisible"
      :user-id="RejectTargetID"
      @success="renderDataSuccess"
      @close="handleClose"
    />
  </div>
</template>

<script>
import { pickerOptions } from "@/constant/el-const";
import { mapGetters } from "vuex";

import {
  userBeautifulNumberApplyTable,
  handleBeautifulNumberApplyState
} from "@/api/user";

import Pagination from "@/components/Pagination";
import ApplyHandle from "./components/applyHandle.vue";

export default {
  name: "BeautifulNumberApply",
  components: { Pagination, ApplyHandle },
  data() {
    return {
      searchDisabled: false,
      pickerOptions,
      userDeatilsDrawerVisible: false,
      thatSelectedUserId: "",
      familyMemberDialogVisible: false,
      thatSelectedFamilyId: "",
      list: [],
      total: 0,
      rangeDate: [],
      listQuery: {
        cursor: 1,
        limit: 20,
        userId: "",
        sysOrigin: ""
      },
      listLoading: true,

      RejectWindowVisible: false, //拒绝窗口
      RejectTargetID: "", // 驳回对象id

      AgreeWindowVisible: false, //同意窗口
      AgreeTargetID: "" // 同意对象id
    };
  },
  computed: {
    ...mapGetters(["permissionsSysOriginPlatforms"])
  },
  created() {
    const that = this;
    const querySystem = this.permissionsSysOriginPlatforms[0];
    if (!querySystem) {
      return;
    }
    that.listQuery.sysOrigin = querySystem.value;
    that.renderData();
  },
  methods: {
    renderData(isClean) {
      const that = this;
      if (isClean === true) {
        that.list = [];
        that.listQuery.cursor = 1;
      }
      that.listLoading = true;
      userBeautifulNumberApplyTable(that.listQuery).then(res => {
        const { body } = res;
        that.total = body.total || 0;
        that.list = body.records;
        that.listLoading = false;
      });
    },
    handleSearch() {
      this.renderData(true);
    },
    queryUserDetails(id) {
      this.userDeatilsDrawerVisible = true;
      this.thatSelectedUserId = id;
    },

    // 操作按钮
    handleApply(id, state, remark) {
      const that = this;
      that.listLoading = true;
      handleBeautifulNumberApplyState(id, state, remark)
        .then(res => {
          that.listLoading = false;
          that.handleClose(); // 关闭窗口
          that.$message({
            message: "Successful",
            type: "success"
          });
          that.renderData();
        })
        .catch(er => {
          console.error(er);
          that.listLoading = false;
        });
    },

    // 打开拒绝窗口
    showRejectWindow(id) {
      const that = this;
      that.RejectTargetID = id;
      that.RejectWindowVisible = true;
    },

    // 打开同意窗口
    showAgreeWindow(id) {
      const that = this;
      that.AgreeTargetID = id;
      that.AgreeWindowVisible = true;
    },

    // 关闭窗口
    handleClose() {
      const that = this;
      that.RejectTargetID = "";
      that.AgreeTargetID = "";
      that.RejectWindowVisible = false;
      that.AgreeWindowVisible = false;
    },

    // 成功
    renderDataSuccess() {
      const that = this;
      that.RejectWindowVisible = false;
      this.$message({
        message: "Successful",
        type: "success"
      });
      this.renderData();
    }
  }
};
</script>
<style scoped lang="scss">
.store-table-expand {
  font-size: 0;
  label {
    width: 90px;
    color: #99a9bf;
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
}
</style>
