<template>
  <view>
    <Navbar :title="opt.title" />
    <div class="tabs" v-if="!opt.isRecord">
      <u-tabs :list="tabList" @click="handleTab" lineWidth="40"></u-tabs>
    </div>
    <div class="content">
      <div v-if="currentTab == 0">
        <u-form :model="formData" ref="uForm" labelWidth="auto" labelPosition="left">
          <Title title="处罚单信息" />
          <u-form-item label="处罚编号" prop="violationCode">
            <u-input v-model="formData.violationCode" placeholder="处罚编号" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="责任人" prop="directorName">
            <u-input v-model="formData.directorName" placeholder="责任人" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="受罚工程" prop="proName">
            <u-input v-model="formData.proName" placeholder="受罚工程" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="受罚承包商" prop="consName">
            <u-input v-model="formData.consName" placeholder="受罚承包商" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="承包商责任人" prop="personName">
            <u-input v-model="formData.personName" placeholder="承包商责任人" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="处罚原因" prop="punishmentReason">
            <u-textarea v-model="formData.punishmentReason" placeholder="处罚原因" autoHeight disabled></u-textarea>
          </u-form-item>
          <u-form-item label="处罚依据" prop="punishmentBasis">
            <u-textarea v-model="formData.punishmentBasis" placeholder="处罚依据" autoHeight disabled></u-textarea>
          </u-form-item>
          <u-form-item label="处罚金额" prop="money">
            <u-input v-model="formData.money" placeholder="处罚金额" border="bottom" disabled></u-input>
            元
          </u-form-item>
          <u-form-item label="大写" prop="moneyUpper">
            <u-input v-model="formData.moneyUpper" placeholder="大写" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="监督部门" prop="deptName">
            <u-input v-model="formData.deptName" placeholder="监督部门" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="签发人" prop="signerName">
            <u-input v-model="formData.signerName" placeholder="签发人" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="接收人" prop="receiveName">
            <u-input v-model="formData.receiveName" placeholder="接收人" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="监督人" prop="supervisorName">
            <u-input v-model="formData.supervisorName" placeholder="监督人" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="发现人" prop="findName">
            <u-input v-model="formData.findName" placeholder="发现人" border="bottom" disabled></u-input>
          </u-form-item>
          <u-form-item label="备注" prop="remark">
            <u-textarea v-model="formData.remark" placeholder="备注" autoHeight disabled></u-textarea>
          </u-form-item>
          <Title title="回传信息" />
          <u-form-item label="违章原因" prop="violationReasonReply">
            <u-textarea v-model="formData.violationReasonReply" placeholder="违章原因" autoHeight disabled></u-textarea>
          </u-form-item>
          <u-form-item label="改进方法" prop="improvementContent">
            <u-textarea v-model="formData.improvementContent" placeholder="改进方法" autoHeight disabled></u-textarea>
          </u-form-item>
          <u-form-item label="改进照片" prop="improvedPhotoList" labelPosition="top">
            <div class="img-wrap">
              <div class="img-item" v-for="(item, index) in formData.improvedPhotoList" :key="index">
                <u-image :src="item.url" width="28vw" height="100" @click="handleImg(item)" />
              </div>
            </div>
          </u-form-item>
          <u-form-item label="罚款上交凭证" prop="receiptOfFinePhotoList" labelPosition="top">
            <div class="img-wrap">
              <div class="img-item" v-for="(item, index) in formData.receiptOfFinePhotoList" :key="index">
                <div>
                  <u-image :src="item.url" width="43vw" height="100" @click="handleImg(item)" />
                </div>
              </div>
            </div>
          </u-form-item>
        </u-form>
      </div>
      <div v-else-if="currentTab == 1">
        <Title title="审批意见" />
        <u-textarea
          v-model="approvalOpinion"
          placeholder="请输入内容"
          count
          height="105"
          @blur="filter"
          :disabled="!opt.isApprove"
        />
        <Title title="审批记录" />
        <Steps :data="approvalRecordList" />
        <TabbarBtn
          v-if="opt.isApprove"
          :showBtn="opt.finalCheck != 0 ? true : false"
          @reject="appReject"
          @handlePermit="handleAppPermit"
          @handleEnd="handleAppEnd"
        />
      </div>
    </div>
    <u-loading-page :loading="isLoading" icon-size="39" style="z-index: 99999"></u-loading-page>
  </view>
</template>

<script>
import config from '@/config'
import { filterInput } from '@/utils/regular'
import Steps from 'pages/component/Steps'
import TabbarBtn from 'pages/projectApproval/component/TabbarBtn'
import { getViolationPunishDetails, approvalHistory, submitPersonApproval } from '@/api/hiddenDangerViolation'

