<template>
  <div>
    <div style="display: flex">
      <div style="width: 50%">
        <el-form :model="dataOldForm" ref="dataOldForm" label-width="80px">

          <el-form-item label="立项名称" prop="project">
            <el-input disabled style="width: 80%" v-model="dataOldForm.project" placeholder="暂无"></el-input>
          </el-form-item>
          <el-form-item label="新立项名称" prop="project">
            <el-input disabled style="width: 80%" v-model="dataOldForm.projectNewName===dataOldForm.project?'':dataOldForm.projectNewName" placeholder="暂无"></el-input>
          </el-form-item>

          <el-form-item label="建设单位" prop="projectJsdwId">
            <el-select
              disabled
              v-model="dataOldForm.projectJsdwId"
              placeholder="暂无"
            >
              <el-option
                v-for="item in dicJsdwList"
                :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
              v-model="dataOldForm.projectYear"
              type="date"
              value-format="yyyy"
              placeholder="暂无" />
          </el-form-item>
          <el-form-item label="开工时间" prop="projectStart">
            <el-date-picker
              disabled
              v-model="dataOldForm.projectStart"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="暂无" />
          </el-form-item>
          <el-form-item label="竣工时间" prop="projectEnd">
            <el-date-picker
              disabled
              v-model="dataOldForm.projectEnd"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="暂无" />
          </el-form-item>
          <el-form-item label="施工地点" prop="projectSgddId">
            <el-select
              disabled
              v-model="dataOldForm.projectSgddId"
              placeholder="暂无"
            >
              <el-option
                v-for="item in dicSgddList"
                :key="item.dictId"
                :label="item.name"
                :value="item.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="工程类别" prop="projectGclbIdList">
            <el-select
              disabled
              v-model="dataOldForm.projectGclbIdList"
              placeholder="暂无"
            >
              <el-option
                v-for="item in dicGclbList"
                :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
              v-model="dataOldForm.projectSgjdId"
              placeholder="暂无"
            >
              <el-option
                v-for="item in dicSgjdList"
                :key="item.dictId"
                :label="item.name"
                :value="item.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="内容简要" prop="projectNrjy">
            <el-input style="width: 80%;" disabled v-model="dataOldForm.projectNrjy" placeholder="暂无"></el-input>
          </el-form-item>

          <el-form-item label="现场照片1" prop="projectPhoto1">
            <el-upload
              disabled
              class="avatar-uploader"
              :headers="headers"
              accept="image/jpeg,image/jpg,image/png"
              :action="imageUploaderUrl"
              :show-file-list="false">
              <img :src="dataOldForm.projectPhoto1" class="avatar">
            </el-upload>
          </el-form-item>
          <el-form-item label="现场照片2" prop="projectPhoto2">
            <el-upload
              disabled
              class="avatar-uploader"
              :headers="headers"
              accept="image/jpeg,image/jpg,image/png"
              :action="imageUploaderUrl"
              :show-file-list="false">
              <img :src="dataOldForm.projectPhoto2" class="avatar">
            </el-upload>
          </el-form-item>
          <el-form-item label="现场照片3" prop="projectPhoto3">
            <el-upload
              disabled
              class="avatar-uploader"
              :headers="headers"
              accept="image/jpeg,image/jpg,image/png"
              :action="imageUploaderUrl"
              :show-file-list="false">

              <img :src="dataOldForm.projectPhoto3" class="avatar">
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div style="width: 50%">
        <el-form :model="dataForm" ref="dataForm" label-width="80px">

          <el-form-item label="立项名称" prop="project">
            <el-input disabled style="width: 80%" v-model="dataForm.project" placeholder="暂无"></el-input>
          </el-form-item>
          <el-form-item label="新立项名称" prop="project">
            <el-input disabled style="width: 80%" v-model="dataForm.projectNewName===dataForm.project?'':dataForm.projectNewName" placeholder="暂无"></el-input>
          </el-form-item>

          <el-form-item label="建设单位" prop="projectJsdwId">
            <el-select
              disabled
              v-model="dataForm.projectJsdwId"
              placeholder="暂无"
            >
              <el-option
                v-for="item in dicJsdwList"
                :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
              v-model="dataForm.projectYear"
              type="date"
              value-format="yyyy"
              placeholder="暂无" />
          </el-form-item>
          <el-form-item label="开工时间" prop="projectStart">
            <el-date-picker
              disabled
              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
              v-model="dataForm.projectEnd"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="暂无" />
          </el-form-item>
          <el-form-item label="施工地点" prop="projectSgddId">
            <el-select
              disabled
              v-model="dataForm.projectSgddId"
              placeholder="暂无"
            >
              <el-option
                v-for="item in dicSgddList"
                :key="item.dictId"
                :label="item.name"
                :value="item.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="工程类别" prop="projectGclbIdList">
            <el-select
              disabled
              v-model="dataForm.projectGclbIdList"
              placeholder="暂无"
            >
              <el-option
                v-for="item in dicGclbList"
                :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
              v-model="dataForm.projectSgjdId"
              placeholder="暂无"
            >
              <el-option
                v-for="item in dicSgjdList"
                :key="item.dictId"
                :label="item.name"
                :value="item.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="内容简要" prop="projectNrjy">
            <el-input style="width: 80%;" disabled v-model="dataForm.projectNrjy" placeholder="内容简要"></el-input>
          </el-form-item>

          <el-form-item label="现场照片1" prop="projectPhoto1">
            <el-upload
              disabled
              class="avatar-uploader"
              :headers="headers"
              accept="image/jpeg,image/jpg,image/png"
              :action="imageUploaderUrl"
              :show-file-list="false">
              <img :src="dataForm.projectPhoto1" class="avatar">
            </el-upload>
          </el-form-item>
          <el-form-item label="现场照片2" prop="projectPhoto2">
            <el-upload
              disabled
              class="avatar-uploader"
              :headers="headers"
              accept="image/jpeg,image/jpg,image/png"
              :action="imageUploaderUrl"
              :show-file-list="false">
              <img :src="dataForm.projectPhoto2" class="avatar">
            </el-upload>
          </el-form-item>
          <el-form-item label="现场照片3" prop="projectPhoto3">
            <el-upload
              disabled
              class="avatar-uploader"
              :headers="headers"
              accept="image/jpeg,image/jpg,image/png"
              :action="imageUploaderUrl"
              :show-file-list="false">
              <img :src="dataForm.projectPhoto3" class="avatar">
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="text-align: center">
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="pass()">通过</el-button>
        <el-button type="danger" @click="noPassed()">不通过</el-button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        projectId: '',
        project: '',
        projectNewName: '',
        projectJsdwId: '',
        projectYear: '',
        projectStart: '',
        projectEnd: '',
        projectSgddId: '',
        projectGclbId: '',
        projectSgjdId: '',
        projectNrjy: '',
        projectPhoto1: '',
        projectPhoto2: '',
        projectPhoto3: '',
        projectPhotoConut: '',
        isContant: '',
        status: 0,
        approval: '',
        isTotal: ''
      },
      dataOldForm: {
        projectId: '',
        project: '',
        projectNewName: '',
        projectJsdwId: '',
        projectYear: '',
        projectStart: '',
        projectEnd: '',
        projectSgddId: '',
        projectGclbId: '',
        projectSgjdId: '',
        projectNrjy: '',
        projectPhoto1: '',
        projectPhoto2: '',
        projectPhoto3: '',
        projectPhotoConut: '',
        isContant: '',
        status: 0,
        approval: '',
        isTotal: ''
      },
      dicSgjdList: [],
      dicSgddList: [],
      dicGclbList: [],
      dicJsdwList: [],
      pdataForm: {},
      isUpdate: false,
      imageUploaderUrl: '',
      imageUrl1: '',
      imageUrl2: '',
      imageUrl3: '',
      headers: {}
    }
  },
  methods: {
    getDataList (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.$http.request({
          url: this.$http.adornUrl('/business/businessapproval/info/' + id),
          method: 'get'
        }).then(({data}) => {
          const res = data.businessApproval
          // console.log(res);
          if (data && data.code === 0) {
            this.dataForm = {
              ...JSON.parse(res.approvalData)
            }
            this.dataOldForm = {
              ...JSON.parse(res.approvalOldData)
            }
            this.$http.request({
              url: this.$http.adornUrl('/sys/oss/list' + '?filePath=' + this.dataOldForm.projectPhoto1),
              method: 'get'
            }).then(({data}) => {
              this.dataOldForm.projectPhoto1 = data.replace(/[\r\n]/g, '')
            })
            this.$http.request({
              url: this.$http.adornUrl('/sys/oss/list' + '?filePath=' + this.dataOldForm.projectPhoto2),
              method: 'get'
            }).then(({data}) => {
              this.dataOldForm.projectPhoto2 = data.replace(/[\r\n]/g, '')
            })
            this.$http.request({
              url: this.$http.adornUrl('/sys/oss/list' + '?filePath=' + this.dataOldForm.projectPhoto3),
              method: 'get'
            }).then(({data}) => {
              this.dataOldForm.projectPhoto3 = data.replace(/[\r\n]/g, '')
            })
            this.$http.request({
              url: this.$http.adornUrl('/sys/oss/list' + '?filePath=' + this.dataForm.projectPhoto1),
              method: 'get'
            }).then(({data}) => {
              this.dataForm.projectPhoto1 = data.replace(/[\r\n]/g, '')
            })
            this.$http.request({
              url: this.$http.adornUrl('/sys/oss/list' + '?filePath=' + this.dataForm.projectPhoto2),
              method: 'get'
            }).then(({data}) => {
              this.this.dataForm.projectPhoto2 = data.replace(/[\r\n]/g, '')
            })
            this.$http.request({
              url: this.$http.adornUrl('/sys/oss/list' + '?filePath=' + this.dataForm.projectPhoto3),
              method: 'get'
            }).then(({data}) => {
              this.this.dataForm.projectPhoto3 = data.replace(/[\r\n]/g, '')
            })
          }
        })
        // 字典信息
        this.$http.request({
          url: this.$http.adornUrl('/business/businessdict/list'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            data.data.forEach((item) => {
              if (item.dictCode === 'work_place') { // 施工地点
                this.dicSgddList = item.children
              } else if (item.dictCode === 'work_type') { // 工程类别
                this.dicGclbList = item.children
              } else if (item.dictCode === 'work_tatus') { // 施工进度
                this.dicSgjdList = item.children
              } else if (item.dictCode === 'construction_unit') { // 建设单位
                this.dicJsdwList = item.children
              }
            })
          }
        })
      })
    },
    pass () {
      // console.log(this.dataForm);
      this.$http.request({
        url: this.$http.adornUrl('/business/businessapproval/pass'),
        method: 'post',
        params: this.$http.adornParams({
          'id': this.id,
          'approvalData': JSON.stringify(this.dataForm),
          'approvalType': 3
        })
      }).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)
        }
      })
    },

    noPassed () {
      this.$http.request({
        url: this.$http.adornUrl('/business/businessapproval/noPass'),
        method: 'post',
        params: this.$http.adornParams({
          'id': this.id,
          'approvalId': this.dataForm.projectId,
          'approvalType': 3
        })
      }).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)
        }
      })
    }
  }
}
</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>
