<template>
  <div class="mainContainer">
    <div class="mainTableTools">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="selectedStatus" placeholder="状态" @change="getList()">
            <el-option
              v-for="(item, index) of statusOptions"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="9">
          <div class="mainTableTagbox">
            <el-tag type="success">申请总数：<b>{{counter.all}}</b></el-tag>
            <el-tag>已恢复：<b>{{counter.restore}}</b></el-tag>
            <el-tag type="danger">拒绝恢复：<b>{{counter.reject}}</b></el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" border >
      <el-table-column prop="obj_id" label="申请人">
        <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.uid">{{scope.row.nickname}}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="before_weight" label="申请时权重"></el-table-column>
      <el-table-column prop="money" label="付费金额"></el-table-column>
      <el-table-column prop="update_time" label="付费时间"></el-table-column>
      <el-table-column prop="status" label="当前状态">
        <template slot-scope="scope">
          <span :class="'status-' + scope.row.status">{{scope.row.status_name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <div>{{ scope.row.remark_text }}</div>
          <el-button type="text" @click="onToList(scope.row)">查看备注({{ scope.row.remark_num }})</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="onRemark(scope.row)">添加备注</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="obj_id" label="处理人">
        <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.action_uid">{{scope.row.action_nickname}}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 2">
            <el-button size="mini" type="primary" @click="pass(scope.row)">允许恢复</el-button>
            <el-button size="mini" type="danger" @click="reject(scope.row)">拒绝恢复</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div class="mainPageBox">
      <el-pagination
        @current-change="changePagination"
        :page-size="20"
        :total="Number(total)"
        layout="total, prev, pager, next"
        background
      ></el-pagination>
    </div>

    <el-dialog title="添加备注" :visible.sync="remarkModel">
      <div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="remarkData.content">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkModel = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onRemarkSave">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        page: 1,
        total: 0,
        tableData: [],
        counter: {all:0, restore:0, reject:0},
        selectedStatus: '0',
        statusOptions: [],
        remarkModel: false,
        remarkData: {id: '0', content: ''},
        loading:false
      }
    },
    computed: {
      
    },
    mounted() {
      this.getStatus();
      this.getList();
    },
    methods: {
      async getStatus() {
        let res = await this.$post("/api/admin/UserWeight/getOptions");
        if (res && res.status === 1) {
          this.statusOptions = res.data.status_options;
          this.counter.all = res.data.counter[0];
          this.counter.restore = res.data.counter[3];
          this.counter.reject = res.data.counter[4];
        }
      },
      async getList() {
        const data = {
          page: this.page,
          status: this.selectedStatus
        };
        let res = await this.$post("/api/admin/UserWeight/getApplyList", data);
        if (res && res.status === 1) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      },
      async pass(row) {
        this.$confirm('确认通过恢复权重？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(async _ => {
          let res = await this.$post("/api/admin/UserWeight/pass", {id: row.id});
          if (res && res.status === 1) {
            this.$message.success('设置成功');
            this.getList();
          }
        });
      },
      async reject(row) {
        this.$prompt('拒绝恢复后付费金额将退回用户余额', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: '请输入拒绝原因'
        }).then(async ({ value }) => {
          let res = await this.$post("/api/admin/UserWeight/reject", {id: row.id, reject_msg:value});
          if (res && res.status === 1) {
            this.$message.success('设置成功');
            this.getList();
          }
        });
      },

      changePagination(val) {
        this.page = val;
        this.getList();
      },

      onRemark(row) {
        this.remarkData.id = row.id;
        this.remarkModel = true;
      },
      onToList(row) {
        let data = {
          obj_id: row.id,
          type: 7
        }
        this.$router.push({path: '/main/remark_list', query: data});
      },
      async onRemarkSave() {
        this.loading = true;
        if (this.remarkData.content === '' || this.remarkData.id === '0') {
          this.$message.error('请输入内容')
          this.loading = false
          return false
        }

        let data = {content: this.remarkData.content, id: this.remarkData.id}
        let res = await this.$post("/api/admin/UserWeight/saveRemark", data);
        if (res && res.status === 1) {
          this.$message.success('备注成功')
          this.remarkModel = false
          this.getList()
        }
        this.loading = false
      },

    }
  };
</script>

<style scoped>
  .status-1 {
    color:#909399;
  }
  .status-2 {
    color:#67C23A;
  }
  .status-3 {
    color:#409EFF;
  }
  .status-4 {
    color:#F56C6C;
  }
</style>