<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="false">
    <view class="div container">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="店铺资金" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div header">
            <view class="p">可用余额</view>
            <view><text class="h2">{{store_info.store_avaliable_money}}</text></view>
            <view><text class="h5">冻结金额：{{store_info.store_freeze_money}}</text></view>
        </view>
        <view class="div main-content">
            <view class="div"  @click="goSellerMoneyLogList">
                <flex-line :is-link="true" :show-border="true"><text class="span line-name">资金明细</text></flex-line>
            </view>
            <view class="div"  @click="goSellerMoneyWithdrawList">
                <flex-line :is-link="true" :show-border="true"><text class="span line-name">提现列表</text></flex-line>
            </view>
            <view class="div" @click="goSellerMoneyWithdrawForm">
                <flex-line :is-link="true" :show-border="true"><text class="span line-name">申请提现</text></flex-line>
            </view>
        </view>
    </view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import SellerBase from '../SellerBase'

import { getSellerInfo } from '../../../api/seller'
import { addSellerMoneyWithdraw } from '../../../api/sellerMoney'
import flexLine from '../../flexLine'
export default {
  name: 'Index',
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      dialog:{},
      store_info: {}
    }
  },
  components:{ TitleHeader, SellerBase, flexLine },
  created: function () {
    this.getSellerInfo()
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
        addSellerMoneyWithdraw(value).then(res => {
          this.getSellerInfo()
          uni.showToast({icon:'none',title: res.message})
        }).catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
        })
    },
    goBack(){uni.navigateBack({delta:1})},
    getSellerInfo () {
      getSellerInfo().then(response => {
        if (response && response.result) {
          this.store_info = response.result.store_info
        }
      }
      ).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    // 店铺资金明细
    goSellerMoneyLogList () {
      uni.navigateTo({url:'/pages/seller/money/LogList'})
    },
    // 提现明细
    goSellerMoneyWithdrawList () {
      uni.navigateTo({url:'/pages/seller/money/WithdrawList'})
    },
    // 申请提现
    goSellerMoneyWithdrawForm () {
      this.dialog={mode:'input',content:'请输入提现金额'}
      this.$refs.confirm.open()
    }
  }
}
</script>

<style scoped lang="scss">
    .common-header-wrap .common-header{box-shadow: unset}
    .main-content{background: #fff;padding:0 $pageSpace}
    .header{background: $primaryColor;width: 100%;position: relative;color: #fff;padding:2.2rem 0;text-align:center;}
    .header .p{font-size:$h2;}
    .header .h2 {font-size:1.6rem;padding: .5rem 0;}
    .header .h5 {font-size:$h2;}
</style>
