<template>
  <div class="app-container">
    <div class="top-btn">
      <el-button type="primary" size="small" @click="preview">预览</el-button>
    </div>
    <el-tabs v-model="active">
      <!-- 违章处罚单 -->
      <el-tab-pane label="违章处罚单" name="1" v-if="!row.isRecord">
        <!-- 违章处罚单 -->
        <el-card class="box-card">
          <div slot="header" class="card-header">
            <span>违章处罚单</span>
          </div>
          <el-form ref="dialogForm" :model="dialogForm" label-width="120px" inline>
            <el-form-item label="处罚单号" prop="violationCode">
              <el-input v-model="dialogForm.violationCode" placeholder="请输入处罚单号" disabled />
            </el-form-item>
            <el-form-item label="受罚工程" prop="proName">
              <el-input v-model="dialogForm.proName" placeholder="请选择受罚工程" disabled />
            </el-form-item>
            <el-form-item label="受罚承包商" prop="consName">
              <el-input v-model="dialogForm.consName" placeholder="请选择受罚承包商" disabled />
            </el-form-item>
            <el-form-item label="责任人" prop="directorName">
              <el-input v-model="dialogForm.directorName" placeholder="请选择责任人" disabled />
            </el-form-item>
            <el-form-item label="承包商负责人" prop="personName">
              <el-input v-model="dialogForm.personName" placeholder="请选择承包商负责人" disabled />
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <el-form-item label="处罚原因" prop="punishmentReason">
                  <el-input
                    type="textarea"
                    v-model="dialogForm.punishmentReason"
                    placeholder="请输入处罚原因"
                    clearable v-no-whitespace
                    :autosize="{ minRows: 4, maxRows: 6 }"
                    maxlength="300"
                    show-word-limit
                    style="width: 515px"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="处罚依据" prop="punishmentBasis">
                  <el-input
                    type="textarea"
                    v-model="dialogForm.punishmentBasis"
                    placeholder="请输入处罚依据"
                    clearable v-no-whitespace
                    :autosize="{ minRows: 4, maxRows: 6 }"
                    maxlength="300"
                    show-word-limit
                    style="width: 515px"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="处罚金额" prop="money">
                  <div style="display: flex">
                    <el-input
                      v-model="dialogForm.money"
                      placeholder="请输入处罚金额"
                      clearable
                      style="width: 200px"
                      disabled
                    />
                    <div style="width: 100px; margin-left: 10px">元（人民币）</div>
                  </div>
                </el-form-item>
              </el-col>
              <!-- 处罚金额大写 -->
              <el-col :span="24" :offset="0">
                <el-form-item label="大写" prop="moneyUpper">
                  <el-input
                    v-model="dialogForm.moneyUpper"
                    placeholder="处罚金额大写"
                    disabled
                    style="width: 400px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="监督部们" prop="deptName">
                  <el-input v-model="dialogForm.deptName" placeholder="请选择监督部们" disabled />
                  <!--                  <el-select v-model="dialogForm.supervisionDepartment" placeholder="请选择监督部门" disabled>-->
                  <!--                    <el-option-->
                  <!--                      v-for="item in supervisionDepartmentOpts"-->
                  <!--                      :key="item.value"-->
                  <!--                      :label="item.label"-->
                  <!--                      :value="item.value"-->
                  <!--                    />-->
                  <!--                  </el-select>-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="签发人" prop="signerName">
              <el-input v-model="dialogForm.signerName" placeholder="请输入签发人" disabled />
            </el-form-item>
            <el-form-item label="监督人" prop="supervisorName">
              <el-input v-model="dialogForm.supervisorName" placeholder="请输入监督人" disabled />
              <!--              <el-select v-model="dialogForm.supervisor" placeholder="请选择监督人">-->
              <!--                <el-option v-for="item in supervisorOpts" :key="item.value" :label="item.label" :value="item.value" />-->
              <!--              </el-select>-->
            </el-form-item>
            <el-form-item label="发现人" prop="findName">
              <el-input v-model="dialogForm.findName" placeholder="请输入发现人" disabled />
            </el-form-item>
            <el-form-item label="接收人" prop="receiveName">
              <el-input v-model="dialogForm.receiveName" placeholder="请输入接收人" disabled />
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    type="textarea"
                    v-model="dialogForm.remark"
                    placeholder="请输入备注"
                    clearable
                    :autosize="{ minRows: 4, maxRows: 6 }"
                    maxlength="300"
                    show-word-limit
                    style="width: 515px"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 回传信息 -->
        <el-card class="box-card">
          <div slot="header" class="card-header">
            <span>回传信息</span>
          </div>
          <el-form ref="dialogForm" :model="dialogForm" label-width="120px" inline>
            <!-- 违章原因 -->
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <el-form-item label="违章原因" prop="violationReasonReply">
                  <el-input
                    type="textarea"
                    v-model="dialogForm.violationReasonReply"
                    placeholder="请输入违章原因"
                    clearable
                    :autosize="{ minRows: 4, maxRows: 6 }"
                    maxlength="1000"
                    show-word-limit
                    style="width: 515px"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="改进方法" prop="improvementContent">
                  <el-input
                    type="textarea"
                    v-model="dialogForm.improvementContent"
                    placeholder="请输入违章原因"
                    clearable
                    :autosize="{ minRows: 4, maxRows: 6 }"
                    maxlength="1000"
                    show-word-limit
                    style="width: 515px"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="改进照片" prop="improvedPhotoList">
                  <el-upload
                    action="#"
                    accept="image/*"
                    :auto-upload="false"
                    list-type="picture-card"
                    :file-list="dialogForm.improvedPhotoList"
                    :limit="9"
                    :multiple="true"
                    :class="{disabled:true}"
                    disabled
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="罚款上交凭证" prop="receiptOfFinePhotoList">
                  <el-upload
                    action="#"
                    accept="image/*"
                    :auto-upload="false"
                    list-type="picture-card"
                    :file-list="dialogForm.receiptOfFinePhotoList"
                    :limit="9"
                    :multiple="true"
                    :class="{disabled:true}"
                    disabled
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-tab-pane>
      <!-- 审批信息 -->
      <el-tab-pane label="审批信息" name="2">
        <div class="container" style="max-height: 750px; min-height: 500px; overflow-y: auto; padding: 10px">
          <img
            src="@/assets/file/no_data.png"
            alt="暂无数据"
            v-if="approvalItems.length === 0"
            style="position: absolute; top: 30%; left: 43%"
          />
          <bns-timeline-tabs
            :is-examine="true"
            :btn-show="row.isApprove"
            :show-type="row.isApprove ? 2 : 1"
            :show-position="2"
            :items="approvalItems"
            :final-check="row.finalCheck"
            v-on:pass="approvalPass"
            v-on:turnDown="approvalTurnDown"
            v-on:finalInstance="approvalFinalInstance"
            v-else
          ></bns-timeline-tabs>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="文件查看" :visible.sync="previewOpen" width="90%" append-to-body>
      <div style="width: 100%; height: 720px">
        <bns-kkFile-preview :items="filePreview"></bns-kkFile-preview>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BnsTimelineTabs from '@/components/pro-tabs/bns-timeline-tabs.vue'
