<template>
  <div class="downloadList">
    <div style="display: inline-block;">
      <span>充值订单号：</span>
      <el-input
        style="width: 200px;"
        placeholder="请输入充值订单号"
        v-model="orderNo"
      >
      </el-input>
      <div style="margin:5px;display: inline-block;">
        <span>被充值账号：</span>
        <el-input
          style="width: 200px;"
          placeholder="请输入被充值账号"
          v-model="phone"
        >
        </el-input>
      </div>
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="select"
        >查询
      </el-button>
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="cleans"
        >重置
      </el-button>
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="exportList"
        >导出
      </el-button>
    </div>
    <el-table v-loading="tableDataLoading" :data="duanxinData.list">
      <el-table-column label="编号" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderNo" label="充值订单号" align="center">
      </el-table-column>
      <el-table-column prop="amount" label="充值金额" align="center">
      </el-table-column>
      <el-table-column
        prop="oldMoney"
        label="充值前余额"
        align="center"
      ></el-table-column>
      <el-table-column prop="balance" label="充值后余额" align="center">
      </el-table-column>
      <el-table-column
        prop="userPhone"
        label="被充值账号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="充值时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="account"
        label="充值人"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('recharge:xiugai')"
            @click="remarkClick(scope.row)"
            style="margin: 5px;"
          >
            修改备注
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        :current-page="page"
        layout="total,sizes, prev, pager, next,jumper"
        :total="duanxinData.totalCount"
      >
      </el-pagination>
    </div>
    <!-- 备注修改 -->
    <el-dialog
      custom-class="remark"
      :visible.sync="dialogFormVisible"
      center
      title="修改备注"
    >
      <div class="con">
        <span>备注：</span>
        <el-input
          style="width: 300px;"
          placeholder="请输入备注"
          v-model="remark"
          type="textarea"
          show-word-limit
          :rows="4"
        >
        </el-input>
      </div>
      <div class="btn">
        <el-button type="primary" @click="updataRemark">确定</el-button>
      </div>
    </el-dialog>

    <!-- 导出限制 -->
    <el-dialog
      custom-class="export"
      :visible.sync="exportVisible"
      center
      :title="exportTitle"
      :close-on-click-modal="false"
    >
      <div class="con" v-show="exportFlag == 1">
        <img src="../../assets/img/error.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >当前导出条数超过50000条，暂不支持导出</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：数据中的图片、附件只能以链接的形式导出）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 2">
        <img src="../../assets/img/loading.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出中...</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 3">
        <img src="../../assets/img/success.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出成功</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="btn">
        <el-button type="primary" @click="exportAffirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      limit: 10,
      page: 1,
      activeName: "first",
      tableDataLoading: false,
      dialogFormVisible: false,
      checkBoxData: [], //多选框选择的值

      orderNo: "", // 充值订单号
      phone: "", // 被充值账号

      duanxinData: [],

      id: "",
      remark: "",

      // 导出限制
      exportTitle: "导出错误",
      exportVisible: false,
      exportFlag: 1 //1 超出限制  2导出中
    };
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    // 查询
    select() {
      this.page = 1;
      this.limit = 10;
      this.dataSelect();
    },
    // 重置
    cleans() {
      this.orderNo = "";
      this.phone = "";
      this.page = 1;
      this.dataSelect();
    },
    // 数据列表
    dataSelect() {
      // if (this.endTime == '') {
      // 	  this.endTime = this.info2.stockDate2
      //   }
      //   if (this.startTime == '') {
      // 	  this.startTime = this.info.stockDate
      //   }
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/dataCentre/getRecordList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit,
          orderNo: this.orderNo,
          phone: this.phone
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.tableDataLoading = false;
          let returnData = data.data;
          this.duanxinData = returnData;
          console.log(data.data, "充值记录列表");
        }
      });
    },
    // 修改备注
    remarkClick(row) {
      this.dialogFormVisible = true;
      this.id = row.id;
      this.remark = row.remark;
    },
    updataRemark() {
      this.$http({
        url: this.$http.adornUrl("admin/dataCentre/updateRecordById"),
        method: "get",
        params: this.$http.adornParams({
          id: this.id,
          remark: this.remark
        })
      }).then(({ data }) => {
        console.log(data, "修改备注");
        if (data && data.code === 0) {
          this.$message({
          message: "修改成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dataSelect();
          }
            });
          this.dialogFormVisible = false;
          this.dataSelect();
        }
      });
    },

    exportList() {
      this.exportVisible = true;
      console.log(this.duanxinData.totalCount,'导出条数');

      if (this.duanxinData.totalCount >= 50000) {
        this.exportTitle = "导出错误";
        this.exportFlag = 1;
      } else {
        this.exportTitle = "导出";
        this.exportFlag = 2;
        this.exportVisible = true;
        var userId = this.$cookie.get('userId')
        // rechargeOrder, String acount,String userId
        this.$http({
          url: this.$http.adornUrl("admin/export/excelRecharge"),
          method: "get",
          params: this.$http.adornParams({
            userId:userId,
            rechargeOrder: this.orderNo,
            acount: this.phone,
          })
        }).then(({ data }) => {
          console.log(data, "导出");
          if(data.code==0){
            this.exportTitle = "导出成功";
            this.exportFlag = 3;
          }
        });
      }
    },
    exportAffirm() {
      this.exportVisible = false;
    }
  },
  mounted() {
    this.dataSelect();
  }
};
</script>

<style scoped>
.downloadList >>> .remark {
  width: 400px;
}
.downloadList  >>> .remark .con {
  display: flex;
  margin-bottom: 20px;
}
.downloadList  >>> .remark .btn {
  display: flex;
  flex-direction: row-reverse;
}

/* 导出限制 */
.downloadList  >>> .export {
  width: 500px;
}
.downloadList  >>> .export .con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.downloadList >>> .export img {
  width: 70px;
}
.downloadList >>> .export .btn {
  display: flex;
  flex-direction: row-reverse;
}
</style>
