<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <span  class="textSpan">供应商名称:</span>
      <el-input v-model="body.supplierName" style="width:200px" placeholder="供应商名称" size="small" clearable />
      <el-button class="filter-item"  icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
      <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="handleAdd">新增</el-button>
    </div>
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">

      <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
          </template>
      </el-table-column>
      <el-table-column label="供应商名称" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope" @click="handleLook(scope.row)">
           <el-button type="text" @click="handleLook(scope.row)">{{ scope.row.supplierName }}</el-button>
        </template>
      </el-table-column>

      <el-table-column label="可用余额" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.balance }}</span>
        </template>
      </el-table-column>

      <el-table-column label="累计充值" width="110" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.rechargeAmount  }}</span>
        </template>
      </el-table-column>

      <el-table-column label="累计消费" width="110" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.consumeAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="170" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
           <i class="el-icon-time"></i>
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否有效" width="90" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
            <el-tag v-if="scope.row.isValid==0" type="danger" size="warning">无效</el-tag>
            <el-tag v-if="scope.row.isValid==1" size="small">有效</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="限速" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.ratio }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" min-width="300" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isValid==0" size="small" icon="el-icon-circle-check" type="success" plain @click="ModifyState(scope.row,1)">有效</el-button>
          <el-button v-if="scope.row.isValid==1" size="small" icon="el-icon-circle-close" type="info" plain @click="ModifyState(scope.row,0)">无效</el-button>
          <el-button size="small" icon="el-icon-edit" type="warning" plain  @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" icon="el-icon-delete" type="danger" autofocus plain  @click="ModifyDelete(scope.row,$event)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        current-page.sync="body.current"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增与修改 -->
    <el-dialog :title="operation?'新增供应商':'编辑供应商'" :visible.sync="dialogFormVisible" width="90%" center>
      <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="联系人姓名" :label-width="formLabelWidth"  >
              <el-input v-model="dataForm.linkName" placeholder="请输入联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="联系人电话" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.mobile" placeholder="请输入联系人电话" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="联系人邮箱" :label-width="formLabelWidth">
                <el-input v-model="dataForm.email" placeholder="请输入联系人邮箱" />
              </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="供应商名称" :label-width="formLabelWidth" prop="supplierName" >
                <el-input v-model="dataForm.supplierName" :disabled="!operation" placeholder="请输入供应商名称" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="供应商地址" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.address" placeholder="请输入供应商地址" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="是否有效" :label-width="formLabelWidth" prop="isValid" >
                  <el-select size="small" v-model="dataForm.isValid"  placeholder="请选择是否有效" style="width: 100%" >
                  <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  />
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="接入帐号" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.account" placeholder="请输入接入帐号" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="接入密码" :label-width="formLabelWidth" >
                <el-input v-model="dataForm.passwd" placeholder="请输入接入密码" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="接入密钥" :label-width="formLabelWidth">
                <el-input v-model="dataForm.appKey" placeholder="请输入接入密钥" />
              </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="后台地址" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.manageUrl" placeholder="请输入后台地址" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
             <el-form-item label="下单URL" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.makeOrderUrl" placeholder="请输入下单URL" />
              </el-form-item>
              <!-- <el-form-item label="后台账号" :label-width="formLabelWidth" >
                <el-input v-model="dataForm.manageUsername" placeholder="请输入后台账号" />
              </el-form-item> -->
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
             <el-form-item label="回调URL" :label-width="formLabelWidth">
                <el-input v-model="dataForm.callBackUrl" placeholder="请输入回调URL" />
              </el-form-item>
              <!-- <el-form-item label="后台密码" :label-width="formLabelWidth">
                <el-input v-model="dataForm.managePassword" placeholder="请输入后台密码" />
              </el-form-item> -->
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
             
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <!-- <el-form-item label="查询余额URL" :label-width="formLabelWidth" >
                <el-input v-model="dataForm.queryBalanceUrl" placeholder="请输入查询余额URL" />
              </el-form-item> -->
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
             
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="查询URL" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.queryUrl" placeholder="请输入查询URL" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="限速" :label-width="formLabelWidth" >
                <el-input v-model="dataForm.ratio" placeholder="请输入限速" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            
          </el-col>
        </el-row>
       <el-card  shadow="hover" v-if="!operation">
        <div slot="header" class="clearfix">
          <span class="topClass">供应商银行账户信息</span>
          <el-button style="float: right;" type="primary" plain @click="addprice(dataForm.supplierId)">添加银行卡</el-button>
        </div>
        <div>
          <!-- 添加银行卡 -->
          <el-table :data="dataForm.bankCards" >

          <el-table-column label="银行卡"  align="center"  show-overflow-tooltip>
            <template slot-scope="scope" >
              <el-input v-model="scope.row.cardNo"></el-input>
              <!-- <span v-else>{{ scope.row.cardNo }}</span> -->
            </template>
          </el-table-column>

          <el-table-column label="开户行" width="140" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.bankDeposit"></el-input>
              <!-- <span v-else>{{ scope.row.bankDeposit }}</span> -->
            </template>
          </el-table-column>
          <el-table-column label="全称" width="170" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.account"></el-input>
              <!-- <span v-else>{{ scope.row.bankDeposit }}</span> -->
            </template>
          </el-table-column>

          <!-- <el-table-column label="类型" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <el-select size="small" v-model="scope.row.distinguish"  placeholder="类型选择" >
                  <el-option
                  v-for="item in account"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  />
                  </el-select>
              <!-- <el-input  v-model="scope.row.account"></el-input> -->
              <!-- <span >{{ scope.row.account }}</span>  
            </template>
          </el-table-column> -->

          <el-table-column label="创建者" width="150" align="center" show-overflow-tooltip >
            <template slot-scope="scope" >
              <!-- <el-input v-model="scope.row.creator"></el-input> -->
              <span >{{ scope.row.creator }}</span>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" align="center" show-overflow-tooltip >
            <template slot-scope="scope" >
              <!-- <el-input v-if="editable[scope.$index]" @input="onBurl(scope.row.facePrice,scope.row.payPrice)" v-model="scope.row.creator"></el-input> -->
               <i class="el-icon-time"></i>
              <span >{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作"  width="165" min-width="150" align="center">
              <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" @click="priceDelete(scope.row,scope.$index,$event)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        </div>
       </el-card>
 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 加款 -->
    <el-dialog title="加款" fullscreen :visible.sync="dialogAdd" width="90%">
 
      <el-form :model="dataAddForm" :rules="rules2" label-width="80px" size="small" label-position="right">
        <!-- 供应商信息 -->
        <el-card shadow="never" >
        <!-- <el-card  shadow="hover" > -->
        <div slot="header" class="clearfix">
          <span class="topClass">供应商信息</span>
        </div>
        <div>
          <div class="classAmountAdd">
              <div style="width:70%">
                  <span class="amountText">供应商名称：</span>
                  <span class="amountnumber">{{dataAddForm.supplierName}}</span>
              </div>
              <div>
                <span class="amountText">可用余额：</span>
                  <span class="amountnumber">{{dataAddForm.balance}}</span>
              </div>
          </div> 
          <div class="classAmountAdd">
              <div  style="width:70%">
                  <span class="amountText">　累计充值：</span>
                  <span class="amountnumber">{{dataAddForm.rechargeAmount}}</span>
              </div>
              <div>
                <span class="amountText">累计消费：</span>
                  <span class="amountnumber">{{dataAddForm.consumeAmount}}</span>
              </div>
          </div> 
        </div>
       </el-card>
       <!-- 供应商流水 加款操作 -->
       <el-card shadow="never" >
        <!-- <el-card  shadow="hover" > -->
        <div slot="header" class="clearfix">
          <span  class="topClass">供应商加款流水</span>
          <el-button style="float: right;"  icon="el-icon-plus" type="primary" plain @click="addAmount">新增</el-button>
        </div>
        <div>
            <el-table v-loading="Addloading" :data="tableAddData" border style="width: 100%">
              <el-table-column label="银行卡"  align="center" show-overflow-tooltip>
                <template slot-scope="scope"> 
                  <span>{{ scope.row.cardNo }}</span>
                </template>
              </el-table-column>
              <el-table-column label="供应商账户"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.bankDeposit }}</span>
                </template>
              </el-table-column>
              <el-table-column label="加款人"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.user }}</span>
                </template>
              </el-table-column>
              <el-table-column label="加款金额" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.amount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="凭 证"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.certificate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="加款时间"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row }}</span>
                </template>
              </el-table-column>
              <el-table-column label="出款账户"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.paymentAccount }}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" fixed="right" min-width="200" align="center">
                <template slot-scope="scope">
                  <el-button size="small" icon="el-icon-edit" type="warning" plain @click="handleEdit(scope.row)">撤销</el-button>
                </template>
              </el-table-column>

            </el-table>
        </div>
       </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="dialogAdd = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增加款 -->
    <el-dialog title="新增加款" :visible.sync="AddDialogForm" width="55%" center>
      <el-form ref="AddNewData" :model="AddNewData" :rules="rules" label-width="80px" size="small" label-position="right">
            <el-form-item label="银行卡" prop="cardNo" :label-width="formLabelWidth"  >
              <el-input v-model="AddNewData.cardNo" placeholder="请输入银行卡" />
            </el-form-item>
              <el-form-item label="供应商账户" prop="bankDeposit" :label-width="formLabelWidth"  >
              <el-input v-model="AddNewData.bankDeposit" placeholder="请输入供应商账户" />
            </el-form-item>
              <el-form-item label="加款金额" prop="amount" :label-width="formLabelWidth"  >
              <el-input v-model="AddNewData.amount" placeholder="请输入加款金额" />
            </el-form-item>
              <el-form-item label="凭证" :label-width="formLabelWidth"  >
              <el-input v-model="AddNewData.certificate" placeholder="请输入凭证" />
            </el-form-item>
              <el-form-item label="出款账户" :label-width="formLabelWidth"  >
              <el-input v-model="AddNewData.paymentAccount" placeholder="请输入出款账户" />
            </el-form-item>
              <el-form-item label="备注" :label-width="formLabelWidth"  >
              <el-input v-model="AddNewData.distinguish" placeholder="请输入备注" />
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="AddDialogForm = false">取 消</el-button>
        <el-button type="primary" @click="clickAddNew">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog title="查看供应商" :visible.sync="dialogFormLook" width="85%" center>
      <el-form :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="联系人姓名" :label-width="formLabelWidth"  >
              <el-input :disabled="true" v-model="dataForm.linkName" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="联系人电话" :label-width="formLabelWidth"  >
                <el-input :disabled="true" v-model="dataForm.mobile"  />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="联系人邮箱" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="dataForm.email"  />
              </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="供应商名称" :label-width="formLabelWidth"  >
                <el-input :disabled="true" v-model="dataForm.supplierName" placeholder="请输入供应商名称" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="供应商地址" :label-width="formLabelWidth"  >
                <el-input :disabled="true" v-model="dataForm.address"/>
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item  label="是否有效" :label-width="formLabelWidth" prop="isValid" >
                  <el-select size="small" style="width:100%" disabled v-model="dataForm.isValid"   >
                  <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  />
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="接入帐号" :label-width="formLabelWidth"  >
                <el-input :disabled="true" v-model="dataForm.account"  />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="接入密码" :label-width="formLabelWidth" >
                <el-input :disabled="true" v-model="dataForm.passwd" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="接入密钥" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="dataForm.appKey"/>
              </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="后台地址" :label-width="formLabelWidth"  >
                <el-input :disabled="true" v-model="dataForm.manageUrl"  />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
             <el-form-item label="下单URL" :label-width="formLabelWidth"  >
                <el-input :disabled="true" v-model="dataForm.makeOrderUrl"  />
              </el-form-item>
              <!-- <el-form-item label="后台账号" :label-width="formLabelWidth" >
                <el-input v-model="dataForm.manageUsername" placeholder="请输入后台账号" />
              </el-form-item> -->
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
             <el-form-item label="回调URL" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="dataForm.callBackUrl"  />
              </el-form-item>
              <!-- <el-form-item label="后台密码" :label-width="formLabelWidth">
                <el-input v-model="dataForm.managePassword" placeholder="请输入后台密码" />
              </el-form-item> -->
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="查询URL" :label-width="formLabelWidth"  >
                <el-input :disabled="true" v-model="dataForm.queryUrl"  />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="限速" :label-width="formLabelWidth" >
                <el-input :disabled="true" v-model="dataForm.ratio"  />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            
          </el-col>
        </el-row>
       <el-card  shadow="hover" >
        <div slot="header" class="clearfix">
          <span class="topClass">供应商银行账户信息</span>
          <!-- <el-button style="float: right;" type="primary" plain @click="addprice">添加银行卡</el-button> -->
        </div>
        <div>
          <!-- 添加银行卡 -->
          <el-table :data="dataForm.bankCards" >

          <el-table-column label="银行卡" width="200" align="center" show-overflow-tooltip >
            <template slot-scope="scope" >
              <!-- <el-input v-model="scope.row.cardNo"></el-input> -->
              <span >{{ scope.row.cardNo }}</span>
            </template>
          </el-table-column>

          <el-table-column label="开户行" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- <el-input v-model="scope.row.bankDeposit"></el-input> -->
              <span >{{ scope.row.bankDeposit }}</span>
            </template>
          </el-table-column>
          <el-table-column label="全称" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- <el-input v-model="scope.row.bankDeposit"></el-input> -->
              <span >{{ scope.row.account }}</span>
            </template>
          </el-table-column>

          <el-table-column label="账户类型" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <span v-if=" scope.row.distinguish == 1">供应商</span>
              <span v-if=" scope.row.distinguish == 2">客户</span>
              <!-- <el-input  v-model="scope.row.distinguish"></el-input> -->
              <!-- <el-select size="small" v-model="scope.row.distinguish" disabled placeholder="类型选择" >
                  <el-option
                  v-for="item in account"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  />
                  </el-select> -->
            </template>
          </el-table-column>

          <el-table-column label="创建者" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input v-model="scope.row.creator"></el-input> -->
              <span >{{ scope.row.creator }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="170" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input v-if="editable[scope.$index]" @input="onBurl(scope.row.facePrice,scope.row.payPrice)" v-model="scope.row.creator"></el-input> -->
               <i class="el-icon-time"></i>
              <span >{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column label="操作" fixed="right" width="165" min-width="150" align="center">
              <template slot-scope="scope">
                <el-button type="danger" plain icon="el-icon-delete" @click="priceDelete(scope.row,scope.$index)">删除</el-button>
              </template>
            </el-table-column> -->
        </el-table>
        </div>
       </el-card>
 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormLook = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormLook = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import api from '@/api/channel.js'

export default {
  data() {
    return {
      body: {
        current: 1,
        size: 10,
        supplierName: ''
      },
      total: 0,
      loading:false,
      operation: false, // true:新增, false:编辑
      dialogFormVisible: false, // 控制弹出框
      dialogFormLook:false,   //查看弹出框
      formLabelWidth: '100px',   //新增宽度
       rules2: {
        supplierName: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
        isValid: [{ required: true, message: '请选择是否有效', trigger: 'blur' }],
      },
      rules:{
          cardNo: [{ required: true, message: '请输入银行卡', trigger: 'blur' }],
        bankDeposit: [{ required: true, message: '请输入供应商账户', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入加款金额', trigger: 'blur' }],
      },
      status:[{
        id:1,
        name:"有效"
      },{
        id:0,
        name:"无效"
      }],
      dataForm:{
        supplierName:"",           //供应商名称
        mobile:"",                 //供应商电话
        address:"",                //供应商地址
        isValid:"",                //是否有效
        account:"",                //接入账号
        appKey:"",                 //接入密钥
        ratio:"",                  //限速	
        manageUrl:"",              //后台地址
        // billType:"",               //对账单类型
        linkName:"",               //供应商姓名
        email:"",                  //供应商邮箱
        passwd:"",                 //接入密码
        makeOrderUrl:"",           //下单URL
        // queryBalanceUrl:"",        //查询余额URL
        callBackUrl:"",            //回调URL
        queryUrl:"",               //查询URL
        // field_37:"",               //联系商务
        // managePassword:"",         //后台密码
        bankCards:[
          {
            cardNo:"",       //银行卡
            bankDeposit:"",   //开户行
            account:"",     //账户名称    
            distinguish:""
          }
        ]
      },
      dataAddForm:{    //加款供应商信息
      },
      Addloading:false,  //加款loading
      tableAddData:[], //加款数据
      AddNewData:{    //新增加款
        cardNo:"",          //银行卡
        bankDeposit:"",     //供应商账户
        amount:"",          //加款金额
        certificate:"",     //凭证
        paymentAccount:"",  //出款账户
      },   
      AddDialogForm:false,  //新增加款对话框
      dialogAdd:false,
      bankCards:[
        // {cardNo:"18838392",bankDeposit:"222",account:"11",creator:"11",createTime:"11 "}
        ],             //银行卡
      tableData: [],
      account:[
        {id:1,name:"供应商"},
        // {id:2,name:"客户"}
      ]
    }
  },
  created() {
    this.reLoad()
  },
  methods: {
    reLoad() {
      this.loading =true
      api.Search(this.body).then((res) => {
        this.loading = false
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    //搜索
    Search() {
      this.body.current = 1
      this.reLoad()
    },
    //新增
    handleAdd(){
      this.dialogFormVisible = true
      this.operation = true
      this.dataForm={
        supplierName:"",           //供应商名称
        mobile:"",                 //供应商电话
        address:"",                //供应商地址
        isValid:"",                //是否有效
        account:"",                //接入账号
        appKey:"",                 //接入密钥
        ratio:"1:30000",                 //限速	
        manageUrl:"",              //后台地址
        // billType:"",               //对账单类型
        linkName:"",               //供应商姓名
        email:"",                  //供应商邮箱
        passwd:"",                 //接入密码
        makeOrderUrl:"",           //下单URL
        // queryBalanceUrl:"",        //查询余额URL
        callBackUrl:"",            //回调URL
        queryUrl:"",               //查询URL
        // field_37:"",               //联系商务
        managePassword:"",         //后台密码
        // bankCards:[]
      }
      if(this.$refs['dataForm']){
          this.$refs['dataForm'].resetFields();
      }
    },
    //加款对话框
    amountAdd:function(row){
       this.dialogAdd = true
       this.dataAddForm = row
    },
    //新增加款操作
    addAmount:function(){
      this.AddDialogForm = true
       this.AddNewData={    //新增加款
        cardNo:"",          //银行卡
        bankDeposit:"",     //供应商账户
        amount:"",          //加款金额
        certificate:"",     //凭证
        paymentAccount:"",  //出款账户
      }
    },
    //新增加款API
    clickAddNew:function(){
      this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            console.log(valid)
          }
      })    
    },
    //修改
    handleEdit: function(row) {
      this.dialogFormVisible = true
      this.operation = false
      this.dataForm={
      supplierName:"",           //供应商名称
        mobile:"",                 //供应商电话
        address:"",                //供应商地址
        isValid:"",                //是否有效
        account:"",                //接入账号
        appKey:"",                 //接入密钥
        ratio:"",                  //限速	
        manageUrl:"",              //后台地址
        // billType:"",               //对账单类型
        linkName:"",               //供应商姓名
        email:"",                  //供应商邮箱
        passwd:"",                 //接入密码
        makeOrderUrl:"",           //下单URL
        // queryBalanceUrl:"",        //查询余额URL
        callBackUrl:"",            //回调URL
        queryUrl:"",               //查询URL
        // field_37:"",               //联系商务
        managePassword:"",         //后台密码
        bankCards:[
          {
            cardNo:"",       //银行卡
            bankDeposit:"",   //开户行
            account:1,     //账户名称    
            relationId:row.relationId,
            distinguish:""
          }
        ]
    }
      console.log(row)
      if(row.bankCards == undefined){    
      //修改弹框时如果银行卡字段为undefined的时候赋值为空
         row.bankCards = []
      }
      let newObj=JSON.parse(JSON.stringify(row))
      this.dataForm = newObj
          if(this.$refs['dataForm']){
               this.$refs['dataForm'].resetFields();
           }
     
      // this.dataForm = Object.assign({}, row)
      // this.dataForm.jobId = row.jobId
    },
    //查看详情
    handleLook(row){
      console.log(row)
      this.dialogFormLook = true
       this.dataForm={
      supplierName:"",           //供应商名称
        mobile:"",                 //供应商电话
        address:"",                //供应商地址
        isValid:"",                //是否有效
        account:"",                //接入账号
        appKey:"",                 //接入密钥
        ratio:"",                  //限速	
        manageUrl:"",              //后台地址
        // billType:"",               //对账单类型
        linkName:"",               //供应商姓名
        email:"",                  //供应商邮箱
        passwd:"",                 //接入密码
        makeOrderUrl:"",           //下单URL
        // queryBalanceUrl:"",        //查询余额URL
        callBackUrl:"",            //回调URL
        queryUrl:"",               //查询URL
        // field_37:"",               //联系商务
        managePassword:"",         //后台密码
        bankCards:[]
    }
    let newObj=JSON.parse(JSON.stringify(row))
      this.dataForm = newObj
    },
    //新增或修改API
    submitForm(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (!this.operation) {
              console.log(this.dataForm)
              // 编辑
              api.channelEdit(this.dataForm).then(response => {
                if (response.status === 200) {
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                  this.dialogFormVisible = false
                  this.reLoad()
                } else {
                  this.$message({
                    type: 'error',
                    message: response.data.msg
                  })
                }
              })
            } else {
              console.log(this.dataForm)
            //   // 添加
              api.channelAdd(this.dataForm).then(response => {
                if (response.status === 200) {
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                  this.dialogFormVisible = false
                  this.reLoad()
                } else {
                  this.$message({
                    type: 'error',
                    message: response.data.msg
                  })
                }
              })
            }
          }
        })
    },
    //添加银行卡
    addprice(relationId){
      this.dataForm.bankCards.push({
          cardNo:"",       //银行卡
          bankDeposit:"",   //开户行
          account:'',       //供应商账户
          relationId:relationId,
          distinguish:1
          // creator:""       //创建者
      })
       console.log(this.dataForm.bankCards)
    },

    //删除银行卡
    priceDelete(row,index,e){
        let relationId=this.dataForm.relationId
        this.$confirm('此操作将删除：' + row.account, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          
          if(row.id){
            let info = {
              id:row.id
            }
            api.supplierDelete(row.id).then((res)=>{
              this.dataForm.bankCards.splice(index,1)
              this.$message({
                  type: 'success',
                  message: '删除成功'
                })
            })
          }else{
              this.dataForm.bankCards.splice(index,1)
              this.$message({
                  type: 'success',
                  message: '删除成功'
                })
          }
        })
      let target=e.target;
      if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
            target = e.target.parentNode;
      }
       target.blur();
      console.log(this.dataForm.bankCards)
    },

    // 状态
    ModifyState(row,i) {
      this.$confirm('是否修改 '+row.supplierName+' 的状态', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            let code = JSON.parse(JSON.stringify(row))
            code.isValid = i   // 2:暂停   1：有效
            let info = {
              isValid:code.isValid,
              supplierId:code.supplierId
            }
            api.supplierValid(info).then(response => {
            if (response.status == "200") {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.reLoad()
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg
              })
            }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });          
          });
    },
    // 删除
    ModifyDelete(row,e) {
       const that = this
        let target=e.target;
      if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
            target = e.target.parentNode;
      }
       target.blur();
      this.$confirm('此操作将删除供应商：' + row.supplierName, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {

          // row .isDelete = 1
          api.onsupplierDelete(row.supplierId).then(response => {
            if (response.status === 200) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              that.reLoad()
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSizeChange: function(val) {
      this.body.size = val
      this.reLoad()
    },
    // 换页
    handleCurrentChange: function(val) {
      this.body.current = val
      this.reLoad()
    }
  }
}
</script>

<style scoped>
  
  .classAmountAdd{
    width: 85%;
    display: flex;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .amountText{
    font-weight: 500;
    font-size: 16px;
    /* color: rgb(1, 7, 14); */
    position: relative;
    bottom: 3px;
    
  }
  .amountnumber{
    font-weight: 500;
    font-size: 25px;
    color: rgba(245, 163, 96, 0.884);
  }
  .el-card {
    border: 0px solid #e6ebf5;

}
</style>
