<script setup>
import {uuid} from "@/utils/index.js"
const { proxy } = getCurrentInstance();
// 完成状态
const finish = ref(1);
// 验证
const dialogVisible = ref(false);
// 解密
const tableData = reactive([
  {
    node:'企业',
    redpackageAddress:'',
    balance:'/',
    deposit:'10000',
    name:""
  },
  {
    node:'消费者',
    redpackageAddress: "",
    balance: "",
    deposit: "5000",
    name:""
  },
  {
    node:'商业银行',
    redpackageAddress: "48C8E181-DEC9-5438-9BC6-404D23A62922",
    balance: "1000000000",
    deposit: "10000000000",
  },
  {
    node:'中央银行',
    redpackageAddress: "0A99D0E3-ECC5-FA84-F1D2-F445CE7B3BE5",
    balance: "100000000",
    deposit: "100000000",
  },
]);
const tablist =reactive([
  {
    name:'构建交易节点',
    id:1
  },
  {
    name:'设置合约代码',
    id:2
  },
  {
    name:'触发交易条件',
    id:3
  },
  {
    name:'自动完成交易',
    id:4
  }
]);
// 商品form变量
const form = ref({
  name: "",
  price: "",
});
// 触发交易条件变量
const conditionForm=reactive({
  name:'',
  price:'',
  number:'',
  money:''

})
const fileInput=ref(null)
const tabsid=ref(1)
// 演练切换函数
const go = (idx) => {
  if(idx==4){
    document.getElementsByClassName('machine')[0].style.display='block'
  }else{
    document.getElementsByClassName('machine')[0].style.display='none'
  }
  tabsid.value = idx;
 
}
// 创建钱包
const createWallet = (val,money) => {
  // if()
  console.log(val,"val");
  tableData.forEach(item=>{
    if(item.node==val){
      //生成uuid
      if(item.name == ''){
        proxy.$modal.msgError('请先创建节点')
        return
      }
     const uuids=uuid()
      item.redpackageAddress=uuids
      item.balance='0'
    }
  })
};
// 充值
const recharge = (money) => {
  // 商品名称和单价不等于空

  tableData.forEach(item=>{
    if(item.node=='消费者'){
      if(item.redpackageAddress == ''){
        proxy.$modal.msgError('请先创建钱包')
        return
      }
      item.balance=item.deposit
      item.deposit='0'
      finish.value++
    }
  })
  // 
};
// 企业设置上架商品
const setGoods = () => {
  if(form.value.name==''||form.value.price==''){
    proxy.$modal.msgError('商品名称和单价不能为空')
    return
  }
  conditionForm.name=form.value.name
  conditionForm.price=form.value.price
  proxy.$modal.msgSuccess('合约上链成功')
  finish.value++
};
// 支付计算
const pay = () => {
// 拿到购买数量和单价
const number=conditionForm.number
const price=conditionForm.price
// 计算总价
const money=number*price
console.log(money,"money")
// 拿到消费者余额
const balance=tableData[1].balance
// 拿到支付金额
const payMoney=+conditionForm.money
console.log(payMoney,"payMoney")
// 支付金额必须全等于总价
if(payMoney==money){
  proxy.$modal.msgSuccess('支付成功')
  finish.value++
  // 支付成功后消费者余额减去支付金额
  tableData[1].balance=balance-payMoney
  // 企业余额加上支付金额
  tableData[0].balance=+tableData[0].balance+payMoney
}else{
  proxy.$modal.msgError('支付失败')
}
}
//创建节点
const createNode=(val)=>{
if(val=='消费者'){
  console.log(val,"val");
// 获取class为item4
const item4=document.getElementsByClassName('item4')[0]
  // 添加id名
  item4.setAttribute('id','item4')
  tableData[1].name='消费者'
}else{
  // 获取class为item3
const item3=document.getElementsByClassName('item3')[0]
item3.setAttribute('id','item3')
tableData[0].name='企业'
console.log(tableData,"tableData");
}
}
</script>
<template>
 <div class="app-contract">
      <el-row>
        <el-col :span="24">
          <img src="../../../assets/images/29.png" alt="" />
          <span>智能合约演练</span>
        </el-col>
      </el-row>
    <div class="contract-content">
         <div class="manoeuvre">
            <div class="manoeuvre_item" v-for="(item,index) in tablist" :key="item" @click="go(index+1)"  :class="{'manoeuvre_item_complete':index<finish}">
                <span>{{ item.name }}</span>
                <img src="../../../assets//images/企业用户-切图/智能合约演练/向右.png" alt="">
            </div>
         </div>
          <div class="manoeuvre-conter">
            <div class="manoeuvre_conter_item" v-show="tabsid==1">
                <p class="reseda">以自动售卖机为例，交易涉及四方：消费者、企业、中央银行</p>
         <div class="step">
           <div class="stop_title">第一步</div>
           <span>构建网络交易点，企业和消费者加入中央银行和商业银行构建的合约代码平台，创建钱包，并充值</span>
         </div>
         <div class="el-tab el-tab1" style="width: 70%;margin-top: 20px;">
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe
        >
          <el-table-column align="center" prop="node" label="节点" >
          </el-table-column>
          <el-table-column align="center" prop="redpackageAddress" label="钱包地址" >
          </el-table-column>
          <el-table-column align="center" prop="balance" label="数字货币账户余额" >
          </el-table-column>
          <el-table-column align="center" prop="deposit" label="人民币存款" >
          </el-table-column>
          <el-table-column align="center" prop="name" label="操作" >
            <template #default="scope" >
              <el-button link  v-if="scope.row.node =='消费者'||scope.row.node =='企业'"  @click="createNode(scope.row.node)">创建节点</el-button>
              <el-button link  v-if="scope.row.node =='消费者'||scope.row.node =='企业'" @click="createWallet(scope.row.node)">创建钱包</el-button>
              <el-button link  v-if="scope.row.node =='消费者'" @click="recharge(scope.row,)"  v-preReClick>充值</el-button>
              <span v-if="scope.row.node =='商业银行'||scope.row.node =='中央银行'">/</span>
            </template>
          </el-table-column>
      
         
   
        </el-table>
      </div> 
            </div>
            <div class="manoeuvre_conter_item" v-show="tabsid==2">
                <p class="reseda">以自动售卖机为例，交易涉及四方：消费者、企业、中央银行</p>
         <div class="step">
           <div class="stop_title">第二步</div>
           <span>企业上架商品，设置合约代码、合约触发条件</span>
         </div>
           <div class="item-form" style="width: 40%;margin-top: 30px;">
            <el-form  label-width="120px">
            <el-form-item label="商品名称：">
              <el-input placeholder="请输入商品名称" v-model="form.name"></el-input>
             </el-form-item>
             <el-form-item label="单价：">
              <el-input  placeholder="请输入商品单价" v-model="form.price"></el-input>
              <span style="margin-left: 20px;" >e--cny</span>
             </el-form-item>
             <el-form-item>
             <el-button type="primary" @click="setGoods">合约上链</el-button>
             </el-form-item>
            </el-form>
            </div>
            </div>
            <div class="manoeuvre_conter_item" v-show="tabsid==3">
                <p class="reseda">以自动售卖机为例，交易涉及四方：消费者、企业、中央银行</p>
         <div class="step">
           <div class="stop_title">第二步</div>
           <span>企业上架商品，设置合约代码、合约触发条件</span>
         </div>
           <div class="item-form" style="width: 40%;margin-top: 30px;">
            <el-form label-width="120px">
             <el-form-item label="商品名称:">
              <el-input placeholder="请输入商品名称" v-model="conditionForm.name"></el-input>
             </el-form-item>
             <el-form-item label="单价：">
              <el-input placeholder="请输入商品名称" v-model="conditionForm.price"></el-input>
             </el-form-item>
            <el-form-item label="购买数量：">
              <el-input placeholder="请输入购买数量" v-model="conditionForm.number"></el-input>
             </el-form-item>
             <el-form-item label="支付金额：">
              <el-input  placeholder="请输入支付金额" v-model="conditionForm.money"></el-input>
              <span style="margin-left: 20px;">e--cny</span>
             </el-form-item>
             <el-form-item>
             <el-button type="primary" @click="pay">支付</el-button>
             </el-form-item>
            </el-form>
            </div>
            </div>
            <div class="manoeuvre_conter_item" v-show="tabsid==4">
                <p class="reseda">以自动售卖机为例，交易涉及四方：消费者、企业、中央银行</p>
         <div class="step">
           <div class="stop_title">第四步</div>
           <span>资金完成从消费者到企业的转账，售货机开门掉出商品</span>
         </div>
         <div class="el-tab el-tab1" style="width: 50%;margin-top: 20px;">
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe>
          <el-table-column align="center" prop="node" label="节点" >
          </el-table-column>
          <el-table-column align="center" prop="redpackageAddress" label="钱包地址" >
          </el-table-column>
          <el-table-column align="center" prop="balance" label="数字货币账户余额" >
          </el-table-column>
          <el-table-column align="center" prop="deposit" label="人民币存款" >
          </el-table-column>
        </el-table>
       </div> 
            </div>
          </div>
    </div>
   <div style="display:flex;">
    <div class="contract-footer">
      <div class="footer-item">
      </div>
        <div class="item1 item"></div>
        <div class="item2 item"></div>
        <div class="item3 item"></div>
        <div class="item4 item"></div>
    </div>
    <div class="machine">
      <div  :class="{'machine_item':finish==4}"></div>
    </div>
   </div>
 </div>
