<template>
  <div>
    <el-form :model="form" ref="achiRef" label-width="110px" :rules="rules">
      <el-row :gutter="10">
        <el-col :span="15">
          <el-form-item label="项目编号" prop="projectNumber">
            <el-input v-model="form.projectNumber" disabled placeholder="请输入项目编号" />
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="form.projectName" disabled placeholder="请输入项目名称" />
          </el-form-item>
        </el-col>
        <el-col :span="3" v-if="!isFlow">
          <el-button type="primary" size="mini" @click="openProject = true">选择项目</el-button>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数据年份" prop="dataYear">
            <el-input v-model="form.dataYear" placeholder="请输入数据年份" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="成果名称" prop="achiName">
            <el-input v-model="form.achiName" placeholder="请输入成果名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成果类型" prop="resultType">
            <el-row :gutter="20">
              <el-col :span="22">
                <el-select v-model="form.resultType" placeholder="请选择成果类型" :style="{ width: '100%' }" clearable>
                  <el-option v-for="dict in dict.type.cmc_achi_type" :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="比例尺或等级" prop="scaleGrade">
            <el-select v-model="form.scaleGrade" placeholder="请选择比例尺或等级" :style="{ width: '100%' }" clearable>
              <el-option v-for="dict in dict.type.cmc_scale_grade" :key="dict.value" :label="dict.label"
                :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件类型" prop="fileType">
            <el-input v-model="form.fileType" placeholder="请输入文件类型" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工作量" prop="workLoad">
            <el-input v-model="form.workLoad" placeholder="请输入工作量" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit" placeholder="请输入单位" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="数据来源" prop="dataSource" style="width:100%;">
            <el-input v-model="form.dataSource" placeholder="请输入数据来源" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据类型" prop="dataType">
            <el-select v-model="form.dataType" placeholder="请选择数据类型" style="width:100%;">
              <el-option label="原始数据" value="原始数据" />
              <el-option label="成果数据" value="成果数据" />
              <el-option label="过程数据" value="过程数据" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="存储地址" prop="storageAddress">
            <el-select v-model="form.storageAddress" reserve-keyword remote :remote-method="remoteMethod"
              placeholder="请选择" filterable allow-create clearable style="width:100%;">
              <el-option v-for="item, index in storageList" :key="index" :label="item.storageAddress"
                :value="item.storageAddress" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="KML地址" prop="kmlUrl">
            <div style="display: flex;">
              <div style="width:90%;">
                <el-input v-model="kmlFileName" placeholder="请选择Kml文件" disabled />
              </div>
              <div>
                <el-upload ref="uploadAchiKml" class="upload-demo" action="" :auto-upload="false"
                  :on-success="successUploadAchiKml" accept=".kml" :on-change="changeUploadKml" :show-file-list="false">
                  <el-button type="primary" icon="el-icon-plus"></el-button>
                </el-upload>
              </div>
            </div>

          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="生产日期" prop="productionTime">
            <el-date-picker v-model="form.productionTime" type="month" placeholder="选择日期" format="yyyy-MM"
              style="width:100%;" value-format="yyyy-MM" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提交时间" prop="submitDate">
            <el-date-picker v-model="form.submitDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
              style="width:100%;" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :max="250" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="text-center mt20">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="$emit('cancel')">取 消</el-button>
    </div>
    <el-dialog title="选择项目" :visible.sync="openProject" width="70%" append-to-body>
      <project-choose @chooseProject="confirmProject"></project-choose>
    </el-dialog>
  </div>
</template>

<script>
import { listAchievement, uploadAchievementSheet, addAchievement, updateAchievement, delAchievement } from "@/api/file/achievement";
import { listStorage } from "@/api/file/storage";
import projectChoose from '@/views/flowable/form/components/chooseProject.vue';

export default {
  components: {
    projectChoose
  },
  dicts: ['cmc_achi_type', 'cmc_scale_grade'],
  props: {
    project: {
      type: Object,
    },
    isFlow: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    project: {
      handler(newVal) {
        if (this.isFlow) {
          this.$set(this.form, 'projectId', newVal.projectId);
          this.$set(this.form, 'projectNumber', newVal.projectNumber);
          this.$set(this.form, 'projectName', newVal.projectName);
          this.$set(this.form, 'dataYear', newVal.projectNumber.slice(0, 4));
        }
      },
      immediate: true, // 立即生效
      deep: true  //监听对象或数组的时候，要用到深度监听
    },
  },
  data() {
    return {
      form: {},
      submitFormData: {},
      rules: {
        projectNumber: [{ required: true, message: "项目编号不能为空", trigger: "blur" }],
        achiName: [{ required: true, message: "成果名称不能为空", trigger: "blur" }],
        dataYear: [{ required: true, message: "数据年份不能为空", trigger: "blur" }],
        resultType: [{ required: true, message: "数据类型不能为空", trigger: "blur" }],
        scaleGrade: [{ required: true, message: "比例尺或等级不能为空", trigger: "blur" }],
      },
      kmlfile: undefined,
      kmlFileName: '',
      storageList: [],
      openProject: false,
    }
  },
  created() {
    this.getStorageList();
  },
  methods: {
    submitForm() {
      this.submitFormData = new FormData();
      this.submitFormData.append('uploadKmlFile', this.kmlfile);
      this.$refs["achiRef"].validate(valid => {
        if (valid) {
          for (let i in this.form) {
            this.submitFormData.append(i, this.form[i] == null ? "" : this.form[i]);
          }
          addAchievement(this.submitFormData).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$emit('getList');
            this.$emit('cancel');
          });
        } else {
          this.$modal.msgError("请完善必填项");
        }
      })
    },
    /* kml文件上传成功处理 */
    successUploadAchiKml(response, file, fileList) {
      this.$refs["uploadAchiKml"].clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
    },
    /* kml文件改变时 */
    changeUploadKml(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      this.kmlFileName = file.name;
      this.kmlfile = file.raw;
    },
    /* 获取存储地址列表 */
    getStorageList() {
      listStorage({ pageNum: 1, pageSize: 100 }).then(response => {
        this.storageList = response.rows;
      })
    },
    remoteMethod(val) {
      const storageAddress = val
      listStorage({ pageNum: 1, pageSize: 100, storageAddress }).then(response => {
        this.storageList = response.rows;
      })
    },
    confirmProject(val) {
      if (val.length > 1) {
        this.$message.error('请选择一个项目');
        return
      } else if (val.length == 1) {
        this.$set(this.form, 'projectNumber', val[0].projectNumber)
        this.$set(this.form, 'projectName', val[0].projectName)
        this.form.projectId = val[0].projectId
        this.$refs.achiRef.validateField('projectNumber')
        this.form.dataYear = val[0].projectNumber.substring(0, 4)
      }
      this.openProject = false
    },
  },
}
</script>

<style lang="scss" scoped></style>