<template>
    <div class="toPay">
      <!-- 去支付 -->
      <el-row style="margin-left:95px">
        <el-col :span="12">
          <el-row>
            <el-col :span="8">交易细项名称：</el-col>
            <el-col :span="16">{{tradeData.transactionDetailName}}</el-col>
          </el-row>
        </el-col>
        <el-col :span="11">
          <el-row>
            <el-col :span="8">交易申请时间：</el-col>
            <el-col :span="16">{{tradeData.createTime}}</el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row style="margin-left:95px;padding-top: 15px">
        <el-col :span="12">
          <el-row>
            <el-col :span="8">交易成交价：</el-col>
            <el-col :span="16">{{tradeData.dealPrice}}</el-col>
          </el-row>
        </el-col>
        <el-col :span="11">
          <el-row>
            <el-col :span="8">未付金额：</el-col>
            <el-col :span="16">{{tradeData.pendingPayment}}</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <!--        <div style="margin: 11px 30px;color: #1890ff;">交易支付</div>-->
      <el-row style="margin-left:95px; padding-top: 20px">
        <el-col :span="12">
          <el-col :span="6">支付金额：</el-col>
          <el-col :span="8">
            <el-input v-model="payAmount" placeholder="请输入支付金额" style="width: 200px" clearable/><br>
            <el-button type="text" @click="payAll">全额支付</el-button>
          </el-col>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import CommonInfo from "./CommonInfo";
  import { treeselect } from "@/api/system/dept";
  import { selectTransactorByDeptId } from "@/api/system/user";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import moment from "moment";
    export default {
      name: "toPay",
      props:{
        tradeData: {
          type: Object
        }
      },
      components:{
        CommonInfo,
        Treeselect
      },
      data(){
        return{
          payAmount: null,
        }
      },
      created() {
      },
      watch:{
        "tradeDeptId":{
          handler(newValue, oldValue){
            this.getTransactor();
          },
          deep: true,
        },
      },
      methods:{
        payAll(){
          this.payAmount = this.tradeData.pendingPayment;
        },
        checkParam(){
          if (this.payAmount <= 0 || this.payAmount > this.tradeData.pendingPayment) {
            this.$message.error("请输入正确的支付金额！");
            return true;
          }
        },
        submitSuggestion(){
          return {tradeId:this.tradeData.tradeId, tradeStatus:"5", payAmount:this.payAmount};
        }
      }
    }
</script>

<style scoped lang="scss">

  .toPay{
    /*height: 460px;*/
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

  }

</style>
