<template>
    <div class="container" style="padding: 30px;">     
      <el-table v-loading="loading" :data="laborlist">
        <el-table-column label="序号" align="center" type="index"  > </el-table-column>
        <el-table-column label="姓名" align="center" key="name" prop="name"  ></el-table-column>
        <el-table-column label="手机号" align="center" key="phone" prop="phone"  ></el-table-column>
        <el-table-column label="所需服务" align="center" key="service" prop="service"  ></el-table-column>
        <el-table-column label="所需人数" align="center" key="peopleNum" prop="peopleNum" width="150px"></el-table-column>
        <el-table-column label="备注说明" align="center" key="remark" prop="remark" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="提交时间" align="center" key="createTime" prop="createTime" >
          <template slot-scope="scope">
              <span v-if="scope.row.createTime">{{scope.row.createTime.slice(0,10) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="状态" align="center" key="status" prop="status" width="100" >
          <template slot-scope="scope">
            <span v-if="scope.row.status==0" style="color:#E6A23C">未审核</span>
            <span v-if="scope.row.status==1" style="color:#67C23A">已处理</span>
          </template>
        </el-table-column> 
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==0" size="mini" type="text" icon="el-icon-edit" @click="modify(scope.row,'edit')" >处理 </el-button>
            <el-button size="mini" type="text" icon="el-icon-view" @click="modify(scope.row,'senk')" >查看详情 </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="modify(scope.row,'del')" >删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>10"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-dialog :title="title" :visible.sync="unpassOpen" width="500px" append-to-body class="certclas" >
      <el-form ref="laborform" :model="laborform" :rules="rules" label-width="80px">
            <el-form-item  label="ID" prop="id">
              <el-input  v-model="laborform.id" disabled placeholder="请输入内容" />
            </el-form-item>
            <el-form-item  label="姓名" prop="name">
              <el-input  v-model="laborform.name" disabled placeholder="请输入内容" />
            </el-form-item>
            <el-form-item  label="手机号" prop="phone">
              <el-input  v-model="laborform.phone" disabled placeholder="请输入内容" />
            </el-form-item>
            <el-form-item  label="所需服务" prop="service">
              <el-input  v-model="laborform.service" disabled placeholder="请输入内容" />
            </el-form-item>
            <el-form-item  label="所需人数" prop="peopleNum">
              <el-input  v-model="laborform.peopleNum" disabled placeholder="请输入内容" />
            </el-form-item>
            <el-form-item  label="备注说明" prop="remark">
              <el-input  type="textarea" v-model="laborform.remark" disabled placeholder="请输入内容" />
            </el-form-item>
            <el-form-item v-if="title!='查看服务详情'" label="处理结果" prop="status">
              <el-select v-model="laborform.status" style="width:300px" >
                <el-option label="未处理" value="0">未处理</el-option>
                <el-option label="处理" value="1">处理</el-option>
              </el-select>
            </el-form-item>
          
         
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
    import {listlabor,getlaborbyId,dellabor,updatelabor} from "@/api/labor/index";
  
  
    export default {
      name: "peixunbaoming",
      data() {
        return {
          loading: false,
          laborlist: [],
          // 总条数
          total: 0,
         
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
          },
          unpassOpen:false,
          laborform:{id:'',name:'',phone:'',service:'',remark:'',status:'',peopleNum:''},
          title:'',
          rules:{}
        }
      },
      mounted(){
        this.getList()
      },
      methods: {
        getList() {
          this.loading = true;
          listlabor(this.queryParams).then(response => {
            this.laborlist = response.rows;
            this.total = response.total;
            this.loading = false;
          })
        },
        modify(row,type) {
            if(type=='edit'){
              this.unpassOpen=true;
              let {id,name,phone,service,peopleNum,remark,status}=row;
              this.laborform={id,name,phone,service,peopleNum,remark,status:status+''}
              this.title = "处理外包服务订单";
            }else if(type=='del'){
              this.$confirm('确定删除人力外包吗？', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
                dellabor(row.id).then(res=>{
                  this.$message.success('删除成功')
                  this.getList();
                })
               })
            } else if(type=='senk'){
              this.title = "查看服务详情";
              this.unpassOpen=true;
              let {id,name,phone,service,peopleNum,remark,}=row;
              this.laborform={id,name,phone,service,peopleNum,remark,}
            }
        },
        submitForm() {
          if(!this.laborform.status){
            this.$message.warning('请选择处理结果')
            return;
          }
          
          let  data={
                id: this.laborform.id,
                status: parseInt(this.laborform.status),
            }
            console.log('data---',data)
            // return;
            updatelabor(data).then(res=>{
                  this.$message.success('处理完成')
                  this.getList();
                  this.unpassOpen=false
            })
        },
        cancel(){
          this.unpassOpen=false
        }
      },  
    }
  </script>
  
  <style scoped>
  .certclas>>>.el-textarea.is-disabled .el-textarea__inner,.certclas>>>.el-input.is-disabled .el-input__inner{
    background-color:transparent;
    color:#606266 ;
  }
  </style>
  