</template>
<style lang='scss'  scoped>
:deep(.el-button.is-link){
  color: #00F0FF;
}
 :deep(.el-button--primary){
            width: 202px;
            height: 42px;
            border: 2px solid #25F4F9;
            background: linear-gradient(0deg, #0654B5 0%, #003155 50%, #2CD1E4 100%);
            box-shadow: 0px 5px 6px 0px rgba(0,48,255,0.77);
            border-radius: 8px;
        }
     .grabble{
        display: flex;
        height: 38px;
        label{
            width: 132px;
            text-align: center;
            line-height: 38px;
            margin-left: 54px;
            font-size: 14px;
        }
       :deep(.el-input__wrapper){
            background-color: transparent !important;
            width: 275px;
            height: 41px;
            background:url('../../../assets/images/企业用户-切图/钱包管理/筛选框.png') no-repeat !important;
            background-size: 100% 100% !important;
            box-shadow: none !important;
            // 输入框光标改变颜色
            caret-color: #ffffff;
        }
        // 按钮
      
      }
    .el-col-24 {
      height: 69px;
      padding: 15px 13px;
      display: flex;
      align-items: center;
      span {
        padding-left: 15px;
        font-weight: bold;
        font-size: 14px;
      }
    }
    .el-tab {
      padding: 0 13px;
    }
    .el-tab1 {
      border: 1px solid #1854a6;
      padding: 6px;
      --el-table-row-hover-bg-color: transparent;
      :deep(.el-table .el-table__header-wrapper th) {
        background-color: #06B675  !important;
        color: #ffffff !important;
        font-weight: 600;
      }
      
    }      
    .svg-icon{
    margin-right: 6px;
    }
    .app-contract{
        .contract-content{
        padding: 0px 20px;
        .manoeuvre{
            width: calc(100% - 45%);
            // background-color: pink;
            display: flex;
            padding: 0px 10px;
            border-bottom: 1px solid #06B675;
            .manoeuvre_item{
                position: relative;
                width: 178px;
                height: 40px;
                background: linear-gradient(0deg, #6F6F8D 0%, #D2D6E5 100%);
                border-radius: 10px 10px 0px 0px;
                display: flex;
                justify-content: center;
                align-content: center;
                margin-right: 44px;
                // 鼠标小手
                cursor: pointer;
                span{
                line-height:40px;
                font-size: 14px;
             }
            }
           
            img{
                position: absolute;
                top: 15px;
                right: -35px;
             }
        }
        .manoeuvre_conter_item{
            :deep(.item-form){
                // background-color: ;
                .el-form-item__label{
                    color: #ffffff;
                }
                .el-input--default{
                    width: 403px;
                    height: 46px;
                    background: #2B539C;
                    border: 1px solid #265AB9;
                    color: #ffffff;
                }
                .el-input__wrapper{
                      box-shadow: none;
                    // background-color: pink;
                    background: url('../../../assets/images/企业用户-切图/智能合约演练/输入框.png') no-repeat !important;
                    background-size: 100% 100% !important;
                    // 输入框光标改变颜色
                    caret-color: #ffffff;
                    // 输入框内提示文字颜色
                }
            }
        }
       }
       .reseda{
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #2FDD93;
       }
       .step{
        width: calc(100% - 55%);
        height: 32px;
        border: 1px solid #2FDD93;
        border-radius: 16px;
        display: flex;
        align-items: center;
        padding: 0px 5px;
        .stop_title{
          width: 70px;
          height: 23px;
          background: #06B675;
          border-radius: 12px;
          line-height: 23px;
          text-align: center;
          font-size: 12px;
        }
        span{
            font-size: 12px;
            font-family: Source Han Sans CN;
            padding-left: 22px;
        }
       }
    }
  .contract-footer{
    position: relative;
    width: calc(100% - 35%);
    height: 458px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:url('../../../assets/images/框.png') no-repeat !important;
    background-size: 100% 100% !important;
    margin-left: 32px;
    .footer-item{
    width:687.9px;
    height:260px;
    
    background:url('../../../assets/images/图（无按钮）.png') no-repeat !important;
    background-size: 100% 100% !important;
    }
    .item{
      position: absolute;
      width: 112px;
      height: 71px;
    }
    .item1{     
      top: 225px;
      left: 138px;
      background:url('../../../assets/images/1-中央银行.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item2{
      top: 225px;
      left: 828px;
      background:url('../../../assets/images/4-商业银行.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item3{
      display: none;
      top: 316px;
      left: 363px;
      background:url('../../../assets/images/3-企业.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item4{
      display: none;
      top: 316px;
      left: 605px;
      background:url('../../../assets/images/2-消费者.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    #item4{
      display: block;
      animation: item4 1s;
    }
    @keyframes item4{
    //  慢慢的动画显示出来
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
    #item3{
      display: block;
      animation: item4 1s;
    }
    @keyframes item3{
    //  慢慢的动画显示出来
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
  }
  .machine{
    position: absolute;
    top:200px;
    right: 86px;
    width: 497px;
    height: 738px;
    background:url('../../../assets/images/售卖机（未打开）.png') no-repeat !important;
    background-size: 100% 100% !important;
    display:none;
    .machine_item{
      position: absolute;
      top: 29%;
      left: 37%;
      width: 150px;
      height: 112px;
      // commodity
      background:url('../../../assets/images/commodity.png') no-repeat !important;
    background-size: 100% 100% !important;
    // 图片旋转
    animation: machine_item 1s;


    }
    @keyframes machine_item{
    //  慢慢的动画显示出来
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }
  //有一个从上往下掉落的动画

  }
  
 :deep(.el-input__inner){
    color: #ffffff !important;
  }
  .manoeuvre_item_complete{
    width: 178px;
    height: 40px;
    background: linear-gradient(0deg, #007D61 0%, #00E07E 100%) !important ;
    border-radius: 10px 10px 0px 0px;
  }
</style>