{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" href="__STATIC__/element-ui/index.css">
<script src="STATIC_JS/vue.js"></script>
<script src="__STATIC__/element-ui/index.js"></script>
<style>
  .pagination{
    text-align: right!important;
    padding-top: 20px!important;
  }
  .selWidth {
    width: 350px !important;
    margin-bottom: 5px;
  }
  .one {
    background: #e4ecff;
  }
  .two {
    background: #fff3e0;
  }
  .three {
    background: #eaf9e1;
  }
  .four {
    background: #ffeaf4;
  }
  .five {
    background: #f1e4ff;
  }
  .one1 {
    background: #4d7cfe;
  }
  .two1 {
    background: #ffab2b;
  }
  .three1 {
    background: #6dd230;
  }
  .four1 {
    background: #ff85c0;
  }
  .five1 {
    background: #b37feb;
  }
  .card_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #f5f7f9;
    margin-bottom: 10px;
  }
  .card_box .card_box_cir{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card_box .card_box_cir .card_box_cir1{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .card_box .card_box_txt{}
  .card_box .card_box_txt .sp1{
    display: block;
    color: #252631;
    font-size: 24px;
    line-height: 37px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card_box .card_box_txt .sp2{
    display: block;
    color: #98a9bc;
    font-size: 12px;
  }
</style>
{/block}

{block name="main"}
<div id="vueContent">
  <!--主要内容-->
  <el-card class="box-card">
    <!--顶部搜索栏-->
    <div slot="header" class="clearfix">
      <div class="container">
        <!--筛选-->
        <el-form inline size="small" label-width="80px">
          <el-form-item label="搜索">
            <el-select v-model="tableFrom.status" placeholder="请选择" class="filter-item selWidth" clearable>
              <el-option label="待结算" :value="0"></el-option>
              <el-option label="已结算" :value="1"></el-option>
              <el-option label="已退款" :value="2"></el-option>
            </el-select>
            <el-input v-model="tableFrom.order_no" placeholder="请输入订单号" class="selWidth" clearable>
              <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <!--统计-->
        <el-row align="middle" :gutter="10" class="ivu-mt">
          <el-col v-for="(item, index) in cardLists" :key="index" :xl="4" :lg="8" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
            <div class="card_box">
              <div class="card_box_cir" :class="{'one':index%5==0,'two':index%5==1,'three':index%5==2,'four':index%5==3,'five':index%5==4}">
                <div class="card_box_cir1" :class="{'one1':index%5==0,'two1':index%5==1,'three1':index%5==2,'four1':index%5==3,'five1':index%5==4}">
                  <i :class="item.className" style="font-size: 24px;"></i>
                </div>
              </div>
              <div class="card_box_txt">
                <span class="sp1" v-text="item.count || 0"></span>
                <span class="sp2" v-text="item.name"></span>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--操作按钮-->
        <el-button type="primary" effect="dark" size="small" @click="applyWithdrawal">申请提现</el-button>
      </div>
    </div>
    <!--表格信息-->
    <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%">
      <el-table-column label="ID" prop="id" min-width="50" align="center"></el-table-column>
      <el-table-column label="订单信息" min-width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_type_name || '' }}<br />
          {{ scope.row.order_no || '' }}
        </template>
      </el-table-column>
      <el-table-column label="收入金额" prop="account_data" min-width="80" align="center"></el-table-column>
      <el-table-column label="结算状态" min-width="80" align="center">
        <template slot-scope="scope">
          <!--状态：0=待结算，1=已结算，2=已退款-->
          <el-tag v-if="Number(scope.row.status) === 1" type="success" effect="dark">已结算</el-tag>
          <el-tag v-else-if="Number(scope.row.status) === 2" type="danger" effect="dark">已退款</el-tag>
          <el-tag v-else type="info" effect="dark">待结算</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" prop="create_time" min-width="150" align="center"></el-table-column>
      <el-table-column label="备注" prop="remark" min-width="200" align="center"></el-table-column>
    </el-table>
    <!--分页-->
    <div class="pagination">
      <el-pagination :current-page="tableFrom.page" hide-on-single-page :total="tableData.total" @current-change="pageChange"></el-pagination>
    </div>
  </el-card>
  <!-- 提现弹框 -->
  <el-dialog title="收入提现" :visible.sync="isShowDialog" width="60%" append-to-body>
    <el-form size="small" label-width="80px">
      <el-form-item label="收款账户">
        <el-input :value="useAccountTitle" placeholder="请选择收款账户" class="selWidth" readonly disabled></el-input>
        <el-button type="warning" effect="dark" size="small" @click="selectAccount">选择账户</el-button>
      </el-form-item>
      <el-form-item label="提现金额">
        <el-input placeholder="请输入提现金额" v-model="applyInfo.apply_money" type="number" step="0.01" :min="0" class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="">
        <div>可提现收入：¥{{ Number(info.withdrawable_money || 0).toFixed(2) }}</div>
        <div v-if="Number(commission_handling_fees) > 0">
          提现手续费比例：{{commission_handling_fees}}%
          <span v-if="commission_money > 0">；手续费：{{ commission_money }}元，实际到账：{{ real_money }}元</span>
        </div>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" effect="dark" size="small" @click="submitApply">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 提现账户 -->
  <el-dialog title="账户管理" :visible.sync="accountDialog" width="60%" append-to-body>
    <!--顶部搜索栏-->
    <el-button type="primary" effect="dark" size="small" @click="createAccount({})">增加账户</el-button>
    <!--表格信息-->
    <el-table v-loading="accountListLoading" :data="accountList" style="width: 100%">
      <el-table-column label="ID" prop="id" min-width="50" align="center"></el-table-column>
      <el-table-column label="真实姓名" prop="realname" min-width="100" align="center"></el-table-column>
      <el-table-column label="手机号" prop="mobile" min-width="100" align="center"></el-table-column>
      <el-table-column label="账户类型" prop="mobile" min-width="100" align="center">
        <template slot-scope="scope">
          <!--账户类型：card=银行卡,wechat=微信零钱,alipay=支付宝,balance=余额,threeStaff=第三方打款（灵活用工）-->
          <span v-if="scope.row.account_type === 'card'">银行卡</span>
          <span v-else-if="scope.row.account_type === 'wechat'">微信零钱</span>
          <span v-else-if="scope.row.account_type === 'alipay'">支付宝</span>
          <span v-else-if="scope.row.account_type === 'balance'">余额</span>
          <span v-else-if="scope.row.account_type === 'threeStaff'">第三方打款</span>
        </template>
      </el-table-column>
      <el-table-column label="收款账户" prop="mobile" min-width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.account_type === 'card'">{{ scope.row.card_num || '' }}</span>
          <span v-else-if="scope.row.account_type === 'wechat'"></span>
          <span v-else-if="scope.row.account_type === 'alipay'">{{ scope.row.alipay_account || '' }}</span>
          <span v-else-if="scope.row.account_type === 'balance'"></span>
          <span v-else-if="scope.row.account_type === 'threeStaff'">
            银行卡类型：{{ Number(scope.row.card_type) === 1 ? '对私' : '对公' }}<br />
            开户银行支行：{{ scope.row.bank_sub_name || '' }}<br />
            银行卡持有人: {{ scope.row.bank_act_name || '' }}<br />
            银行卡卡号: {{ scope.row.card_num || '' }}<br />
            银行卡类型：{{ Number(scope.row.mer_type) === 1 ? '个体户' : '个人' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150" align="center">
        <template slot-scope="scope">
          <el-button @click="createAccount(scope.row)" type="warning" size="small">编辑</el-button>
          <el-button @click="useAccount(scope.row)" size="small">使用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <!-- 账户编辑 -->
  <el-dialog title="账户编辑" :visible.sync="accountEditDialog" width="60%" append-to-body>
    <el-form size="small" label-width="120px">
      <el-form-item label="账户类型">
        <el-select v-model="accountInfo.account_type" placeholder="请选择" class="filter-item selWidth" clearable>
          <el-option label="银行卡" value="card" v-if="Object.values(accountType).includes('card')"></el-option>
          <!--<el-option label="微信零钱" value="wechat" v-if="Object.values(accountType).includes('wechat')"></el-option>-->
          <el-option label="支付宝" value="alipay" v-if="Object.values(accountType).includes('alipay')"></el-option>
          <!--<el-option label="余额" value="balance" v-if="Object.values(accountType).includes('balance')"></el-option>-->
          <el-option label="第三方打款" value="threeStaff" v-if="Object.values(accountType).includes('threeStaff')"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="accountInfo.realname" placeholder="请输入真实姓名" class="selWidth" type="text"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="accountInfo.mobile" placeholder="请输入手机号" class="selWidth" type="text"></el-input>
      </el-form-item>
      <template v-if="accountInfo.account_type === 'alipay'">
        <el-form-item label="支付宝账号">
          <el-input v-model="accountInfo.alipay_account" placeholder="请输入支付宝账号" class="selWidth" type="text"></el-input>
        </el-form-item>
      </template>
      <template v-if="accountInfo.account_type === 'card'">
        <el-form-item label="银行卡卡号">
          <el-input v-model="accountInfo.card_num" placeholder="银行卡卡号" class="selWidth" type="text"></el-input>
        </el-form-item>
      </template>
      <template v-if="accountInfo.account_type === 'threeStaff'">
        <el-form-item label="银行卡类型">
          <el-select v-model="accountInfo.card_type" placeholder="请选择" class="filter-item selWidth" clearable>
            <el-option label="对私" :value="1"></el-option>
            <el-option label="对公" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户银行支行" v-if="Number(accountInfo.card_type) === 2">
          <el-input v-model="accountInfo.bank_sub_name" placeholder="请输入开户银行支行名称" class="selWidth" type="text"></el-input>
        </el-form-item>
        <el-form-item label="持有人姓名">
          <el-input v-model="accountInfo.bank_act_name" placeholder="请输入银行卡持有人姓名" class="selWidth" type="text"></el-input>
        </el-form-item>
        <el-form-item label="银行卡卡号">
          <el-input v-model="accountInfo.card_num" placeholder="请输入银行卡卡号" class="selWidth" type="text"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="accountInfo.account_id" placeholder="请输入银行卡持有人身份证号码" class="selWidth" type="text"></el-input>
        </el-form-item>
        <el-form-item label="有效期">
          <el-date-picker v-model="accountInfo.account_id_start" type="date" placeholder="请选择身份证有效期开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="商户类型">
          <el-select v-model="accountInfo.mer_type" placeholder="请选择商户类型" class="filter-item selWidth" clearable>
            <el-option label="个体户" :value="1"></el-option>
            <el-option label="个人" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="">
        <el-button type="primary" effect="dark" size="small" @click="submitEditAccount">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>



</div>
{/block}

{block name="script"}
<script>
  new Vue({
    el:'#vueContent',
    data(){
      return {
        info: JSON.parse('{$info|raw}'),
        // 表格
        listLoading: true,
        tableData: {
          data: [],
          total: 0,
        },
        tableFrom: {
          page: 1,
          order_no: '',
          status: '',
        },
        // 统计
        cardLists: [],
        // 提现相关
        account: JSON.parse('{$account|raw}'),
        // 总平台提现设置
        set: JSON.parse('{$set|raw}'),
        accountType: {},// 打款方式列表
        commission_handling_fees: 0,// 提现手续费
        // 提现申请相关信息
        isShowDialog: false,
        applyInfo: {
          apply_money: '',
          finance_account_id: '',
          income_type: 'shop_legumes_integral'
        },
        useAccountInfo: {},
        useAccountTitle: '',
        commission_money: 0,// 手续费
        real_money: 0,// 实际获得
        // 提现账户相关信息
        accountListLoading: true,
        accountList: [],
        accountDialog: false,
        // 账户编辑相关信息
        accountEditDialog: false,
        accountInfo:{
          realname: '',
          mobile: '',
          account_type: '',
          alipay_account: '',
          card_type: '',
          bank_sub_name: '',
          account_id_start: '',
          bank_act_name: '',
          card_num: '',
          account_id: '',
          mer_type: '',
        },
      };
    },
    filters:{
      formatDate(value){
        if (!value) return '';
        const date = new Date(value * 1000);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
    },
    watch:{
      'applyInfo.apply_money': {
        handler: function (val, oldVal) {
          let withdrawable_money = Number(this.info.withdrawable_money || 0);
          let applyMoney = Number(this.applyInfo.apply_money || 0);
          applyMoney = applyMoney > withdrawable_money ? withdrawable_money : applyMoney;
          this.applyInfo.apply_money = applyMoney;
          // 计算手续费
          if(Number(this.commission_handling_fees) > 0){
            this.commission_money = (Number(applyMoney) * Number(this.commission_handling_fees) / 100).toFixed(2);
            this.real_money = (Number(applyMoney) - Number(this.commission_money)).toFixed(2);
          }
        },
        deep: true
      }
    },
    mounted(){
      let _this = this;
      _this.getList('');
      _this.$nextTick(function() {
        let info = Object.assign({}, _this.info);
        _this.cardLists = [
          { className: 'el-icon-coin', count: info.total_money, name: '已结算（元）'},
          { className: 'el-icon-coin', count: info.frozen_money, name: '冻结中（元）'},
          { className: 'el-icon-coin', count: info.withdrawn_money, name: '已提现（元）'},
          { className: 'el-icon-coin', count: info.withdrawable_money, name: '可提现（元）'},
        ];
      })
    },
    methods: {
      // 获取列表
      getList(num) {
        let _this = this;
        _this.listLoading = true;
        _this.tableFrom.page = num ? num : this.tableFrom.page;
        $.ajax({
          url: ns.url("shop/account/shopIncome"),
          data: _this.tableFrom,
          dataType: 'JSON',
          type: 'POST',
          success: function(res) {
            if(Number(res.code) === 0){
              let data = res.data || {};
              _this.tableData.data = data.list || {};
              _this.tableData.total = data.count || 0;
              _this.listLoading = false;
            }
          }
        });
      },
      pageChange(page) {
        this.tableFrom.page = page;
        this.getList('');
      },
      // 申请提现 - 点击按钮
      applyWithdrawal(){
        let _this = this;
        // 判断：总平台是否设置打款方式
        _this.commission_handling_fees = this.set.commission_handling_fees || 0;
        _this.accountType = Object.assign({}, this.set.account_type || {});
        if(Object.values(_this.accountType).length <= 0){
          _this.$alert('不存在打款方式，请联系总平台管理员！');
          return;
        }
        // 显示提现弹框
        this.isShowDialog = true;
      },
      // 选择提现账户
      selectAccount(){
        this.accountGetList();
        this.accountDialog = true;
      },
      // 提现账户列表
      accountGetList() {
        let _this = this;
        _this.accountListLoading = true;
        $.ajax({
          url: ns.url("shop/account/getAccountList"),
          dataType: 'JSON',
          type: 'POST',
          success: function(res) {
            if(Number(res.code) === 0){
              let data = res.data || {};
              _this.accountList = data || {};
              _this.accountListLoading = false;
            }
          }
        });
      },
      // 点击增加 or 编辑账户信息
      createAccount(info = {}){
        if(Object.values(info).length > 0) this.accountInfo = info;
        else this.accountInfo = Object.assign({}, this.$options.data().accountInfo);

        this.accountEditDialog = true;
      },
      // 账户编辑提交
      submitEditAccount(){
        let _this = this;
        let accountInfo = Object.assign({}, this.accountInfo);
        let rule = [
          {name: 'account_type', checkType: 'required', errorMsg: '请选择账户类型'},
          {name: 'realname', checkType: 'required', errorMsg: '请输入真实姓名'},
          {name: 'mobile', checkType: 'required', errorMsg: '请输入手机号'},
          {name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号'},
        ];
        if (accountInfo.account_type === 'card') {
          rule.push({name: 'card_num', checkType: 'required', errorMsg: '请输入银行卡卡号'});
        }
        if (accountInfo.account_type === 'alipay') {
          rule.push({name: 'alipay_account', checkType: 'required', errorMsg: '请输入支付宝账号'});
        }
        if (accountInfo.account_type === 'threeStaff') {
          rule.push({name: 'card_type', checkType: 'required', errorMsg: '请选择卡类型'});
          rule.push({name: 'account_id_start', checkType: 'required', errorMsg: '请选择身份证有效期开始时间'});
          rule.push({name: 'bank_act_name', checkType: 'required', errorMsg: '请输入银行卡持有人姓名'});
          rule.push({name: 'card_num', checkType: 'required', errorMsg: '请输入银行卡卡号'});
          rule.push({name: 'account_id', checkType: 'required', errorMsg: '请输入银行卡持有人身份证号码'});
          rule.push({name: 'mer_type', checkType: 'required', errorMsg: '请选择商户类型'});
        }
        let  verifyResult = ns.validate(accountInfo, rule);
        if(verifyResult.length > 0 && verifyResult !== true){
          _this.$alert(verifyResult);
          return;
        }
        // 校验通过 提交编辑信息
        $.ajax({
          url: ns.url("shop/account/editFinanceAccount"),
          data: accountInfo,
          dataType: 'JSON',
          type: 'POST',
          success: function(res) {
            _this.accountEditDialog = false;
            _this.accountGetList();
          }
        });
      },
      // 选中使用的账户
      useAccount(info){
        this.useAccountInfo = info || {};
        this.applyInfo.finance_account_id = info.id || 0;
        // 生成账户标题
        // 账户类型：card=银行卡,wechat=微信零钱,alipay=支付宝,balance=余额,threeStaff=第三方打款（灵活用工）
        if(info.account_type === 'card') this.useAccountTitle = '银行卡：' + info.card_num;
        else if(info.account_type === 'wechat') this.useAccountTitle = '微信零钱';
        else if(info.account_type === 'alipay') this.useAccountTitle = '支付宝：' + info.alipay_account;
        else if(info.account_type === 'balance') this.useAccountTitle = '余额';
        else if(info.account_type === 'threeStaff') this.useAccountTitle = '第三方打款：' + info.card_num;

        this.accountDialog = false
      },
      // 提交申请信息
      submitApply(){
        let _this = this;
        let applyInfo = Object.assign({}, this.applyInfo);
        let rule = [
          {name: 'apply_money', checkType: 'required', errorMsg: '请输入提现金额'},
          {name: 'apply_money', checkType: 'min', errorMsg: '提现金额必须大于0',checkRule: 0},
          {name: 'finance_account_id', checkType: 'required', errorMsg: '请选择收款账户'},
        ];
        let  verifyResult = ns.validate(applyInfo, rule);
        if(verifyResult.length > 0 && verifyResult !== true){
          _this.$alert(verifyResult);
          return;
        }
        // 校验通过 提交编辑信息
        $.ajax({
          url: ns.url("shop/account/submitApplyInfo"),
          data: applyInfo,
          dataType: 'JSON',
          type: 'POST',
          success: function(res) {
            if(Number(res.code) === 0){
              _this.$alert('提交成功！').then(()=>{
                window.history.go(0)
              });
            }else{
              _this.$alert(res.message);
            }
          }
        });
      }

    }
  });
</script>
{/block}