<template>
   <section class="staffBoxFlex">
       <div class="staffTitle">
           <strong>合同信息</strong>
           <!-- <em><i>编辑</i><i>保存</i></em> -->
       </div>
       <div class="staffContext staffContract">
             <!-- 内容区域 -->
            <section class="contentBox">
                <el-table :data="tableDataContract" ref="districtTable"  max-height="500" default-expand-all  row-key="id">
                    <el-table-column v-for="(item,index) in tableColumn" :key="index" :prop="item.prop" :label="item.label" :width="item.width" v-if="item.show">
                        <template slot-scope="scope">
                            <span v-if="item.prop=='attachment'">
                                <span v-if="scope.row.contractStatusDesc=='待完善'"><el-button type="text" @click="Edit(scope.row,2)">上传</el-button></span>
                                <span v-else><el-button type="text" @click="download(scope.row)">预览</el-button><el-button type="text" @click="download(scope.row)">下载</el-button></span>
                            </span>
                        
                            
                            <span v-else>{{scope.row[item.prop]}}</span>
                        </template>
                    </el-table-column>                    
                </el-table>
                <!-- 分页页签 -->
                <pages
                :total='params.total'
                :currentPage.sync='params.pageIndex'
                :pageSize='params.pageSize'
                @handleCurrentChangeSub="handleCurrentChange"
                @handleSizeChangeSub="handleSizeChange"
                ></pages>
            </section>
       </div>
   </section>
</template>
<script>
import {contractEmployeeListApi,contractDownloadLocalApi} from "@/api/staffApi.js"
export default {
    data(){
        return{
            params:{//搜索条件
                pageIndex:1,
                pageSize:10,
                id:'',
                keyword:'',             
                total:0
            },
            tableDataContract:[],
            tableColumn:[
              {prop:"name",label:"合同名称",width:"180",show:true},
              {prop:"aName",label:"甲方名称",width:"180",show:true},
              {prop:"bName",label:"乙方名称",width:"180",show:true},
              {prop:"dateRang",label:"合同有效期",width:"180",show:true},
              {prop:"contractStatusDesc",label:"合同状态",width:"180",show:true},
              {prop:"attachment",label:"合同电子文件",width:"",show:true},        
          ],
        }
    },
    mounted(){
      this.contractList()
    },
    methods:{
      contractList(){
         this.params.employeeId=this.$parent.$parent.staffinfo.id
         let obj2={domainId:this.$route.query.domainId}
          contractEmployeeListApi(this.params,obj2).then(response=>{
               if(response.data.data){
                   this.tableDataContract=response.data.data
                   this.params.total=response.data.total
               }
          })
      },
      handleCurrentChange(val){//分页切换页码
        console.log(val)
        this.params.pageIndex=val
        this.contractList()
      },
      handleSizeChange(val){//切换每页条数
        console.log(val)
        this.params.pageSize=val
        this.contractList()
     },
      Edit(row,flag){//编辑合同弹窗
        // this.showdialog=true         
        // this.$refs.popChildren.getTableRow(row, 1,flag);   
     }, 
     download(row){
        // if(row.id){
        //     contractDownloadLocalApi(row).then(response=>{//合同电子文件下载
        //         console.log('合同电子文件下载',response)
        //     })
        // }
        if(row.attachment){
            window.open(row.attachment)
        }
    },
    }
}
</script>
<style lang="scss">
 .staffBoxFlex{
     display: flex;
     flex-direction: column;
     .staffTitle{
         display: flex;
         justify-content: space-between;
         border-bottom: 1px solid #ebebeb;
         padding: 5px 0;
         margin-bottom: 10px;
         strong{
             color: #000;
             font-weight: normal;
         }
         em{
             margin-right:20px;
             i{color: #2e8ad7;margin-right:20px;cursor: pointer;}
         }
     }
    
 }   
</style>