<template>
  <div class="app-container">
      <div class="filter-container" style="margin: 10px 0 10px 0">
        <span class="textSpan">供应商名称:</span>
        <el-select v-model="body.relationId" filterable  clearable  placeholder="请选择">
        <el-option
          v-for="item in userList"
          :key="item.relationId"
          :label="item.supplierName"
          :value="item.relationId">   
        </el-option>
      </el-select>
        <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="handlerAdd">加款</el-button>
      </div>
      <!-- 列表 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
          <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.supplierName }}</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="出款账户" 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="120" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.time }}</span>
                </template>
              </el-table-column>
            

              <el-table-column label="操作" fixed="right" 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>
                  <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="cardNo" :label-width="formLabelWidth"  >
                <el-select v-model="dataForm.relationId" :disabled="!operation" filterable  @change="onclick(dataForm.relationId)" clearable  placeholder="请选择客户" style="width:100%">
                  <el-option
                    v-for="item in userList"
                    :key="item.relationId"
                    :label="item.supplierName"
                    :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" :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" @click="submitForm">确 定</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.supplierName" 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'
import { supplierPaymentList,channelList,supplierPaymentAdd,supplierPaymentAnnul,supplierPaymentEdit,bankcardList } from '@/api/channelAdd'
export default {
  data() {
    return {
      loading:false,
      tableData:[],
       body:{
          size:10,
          current:1,
          relationId:""
      },
       total:0,
      dataForm:{
        distinguish:1,
        type:"customer"
      },
      rules2:{
            phoneNo: [{ 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
    }
  },
  created(){
    this.user()
    this.reLoad()
    // this.bankcardURL()
  },
  methods: {
      //选择供应商出发银行卡
    onclick(row){
      this.bankcardURL(row)
    },
    //银行卡
    bankcardURL(row){
      let distinguish = {
        distinguish:1,
        relationId:row
        }
        const params = new URLSearchParams()
      params.append('distinguish', 1)
      params.append('relationId', row)
      bankcardList(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}"
      channelList().then((res) => {
        this.loading =false
        let userList = res.data.data
        userList.map((res)=>{
          // let user = {
          //   relationId:res.customerId,
          //   customerName:res.customerName
          // }
          res.relationId = res.supplierId.toString()
          // res.customerName = res.supplierName
          delete res.supplierId
          // delete res.supplierName
          return res
        })
        this.userList = userList
      })
    },
    //表格数据
    reLoad(){
      this.loading = true
      supplierPaymentList(this.body).then((res) => {
        this.loading =false
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    //查看
    hookLook(row){
      let code = JSON.parse(JSON.stringify(row)) 
      code.amount = code.amount / 10000
      this.dataForm = code
      this.dataFormVisible = true
    },
    //新增
    handlerAdd(){
      this.operation = true // true:新增, false:编辑
            this.dialogFormVisible = true // 控制弹出框
            this.dataForm = {}
            this.imgurl = ""
            this.fileList=[]   //图片
            this.card = []    //银行卡
            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){
            row.undo = 1
            row.type = "supplier"
            let that = this
            that.$confirm('是否撤销该数据', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                supplierPaymentAnnul(row).then((res)=>{
                     if (res.status === 200) {
                        that.$message({
                            type: 'success',
                            message: '撤销成功'
                        })
                        that.reLoad()
                     } else {
                        that.$message({
                            type: 'error',
                            message: res.msg
                        })
                     }
                })
            })    
    },
    //新增和修改API
      submitForm(){
        this.dataForm.distinguish=1
        this.dataForm.type="supplier"
        // this.dataForm.undo = 0
          let dataForm = this.dataForm
        this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                  if (!this.operation) {
                    supplierPaymentEdit(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)
                  //   // 添加
                    supplierPaymentAdd(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
                        })
                      }
                    })
                  }
                }
              })
      },
     //清除图片
     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.msg
                });
            } 
        })


      },   
        //搜索
    Search() {
      this.body.current = 1
      this.reLoad()
    },
    //页码
    handleSizeChange(val) {
      this.body.size = val
      this.reLoad()
    },
    //换页
    handleCurrentChange(val) {
      this.body.current = val
      this.reLoad()
    }
  },

}
</script>

<style >
.el-upload-list__item {
  transition: none !important;
}
</style>