export default {
  components: { Steps, TabbarBtn },
  data() {
    return {
      isLoading: false,
      opt: {},
      currentTab: 0,
      tabList: [{ name: '处罚单信息' }, { name: '审批信息' }],
      formData: {
        // 处罚单信息
        violationCode: '', // 处罚编号
        directorName: '', // 责任人
        proName: '', // 受罚工程
        consName: '', // 受罚承包商
        personName: '', // 承包商责任人
        punishmentReason: '', // 处罚原因
        punishmentBasis: '', // 处罚依据
        money: '', // 处罚金额
        moneyUpper: '', // 处罚金额大写
        deptName: '', // 监督部门
        signerName: '', // 签发人
        receiveName: '', // 接收人
        supervisorName: '', // 监督人
        findName: '', // 发现人
        remark: '', // 备注
        // 回传信息
        violationReasonReply: '', // 违章原因
        improvementContent: '', // 改进方法
        improvedPhotoList: [], // 改进照片
        receiptOfFinePhotoList: [] // 罚款上交凭证
      },
      approvalOpinion: '', // 审批意见
      approvalRecordList: [] // 审批记录
    }
  },
  onLoad(opt) {
    this.opt = JSON.parse(opt.params)
    this.currentTab = this.opt.isRecord ? 1 : 0
    console.log('🚀 ~ onLoad ~ this.opt', this.opt)
    this.getDetail()
    this.getApprovalHistory()
  },
  methods: {
    // 获取详情
    async getDetail() {
      this.isLoading = true
      try {
        const params = { violationId: this.opt.violationId }
        console.log('🚀 ~ getDetail ~ params', params)
        const res = await getViolationPunishDetails(params)
        console.log('🚀 ~ getDetail ~ res', res)
        this.formData = { ...this.formData, ...res.data }
        if (this.formData.improvedPhotoList.length > 0) {
          this.formData.improvedPhotoList.forEach(item => {
            item.url = config.fileUrl + item.url
          })
        }
        if (this.formData.receiptOfFinePhotoList.length > 0) {
          this.formData.receiptOfFinePhotoList.forEach(item => {
            item.url = config.fileUrl + item.url
          })
        }
      } catch (error) {
        console.log('🚀 ~ getDetail ~ error', error)
      } finally {
        this.isLoading = false
      }
    },
    // 获取审批记录
    async getApprovalHistory() {
      try {
        const params = { taskId: this.opt.taskId, checkType: this.opt.isRecord ? 2 : 1 }
        console.log('🚀 ~ 审批记录 ~ params:', params)
        const res = await approvalHistory(params)
        console.log('🚀 ~ 审批记录 ~ res:', res)
        this.approvalRecordList = res.data
      } catch (error) {
        console.log('获取审批记录失败', error)
      }
    },
    handleTab(item) {
      console.log('🚀 ~ handleTab ~ item', item)
      this.currentTab = item.index
    },
    // 过滤输入特殊字符
    filter() {
      this.approvalOpinion = filterInput(this.approvalOpinion)
    },
    // 预览图片
    handleImg(item) {
      console.log('🚀 ~ handleImg ~ item', item)
      uni.previewImage({
        urls: [item.url]
      })
    },
    // 审批驳回
    appReject(val) {
      console.log('审批驳回原因:', val)
      const params = {
        reason: this.approvalOpinion,
        rejectReason: val,
        agree: '2'
      }
      this.approval(params, '审批驳回')
    },
    // 审批通过
    handleAppPermit() {
      console.log('审批通过')
      const params = {
        reason: this.approvalOpinion,
        agree: '1'
      }
      this.approval(params, '审批通过')
    },
    // 审批结束
    handleAppEnd() {
      console.log('审批结束')
      const params = {
        reason: this.approvalOpinion,
        agree: '3'
      }
      this.approval(params, '审批通过')
    },
    async approval(param, text) {
      try {
        this.isLoading = true
        const params = {
          ...param,
          proId: this.opt.proId,
          taskId: this.opt.taskId,
          procInstId: this.opt.procInsId,
          taskType: this.opt.checkLevelId == '1' ? 14 : this.opt.checkLevelId == '2' ? 15 : 16,
          uuid: this.opt.violationId
        }
        console.log('🚀 ~ 审批 ~ params:', params)
        const res = await submitPersonApproval(params)
        console.log('🚀 ~ 审批 ~ res:', res)
        uni.showToast({
          title: text,
          icon: 'success',
          duration: 1500
        })
        setTimeout(() => {
          this.isLoading = false
          uni.navigateBack()
        }, 200)
      } catch (error) {
        this.isLoading = false
        console.log('🚀 ~ 审批 ~ error:', error)
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 20px;
  .img-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .img-item {
      margin: 5px 0;
    }
  }
}
</style>
