<!-- 合同审核 -->
<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="hetong_name"
        label="合同名称"
        width="120">
        </el-table-column>
        <el-table-column
        prop="kehu_name"
        label="客户名称"
        width="">
        </el-table-column>
        <el-table-column
        prop="hetong"
        label="合同金额"
        width="100">
        </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="tijiao_time"
        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="60%"
      >
        <div style="width: 100%;">
          <el-form ref="form" :model="form" label-width="80px">
            <div style="display: flex;">
              <div style="flex: 1;">
                <el-form-item label="合同编码">
                  <el-input v-model="form.num" style="width: 60%;"></el-input>
                </el-form-item>
              </div>
              <div style="flex: 1;">
                <el-form-item label="合同名称">
                  <el-input v-model="form.hetongname" style="width: 60%;"></el-input>
                </el-form-item>
              </div>       
            </div>
            <div style="display: flex;">
              <div style="flex: 1;">
                <el-form-item label="客户名称">
                  <el-input v-model="form.name" style="width: 60%;"></el-input>
                </el-form-item>
              </div>
              <div style="flex: 1;">
                <el-form-item label="合同金额">
                  <el-input v-model="form.hetongjine" style="width: 60%;"></el-input>
                </el-form-item>
              </div>       
            </div>
            <div style="display: flex;">
              <div style="flex: 1;">
                <el-form-item label="签约时间">
                  <el-input v-model="form.time" style="width: 60%;"></el-input>
                </el-form-item>
              </div>
              <div style="flex: 1;">
                <el-form-item label="签约人员">
                  <el-input v-model="form.ryuan" style="width: 60%;"></el-input>
                </el-form-item>
              </div>       
            </div>
            <div style="display: flex;">
              <div style="flex: 1;">
                <el-form-item label="word文件">
                  <div style="width: 50px;height: 30px;border: 1px solid black;display: inline-block;">{{ form.imageUrl1 }}</div>
                  <span>下载</span>&nbsp; <span>预览</span>
                </el-form-item>
              </div>
              <div style="flex: 1;">
                <el-form-item label="pdf文件">
                  <div style="width: 50px;height: 30px;border: 1px solid black;display: inline-block;">{{ form.imageUrl2 }}</div>
                  &nbsp; <span>下载</span>&nbsp; <span>预览</span>
                </el-form-item>
              </div>       
            </div>
            <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:{
          num:'',
          hetongname:'',
          name:'',
          hetongjine:'',
          time:'',
          ryuan:'',
          imageUrl1:'',
          imageUrl2:'',
          remark:'',
        },
        tableData: [{index:'1',hetong_name:'采购合同',kehu_name:'黑龙江省大庆创伤医院',time:'2023-08-01',xiaoshou:'王哲',hetong:'30000',tijiao_time:'2023-08-01'}],
        dialogVisible:false,
      }
    },
    methods:{
      cahkan_click(row){
        this.dialogVisible = true
      },
      onSubmit(){
        console.log('11111');
      },
      handleSizeChange(){

      },
      handleCurrentChange(){
        
      }
    }
  }
</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>