<!--
 * @Author: ysh
 * @Date: 2025-01-10 13:41:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-01-10 14:54:37
-->
<template>
  <div>
    <el-form :model="modifyForm" ref="achiModifyRef" label-width="110px" :rules="modifyRules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目编号">
            <el-input :disabled="true" v-model="modifyForm.projectNumber" placeholder="请输入项目编号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成果名称" prop="achiName">
            <el-input v-model="modifyForm.achiName" placeholder="请输入成果名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="数据年份" prop="dataYear">
            <el-input v-model="modifyForm.dataYear" 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="modifyForm.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="modifyForm.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="modifyForm.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="modifyForm.workLoad" placeholder="请输入工作量" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="modifyForm.unit" placeholder="请输入单位" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="数据来源" prop="dataSource">
            <el-input v-model="modifyForm.dataSource" placeholder="请输入数据来源" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据类型" prop="dataType">
            <el-select v-model="modifyForm.dataType" placeholder="请选择数据类型">
              <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="modifyForm.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>
                <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="modifyForm.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="modifyForm.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="modifyForm.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="submitModifyForm">确 定</el-button>
      <el-button @click="$emit('cancel')">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { listAchievement, uploadAchievementSheet, addAchievement, updateAchievement, delAchievement } from "@/api/file/achievement";
import { listStorage } from "@/api/file/storage";
export default {
  dicts: ['cmc_achi_type', 'cmc_scale_grade'],
  props: {
    modifyForm: {
      type: Object,
    },
    isFlow: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    modifyForm: {
      handler(newVal) {
        this.kmlFileName = ""
        if (newVal.kmlUrl) {
          this.kmlFileName = newVal.kmlUrl.substring(newVal.kmlUrl.lastIndexOf('/') + 1);
        }
      },
      immediate: true, // 立即生效
      deep: true  //监听对象或数组的时候，要用到深度监听
    }
  },
  data() {
    return {
      kmlFileName: '',
      kmlfile: undefined,
      storageList: [],
      modifyRules: {
        projectId: [{ required: true, message: "项目编号不能为空", trigger: "change" }],
        achiName: [{ required: true, message: "成果名称不能为空", trigger: "blur" }],
        dataYear: [{ required: true, message: "数据年份不能为空", trigger: "blur" }],
        resultType: [{ required: true, message: "数据类型不能为空", trigger: "change" }],
        scaleGrade: [{ required: true, message: "比例尺或等级不能为空", trigger: "change" }],
      }
    }
  },
  created() {
    this.getStorageList();
  },
  methods: {

    /* kml文件改变时 */
    changeUploadKml(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      this.kmlFileName = file.name;
      this.kmlfile = file.raw;
    },
    /* 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 });
    },
    /* 修改确定按钮 */
    submitModifyForm() {
      this.submitFormData = new FormData();
      this.submitFormData.append('uploadKmlFile', this.kmlfile);
      this.$refs["achiModifyRef"].validate(valid => {
        delete this.modifyForm.params;
        for (let i in this.modifyForm) {
          this.submitFormData.append(i, this.modifyForm[i] == null ? "" : this.modifyForm[i]);
        }
        this.modifyForm.resultType = this.modifyForm.resultType.toString();
        this.modifyForm.scaleGrade = this.modifyForm.scaleGrade.toString();
        updateAchievement(this.submitFormData).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.$emit('getList');
          this.$emit('cancel');
        });
      })

    },
    /* 获取存储地址列表 */
    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;
      })
    },
  }
}
</script>

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