<template>
  <div class="app-container">
      <div class="filter-container" style="margin: 10px 0 10px 0">
        <span class="textSpan">客户名称:</span>
        <el-select v-model="body.customerName" filterable  clearable  placeholder="请选择">
        <el-option
          v-for="item in userList"
          :key="item.relationId"
          :label="item.customerName"
          :value="item.customerName">   
        </el-option>
      </el-select>
        <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
      </div>
      <!-- 列表 -->
       <el-table v-loading="loading" :data="tableData" border style="width: 100%">

      <el-table-column label="序号" width="60" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

      <el-table-column label="客户名称" width="150" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.customerName }}</span>
          <!-- <el-button type="text" @click="hookLook(scope.row)">{{ scope.row.customerName }}</el-button> -->
        </template>
      </el-table-column>


      <!-- <el-table-column label="状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" >正常</el-tag>
          <el-tag v-if="scope.row.status === 2" type="warning">暂停</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="客户简称" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span type="text" >{{ scope.row.shorterName }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="可用余额" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.balance | toThousandFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column label="累计充值" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.balance | toThousandFilter }}</span> -->
        </template>
      </el-table-column>
      <el-table-column label="累计消费" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.balance | toThousandFilter }}</span> -->
        </template>
      </el-table-column>

      <el-table-column label="授信额度" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.creditAmount  / 0.0001 / 10000 | toThousandFilter}}</span>
        </template>
      </el-table-column>
