<template>
  <el-dialog
    :title="!dataForm.projectId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">


    <el-form-item label="立项名称" prop="project">
      <el-input v-model="dataForm.project" placeholder="立项名称"></el-input>
    </el-form-item>
      <el-form-item label="新立项名称" prop="project" v-if="isUpdate">
        <el-input v-model="dataForm.projectNewName===dataForm.project?'':dataForm.projectNewName" placeholder="新立项名称"></el-input>
      </el-form-item>

      <el-form-item label="建设单位" prop="projectJsdwId">
        <el-select
          :disabled="dataForm.approval===1"
          v-model="dataForm.projectJsdwId"
          placeholder="建设单位"
        >
          <el-option
            v-for="item in projectJsdwList"
            :key="item.dictId"
            :label="item.name"
            :value="item.dictId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年份" prop="projectYear">
        <el-date-picker
          :disabled="dataForm.approval===1"
          v-model="dataForm.projectYear"
          type="date"
          value-format="yyyy"
          placeholder=“选择年份” />
      </el-form-item>
      <el-form-item label="开工时间" prop="projectStart">
        <el-date-picker
          :disabled="dataForm.approval===1"
          v-model="dataForm.projectStart"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder=“选择日期” />
      </el-form-item>
      <el-form-item label="竣工时间" prop="projectEnd">
        <el-date-picker
          :disabled="dataForm.approval===1"
          v-model="dataForm.projectEnd"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder=“选择日期” />
      </el-form-item>
    <el-form-item label="施工地点" prop="projectSgddId">
      <el-select
        :disabled="dataForm.approval===1"
        v-model="dataForm.projectSgddId"
        placeholder="施工地点"
      >
        <el-option
          v-for="item in projectSgddList"
          :key="item.dictId"
          :label="item.name"
          :value="item.dictId"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="工程类别" prop="projectGclbIdList">
      <el-select
        :multiple="true"
        :disabled="dataForm.approval===1"
        v-model="dataForm.projectGclbIdList"
        placeholder="工程类别"
      >
        <el-option
          v-for="item in projectGclbList"
          :key="item.dictId"
          :label="item.name"
          :value="item.dictId"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="施工进度" prop="projectSgjdId">
      <el-select
        :disabled="dataForm.approval===1"
        v-model="dataForm.projectSgjdId"
        placeholder="施工进度"
      >
        <el-option
          v-for="item in projectSgjdDict"
          :key="item.dictId"
          :label="item.name"
          :value="item.dictId"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="内容简要" prop="projectNrjy">
      <el-input v-model="dataForm.projectNrjy" placeholder="内容简要"></el-input>
    </el-form-item>

      <el-form-item label="现场照片1" prop="projectPhoto1">
        <el-upload
          :disabled="dataForm.approval===1"
          class="avatar-uploader"
          :headers="headers"
          accept="image/jpeg,image/jpg,image/png"
          :action="imageUploaderUrl"
          :show-file-list="false"
          :on-success="handleImageSuccess1">
          <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
          <img v-else-if="isUpdate && imageBase641" :src="imageBase641">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="现场照片2" prop="projectPhoto2">
        <el-upload
          :disabled="dataForm.approval===1"
          class="avatar-uploader"
          :headers="headers"
          accept="image/jpeg,image/jpg,image/png"
          :action="imageUploaderUrl"
          :show-file-list="false"
          :on-success="handleImageSuccess2">

          <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
          <img v-else-if="isUpdate && imageBase642" :src="imageBase642">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="现场照片3" prop="projectPhoto3">
        <el-upload
          :disabled="dataForm.approval===1"
          class="avatar-uploader"
          :headers="headers"
          accept="image/jpeg,image/jpg,image/png"
          :action="imageUploaderUrl"
          :show-file-list="false"
          :on-success="handleImageSuccess3">

          <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
          <img v-else-if="isUpdate && imageBase643" :src="imageBase643">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {cloneDeep} from 'lodash'

  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          projectId: 0,
          projectJsdwId: '',
          projectJsdwName: '',
          projectYear: '',
          project: '',
          projectNewName: '',
          projectSgddId: '',
          projectSgdd: '',
          projectGclbId: '',
          projectGclbIdList: [],
          projectGclb: '',
          projectSgjdId: '',
          projectSgjd: '',
          projectTqId: '',
          projectTq: '',
          projectNrjy: '',
          status: 0,
          createTime: '',
          updateTime: '',
          createName: '',
          projectStart: '',
          projectEnd: '',
          projectPhoto1: '',
          projectPhoto2: '',
          projectPhoto3: '',
          projectPhotoConut: 0
        },
        pdataForm: {},
        dataRule: {
          projectJsdwId: [
            { required: true, message: '建设单位id不能为空', trigger: 'blur' }
          ],
          projectJsdwName: [
            { required: true, message: '建设单位名称不能为空', trigger: 'blur' }
          ],
          projectYear: [
            { required: true, message: '年份不能为空', trigger: 'blur' }
          ],
          project: [
            { required: true, message: '项目名称不能为空', trigger: 'blur' }
          ]
        },
        isUpdate: false,
        projectJsdwList: [],
        projectSgddList: [],
        projectGclbList: [],
        projectSgjdDict: {},
        imageUploaderUrl: '',
        imageUrl1: '',
        imageUrl2: '',
        imageUrl3: '',
        imageBase641: '',
        imageBase642: '',
        imageBase643: '',
        headers: {}
      }
    },
    methods: {
      init (id, projectJsdwList, projectSgddList, projectGclbList, projectSgjdDict, domain, token) {
        this.isUpdate = false
        this.dataForm.projectId = id || 0
        this.visible = true
        this.imageUrl1 = ''
        this.imageUrl2 = ''
        this.imageUrl3 = ''
        this.projectJsdwList = projectJsdwList
        this.projectSgddList = projectSgddList
        this.projectGclbList = projectGclbList
        this.projectSgjdDict = projectSgjdDict
        this.dataForm.projectGclbIdList = []
        this.dataForm.projectPhotoConut = 0
        this.imageUploaderUrl = domain + 'sys/oss/upload?categoryType=scenePhoto'
        this.headers.token = token
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.projectId) {
            this.isUpdate = true
            this.$http({
              url: this.$http.adornUrl(`/business/businessproject/info/${this.dataForm.projectId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.projectJsdwId = data.businessProject.projectJsdwId
                this.dataForm.projectJsdwName = data.businessProject.projectJsdwName
                this.dataForm.projectYear = data.businessProject.projectYear
                this.dataForm.project = data.businessProject.project
                this.dataForm.projectSgddId = data.businessProject.projectSgddId
                this.dataForm.projectSgdd = data.businessProject.projectSgdd
                this.dataForm.projectGclbId = data.businessProject.projectGclbId
                this.dataForm.projectGclb = data.businessProject.projectGclb
                this.dataForm.projectSgjdId = data.businessProject.projectSgjdId
                this.dataForm.projectSgjd = data.businessProject.projectSgjd
                this.dataForm.projectTqId = data.businessProject.projectTqId
                this.dataForm.projectTq = data.businessProject.projectTq
                this.dataForm.projectNrjy = data.businessProject.projectNrjy
                this.dataForm.status = data.businessProject.status
                this.dataForm.createTime = data.businessProject.createTime
                this.dataForm.updateTime = data.businessProject.updateTime
                this.dataForm.createName = data.businessProject.createName
                this.dataForm.projectStart = data.businessProject.projectStart
                this.dataForm.projectEnd = data.businessProject.projectEnd
                this.dataForm.projectPhoto1 = data.businessProject.projectPhoto1
                this.dataForm.projectPhoto2 = data.businessProject.projectPhoto2
                this.dataForm.projectPhoto3 = data.businessProject.projectPhoto3
                this.dataForm.projectNewName = data.businessProject.projectNewName
                data.businessProject.projectGclbId.split(',').forEach((item) => {
                  this.dataForm.projectGclbIdList.unshift(parseInt(item))
                })

                // 获取图片base64
                this.$http.request({
                  url: this.$http.adornUrl('/sys/oss/list?filePath=' + this.dataForm.projectPhoto1),
                  method: 'get'
                }).then(({data}) => {
                  this.imageBase641 = data.replace(/[\r\n]/g, '')
                })
                this.$http.request({
                  url: this.$http.adornUrl('/sys/oss/list?filePath=' + this.dataForm.projectPhoto2),
                  method: 'get'
                }).then(({data}) => {
                  this.imageBase642 = data.replace(/[\r\n]/g, '')
                })
                this.$http.request({
                  url: this.$http.adornUrl('/sys/oss/list?filePath=' + this.dataForm.projectPhoto3),
                  method: 'get'
                }).then(({data}) => {
                  this.imageBase643 = data.replace(/[\r\n]/g, '')
                })

                this.pdataForm = cloneDeep(this.dataForm)
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.projectId) {
              this.$http({
                url: this.$http.adornUrl(`/business/businessproject/save`),
                method: 'post',
                data: this.$http.adornData({
                  'projectId': this.dataForm.projectId || undefined,
                  'projectJsdwId': this.dataForm.projectJsdwId,
                  'projectJsdwName': this.dataForm.projectJsdwName,
                  'projectYear': this.dataForm.projectYear,
                  'project': this.dataForm.project,
                  'projectSgddId': this.dataForm.projectSgddId,
                  'projectSgdd': this.dataForm.projectSgdd,
                  'projectGclbId': this.dataForm.projectGclbIdList.join(','),
                  'projectGclb': this.dataForm.projectGclb,
                  'projectSgjdId': this.dataForm.projectSgjdId,
                  'projectSgjd': this.dataForm.projectSgjd,
                  'projectTqId': this.dataForm.projectTqId,
                  'projectTq': this.dataForm.projectTq,
                  'projectNrjy': this.dataForm.projectNrjy,
                  'status': '0',
                  'createTime': this.dataForm.createTime,
                  'updateTime': this.dataForm.updateTime,
                  'createName': this.dataForm.createName,
                  'projectStart': this.dataForm.projectStart,
                  'projectEnd': this.dataForm.projectEnd,
                  'projectPhoto1': this.dataForm.projectPhoto1,
                  'projectPhoto2': this.dataForm.projectPhoto2,
                  'projectPhoto3': this.dataForm.projectPhoto3,
                  'projectNewName': this.dataForm.project,
                  'approval': '0',
                  'isTotal': '0',
                  'isContant': '0',
                  'projectPhotoConut': this.dataForm.projectPhotoConut
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.visible = false
                      this.$emit('refreshDataList')
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
            } else {
              // 立项是否修改
              if (JSON.stringify(this.pdataForm) !== JSON.stringify(this.dataForm)) {
                this.dataForm.projectGclbId = this.dataForm.projectGclbIdList.join(',')
                this.$http({
                  url: this.$http.adornUrl(`/business/businessapproval/save`),
                  method: 'post',
                  data: this.$http.adornData({
                    'approvalId': this.dataForm.projectId,
                    'approvalName': this.dataForm.projectNewName,
                    'approvalOldData': JSON.stringify(this.pdataForm),
                    'approvalData': JSON.stringify(this.dataForm),
                    'approvalType': '3',
                    'approvalSuccess': '1'
                  })
                }).then(({data}) => {
                  if (data && data.code === 0) {
                    this.$message({
                      message: '操作成功',
                      type: 'success',
                      duration: 1500,
                      onClose: () => {
                        this.visible = false
                        this.$emit('refreshDataList')
                      }
                    })
                  } else {
                    this.$message.error(data.msg)
                  }
                })
              }
            }
          }
        })
      },

      // 图片上传成功的回调
      handleImageSuccess1 (res, file) {
        if (res && res.code === 0) {
          this.imageUrl1 = URL.createObjectURL(file.raw)
          this.dataForm.projectPhoto1 = res.data
          this.dataForm.projectPhotoConut += 1
        }
      },
      handleImageSuccess2 (res, file) {
        if (res && res.code === 0) {
          this.imageUrl2 = URL.createObjectURL(file.raw)
          this.dataForm.projectPhoto2 = res.data
          this.dataForm.projectPhotoConut += 1
        }
      },
      handleImageSuccess3 (res, file) {
        if (res && res.code === 0) {
          this.imageUrl3 = URL.createObjectURL(file.raw)
          this.dataForm.projectPhoto3 = res.data
          this.dataForm.projectPhotoConut += 1
        }
      }
    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
