<style lang="scss" scoped>
@import '@/static/scss/global.scss';
.discount {
  margin: 0 auto;
  padding: 40rpx;
  border-radius: 20rpx 20rpx;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .color-p {
    color: rgb(142, 210, 71);
  }
  .d-list {
    margin-top: 50rpx;
    width: 100%;
    &-item {
      // width: 650rpx;
      background-color: rgba(142, 210, 71, 0.8);
      border-radius: 20rpx;
      padding: 30rpx;
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      color: #ffffff;
      font-size: 28rpx;
      .left {
        display: flex;
        align-items: flex-end;
        margin-right: 20rpx;
        .tip {
          margin-bottom: 10rpx;
          margin-right: 6rpx;
          display: inline-block;
        }
      }
      .btn {
        margin-right: 10rpx;
        font-size: 34rpx;
      }
    }
  }
  .close {
    width: 270rpx;
    margin-top: 50rpx;
    border-radius: 50rpx;
    background-color: rgb(142, 210, 71);
  }
}
.balance_wrapper {
  padding: 20rpx 30rpx;
  color: #fff;
  .balance_wrapper_bg {
    padding: 40rpx 40rpx;
    // flex-direction: column;
    justify-content: space-around;
    border-radius: 20rpx;
    background-color: rgb(233, 187, 133);
    font-size: 36rpx;
    .balance_wrapper_bg_item {
      text-align: center;
      margin: 0 30rpx;
      .balance_text {
        font-size: 50rpx;
        font-weight: bold;
        text {
          font-size: 32rpx;
          font-weight: normal;
          margin-right: 10rpx;
        }
      }
    }
    .balance_wrapper_bg_item_dj {
      color: grey;
    }
  }
  .nav_box {
    justify-content: space-around;
    .box {
      flex: 1;
      font-size: 26rpx;
      image {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }
      padding: 20rpx 60rpx;
      border-radius: 10rpx;
      background: linear-gradient(90deg, rgb(255, 150, 100), rgb(255, 106, 89));
    }
    .right {
      margin-left: 30rpx;
      background: linear-gradient(90deg, rgb(60, 152, 250), rgb(130, 120, 220));
    }
  }
}
.navigate_wrapper {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0rpx;
  box-sizing: border-box;
  padding-bottom: 0;
  .uni-noticebar {
    width: 94%;
    margin: 20rpx auto;
    ::v-deep .uni-noticebar__content-text {
      font-size: 30rpx !important;
    }
  }
  .navigate_item {
    margin-bottom: 60rpx;
    width: 49%;
    .icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 40rpx;
      margin-left: 80rpx;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .navigate_item:nth-child(2n - 1) {
    border-right: 1rpx solid #e6e6e6;
  }
  .navigate_item:nth-last-child(1) {
    border-right: none;
  }
  // .border_r {
  // 	border-right: 1rpx solid #e6e6e6;
  // }
}
.button {
  color: #ffffff;
}
::v-deep.u-form-item {
  .u-form-item__body__left {
    width: 160rpx !important;
  }
}
</style>
<template>
  <view>
    <u-navbar
      v-if="!embedded"
      @rightClick="handlerRight"
      :autoBack="true"
      :placeholder="true"
      title="账户余额"
      leftIconColor="#fff"
      bgColor="#4BB22E"
      :titleStyle="titleStyle"
    >
      <view slot="right" class="button"> 资产明细 </view>
    </u-navbar>
    <view class="balance_wrapper bg-w">
      <view class="balance_wrapper_bg flex3">
        <view class="balance_wrapper_bg_item">
          平台赠送
          <u-gap height="30rpx"></u-gap>
          <view class="flex1">
            <view class="balance_text">  {{ platformInfo.count }}</view><text>份</text><text>(</text>  {{ platformInfo.plants }}<text>)棵</text>
          </view>
        </view>
      </view>
      <u-gap height="30rpx"></u-gap>
      <view class="balance_wrapper_bg flex3">
        <!-- <view class="balance_wrapper_bg_item">
          平台赠送
          <u-gap height="30rpx"></u-gap>
          <view class="flex1">
            <view class="balance_text">  {{ platformInfo.count }}</view><text>份</text><text>(</text>  {{ platformInfo.plants }}<text>)棵</text>
          </view>
        </view> -->
        <view class="balance_wrapper_bg_item">
          槟榔券
          <u-gap height="30rpx"></u-gap>
          <view class="balance_text"> <text>¥</text> {{ balance }} </view>
        </view>
        <view v-if="false" class="balance_wrapper_bg_item balance_wrapper_bg_item_dj">
          冻结
          <u-gap height="30rpx"></u-gap>
          <view class="balance_text">
            {{ freeze_asset_account }}
          </view>
        </view>
      </view>
      <u-gap height="30rpx"></u-gap>

      <view class="balance_wrapper_bg flex3">
        <view class="balance_wrapper_bg_item">
          槟榔兑付
          <u-gap height="30rpx"></u-gap>
          <view class="balance_text"> <text>¥</text> {{ bldiduihuan }} </view>
        </view>
        <view v-if="false" class="balance_wrapper_bg_item balance_wrapper_bg_item_dj">
          冻结
          <u-gap height="30rpx"></u-gap>
          <view class="balance_text">
            {{ freeze_duifuAsset }}
          </view>
        </view>
      </view>
      <u-gap height="30rpx"></u-gap>

      <view class="nav_box flex2" v-if="false">
        <view
          class="box flex3"
          @click="
            handlerNavigate({ path: '/pages/licai/mine/account/bindBank' })
          "
        >
          <image src="../../../../static/ic_bank.png" mode=""></image>绑定银行卡
        </view>
        <view
          class="box right flex3"
          @click="
            handlerNavigate({ path: '/pages/licai/mine/account/withDraw' })
          "
        >
          <image src="../../../../static/ic_widthdraw.png" mode=""></image
          >领取补贴
        </view>
      </view>
    </view>
    <view class="navigate_wrapper flex1 bg-w">
      <uni-notice-bar
        v-if="false"
        single
        color="#FFFFFF"
        background-color="#0BBE3C"
        text="领取补贴税费6%，转换槟榔券税费0%"
      />
      <view
        @click="handlerNavigate(item)"
        class="navigate_item flex2"
        v-for="(item, index) in navList"
        :key="index"
      >
        <view class="icon flex3" :style="{ backgroundColor: item.bgColor }">
          <image :src="item.icon" mode=""></image>
        </view>
        {{ item.name }}
      </view>
    </view>

    <view class="navigate_wrapper flex1 bg-w">
      <uni-notice-bar
        single
        color="#FFFFFF"
        background-color="#0BBE3C"
        text="新资产余额1:1兑换"
      />
      <view
        @click="cashNewAsset(item)"
        class="navigate_item flex2"
        v-for="(item, index) in cashList"
        :key="index"
      >
        <view class="icon flex3" :style="{ backgroundColor: item.bgColor }">
          <image :src="item.icon" mode=""></image>
        </view>
        {{ item.name }}
      </view>
    </view>
    <uni-popup ref="openPopup" type="center">
      <view class="discount">
        <text class="font32 color-p">兑付转换</text>
        <view class="d-list">
          <view class="d-list-item">
            <text class="font28">槟榔兑付：</text>
            <text>￥{{ bldiduihuan }}</text>
          </view>
          <u-form-item label="转换金额" prop="convertMoney" borderBottom>
            <u--input
              v-model="convertMoney"
              type="number"
              placeholder="请输入装换金额"
              border="none"
            ></u--input>
          </u-form-item>
        </view>
        <view class="footer flex flex-space-around">
          <button type="primary" class="close" @click="closePopup">关闭</button>
          <button
            type="primary"
            class="close"
            style="margin-left: 20rpx"
            @click="cashConvert"
          >
            确认转换
          </button>
        </view>
      </view>
    </uni-popup>
    <!-- 输入框示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        type="error"
        cancelText="取消"
        confirmText="确认"
        title="系统提示"
        :content="alertMsg"
        @confirm="cashAll"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {
  getBankList,
  widthDraw,
  getUserBalance,
  assetCashConvert,
  myGivePerformance
} from '@/api/system/user.js'
import { oldAssetCaseBalance } from '@/api/system/api.js'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
  components: { uniPopup },
  data () {
    return {
      //槟榔券，购买券，槟榔兑付资产，辣椒土地资产
      cashList: [
        {
          name: '槟榔券',
          assetType: '5',
          icon: require('@/static/ic_change.png'),
          bgColor: 'rgb(11, 190, 60)'
        },

        {
          name: '槟榔兑付',
          assetType: '6',
          icon: require('@/static/ic_change.png'),
          bgColor: 'rgb(11, 190, 60)'
        }
      ],

      navList: [
        {
          name: '银行卡',
          path: '/pages/licai/mine/account/bankList',
          icon: require('@/static/ic_bank.png'),
          bgColor: 'rgb(16, 160, 244)'
        },
        {
          name: '充值记录',
          path: '/pages/licai/mine/recharge/recored',
          icon: require('@/static/ic_recharge_record.png'),
          bgColor: 'rgb(11, 190, 160)'
        },
        {
          name: '槟榔券转账',
          path: '/pages/licai/mine/account/change?asstype=5',
          icon: require('@/static/ic_change.png'),
          bgColor: 'rgb(11, 190, 60)'
        },
        {
          name: '兑付转账',
          path: '/pages/licai/mine/account/change?asstype=6',
          icon: require('@/static/ic_change.png'),
          bgColor: 'rgb(11, 190, 60)'
        },
        // {
        //   name: "兑付转账",
        //   path: "/pages/licai/mine/account/change?asstype=4",
        //   icon: require("@/static/ic_change.png"),
        //   bgColor: "rgb(11, 190, 60)",
        // },
        // { name: '账单', path: '/pages/licai/mine/account/record', icon: require('@/static/ic_record.png'), bgColor: 'rgb(250, 90, 120)'},
        {
          name: '兑付明细',
          path: '/pages/licai/mine/account/bldfList',
          icon: require('@/static/ic_reward.png'),
          bgColor: 'rgb(250, 190, 20)'
        },
        {
          name: '兑付转换',
          path: '',
          icon: require('@/static/reaching.png'),
          bgColor: 'rgb(11, 190, 60)'
        }
      ],
      balance: 0,
      bldiduihuan: 0,
      freeze_asset_account: 0, //购买券冻结
      freeze_duifuAsset: 0, //槟榔兑付冻结
      titleStyle: {
        color: '#fff'
      },
      convertMoney: '',
      cashAssetType: '',
      alertMsg: '',
      platformInfo: {
        count: 0,
        plants: 0,
      },
    }
  },
  props: {
    embedded: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    if (this.embedded) {
      this.getUserBalance()
      this.getPlatformInfo()
    }
  },
  onShow () {
    if (!this.embedded) {
      this.getUserBalance()
      this.getPlatformInfo()
    }
  },
  methods: {
    // 土地兑付确认
    async cashConvert () {
      let res = await assetCashConvert({
        convertType: 2,
        convertMoney: this.convertMoney
      })
      if (res.code == 200) {
        this.$toast('兑付成功')
        this.getUserBalance()
        this.convertMoney = ''
        this.$refs.openPopup.close()
      }
    },
    async cashAll () {
      await oldAssetCaseBalance(this.cashAssetType)
      this.$toast('兑付成功')
      this.getUserBalance()
    },
    cashNewAsset (item) {
      this.cashAssetType = item.assetType
      this.alertMsg = '确认将【' + item.name + '】全部兑换为消费余额'
      this.$refs.alertDialog.open()
    },
    handlerRight () {
      uni.navigateTo({
        url: '/pages/licai/mine/account/couponList'
      })
    },
    handlerNavigate (item) {
      // if (item.path === '/pages/licai/mine/account/withDraw') {
      //   return this.$toast("暂未开启");
      // }
      if (item.path) {
        uni.navigateTo({
          url: item.path
        })
      } else {
        this.$refs.openPopup.open()
      }
    },
    closePopup () {
      this.$refs.openPopup.close()
    },
    async getUserBalance () {
      let res = await getUserBalance()
      if (res.code == 200) {
        this.balance = res.data.bl_money
        this.bldiduihuan = res.data.bl_df_money
        this.freeze_asset_account = res.data.freeze_bl_money //购买券冻结
        this.freeze_duifuAsset = res.data.freeze_bl_df_money //槟榔兑付冻结
        console.log('res', res)
      }
    },
    async getPlatformInfo() {
      let res = await myGivePerformance({
        type: 2,
        investmentType: 2
      });
      if (res.code == 200) this.platformInfo = res.data;
    },
  }
}
</script>