<!-- 
      <el-table-column label="当前费用" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.currentAmount }}</span>
        </template>
      </el-table-column> -->

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


      <el-table-column label="操作" fixed="right" width="131" align="center">
        <template slot-scope="scope">
          <el-button size="small" class="classitem" type="primary" plain icon="el-icon-plus" @click="handleritemAdd(scope.row)">加款</el-button>        
          <!-- <el-button size="small" class="classitem" type="primary" plain icon="el-icon-plus" @click="handlerAdd(scope.row)">明细</el-button>         -->
        </template>
      </el-table-column>

    </el-table>

       <el-dialog title="客户明细" :visible.sync="detailVisible" fullscreen center>
        <el-form ref="detail" :model="detail" :rules="rules2" label-width="80px" size="small" label-position="right">
          <el-card  shadow="never" >
            <div slot="header" class="clearfix">
              <span class="topClass">账户信息</span>
            </div>
            <div>
              <div class="flex_supplier">
                  <div class="flex_width">
                    <span class="flex_Name">客户名称:</span>
                    <span class="flex_Number">{{detail.customerName | toThousandFilter}}</span>
                  </div>
                  <div class="flex_width">
                    <span class="flex_Name">可用余额:</span>
                    <span class="flex_Number">{{detail.balance | toThousandFilter}}</span>
                  </div>
              </div>
              <div class="flex_supplier">
                  <div class="flex_width">
                    <span class="flex_Name">授信额度:</span>
                    <span class="flex_Number">{{detail.creditAmount / 0.0001 / 10000 | toThousandFilter}}</span>
                  </div>
                  <div class="flex_width">
                    <span class="flex_Name">累计充值:</span>
                    <span class="flex_Number">{{detail.currentAmount | toThousandFilter}}</span>
                  </div>
              </div>
              <div class="flex_supplier">
                  <div class="flex_width">
                    <span class="flex_Name">累计消费:</span>
                    <!-- <span class="flex_Number">{{detail.creditAmount | toThousandFilter}}</span> -->
                  </div>
                  <div>
                    <!-- <span class="flex_Name">累计充值:</span>
                    <span class="flex_Number">{{detail.currentAmount}}</span> -->
                  </div>
              </div>
            </div> 
          </el-card> 
             <el-card  shadow="never" >
            <div slot="header" class="clearfix">
              <span class="topClass">账户交易记录</span>
            </div>
            <div>
              <div class="AddButton">
              <el-button type="primary" plain icon="el-icon-plus" @click="handlerAdd(detail)">加款</el-button>
              <el-button type="danger" plain icon="el-icon-bank-card" @click="creditAmountAdd">信用额度调整</el-button>
              </div>
              <div>
                   <el-table  :data="detailTableData" stripe 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="120" align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <!-- <el-button type="text" @click="hookLook(scope.row)">{{ scope.row.customerName }}</el-button> -->
                                <span>{{scope.row.customerName }}</span>
                              </template>
                            </el-table-column>
                        <el-table-column label="加款金额" width="160"  align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <span>{{ scope.row.amount / 10000 | toThousandFilter}}</span>
                              </template>
                            </el-table-column>
                          
                              <el-table-column label="出款账户"  width="160"  align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <span>{{ scope.row.paymentAccount | toThousandFilter }}</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.account }}</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="银行卡" width="190"  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.payer }}</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="凭证" width="120"  align="center">
                              <template slot-scope="scope">
                                <el-image 
                                  style="width: 100px; height: 80px"
                                  :src="scope.row.certificate" 
                                  :preview-src-list="new Array(scope.row.certificate)">
                                </el-image>
                              </template>
                            </el-table-column>
                        
                            
                            <el-table-column label="加款时间" width="190" align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <span>{{ scope.row.time }}</span>
                              </template>
                            </el-table-column>
                          

                            <el-table-column label="操作" fixed="right" min-width="200" align="center">
                              <template slot-scope="scope">
                                <!-- <el-button size="small" class="classitem" type="primary" plain icon="el-icon-plus" @click="handlerAdd(scope.row)">加款</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-edit" type="danger" v-if="scope.row.undo == 0" plain @click="handleRevocation(scope.row)">撤销</el-button>
                              </template>
                            </el-table-column>
                    </el-table>
                    <div class="pagination">
                      <el-pagination
                        current-page.sync="info.current"
                        :current-page="info.current"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="info.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        background
                        :total="detailTotal"
                        @size-change="detailHandleSizeChange"
                        @current-change="detailHandleCurrentChange"
                      />
                    </div>
              </div>
            </div> 
          </el-card> 
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="detailVisible = false">取 消</el-button>
          <el-button type="primary" @click="onVisible">确 定</el-button>
        </div>
      </el-dialog>


      <!-- <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="120" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-button type="text" @click="hookLook(scope.row)">{{ scope.row.customerName }}</el-button>
                </template>
              </el-table-column>
           <el-table-column label="加款金额" width="110" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.amount / 10000 }}</span>
                </template>
              </el-table-column>
                <el-table-column label="帐号余额" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.balance }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="授信额度" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.creditAmount }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="当前费用" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.currentAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="出款账户" width="110"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.paymentAccount }}</span>
                </template>
              </el-table-column>
                 <el-table-column label="开户行"  width="170" 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.account }}</span>
                </template>
              </el-table-column>
              <el-table-column label="银行卡" width="190"  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.payer }}</span>
                </template>
              </el-table-column>
              <el-table-column label="凭证" width="120"  align="center">
                <template slot-scope="scope">
                  <el-image 
                    style="width: 100px; height: 80px"
                    :src="scope.row.certificate" 
                    :preview-src-list="new Array(scope.row.certificate)">
                  </el-image>
                </template>
              </el-table-column>
           
              
              <el-table-column label="加款时间" width="190" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.time }}</span>
                </template>
              </el-table-column>
            

              <el-table-column label="操作" fixed="right" min-width="300" align="center">
                <template slot-scope="scope">
                  <el-button size="small" class="classitem" type="primary" plain icon="el-icon-plus" @click="handlerAdd(scope.row)">加款</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-edit" type="danger" v-if="scope.row.undo == 0" plain @click="handleRevocation(scope.row)">撤销</el-button>
                </template>
              </el-table-column>
      </el-table> -->
      
        <!-- 新增加款 -->
        <el-dialog :title="operation?'新增加款':'编辑加款'" :visible.sync="dialogFormVisible" width="55%" center>
          <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
                <el-form-item label="客户" prop="relationId" :label-width="formLabelWidth"  >
                  <el-select v-model="dataForm.relationId" :disabled="true" filterable @change="onclick(dataForm.relationId)"  clearable  placeholder="请选择客户" style="width:100%">
                    <el-option
                      v-for="item in userList"
                      :key="item.relationId"
                      :label="item.customerName"
                      :value="item.relationId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="银行卡" prop="cardNo"  :label-width="formLabelWidth"  >
                  <el-select v-model="dataForm.cardNo" filterable :disabled="!operation" clearable  placeholder="请选择银行卡" value-key="id" @change="changeSel" style="width:100%">
                    <el-option
                      v-for="item in card"
                      :key="item.id"
                      :label="item.cardNo"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
                  <!-- <el-form-item label="开户行" prop="bankDeposit" :label-width="formLabelWidth"  >
                  <el-input v-model="dataForm.bankDeposit" placeholder="请输入供应商账户" />
                </el-form-item> -->
                  <el-form-item label="加款金额" prop="amount" :label-width="formLabelWidth"  >
                  <el-input v-model="dataForm.amount" :disabled="!operation" placeholder="请输入加款金额" />
                </el-form-item>
                <el-form-item label="出款账户" :label-width="formLabelWidth"  >
                  <el-input v-model="dataForm.paymentAccount" :disabled="!operation" placeholder="请输入出款账户" />
                </el-form-item>
                  <!-- <el-form-item label="凭证" :label-width="formLabelWidth"  >
                  <el-input v-model="dataForm.certificate" placeholder="请输入凭证" />
                </el-form-item> -->
                <el-form-item label="凭证" prop="imgUrl" :label-width="formLabelWidth">
                      <el-upload
                  ref = "upload"
                  action="#"
                  list-type="picture-card"       
                  :on-change="handleDownload"
                  :file-list="fileList"
                  :limit="1"
                  :auto-upload="false">
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                      <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url" alt=""
                      >
                      <!-- //图片三个按钮事件 -->
                      <span class="el-upload-list__item-actions">
                          <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                          >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                              class="el-upload-list__item-delete"
                              @click="handleRemove(file)"
                              >
                              <i class="el-icon-delete"></i>
                          </span>
                      
                      </span>
                      </div>
                  </el-upload>
                  
                  <el-dialog :visible.sync="dialogDspaly" width="75%" :modal="false">
                  <img width="100%" :src="dialogImageUrl" >
                  </el-dialog>
                  </el-form-item> 
                
                  <!-- <el-form-item label="备注" :label-width="formLabelWidth"  >
                  <el-input v-model="dataForm.distinguish" placeholder="请输入备注" />
                </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>

         <!-- 授信 -->
        <el-dialog :title="detail.customerName + '的信用额度调整'" :visible.sync="creditAmountVisible" width="55%" center>
          <el-form ref="AmountForm" :model="AmountForm" :rules="Amount" label-width="80px" size="small" label-position="right">
                <el-form-item label="信用额度调整" prop="creditAmount" :label-width="formLabelWidth"  >
                  <el-input v-model="AmountForm.creditAmount"  placeholder="请输入信用额度" />
                </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="creditAmountVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAmount">确 定</el-button>
          </div>
        </el-dialog>




        <!-- 详情 -->
      <el-dialog title="详情" :visible.sync="dataFormVisible" width="55%" center>
        <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
              <el-form-item label="客户" prop="cardNo" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.customerName" disabled></el-input>
              </el-form-item>
              <el-form-item label="全称" prop="account" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.account" placeholder="请输入" disabled/>
              </el-form-item>
              <el-form-item label="银行卡" prop="cardNo" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.cardNo" disabled></el-input>
              </el-form-item>
                <el-form-item label="开户行" prop="bankDeposit" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.bankDeposit" disabled placeholder="请输入供应商账户" />
              </el-form-item>
                <el-form-item label="加款金额" prop="amount" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.amount" disabled placeholder="请输入加款金额" />
              </el-form-item>
               <el-form-item label="出款账户" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.paymentAccount" disabled placeholder="请输入出款账户" />
              </el-form-item>
                <el-form-item label="加款人" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.payer" disabled placeholder="加款人" />
                </el-form-item>
              <el-form-item label="凭证" prop="imgUrl"  :label-width="formLabelWidth">
                  <el-image 
                    style="width: 200px; height: 200px"
                    :src="dataForm.certificate" 
                    :preview-src-list="new Array(dataForm.certificate)">
                  </el-image>
                </el-form-item> 
               
                <!-- <el-form-item label="备注" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.distinguish" placeholder="请输入备注" />
              </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dataFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dataFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

         <!-- 分页 -->
    <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>


  </div>
