<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-12-05 13:22:34
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-20 18:30:17
 * @FilePath: src/views/snapshot/components/transferViolationDialog.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div>
    <!-- 违章弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        label-width="120px"
        :rules="dialogRules"
        :disabled="isDialogDetail"
      >
        <el-row style="display: flex;flex-direction: row">
          <el-form-item label="违章工程" prop="proId">
            <el-select v-model="dialogForm.proId" disabled placeholder="请选择违章工程" clearable @change="changePro"
                       filterable
            >
              <el-option v-for="item in violationProOpts" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="责任承包商" prop="consId">
            <el-select v-model="dialogForm.consId" placeholder="请选择责任承包商" clearable @change="changCons"
                       filterable
            >
              <el-option
                v-for="item in responsibilityContractorOpts"
                :key="item.valueUuid"
                :label="item.label"
                :value="item.valueUuid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="承包商负责人" prop="personId">
            <el-input v-model="dialogForm.personName" placeholder="请输入承包商负责人" disabled  v-no-whitespace/>
          </el-form-item>
        </el-row>
        <el-row style="display: flex;flex-direction: row">
          <el-form-item label="违章类型" prop="violationType">
            <el-select v-model="dialogForm.violationType" placeholder="请选择违章类型" clearable filterable
                       @change="changeViolationType"
            >
              <el-option v-for="item in violationTypeOpts" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="负责人" prop="directorId">
            <el-select v-model="dialogForm.directorId" placeholder="请选择负责人" clearable filterable
                       @change="changePerson"
            >
              <el-option v-for="item in leaderOpts" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="违章时间" prop="violationTime">
            <el-date-picker
              v-model="dialogForm.violationTime"
              type="date"
              placeholder="请选择违章时间"
              clearable
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              :picker-options="{ disabledDate: time => time.getTime() > Date.now() }"
            />
          </el-form-item>
        </el-row>
        <!-- 违章依据 -->
        <el-row :gutter="20">
          <el-form-item label="违章依据" prop="violationContent">
            <el-input
              type="textarea"
              v-model="dialogForm.violationContent"
              placeholder="请输入违章依据"
              clearable v-no-whitespace
              :autosize="{ minRows: 4, maxRows: 6 }"
              maxlength="300"
              show-word-limit
              style="width: 515px"
            />
          </el-form-item>
          <el-form-item label="上传图片" prop="violationPhoto">
            <el-upload
              action="#"
              accept="image/*"
              :auto-upload="false"
              list-type="picture-card"
              :file-list="dialogForm.violationPhoto"
              :on-change="handleUpFile"
              :on-exceed="handleExceedFile"
              :on-remove="handleDelete"
              :limit="9"
              :class="{ disabled: isDialogDetail || dialogForm.violationPhoto.length >= 9 }"
              :disabled="isDialogDetail"
              :multiple="true"
              :style="uploadStyle"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
           <span style="color: red"> 注：若无承包商或者负责人，请在承包商入场完成后再进行违章登记！</span>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="isDialogDetail" size="small" @click="dialogVisible = false">关 闭</el-button>
        <el-button v-if="!isDialogDetail" size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="!isDialogDetail" size="small" type="primary" @click="dialogConfirm" v-preventReClick="5000">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {
  addViolation,
  getConsByProIdSelect, getPersonByConsIdSelect,
  getTypeOfViolationSelect,
  getUnderConstructionProSelect, getViolationDetail
} from '@/api/violation/violation'
import uploadFile from '@/views/pro/admissionRequest/uploadFile.vue'
import { transferViolation } from '@/api/snapshot/snapshot'
import { lookFaceFile } from '@/utils/bonus'

