<template>
  <div class="L-assets-info">
    <div class="assets-info-top">
      <el-row style="margin: 10px 0;">
        <span class="top-title-box">基本信息</span>
      </el-row>
      <div class="assets-info-box">
        <el-form :model="form" :rules="rules" ref="form" label-width="170px" class="demo-ruleForm" label-position="right" :disabled="disabled">
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设地点" prop="jsdd">
                <el-input v-model="form.jsdd" placeholder="请输入建设地点"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目法人单位" prop="xmfrdwxz">
                <el-input v-model="form.xmfrdwxz" placeholder="请输入项目法人单位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重点发展产业" prop="prioritize">
                <el-input v-model="form.prioritize" placeholder="请输入重点发展产业"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目法人单位性质" prop="nature">
                <el-select v-model="form.nature" placeholder="请选择项目法人单位性质" style="width: 22.5rem;">
                  <el-option label="国企" value="国企"></el-option>
                  <el-option label="民企" value="民企"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设模式" prop="jsms">
                <el-select v-model="form.jsms" placeholder="请选择建设模式" style="width: 22.5rem;">
                  <el-option label="新供地实施" value="新供地实施"></el-option>
                  <el-option label="其他模式" value="其他模式"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="施工单位" prop="sgdw">
                <el-input v-model="form.sgdw" placeholder="请输入施工单位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目标签" prop="label">
                <el-input v-model="form.label" placeholder="请输入项目标签"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="设计单位" prop="sjdw">
                <el-input v-model="form.sjdw" placeholder="请输入设计单位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目负责人" prop="projectLeader">
                <el-input v-model="form.projectLeader" placeholder="请输入项目负责人"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="总投资额（万元）" prop="ztze">
                <el-input v-model.number="form.ztze" placeholder="请输入总投资额"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属功能区" prop="ssgnq">
                <el-select v-model="form.ssgnq" placeholder="请选择所属功能区" value-key="value" style="width: 22.5rem;">
                  <el-option v-for="dict in dict.type.ssgnq" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="施工许可证发放时间" prop="issuingTime">
                <el-input v-model="form.issuingTime" placeholder="请输入施工许可证发放时间"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="建设起止时间" prop="begainTime">
                <el-date-picker v-model="form.begainTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 22.5rem;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="竣工验收时间" prop="acceptanceTime">
                <el-input v-model="form.acceptanceTime" placeholder="请输入竣工验收时间"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="现状分类" prop="xzfl">
                <el-select v-model="form.xzfl" placeholder="请选择现状分类" style="width: 22.5rem;">
                  <el-option label="已建" value="已建"></el-option>
                  <el-option label="在建" value="在建"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设进度" prop="constructionProgress">
                <el-input v-model="form.constructionProgress" placeholder="请输入建设进度"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="项目法人单位简介" prop="unitIntroduction">
            <el-input v-model="form.unitIntroduction" type="textarea" resize="none" placeholder="请输入项目法人单位简介" :rows="5"></el-input>
          </el-form-item>
          <el-form-item label="项目简介" prop="introduction">
            <el-input v-model="form.introduction" type="textarea" resize="none" placeholder="请输入项目简介" :rows="5"></el-input>
          </el-form-item>
          <el-form-item label="项目代表性照片">
            <ImageUpload @update-fj="updateFj" />
            <el-dialog :visible.sync="dialogVisibletwo">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-row style="margin: 10px 0 ;padding-bottom: 50px; text-align: center;" v-if="pageType !== 'look'">
            <el-button type="danger" @click="sendBack">取消</el-button>
            <el-button type="primary" @click="newAssets" :loading="loading">保存</el-button>
          </el-row>
        </el-form>
        <el-row style="margin: 10px 0 ;padding-bottom: 50px; text-align: center;" v-if="pageType == 'look'">
          <el-button type="primary" @click="sendBack">返回</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getBasicInformationById, updateBasicInformation, createBasicInformation } from '@/api/ManageApi/index';
import ImageUpload from '@/components/ImageUpload';

