<template>
  <div class="studentOrder">
    <statistic>
      <statistic-item>
        <span>账户余额</span>
        <span>
          {{ dataInfo.balance | moneyFormat}}
          <i class="el-icon-edit" v-permission="'userCashAccount/updateBalance'" @click="onMoneyOperation('recharge')"></i>
        </span>
      </statistic-item>
      <statistic-item>
        <span>课程余额</span>
        <span>
          {{ dataInfo.courseBalance | moneyFormat}}
          <i class="el-icon-edit" v-permission="'userCashAccount/updateCourseBalance'" @click="onMoneyOperation('account')"></i>
        </span>
      </statistic-item>
      <statistic-item>
        <span>银行卡</span>
        <span>{{ dataInfo.cardNo || '--' }}</span>
      </statistic-item>
      <statistic-item>
        <el-button @click="onCashAccount"
                    v-permission="'userCashAccountDetail/queryPage'"
                    type="primary">交易明细</el-button>
      </statistic-item>
    </statistic>
    <!-- <el-row class="header-items">
      <el-col :span="5">
        <span>账户余额</span>
        <span>
          {{ dataInfo.balance | moneyFormat}}
          <i class="el-icon-edit" v-permission="'userCashAccount/updateBalance'" @click="onMoneyOperation('recharge')"></i>
        </span>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="5">
        <span>课程余额</span>
        <span>
          {{ dataInfo.courseBalance | moneyFormat}}
          <i class="el-icon-edit" v-permission="'userCashAccount/updateCourseBalance'" @click="onMoneyOperation('account')"></i>
        </span>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="5">
        <span>银行卡</span>
        <span>{{ dataInfo.cardNo || '--' }}</span>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button @click="onCashAccount"
                    v-permission="'userCashAccountDetail/queryPage'"
                    type="primary">交易明细</el-button>
      </el-col>
    </el-row> -->
    <!-- <div class="headWrap">
      <div class="left">
        <div class="headItem">
          <p>
            账户余额:
            <span>{{ dataInfo.balance | moneyFormat}}</span>
          </p>
          <el-button type="text"
                     v-permission="'userCashAccount/updateBalance'"
                     @click="onMoneyOperation('recharge')">修改</el-button>
        </div>
        <div class="headItem">
          <p>
            课程余额:
            <span>{{ dataInfo.courseBalance| moneyFormat }}</span>
          </p>

          <el-button v-permission="'userCashAccount/updateCourseBalance'"
                     @click="onMoneyOperation('account')"
                     type="text">修改</el-button>
        </div>
        <div class="headItem">
          <p>
            银行卡:
            <span>{{ dataInfo.cardNo }}</span>
          </p>
        </div>
      </div>
      <el-button @click="onCashAccount"
                 v-permission="'userCashAccountDetail/queryPage'"
                 type="primary">交易明细</el-button>
    </div> -->
    <!-- 搜索类型 -->
    <el-form :inline="true"
             class="searchForm"
             v-model.trim="searchForm">
      <el-form-item>
        <el-date-picker style="width: 400px;"
                        v-model.trim="orderDate"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        @change="searchCourseDate"
                        range-separator="至"
                        start-placeholder="订单开始日期"
                        end-placeholder="订单结束日期"
                        :picker-options="{
        firstDayOfWeek: 1
    }"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model.trim="searchForm.paymentType"
                   filterable
                   clearable
                   @clear="onClear('paymentType')"
                   placeholder="交易类型">
          <el-option v-for="(item, index) in orderStatus"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input type="text"
                  @keyup.enter.native="search"
                  v-model.trim="searchForm.remark"
                  placeholder="订单说明"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search"
                   type="danger">搜索</el-button>
        <el-button @click="onReSet"
                   type="primary">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="tableWrap">
      <el-table :data="tableList"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column label="订单日期"
                         prop="createTime"
                         align="center"
                         width="150px">
          <template slot-scope="scope">{{ scope.row.createTime | dateForMinFormat }}</template>
        </el-table-column>
        <el-table-column label="交易类型"
                         align="center"
                         width="180px">
          <template slot-scope="scope">{{ scope.row.type | orderType }}</template>
        </el-table-column>
        <el-table-column width="180px"
                         align="center"
                         label="应付金额"
                         prop="expectAmount">
          <template slot-scope="scope">
            <div>
              {{ scope.row.expectAmount | moneyFormat }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="180px"
                         align="center"
                         label="余额支付"
                         prop="balancePaymentAmount">
          <template slot-scope="scope">
            <div>
              {{ scope.row.balancePaymentAmount | moneyFormat }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="180px"
                         align="center"
                         label="实际金额"
                         prop="actualAmount">
          <template slot-scope="scope">
            <div>
              {{ scope.row.actualAmount | moneyFormat }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="180px"
                         align="center"
                         label="订单状态"
                         prop="status">
          <template slot-scope="scope">
            <div>{{scope.row.status | payStatus}}</div>
          </template>
        </el-table-column>
        <el-table-column label="订单说明"
                         align="center"
                         prop="memo"></el-table-column>
      </el-table>
      <pagination :total="pageInfo.total"
                  :page.sync="pageInfo.page"
                  :limit.sync="pageInfo.limit"
                  :page-sizes="pageInfo.page_size"
                  @pagination="getList" />
    </div>
    <el-dialog title="交易明细"
               width="850px"
               :visible.sync="cashStatus">
      <el-row>
        <el-col :span="24">
          <el-tabs v-model="activeName"
                   type="border-card">
            <el-tab-pane label="账户余额明细"
                         name="first">
              <el-table :data="cashAccount.gridData">
                <!-- 交易金额，账户可用余额，交易状态，交易类型，操作时间，备注 -->
                <el-table-column align="center"
                                 property="amount"
                                 label="交易金额"></el-table-column>
                <el-table-column align="center"
                                 property="balance"
                                 label="账户可用余额"></el-table-column>
                <el-table-column align="center"
                                 label="交易状态">
                  <template slot-scope="scope">{{ scope.row.status | payStatus }}</template>
                </el-table-column>
                <el-table-column align="center"
                                 label="交易类型">
                  <template slot-scope="scope">{{ scope.row.type | payType }}</template>
                </el-table-column>
                <el-table-column align="center"
                                 width="160px"
                                 property="createTime"
                                 label="交易时间"></el-table-column>
                <el-table-column align="center"
                                 width="140px"
                                 label="备注">
                  <template slot-scope="scope">
                    <span :title="scope.row.comment">{{ scope.row.comment }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <pagination :total="cashAccount.total"
                          :page.sync="cashAccount.page"
                          :limit.sync="cashAccount.limit"
                          :page-sizes="cashAccount.page_size"
                          @pagination="getCashAccount" />
            </el-tab-pane>
            <el-tab-pane label="课程余额明细"
                         name="second">
              <el-table :data="courseAccount.gridData">
                <!-- 交易金额，账户可用余额，交易状态，交易类型，操作时间，备注 -->
                <el-table-column align="center"
                                 property="amount"
                                 label="交易金额"></el-table-column>
                <el-table-column align="center"
                                 property="balance"
                                 label="课程可用余额"></el-table-column>
                <el-table-column align="center"
                                 label="交易状态">
                  <template slot-scope="scope">{{ scope.row.status | payStatus }}</template>
                </el-table-column>
                <el-table-column align="center"
                                 label="交易类型">
                  <template slot-scope="scope">{{ scope.row.type | payType }}</template>
                </el-table-column>
                <el-table-column align="center"
                                 width="160px"
                                 property="createTime"
                                 label="交易时间"></el-table-column>
                <el-table-column align="center"
                                 width="140px"
                                 label="备注">
                  <template slot-scope="scope">
                    <span :title="scope.row.comment">{{ scope.row.comment }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <pagination :total="courseAccount.total"
                          :page.sync="courseAccount.page"
                          :limit.sync="courseAccount.limit"
                          :page-sizes="courseAccount.page_size"
                          @pagination="getCourseAccount" />
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog :title="moneyForm.title"
               width="450px"
               @close="onFormClose('moneyForm')"
               :visible.sync="moneyVisible">
      <el-form ref="moneyForm"
               :rules="moneyRule"
               :model="moneyForm"
               label-width="80px">
        <el-form-item label="操作选择"
                      prop="type">
          <el-radio-group v-model="moneyForm.type">
            <el-radio :label="1">充值</el-radio>
            <el-radio :label="2">扣除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="moneyForm.titleType == 'account' ? '课程余额' : '账户余额'">
          <el-input type="number"
                    disabled
                    :value="moneyForm.titleType == 'account' ? dataInfo.courseBalance : dataInfo.balance"></el-input>
        </el-form-item>
        <el-form-item label="金额"
                      prop="money">
          <el-input type="number"
                    @mousewheel.native.prevent
                    v-model="moneyForm.money"></el-input>
        </el-form-item>
        <el-form-item label="备注"
                      prop="remark">
          <el-input type="textarea"
                    v-model="moneyForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="moneyVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitMoney('moneyForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 充值弹窗 -->
    <!-- <el-dialog
      title="课程余额转账户余额"
      width="400px"
      :visible.sync="rechargeVisible">
      <el-form
        :model="rechargeForm"
        ref="rechargeForm"
        label-position="right"
        label-width="80px;"
        :inline="true"
      >
        <el-form-item label="课程余额" >
          ¥{{ dataInfo.courseBalance}}
        </el-form-item>
        <el-form-item label="本次充值" prop="money">
          <el-input type="number"  @mousewheel.native.prevent v-model.trim="rechargeForm.money"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rechargeVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRecharge">确 定</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {
  studentPaymentOrderList,
  getUserCashAccountBaseInfo,
  updateCourseBalance,
  transferCourseBalanceToBalance,
  userCashAccountDetail,
  userCoursesAccount,
  updateBalance
} from "@/api/studentManager";
import { orderStatus } from "@/utils/searchArray";
import store from "@/store";
let validPrice = (rule, value, callback) => {
  if ((value == "" && typeof value == "string") || value == null) {
    callback(new Error("请输入金额"));
  } else if (value < 0) {
    callback(new Error("输入金额必须大于或等于0"));
  } else if (value >= 100000) {
    callback(new Error("输入金额必须小于100000"));
  } else {
    callback();
  }
};
export default {
  name: "studentOrder",
  components: { pagination },
  data () {
    return {
      rechargeVisible: false,
      organId: null,
      orderDate: null,
      searchForm: {
        studentId: null,
        orderStartDate: null,
        orderEndDate: null,
        paymentType: null,
        remark: null
      },
      orderStatus: orderStatus,
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      tableList: [],
      dataInfo: {},
      amountStatus: true, // 账户余额状态
      rechargeForm: {
        money: null
      },
      moneyVisible: false, //
      moneyForm: {
        title: "账户余额修改",
        titleType: "recharge",
        type: 1, //
        money: null,
        remark: null //备注
      },
      moneyRule: {
        type: [
          { required: true, message: "请选择操作类型", trigger: "change" }
        ],
        money: [{ required: true, validator: validPrice, trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
      },
      cashStatus: false,
      cashAccount: {
        // 点名表
        status: false,
        gridData: [],
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      activeName: "first",
      courseAccount: {
        // 点名表
        status: false,
        gridData: [],
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  mounted () {
    this.searchForm.studentId = this.$route.query.userId;
    this.getList();
    this.__init();
  },
  activated () {
    this.searchForm.studentId = this.$route.query.userId;
    this.getList();
    this.__init();
  },
  methods: {
    onClear (type) {
      if (type == "paymentType") {
        this.searchForm.paymentType = null;
      }
    },
    __init () {
      getUserCashAccountBaseInfo({ userId: this.$route.query.userId }).then(
        res => {
          if (res.code == 200) {
            this.dataInfo = {
              balance: res.data.balance,
              courseBalance: res.data.courseBalance,
              wxBalance: 0,
              cardNo: res.data.cardNo,
              zfb: null
            };
          }
        }
      );
    },
    onFormClose (formName) {
      // 关闭弹窗重置验证
      this.$refs[formName].resetFields();
    },
    onMoneyOperation (type) {
      let moneyForm = this.moneyForm;
      if (type == "recharge") {
        moneyForm.title = "账户余额修改";
        moneyForm.titleType = "recharge";
      } else if (type == "account") {
        moneyForm.title = "课程余额修改";
        moneyForm.titleType = "account";
      }
      this.moneyVisible = true;
    },
    onCashAccount (item) {
      // 点名表
      this.cashAccount.page = 1;
      this.getCashAccount();
      this.courseAccount.page = 1;
      this.getCourseAccount();
      this.cashStatus = true
    },
    getCashAccount () {
      let cashAccount = this.cashAccount;
      let params = {
        page: cashAccount.page,
        rows: cashAccount.limit,
        userId: this.searchForm.studentId
      };
      userCashAccountDetail(params).then(res => {
        let result = res.data;
        cashAccount.status = true;
        if (res.code == 200) {
          cashAccount.gridData = result.rows;
          cashAccount.total = result.total;
        }
      });
    },
    getCourseAccount () {
      let courseAccount = this.courseAccount;
      let params = {
        page: courseAccount.page,
        rows: courseAccount.limit,
        userId: this.searchForm.studentId
      };
      userCoursesAccount(params).then(res => {
        let result = res.data;
        courseAccount.status = true;
        if (res.code == 200) {
          courseAccount.gridData = result.rows;
          courseAccount.total = result.total;
        }
      });
    },
    submitMoney (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let moneyForm = this.moneyForm;
          let dataInfo = this.dataInfo;
          let courseBalance = 0,
            balance = 0;
          if (moneyForm.titleType == "account") {
            // 课程余额
            if (moneyForm.type == 1) {
              courseBalance = Number(
                (
                  Number(moneyForm.money) + Number(dataInfo.courseBalance)
                ).toFixed(2)
              );
            } else if (moneyForm.type == 2) {
              if (dataInfo.courseBalance - moneyForm.money < 0) {
                this.$message.error(
                  "扣除金额不能大于" + dataInfo.courseBalance
                );
                return;
              } else {
                courseBalance = Number(
                  Number(dataInfo.courseBalance) -
                  Number(moneyForm.money).toFixed(2)
                );
              }
            }
            updateCourseBalance({
              userId: this.searchForm.studentId,
              decimal: courseBalance,
              memo: moneyForm.remark
            }).then(res => {
              let result = res.data;
              if (res.code == 200) {
                this.$message.success("保存成功");
                this.__init();
                this.moneyVisible = false;
              } else {
                this.$message.error(res.msg);
              }
            });
          } else if (moneyForm.titleType == "recharge") {
            // 账户余额
            if (moneyForm.type == 1) {
              balance = moneyForm.money;
            } else if (moneyForm.type == 2) {
              if (dataInfo.balance - moneyForm.money < 0) {
                this.$message.error("扣除金额不能大于" + dataInfo.balance);
                return;
              } else {
                balance = -moneyForm.money;
              }
            }
            // console.log(balance)
            // return
            updateBalance({
              userId: this.searchForm.studentId,
              decimal: balance,
              memo: moneyForm.remark
            }).then(res => {
              let result = res.data;
              if (res.code == 200) {
                this.$message.success("保存成功");
                this.__init();
                this.moneyVisible = false;
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    onUpdateCourse () {
      if (!this.dataInfo.courseBalance) {
        this.$message.error("请输入课程余额");
        return;
      }
      this.$confirm(`确定是否修改该学生课程余额?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          updateCourseBalance({
            userId: this.searchForm.studentId,
            decimal: this.dataInfo.courseBalance
          }).then(res => {
            let result = res.data;
            if (res.code == 200) {
              this.$message.success("保存成功");
              this.amountStatus = true;
              this.__init();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.amountStatus = true;
        });
    },
    search () {
      this.pageInfo.page = 1;
      this.getList();
    },
    getList () {
      let params = this.searchForm;
      params.rows = this.pageInfo.limit;
      params.page = this.pageInfo.page;
      if (params.remark == "" || !params.remark) {
        params.remark = null;
      }
      studentPaymentOrderList(params).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
    },
    searchCourseDate (value) {
      if (value) {
        this.searchForm.orderStartDate = value[0];
        this.searchForm.orderEndDate = value[1];
      } else {
        this.searchForm.orderStartDate = null;
        this.searchForm.orderEndDate = null;
      }
    },
    onReSet () {
      // 重置搜索
      this.orderDate = null;
      this.searchForm = {
        studentId: this.$route.query.userId,
        orderStartDate: null,
        orderEndDate: null,
        paymentType: null,
        remark: null
      };
    },
    submitRecharge () {
      let money = parseFloat(
        this.dataInfo.courseBalance - this.rechargeForm.money
      ).toFixed(2);
      // if(this.rechargeForm)
      if (money < 0) {
        this.$message.error("余额不足");
        return;
      }
      if (!this.rechargeForm.money) {
        this.$message.error("请输入金额");
        return;
      }
      transferCourseBalanceToBalance({
        userId: this.searchForm.studentId,
        money: this.rechargeForm.money
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("充值成功");
          this.rechargeVisible = false;
          this.__init();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.headWrap .left .headItem {
  position: relative;
  /deep/.el-button {
    position: absolute;
    top: -3px;
    right: 20px;
  }
}
.header-items{
  padding: 20px 0;
  text-align: center;
  /deep/ .el-icon-edit{
    cursor: pointer;
    color: #14928A;
    font-size: 20px;
  }
  /deep/ .el-col {
    display: flex;
    align-items: center;
    min-height: 60px;
    align-items: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  /deep/ .el-col-1{
    font-size: 60px;
  }
  span{
    display: block;
    line-height: 1.8;
    color: rgba(0, 0, 0, .85);
    font-size: 24px;
    &:first-child{
      font-size: 14px;
      font-weight: normal;
      color: rgba(0, 0, 0, .45);
    }
  }
}
/deep/.el-table .cell {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

// .studentOrder {
// }
</style>