export default {
  name: 'transferViolationDialog',
  components: { uploadFile },
  data() {
    return {
      row: {},
      dialogTitle: '新增',
      dialogVisible: false,
      isDialogDetail: false,
      dialogForm: {
        proId: '',
        proName: '', // 违章工程
        consId: '',
        consName: '', // 责任承包商
        supUuid: '',
        personId: '',
        personName: '', // 承包商负责人
        violationType: '', // 违章类型
        violationTypeName: '',
        directorId: '',
        directorName: '', // 负责人
        violationTime: '', // 违章时间
        violationContent: '', // 违章内容
        violationPhoto: [] // 违章照片
      },
      // 违章工程-下拉框
      violationProOpts: [],
      // 责任承包商-下拉框
      responsibilityContractorOpts: [],
      // 承包商负责人-下拉框
      contractorLeaderOpts: [],
      // 违章类型-下拉框
      violationTypeOpts: [],
      // 负责人-下拉框
      leaderOpts: [],
      sourceType: '1',
      dialogRules: {
        proId: [{ required: true, message: '请选择违章工程', trigger: 'change' }],
        consId: [{ required: true, message: '请选择责任承包商', trigger: 'change' }],
        personName: [{ required: true, message: '请选择承包商负责人', trigger: 'blur' }],
        violationType: [{ required: true, message: '请选择违章类型', trigger: 'change' }],
        directorId: [{ required: true, message: '请选择负责人', trigger: 'change' }],
        violationTime: [{ required: true, message: '请选择违章时间', trigger: 'blur' }],
        violationContent: [{ required: true, message: '请填写违章依据', trigger: 'blur' }],
        violationPhoto: [{ required: true, message: '请上传违章照片', trigger: 'change' }]
      },
      delIds: [],
      lookFaceFile: lookFaceFile()
    }
  },
  computed: {
    uploadStyle() {
      return {
        marginLeft: this.dialogForm.violationPhoto.length > 6 ? '0' : '0'
      }
    }
  },
  methods: {
    getTypeOfViolationSelect() {
      getTypeOfViolationSelect({ type: 2 }).then(response => {
        this.violationTypeOpts = response.data
      })
    },
    getUnderConstructionProSelect() {
      getUnderConstructionProSelect({ type: 2 }).then(response => {
        this.violationProOpts = response.data
      })
    },
    getConsByProIdSelect(params) {
      getConsByProIdSelect(params).then(response => {
        this.responsibilityContractorOpts = response.data
      })
    },
    getPersonByConsIdSelect(params) {
      getPersonByConsIdSelect(params).then(response => {
        this.leaderOpts = response.data
      })
    },
    // 打开违章弹框
    openDialog(row) {
      // lookFaceFile = lookFaceFile()
      console.log('row', row)
      this.getTypeOfViolationSelect()
      this.getUnderConstructionProSelect()
      this.row = row.data
      this.dialogTitle = row.dialogTitle
      this.dialogVisible = true
      setTimeout(() => {
        this.$refs.dialogForm.resetFields()
        this.dialogForm.personName = ''
        this.dialogForm.proId = row.data.proId
        this.dialogForm.proName = row.data.proName
        // this.dialogForm.violationPhoto = row.data.photoList
        this.dialogForm.violationPhoto = row.data.photoList.map(item => ({
          url: this.lookFaceFile + item.filePath,
          name: item.fileName,
          fileId: item.fileId
        }))
        this.dialogForm.violationContent = row.data.description
        this.getConsByProIdSelect({ proId: row.data.proId })
      }, 500)
    },
    // 违章弹框确定
    dialogConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          let formData = new FormData()
          this.dialogForm.violationPhoto.forEach((file) => {
            if (file.raw) {
              formData.append('files[]', file.raw)
            } else {
              formData.append('files[]', new Blob())
            }
          })
          let code = '转违章'
          this.dialogForm.violationId = ''
          this.dialogForm.snapshotId = this.row.snapshotId
          this.dialogForm.delIds = this.delIds.join(',')
          formData.append('params', JSON.stringify(this.dialogForm))
          transferViolation(formData).then(response => {
            if (response.code === 200) {
              this.$message.success(code + '成功')
              this.dialogVisible = false
              this.$emit('getList')
            }
          })
        } else {
          return false
        }
      })
    },
    changePro(val) {
      this.dialogForm.proName = this.violationProOpts.find(item => item.value === val).label
      this.dialogForm.consId = ''
      this.dialogForm.consName = ''
      this.dialogForm.directorId = ''
      this.dialogForm.directorName = ''
      this.getConsByProIdSelect({ proId: val })
    },
    changCons(val) {
      const selectedContractor = this.responsibilityContractorOpts.find(item => item.valueUuid === val)
      this.dialogForm.consName = selectedContractor.label
      this.dialogForm.personName = selectedContractor.name
      this.dialogForm.personId = selectedContractor.userId
      this.dialogForm.directorId = ''
      this.dialogForm.directorName = ''
      this.getPersonByConsIdSelect({ consUuid: val, proId: this.dialogForm.proId })
    },
    changePerson(val) {
      this.dialogForm.directorName = this.leaderOpts.find(item => item.value === val).label
      this.dialogForm.directorId = val
    },
    changeViolationType(val) {
      this.dialogForm.violationTypeName = this.violationTypeOpts.find(item => item.value === val).label
      this.dialogForm.violationType = val

    },
    handleUpFile(file, fileList) {
      if (file.size > 10 * 1024 * 1024) {
        setTimeout(() => {
          this.$message.error('上传图片大小不能超过10M')
        }, fileList.length + 100)
        // 删除超过10M的图片
        fileList.pop()
        return
      }
      // 超过9个文件 提示
      if (fileList.length > 9) {
        return
      }
      this.dialogForm.violationPhoto = fileList
    },
    handleExceedFile() {
      this.$message.warning('最多上传9张图片')
    },
    handleDelete(file, fileList) {
      if (file.fileId) {
        this.delIds.push(file.fileId)
      }
      this.dialogForm.violationPhoto = fileList
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;

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

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