import {getViolationPunishDetails, PreviewViolation } from '@/api/violation/violation'
import bnsKkFilePreview from '@/components/pro-tabs/bns-kkFile-preview.vue'
import { approvalHistory } from '@/api/terminalEquipment/deviceInformation'
import { getAuditPerson } from '@/api/pro/approval_cons'
import { submitPersonApproval } from '@/api/pro/subManagement/subList'
import { getMyToDoList, getMyToDoNum, lookFaceFile } from '@/utils/bonus'

export default {
  components: {
    bnsKkFilePreview,
    BnsTimelineTabs
  },
  data() {
    return {
      userType: this.$store.state.user.userType, // 用户类型
      userName: this.$store.state.user.userData.nickName, // 用户名
      row: {}, // 行数据
      active: '1', // 当前激活的标签页
      // 违章处罚单
      dialogForm: {},
      // 回传信息
      dialogForm2: {},
      // 审批信息
      showType: 2, // 1:审批记录 2:输入审批意见
      // 审批记录
      approvalItems: [],
      filePreview: {
        filePreviewUrl: '',
        fileName: ''
      },
      previewOpen: false,
      lookFaceFile: ''
    }
  },
  created() {
    this.lookFaceFile = lookFaceFile()
    console.log('🚀 ~ created-query:', this.$route.query)
    if (this.$route.query) {
      this.row = this.$route.query
      for (const key in this.row) {
        if (this.row[key] === 'true' || this.row[key] === 'false') {
          this.row[key] = JSON.parse(this.row[key])
        }
      }
      this.active = this.row.active || '1'
      console.log('🚀 ~ created ~ this.row:', this.row)
      // 修改面包屑名称
      const obj = Object.assign({}, this.$route, { title: this.row.title })
      this.$tab.updatePage(obj)
      this.getViolationDetail(this.row)
      this.approvalHistory()
    }
  },
  methods: {
    getViolationDetail(row) {
      getViolationPunishDetails({ violationId: row.violationId }).then(res => {
        console.log('🚀 ~ openDialog ~ res:', res)
        this.dialogForm = res.data
        this.dialogForm.receiptOfFinePhotoList = res.data.receiptOfFinePhotoList.map(item => {
          return {
            name: item.fileName,
            url: this.lookFaceFile + item.filePath
          }
        })
        this.dialogForm.improvedPhotoList = res.data.improvedPhotoList.map(item => {
          return {
            name: item.fileName,
            url: this.lookFaceFile + item.filePath
          }
        })
      })
    },
    approvalHistory(){
      approvalHistory({ taskId: this.row.taskId }).then(res => {
        console.log('🚀 ~ approvalHistory ~ res', res)
        this.approvalItems = res.data
      })
    },
    // 终审/通过/驳回
    handleFinal(type) {
      console.log('🚀 ~ 终审/通过/驳回 ~ type:', type)
    },
    // 关闭
    close() {
      this.$tab.closePage()
    },
    // 提交
    handleSubmit() {
      console.log('提交')
      if (this.row.isRectify) {
        this.$refs.rectificationForm.validate(valid => {
          if (valid) {
            console.log('整改方填写表单验证通过')
          } else {
            console.log('整改方填写表单验证失败')
            return false
          }
        })
      } else if (this.row.isDelay) {
        this.$refs.delayInfoForm.validate(valid => {
          if (valid) {
            console.log('延期信息表单验证通过')
          } else {
            console.log('延期信息表单验证失败')
            return false
          }
        })
      }
    },
    preview(){
      try {
        PreviewViolation({violationId: this.row.violationId}).then(res => {
          if (res.code === 200){
            console.log('🚀 ~ file: PunishFormDialog.vue ~ line 97 ~ getViolationDetail ~ res', res)
            this.filePreview = {
              filePreviewUrl: "punishSheet/"+ res.msg,
              fileName: "违章处罚单"
            }
            this.previewOpen = true
          }
        })
      }catch (e) {
        console.log('🚀 ~ file: PunishFormDialog.vue ~ line 99 ~ getViolationDetail ~ e', e)
      }
    },
    /** 审核通过*/
    approvalPass(e){
      const param = {
        reason:e,
        agree:"1"
      }
      this.approval(param,"审批通过")
    },
    /**审核驳回*/
    approvalTurnDown(e){
      const param = {
        ...e,
        agree:"2"
      }
      this.approval(param,"退回成功")
    },
    /**终审*/
    approvalFinalInstance(e){
      const param = {
        reason:e,
        agree:"3"
      }
      this.approval(param,"终审成功")
    },
    /**
     * 审批方法+
     * @param param
     * @param text
     */
    getMyToDoNum,
    approval(param,text){
      const params = {
        ...param,
        taskId: this.row.taskId,
        procInstId: this.row.procInsId,
        taskType: '13',
        uuid: this.row.violationId
      }
      submitPersonApproval(params).then(response => {
        this.getMyToDoNum()
        if (response.code === 200) {
          this.$message({
            message: text,
            type: 'success'
          })
          this.$tab.closePage();
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-btn {
  display: flex;
  justify-content: flex-end;
}

.box-card {
  margin: 20px 0;
}

.card-header {
  font-size: 16px;
  font-weight: 700;
}

.cont-width {
  width: 210px;
}

.cont-width-textarea {
  width: 450px;
}

.footer-btn {
  position: absolute;
  top: 90%;
  left: 80%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

::v-deep.disabled {
  .el-upload--picture-card {
    display: none;
  }
}
</style>