export default {
  dicts: ['ssgnq'],
  props: ['pageType', 'id', 'queryData'],
  data() {
    return {
      form: {
        name: '',
        xmfrdwxz: '',
        nature: '',
        sgdw: '',
        sjdw: '',
        ztze: 0,
        ssgnq: '',
        begainTime: '',
        xzfl: '',
        jsdd: '',
        prioritize: '',
        jsms: '',
        label: '',
        projectLeader: '',
        phone: '',
        issuingTime: '',
        acceptanceTime: '',
        unitIntroduction: '',
        introduction: '',
        fj: ''
      },
      rules: {
        name: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
        jsdd: [{ required: true, message: '建设地点不能为空', trigger: 'blur' }],
        xmfrdwxz: [{ required: true, message: '项目法人单位不能为空', trigger: 'blur' }],
        prioritize: [{ required: true, message: '重点发展产业不能为空', trigger: 'blur' }],
        nature: [{ required: true, message: '项目法人单位性质不能为空', trigger: 'change' }],
        jsms: [{ required: true, message: '建设模式不能为空', trigger: 'change' }],
        sgdw: [{ required: true, message: '施工单位不能为空', trigger: 'blur' }],
        label: [{ required: true, message: '项目标签不能为空', trigger: 'blur' }],
        sjdw: [{ required: true, message: '设计单位不能为空', trigger: 'blur' }],
        projectLeader: [{ required: true, message: '项目负责人不能为空', trigger: 'blur' }],
        ztze: [{ required: true, message: '总投资额不能为空', trigger: 'blur' }],
        ssgnq: [{ required: true, message: '所属功能区不能为空', trigger: 'change' }],
        begainTime: [{ required: true, message: '建设起止时间不能为空', trigger: 'change' }],
        xzfl: [{ required: true, message: '现状分类不能为空', trigger: 'change' }],
        constructionProgress: [{ required: true, message: '建设进度不能为空', trigger: 'blur' }],
        unitIntroduction: [{ required: true, message: '项目法人单位简介不能为空', trigger: 'blur' }],
        introduction: [{ required: true, message: '项目简介不能为空', trigger: 'blur' }]
      },
      loading: false,
      disabled: false,
      dialogImageUrl: '',
      dialogVisibletwo: false
    };
  },
  mounted() {
    if (this.pageType === 'look') {
      this.getInfo(this.id);
      this.disabled = true;
    } else if (this.pageType === 'change') {
      this.getInfo(this.id);
      this.disabled = false;
    }
  },
  methods: {
    getInfo(id) {
      getBasicInformationById(id)
        .then(response => {
          this.form = response.data;
        });
    },
    // 新增或修改资产确认按钮
    newAssets() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          const formData = this.prepareFormData();
          if (this.pageType === 'change') {
            updateBasicInformation(formData)
              .then(response => {
                this.loading = false;
                this.$message.success('修改成功');
                this.$router.push({ name: 'ProjectDetails', params: this.queryData });
              });
          } else {
            createBasicInformation(formData)
              .then(response => {
                this.loading = false;
                this.$message.success('新增成功');
                this.$router.push({ name: 'ProjectDetails', params: this.queryData });
              });
          }
        } else {
          this.$message.warning('请填写完整信息！');
        }
      });
    },
    sendBack() {
      this.$router.push({ name: 'ProjectDetails', params: this.queryData });
    },
    prepareFormData() {
      return {
        id: this.id,
        name: this.form.name,
        xmfrdwxz: this.form.xmfrdwxz,
        nature: this.form.nature,
        sgdw: this.form.sgdw,
        sjdw: this.form.sjdw,
        ztze: parseFloat(this.form.ztze),
        ssgnq: parseInt(this.form.ssgnq),
        begainTime: this.formatDateRange(this.form.begainTime),
        xzfl: this.form.xzfl,
        jsdd: this.form.jsdd,
        prioritize: this.form.prioritize,
        jsms: this.form.jsms,
        label: this.form.label,
        projectLeader: this.form.projectLeader,
        phone: this.form.phone,
        issuingTime: this.form.issuingTime,
        acceptanceTime: this.form.acceptanceTime,
        unitIntroduction: this.form.unitIntroduction,
        introduction: this.form.introduction,
        fj: this.form.fj,
        createBy: '',
        createId: 0,
        createTime: '',
        updateBy: '',
        updateId: 0,
        updateTime: ''
      };
    },
    formatDateRange(dateRange) {
      if (!dateRange || dateRange.length !== 2) return '';
      const startDate = dateRange[0].toISOString().split('T')[0];
      const endDate = dateRange[1].toISOString().split('T')[0];
      return `${startDate} 至 ${endDate}`;
    },
    updateFj(url) {
      this.form.fj = url;
    }
  }
};
</script>

<style scoped>
.L-assets-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.assets-info-top {
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: .7rem 0;
  padding: .5rem;
  border-bottom: 1px solid #E5E5E5;
}

.top-title-box {
  width: auto;
  height: 0.88rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 500;
  font-size: 0.88rem;
  color: #3D424C;
  line-height: 0.88rem;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.assets-info-box {
  padding: 1rem;
}

.demo-ruleForm {
  width: 100%;
}
</style>