<template>
  <div class="app-container">
    <el-card style="float:left;width: 25%;">
    
  <el-table
    :data="recordList"
    
        fit
        stripe
        highlight-current-row
    style="width: 100%"
    @row-click="recorclickRow"
    >
    <el-table-column
      label="组织名称"
      width="180">
      <template slot-scope="scope">
       
      {{ scope.row.dept__name }}
          
      </template>
    </el-table-column>
      <el-table-column
      label="检查状态"
      width="180">
      <template slot-scope="scope">
       
       <el-tag size="medium">{{ scope.row.state }}</el-tag>
          
      </template>
    </el-table-column>
   
  </el-table>
   </el-card>
   <el-card class="box-card" style="float:right;width: 75%;">
     
 <el-table
    :data="inspectitemList"
        fit
        stripe
        highlight-current-row
    style="width: 100%">
    
    <el-table-column
      label="检查类别"
      width="180">
      <template slot-scope="scope">
       
     {{ scope.row.item_.cate_name }}
          
      </template>
    </el-table-column>
    <el-table-column
      label="检查要点"
      width="180">
      <template slot-scope="scope">
       
     {{ scope.row.item_.name }}
          
      </template>
    </el-table-column>
 <el-table-column
      label="检查类型"
      width="100">
      <template slot-scope="scope">
       
     {{ scope.row.item_.type }}
          
      </template>
    </el-table-column>
    <el-table-column
      label="取证要求"
      width="180">
      <template slot-scope="scope">
       
     {{ scope.row.item_.require }}
          
      </template>
    </el-table-column>
    
    <el-table-column
      label="检查人"
      width="180">
      <template slot-scope="scope" v-if="scope.row.checker_">
       
     {{ scope.row.checker_.name }}
          
      </template>
    </el-table-column>
     <el-table-column
      label="检查状态"
      width="150">
      <template slot-scope="scope" >
      <span v-if="scope.row.checked" style="color:green">已检查</span>
      <span v-else style="color:blue">未检查</span>
          
      </template>
    </el-table-column>
  
        <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            v-if="
               scope.row.checked == true
            "
            type="warning"
            size="small"
            @click="handcheckupdate(scope)"
            >编辑</el-button
          >
        <el-button    v-if="
              scope.row.checked == false
            "
          @click="handleCheck(scope)">提交结果</el-button>
      </template>
    </el-table-column>
   
  </el-table>

  <el-drawer
  title="任务检查"
  :before-close="handleClose"
  :visible.sync="dialog"
  direction="ltr"
  custom-class="demo-drawer"
  ref="drawer"
  >
  <div class="demo-drawer__content">
    <el-form :model="form">
      <el-form-item label="取证要求" v-if="inspectrecord.item_" :label-width="formLabelWidth">
        {{ inspectrecord.item_.require }}
      </el-form-item>
      <el-form-item label="巡查结果" :label-width="formLabelWidth">
        <el-select v-model="form.result" placeholder="请选择巡查结果">
          <el-option label="发现" value="发现"></el-option>
          <el-option label="未发现" value="未发现"></el-option>
          <el-option label="不适用" value="不适用"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="检查说明" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="form.note" autocomplete="off"></el-input>
      </el-form-item>
       <el-form-item label="文件列表" :label-width="formLabelWidth">
                <el-upload
               :action="upUrl"
          :before-upload="beforeUpload"
          :on-success="handleUpSuccess"
          :headers="upHeaders"
          ref="upload"
          multiple
          accept="image/*,.ppt,.pdf,.doc,.docx,.xls,.xlsx"
        >
          <el-button size="small" type="primary">上传文件</el-button>
           
        </el-upload>
      </el-form-item>
      <div
        v-for="(item, index) in fileList"
        v-bind:key="item.id"
        style="margin-top: 2px"
      >
        <i
          class="el-icon-delete"
          @click="deleteFile(index)"
          style="color: red"
        ></i>
        <el-link :href="item.path" target="_blank" type="primary">{{
          item.name
        }}</el-link>
      </div>
    </el-form>
    <div class="demo-drawer__footer">
      <el-button @click="cancelForm">取 消</el-button>
      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
    </div>
  </div>
</el-drawer>
   </el-card>
 </div>
</template>
<script>
import {getsubinspecttaskdep,getinspectrecordlist,updateinspectrecord,getinspectrecord} from "@/api/subinspecttask";
import { upUrl, upHeaders } from "@/api/file";
import Pagination from "@/components/Pagination";
import checkPermission from "@/utils/permission";


const mbersData = {
  checker:""
}
export default {
  components: { Pagination},
  
  data() {
    return {
      listLoading: true,
      dialog:false,
      recordList:[],
      inspectitemList:[],
      deptOptions:[],
      leaders:[],
      dialogType: "new",
      listQuery:{},
      inspectrecord:[],
      require:"",
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      fileList: [],

     table: false,
      dialog: false,
      loading: false,
      recordid:null,
      form: {
        id:null,
        note: '',
        result:'',
        imgs:[],
       
      },
      formLabelWidth: '80px',
      timer: null,

    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getsubinspecttaskdep();//主任务信息
  },
  methods: {
    checkPermission,
   
    
    
    //巡检的公司
     getsubinspecttaskdep() {
       console.log(this.id)
      getsubinspecttaskdep(this.id)
        .then((res) => {
          this.recordList = res.data;
          
        })
     
    },

   
    
    //点击组织弹出清单
     getinspectrecordlist() {
      getinspectrecordlist(this.listQuery)
        .then((res) => {
          this.inspectitemList = res.data;
          
        })
     
    },

    recorclickRow(row, col, e) {
      this.listLoading2 = true;
       this.listQuery = {pageoff:true, subtask: this.subtask, dept: row.dept }
      this.getinspectrecordlist();
    },
    handcheckupdate(scope)
    {
      
     
      this.dialog=true;
      getinspectrecord(scope.row.id).then((res) => {
          
          this.form.note=res.data.note;
          this.from.result=res.data.result;
          this.form.imgs=res.data.imgs;
          
        })
    },
    handleCheck(scope)
    {
      this.dialog=true;
      this.recordid=scope.row.id
      getinspectrecord(this.recordid).then((res) => {
          this.inspectrecord = res.data;
          
        })
    },

 handleUpSuccess(res, file, filelist) {
      this.fileList.push({
        id: res.data.id,
        name: res.data.name,
        path: res.data.path,
      });
      this.handleRemove(file);
    },
    handleRemove(file) {
      // 实现删除文件
      let fileList = this.$refs.upload.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 50;
      if (!isLt2M) {
        this.$message.error("单文件不能超过50MB!");
      }
      return isLt2M;
    },
    deleteFile(index) {
      this.$confirm("确定删除该文件, 是否继续?", { type: "error" })
        .then(() => {
          this.fileList.splice(index, 1);
        })
        .catch((e) => {});
    },
//提交结果
     handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {

        var files = [];
        for (var i = 0; i < this.fileList.length; i++) {
          files.push(this.fileList[i].id);
        }
        this.form.imgs = files;
        this.form.id=this.recordid;

         updateinspectrecord(this.recordid, this.form).then((res) => {
              if (res.code >= 200) {
               this.getinspectrecordlist();
               this.getsubinspecttaskdep()
                this.dialog = false;
                this.$message.success("成功");
              }
            });

        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    
  },


  
};
</script>