<template>
  <div class="handleExamine height_100">
    <myView style="height: 100%;width: 100%;" position="row">
      <div slot="left" style="height: 100%;width:100%;padding: 20px 10px 0 10px;">
        <div>任务详情：</div>
        <el-divider></el-divider>

        <detailsPage :row="row"></detailsPage>


      </div>
      <div slot="right" style="height: 100%;width:100%;padding: 20px 10px 0 10px;">
        <div>审核：</div>
        <el-divider></el-divider>
        <template>
          <div >
            <el-form :model="form" status-icon ref="form" label-width="120px" class="demo-ruleForm" :disabled="row.disabled">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="审核附件：">
                    <myUpload :file-list="form.systemFileList" @on-change="onchangeFile" @on-remove="onRemove"
                      style="height: 185px;" :autoUpload="true" @on-dblclick="handleOndblclick"></myUpload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否返回修改：">
                    <el-switch v-model="form.ifBack" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="!form.ifBack">
                <el-col :span="12">
                  <el-form-item label="下一个审核人：">
                    <el-autocomplete v-model="form.nextAuditorName" value-key="name" v-SelectLazyLoading="personnelLoad"
                      :fetch-suggestions="querySearchPersonnel" placeholder="请输入审核人（外部审核人请直接输入邮箱）"
                      :trigger-on-focus="false" @select="handleSelectPersonnel" @blur="handleBlur(form.nextAuditorName)"
                      style="width: 100%;"></el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="截止时间：">
                    <el-date-picker v-model="form.deadLineTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                      placeholder="选择日期" style="width: 100%;">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="审核意见：">
                    <el-input type="textarea" :rows="3" v-model="form.description"
                      style="margin-bottom: 20px;"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>


            <div style="float: right;">
              <el-button type="primary" size="small" @click="sure">确 认</el-button>
            </div>

          </div>
        </template>
      </div>
    </myView>

    <detailsDialog ref="detailsDialog"></detailsDialog>
  </div>
</template>

<script>
import { personnelLoading } from '../mixins/index2'
import detailsPage from './detailsPage.vue'
import detailsDialog from './detailsDialog.vue'
export default {
  mixins: [personnelLoading],
  props: ['row'],
  components: {
    detailsPage,
    detailsDialog,
  },
  data() {
    return {
      form: {
        systemFileList: [],//文件数组
        ifBack: false,//是否返回修改
      },
    }
  },
  mounted() {

  },
  methods: {
    // 双击文件
    handleOndblclick(file) {

    },
    // 人员输入框失焦
    handleBlur(val) {
      if (this.form.nextAuditorName.includes('@')) {
        this.form.nextAuditor = val
      }
    },
    // 人员输入框选择
    handleSelectPersonnel(val) {
      this.form.nextAuditor=val.id
    },
    // 审核确认
    sure() {
      // 判断文件是否都上传完毕
      if (this.form.systemFileList && this.form.systemFileList.length > 0) {
        this.form.fileGuids = []
        for (let i = 0; i < this.form.systemFileList.length; i++) {
          if (this.form.systemFileList[i].guid) {
            this.form.fileGuids.push(this.form.systemFileList[i].guid)
          } else {
            this.$message.error('文件未全部上传，请耐心等待')
            return false
          }
        }
      } 
      if (this.form.nextAuditor) {
        if (this.form.nextAuditor.includes('@')) {//是邮箱为false
          this.form.ifInner = false
        } else {//是内部人员是id为true
          this.form.ifInner = true
        }
      }
      let params = {
        type: 5,//任务的类型，5任务审核任务
        taskId: this.row.id,//当前任务的id
        lastTaskId: this.row.id,//上一级任务的id
        ...this.form,
      }
      this.$api.addTaskAuditResult(params).then(res => {
        if (res.code == 200) {
          this.$message.success('提交审核成功')
        }
      })
    },
    // 上传的文件监听
    onchangeFile(file, fileList) {
      if (file.guid) {
        let index = this.form.systemFileList.findIndex(item => {
          return item.uid == file.uid
        })
        if (index != -1) {
          this.form.systemFileList.splice(index, 1, file)
        }
      } else {
        this.form.systemFileList.push(file.raw)
      }

    },
    // 删除上传的文件
    onRemove(file, fileList) {
      let index = this.form.systemFileList.findIndex(item => {
        return item.uid == file.uid
      })
      if (index != -1) {
        this.form.systemFileList.splice(index, 1)
      }
    },

  },
}
</script>

<style lang="scss">
.handleExamine {
  .el-divider--horizontal {
    margin: 10px 0;
  }
}
</style>
<style lang="scss" scoped>
.handleExamine {
  .upload_demo {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }


}
</style>