</template>

<script>
import api from '@/api/userList'
export default {
  data() {
    return {
      loading:false,
      tableData:[],
       body:{
          size:10,
          current:1,
          // customerId:""
      },
       total:0,
      dataForm:{
        distinguish:2,
        type:"customer"
      },
      rules2:{
            relationId: [{ required: true, message: '请选择客户', trigger: 'blur' } ],
            cardNo: [{ required: true, message: '请选择银行卡', trigger: 'blur' } ],
            amount: [{ required: true, message: '请输入加款', trigger: 'blur' } ],
      },
      Amount:{
            creditAmount:[{ required: true, message: '请输入授信额度', trigger: 'blur' }]
      },
      userList:[],
      operation:false,
      dialogFormVisible:false,
      formLabelWidth:"120px",
      dialogImageUrl:"",   //图片地址
      dialogDspaly:false,
      // options1: [],
        // value:[],
        imgurl:"",
        // packet:[],
        // redenvelopesVOS:[],
        fileList:[],
        url:"",
        urlList:[],
        card:[],
        cardNo:"",
        dataFormVisible:false,
        detailVisible:false,
        detail:{},
        detailTableData:[],
        info:{
          size:10,
          current:1,
          // relationId:""
        },
        detailTotal:0,
        AmountForm:{},
        creditAmountVisible:false,
        buttonLoading:false,
    }
  },
  created(){
    this.user()
    this.reLoad()
  },
  methods: {
    //选择客户出发银行卡
    onclick(row){
      this.bankcardURL(row)
       this.dataForm.account = ""
      this.dataForm.bankDeposit = ""
      this.dataForm.cardNo = ""
    },
    //银行卡
    bankcardURL(row){
      let distinguish = {
        distinguish:2,
        relationId:Number(row)
        // relationId:row
        }
         const params = new URLSearchParams()
      params.append('distinguish', 2)
      params.append('relationId', row)
      api.account.bankcard(params).then((res)=>{
        this.card = res.data.data
        console.log(this.card)
      })
    },
    //银行卡下拉选择
    changeSel(row){
      this.dataForm.account = row.account
      this.dataForm.bankDeposit = row.bankDeposit
      this.dataForm.cardNo = row.cardNo
    },
    //客户名称
    user(){
      let user = "{customerName}"
      api.account.userList().then((res) => {
        this.loading =false
        let userList = res.data.data
        userList.map((res)=>{
          // let user = {
          //   relationId:res.customerId,
          //   customerName:res.customerName
          // }
          res.relationId = res.customerId.toString()
          delete res.customerId
          return res
        })
        this.userList = userList
      })
    },
    //表格数据
    reLoad(){
      this.loading = true
       api.index.Search(this.body).then((res) => {
        this.loading =false
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
      // api.account.Search(this.body).then((res) => {
      //   this.loading =false
      //   this.tableData = res.data.data.records
      //   this.total = res.data.data.total
      // })
    },
    //明细刷新数据
    onVisible(){
      this.reLoad()
      this.detailVisible = false
    },
    //查看
    hookLook(row){
      let code = JSON.parse(JSON.stringify(row)) 
      code.amount = code.amount / 10000
      this.dataForm = code
      this.dataFormVisible = true
    },
    //明细分页
    handlerLook(row){
      let info = this.info
      let body={
          size:info.size,
          current:info.current,
          relationId:row
        }
       api.account.Search(body).then((res) => {
        this.detailTableData = res.data.data.records
        this.detailTotal = res.data.data.total
      })
    },
    //明细
    handleritemAdd(row){
       this.detailVisible = true,
       this.detail = JSON.parse(JSON.stringify(row))
       this.handlerLook(this.detail.customerId)
       console.log(row)
    },
    //授信
    creditAmountAdd(){
        this.creditAmountVisible = true
        this.AmountForm = {}
    },
    //授信额度API 
    submitAmount(){
      let that = this
    this.$refs['AmountForm'].validate((valid) => {
      if (valid) {
        that.$confirm('是否确定授信额度', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
          let creditAmount=this.AmountForm.creditAmount   
          let customerId = this.detail.customerId
          console.log(creditAmount)
          console.log(customerId)
          api.account.creditAmount(customerId,creditAmount).then((res)=>{
            this.creditAmountVisible = false
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.detail.creditAmount =creditAmount 
            this.reLoad()
          })
        })
      }
    })
    },
     //新增
    // handleradd(row){
    //   this.operation = true // true:新增, false:编辑
    //         this.dialogFormVisible = true // 控制弹出框
    //         let list = JSON.parse(JSON.stringify(row))
    //         console.log(list)
    //         this.dataForm = list
    //         // this.dataForm = {}
    //         this.imgurl = ""
    //         this.fileList=[]   //图片
    //         this.card = []    //银行卡
    //         this.cardNo = ""
    //         if(this.$refs['dataForm']){
    //              this.$refs['dataForm'].resetFields();
    //         }
    // },
    //新增
    handlerAdd(row){
      this.operation = true // true:新增, false:编辑
            this.dialogFormVisible = true // 控制弹出框
            let list = JSON.parse(JSON.stringify(row))
            this.bankcardURL(list.customerId)
            console.log(list)
            list.relationId=list.customerId.toString()
            this.dataForm.amount = ""       //加款钱
            this.dataForm.certificate = ""  //凭证
            this.dataForm.paymentAccount = ""  //出款账户
            this.dataForm = list
            this.imgurl = ""
            this.fileList=[]   //图片
            this.cardNo = ""
            if(this.$refs['dataForm']){
                 this.$refs['dataForm'].resetFields();
            }
    },
    //编辑
    handleEdit(row){
      //图片的判断
      if(row.certificate){
            let obj=new Object()
            obj.url=row.certificate
            let list=new Array()
            list.push(obj)
            this.fileList=list
        }else{
            this.fileList=[]
        }
      
    
      let code = JSON.parse(JSON.stringify(row)) 
         code.amount = code.amount / 10000
         
      this.dataForm = code
      console.log(row)
      if(this.$refs['dataForm']){
            this.$refs['dataForm'].resetFields();
      }
      this.operation = false
      this.dialogFormVisible = true
    },
    //撤销
    handleRevocation(row){
       let code = JSON.parse(JSON.stringify(row))
            code.undo = 1
            code.type = "customer"
            let that = this
            that.$confirm('是否撤销该数据', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                api.account.revocation(code).then((res)=>{
                     if (res.status === 200) {
                        that.$message({
                            type: 'success',
                            message: '撤销成功'
                        })
                      this.handlerLook(this.detail.customerId)
                     } else {
                        that.$message({
                            type: 'error',
                            message: res.data.message
                        })
                     }
                })
            })    
    },
    //新增和修改API
      submitForm(){
        this.dataForm.distinguish=2
        this.dataForm.type="customer"
        // this.dataForm.undo = 0
          let dataForm = this.dataForm
        this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                  if (!this.operation) {
                    this.buttonLoading = true
                    api.account.paymentUpdate(dataForm).then(response => {
                      if (response.status === 200) {
                        this.$message({
                          type: 'success',
                          message: '操作成功'
                        })
                        this.dialogFormVisible = false
                        this.handlerLook(this.detail.customerId)
                      } else {
                        this.$message({
                          type: 'error',
                          message: response.data.msg
                        })
                      }
                    })
                    .finally(() => this.buttonLoading = false)
                  } else {
                    console.log(this.dataForm)
                  //   // 添加
                    this.buttonLoading = true
                    api.account.paymentAdd(dataForm).then(response => {
                      if (response.status === 200) {
                        this.$message({
                          type: 'success',
                          message: '操作成功'
                        })
                        this.dialogFormVisible = false
                        this.handlerLook(this.detail.customerId)
                      } else {
                        this.$message({
                          type: 'error',
                          message: response.data.msg
                        })
                      }
                    })
                   .finally(() => this.buttonLoading = false)
                  }
                }
              })
      },
     //清除图片
     handleRemove(file) {
        this.$refs.upload.clearFiles()
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        console.log(file)
        this.dialogDspaly = true;
      },
      handleDownload(event, file, fileList) {
        console.log(event)
        console.log(file)
        console.log(fileList)
        const params = new FormData()
        params.append('file', event.raw)
        api.account.Upload(params).then((res)=>{
          if(res.data.status == 200){
                let image=res.data.data
                this.dataForm.certificate=image
                console.log(res)
            }else{
                this.$notify.error({
                title: '错误',
                message: res.data.message
                });
            } 
        })


      },   
        //搜索
    Search() {
        if(this.body.customerName == "所有客户"){
         this.body.customerName = ""
         }
      this.body.current = 1
      this.reLoad()
    },
    //页码
    handleSizeChange(val) {
      this.body.size = val
      this.reLoad()
    },
    //换页
    handleCurrentChange(val) {
      this.body.current = val
      this.reLoad()
    },
     detailHandleSizeChange(val) {
      this.info.size = val
      this.handlerLook(this.detail.customerId)
    },
    //换页
    detailHandleCurrentChange(val) {
      this.info.current = val
      this.handlerLook(this.detail.customerId)
    },
  },

}
</script>

<style >
.el-upload-list__item {
  transition: none !important;
}
.flex_supplier{
  width: 90%;
  margin: 0px auto 30px;
  display: flex;
  flex-direction: row;
  /* justify-content:space-evenly; */
}
.flex_width{
  width: 65%;
  /* border: 1px solid red; */
  margin-left: 100px;
}
.flex_Name{
   font-size: 15px;
     font-weight: 600;
     color:rgb(87, 86, 86)
}
.flex_Number{
  font-weight: 600;
    margin-right: 20px;
    font-weight: 500px;
    font-size: 20px;
    color:salmon
}
.AddButton{
  display: flex;
  justify-content:flex-end;
  margin-right: 50px;
  margin-bottom: 20px;
}
.el-card {
    border: 0px solid #e6ebf5;
    margin-top: 10px;
    }
</style>