<!-- 回款审核 -->
<template>
  <div class="context">
    <div>
      <el-table
        :data="tableData"
        border
        size='small'
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%;">
        <el-table-column
        type="index"
        label="序号"
        width="50">
        </el-table-column>
        <el-table-column
        prop="name"
        label="客户名称"
        width="">
        </el-table-column>
        <el-table-column
        prop="type"
        label="客户类型"
        width="120">
        </el-table-column>
        <el-table-column
        prop="time"
        label="签约时间"
        width="100">
        </el-table-column>
        <el-table-column
        prop="xiaoshou"
        label="销售"
        width="100">
        </el-table-column>
        <el-table-column
        prop="hetong"
        label="合同金额"
        width="100">
        </el-table-column>
        <el-table-column
        prop="huikuai"
        label="回款金额"
        width="130">
        </el-table-column>
        <el-table-column
        prop="address"
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button type="primary" @click="cahkan_click(scope.row)">详情</el-button>
          <!-- <el-button type="danger">删除</el-button> -->
        </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div style="margin-top: 20px;text-align: right;">
      <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
      </el-pagination>  
    </div>

    <!-- 弹窗 -->
    <div>
      <el-dialog
        title="回款审核"
        :visible.sync="dialogVisible"
        width="40%"
      >
        <div >
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="客户名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="回款金额">
              <el-input v-model="form.jine"></el-input>
            </el-form-item>
            <el-form-item label="回款信息">
              <el-input v-model="form.xinxi"></el-input>
            </el-form-item>
            <el-form-item label="回款日期">
              <el-input v-model="form.date"></el-input>
            </el-form-item>
            <el-form-item label="回款人员">
              <el-input v-model="form.personnel"></el-input>
            </el-form-item>
            <el-form-item label="回款凭证(上传付款回执图片)">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        queryInfo:{
            name: '',
            type: '',
            page: 1 ,
            pageSize: 10
        },
        form:{
          name:'',
          jine:'',
          xinxi:'',
          date:'',
          personnel:'',
          imageUrl:'',
          remark:'',
        },
        tableData: [{index:'1',name:'黑龙江省大庆创伤医院',type:'合同首付款',time:'2023-08-01',xiaoshou:'王哲',hetong:'30000',huikuai:'19800'}],
        dialogVisible:false,
      }
    },
    methods:{
      cahkan_click(row){
        this.dialogVisible = true
      },
      onSubmit(){
        console.log('222');
      },
      handleSizeChange(){

      },
      handleCurrentChange(){
        
      },
      handleAvatarSuccess(){

      },
      beforeAvatarUpload(){

      }
    }
  }
</script>
<style lang="scss" scoped>
  .context{
    padding: 20px 0;
    
  }

</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>