<template>
  <div id="refund" class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-button type="primary" @click="showMachRefund">批量退款</el-button>
    <el-table
      ref="listTable"
      border
      stripe
      :header-cell-style="{ background: '#eef1f9' }"
      class="table"
      :data="list"
      @selection-change="refundMulSelect"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column prop="order_num" label="订单号" />
      <el-table-column prop="get_user" label="代理昵称">
        <template slot-scope="{ row: { get_user } }">{{ get_user.nickname }}</template>
      </el-table-column>
      <el-table-column
        prop="get_user"
        label="代理手机号"
      >
        <template slot-scope="{ row: { get_user } }">{{ get_user.mobile }}</template>
      </el-table-column>
      <el-table-column
        prop="wait_back_money"
        label="待退款金额"
      />
      <el-table-column
        label="操作"
        align="center"
      >
        <el-button slot-scope="{ row }" type="primary" size="small" @click="submitRefund(row)">退款</el-button>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination :total="tableTotal" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
    <!-- 备注 -->
    <el-dialog
      title="退款备注"
      :visible.sync="dialog_remark"
      :show-close="false"
      :close-on-click-modal="false"
      width="520px"
      class="dialog_remark"
    >
      <el-input v-model="remark" type="textarea" class="textarea_h" maxlength="250" show-word-limit />
      <div class="dialog_btn_box">
        <el-button @click="resetMulSeclect">取消</el-button>
        <el-button type="primary" @click="submitRefund">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// api
import { getList, refundMoney } from '@/api/finance/refund'
export default {
  data() {
    return {
      loadingFull: false,
      listQuery: {
        page_index: 1,
        page_size: 10
      },
      list: [],
      tableTotal: 0,
      mulSelection: [],
      dialog_remark: false,
      remark: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loadingFull = true
      await getList(this.listQuery).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.list = res.data.list
          this.tableTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    // 多选
    refundMulSelect(val) {
      const arr = []
      val.map(i => {
        arr.push(i.id)
      })
      this.mulSelection = arr
    },
    showMachRefund() {
      if (this.mulSelection.length < 1) {
        this.$message.error('请先选择退款订单')
        return false
      }
      this.dialog_remark = true
    },
    showOneRefund(row) {
      this.mulSelection = [row.id]
      this.dialog_remark = true
    },
    submitRefund(row) {
      // if (this.mulSelection.length < 1) {
      //   this.$message.error('请先选择退款订单')
      //   return false
      // }
      // if (!this.remark) {
      //   this.$message.error('请填写退款备注')
      //   return false
      // }
      this.loadingFull = true
      refundMoney({
        // data: this.mulSelection,
        // remark: this.remark
        data: [row.id]
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.resetMulSeclect()
          this.getList()
          this.$message.success(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    resetMulSeclect() {
      this.remark = ''
      this.mulSelection = []
      this.dialog_remark = false
    }
  }
}
</script>
<style lang="scss">
  #refund {
    .table{
      margin: 20px 0;
    }
    .dialog_remark {
      .textarea_h {
        height: 190px;
        margin-bottom: 30px;

        .el-textarea__inner {
          height: 100% !important;
          resize: none;
        }
      }

      .dialog_btn_box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
</style>
