<template>
  <el-dialog :class="'fileImportDialog'" :visible.sync="isShow" width="800px" top="7%" :close-on-click-modal="false"
    :before-close="dialogBeforeClose">
    <el-form :model="fromDataRender" class="singledata" ref="single_form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称字段" prop="titlePara">
            <el-input v-model="fromDataRender.titlePara" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行政区划编码字段" prop="areaCodePara">
            <el-input v-model="fromDataRender.areaCodePara" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="11">
          <el-form-item label="几何类型" prop="type">
            <el-select
              v-model="fromDataRender.type"
              placeholder="请选择"
              :disabled="true"
            >
              <el-option
                v-for="item in geoTypeArr"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="第三方ID字段" prop="threeIdPara">
            <el-input v-model="fromDataRender.threeIdPara" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="第三方表名" prop="tableName">
            <el-input v-model="fromDataRender.tableName" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="fileType == 'Excel'">
        <el-col :span="12">
          <el-form-item label="中心经度字段" prop="lonPara">
            <el-input v-model="fromDataRender.lonPara"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中心纬度字段" prop="latPara">
            <el-input v-model="fromDataRender.latPara"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="fileType == 'Excel'">
        <el-col :span="24" v-show="fromDataRender.type != 0">
          <el-form-item label="点集字段">
            <el-input v-model="fromDataRender.locations"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="描述字段" prop="contentPara">
            <el-input v-model="fromDataRender.contentPara" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="text" style="float: right" @click="changeAdvancedOptionsStatue()">
          高级选项
          <i v-show="!advancedOptionsShow" class="el-icon-caret-bottom el-icon--right"></i>
          <i v-show="advancedOptionsShow" class="el-icon-caret-top el-icon--right"></i>
        </el-button>
        <!-- el-icon-caret-bottom -->
        <!-- el-icon-caret-top -->
      </el-row>
      <!-- 高级选项 table -->
      <div class="tableDiv" v-if="advancedOptionsShow">
        <el-table :data="listData" :class="['advanceOptionsTable']" max-height="250">
          <el-table-column label="名称">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="内容字段">
            <template slot-scope="scope">
              <el-input v-model="scope.row.paraName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单位">
            <template slot-scope="scope">
              <el-input v-model="scope.row.unit"></el-input>
            </template>
          </el-table-column>

          <el-table-column align="right">
            <template slot="header">
              <el-button size="mini" @click="addAdvancedOptionsRow()">
                <i class="el-icon-plus"></i>
              </el-button>
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="deleteAdvancedOptionsRow(scope.$index, scope)">
                <i class="el-icon-minus"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 高级选项 table end -->
    </el-form>

    <CenterLocation 
    v-bind="{
      isShow: isShowUpdateCenterDialog,
      center: centerPoint,
      beforeClose: beforeCloseUpdateCenterDialog,
      updateData: updateDataCenterLocation,
    }"
    ></CenterLocation>

    <span slot="title" class="dialog-title">
      <div class="title">
        <span>{{ title }}</span>
      </div>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogBeforeClose()">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import api from "@/api/content";
export default {
  components: {
    CenterLocation: () => import("@/components/Map/CenterLocation.vue"),
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    fileType: {
      type: String, // Excel Shapefile
    },
    beforeClose: {
      type: Function,
    },
    updateData: {
      type: Function,
    },
    modelParams: {
      type: Object,
      default: null,
    },
    file: {},
  },
  data() {
    return {
      fromDataRender: {
        // modelId:"",
        threeIdPara: "",
        tableName: "",
        type: 0,
        titlePara: "",
        contentPara: "",
        lonPara: "",
        latPara: "",
        locationPara: "",
        jsonStrPara: "",
        areaCodePara: "",
        richTextPara: "",
        extend1Para: "",
        extend2Para: "",
        extend3Para: "",
      },
      geoTypeArr: [
        {
          name: "点",
          value: 0,
        },
        {
          name: "线",
          value: 1,
        },
        {
          name: "面",
          value: 2,
        },
      ],
      listData: [],
      rules: {
        titlePara: [
          { required: true, message: "请输入名称字段", trigger: "blur" },
        ],

        lonPara: [
          { required: true, message: "请填写中心经度字段", trigger: "blur" },
        ],
        latPara: [
          { required: true, message: "请填写中心纬度字段", trigger: "blur" },
        ],
        threeIdPara: [
          { required: true, message: "请输入第三方ID字段", trigger: "blur" },
        ],
        tableName: [
          { required: true, message: "请输入第三方表名字段", trigger: "blur" },
        ],
        contentPara: [
          { required: true, message: "请填写描述字段", trigger: "blur" },
        ],
      },
      isShowUpdateCenterDialog: false,
      centerPoint: [],
      tableData: [{}],
      advancedOptionsShow: false,
    };
  },
  methods: {
    // 创建
    sure() {
      let that = this;
      if (this.listData.length > 0) {
        let judge = this.listData.every(function (item) {
          return item.name != "" && item.paraName // != "" && item.unit;
        });
        if (!judge) {
          this.$message({
            type: "error",
            message: "高级选项相关内容未填写完整，请完善后重新提交！",
          });
          return;
        }
      }
      this.$refs["single_form"].validate((valid) => {
        if (valid) {
          let data = Object.assign({}, that.fromDataRender, that.modelParams);
          data.jsonStrPara = JSON.stringify(that.listData);
          for (const key in data) {
            if (Object.hasOwnProperty.call(data, key)) {
              that.file.append(key, data[key]);
            }
          }
          that.uploadData(that.file);
        } else {
          that.$message({
            type: "error",
            message: "信息填写有误，请修改后提交",
          });
          return false;
        }
      });
    },

    // 上传文件
    uploadData(file) {
      let that = this;
      // 上传loading
      const loading = that.$loading({
        customClass: "allPageLoading",
        lock: true,
        text: "数据新增中，请勿刷新！",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      switch (this.fileType) {
        case "GeoJSON":
          this.uploadGeoJSONFile(this.file, loading);
          break;
        case "Excel":
          this.uploadExcelFile(this.file, loading);
          break;
        case "Shapefile":
          this.uploadShapefileFile(this.file, loading);
          break;
      }
    },
    uploadGeoJSONFile(file, loading) {
      let that = this;
      api
        .uploadGeojsonFile(file)
        .then((result) => {
          loading.close();
          if (result.code == 200) {
            that.updateData();
            that.dialogBeforeClose();
            that.$message({
              type: "success",
              message: "文件上传成功！",
            });
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          loading.close();
          that.$message({
            type: "error",
            message: err,
          });
        });
    },
    uploadExcelFile(file, loading) {
      let that = this;
      api
        .uploadExcelFile(file)
        .then((result) => {
          loading.close();
          if (result.code == 200) {
            that.updateData();
            that.dialogBeforeClose();
            that.$message({
              type: "success",
              message: "文件上传成功！",
            });
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          loading.close();
          that.$message({
            type: "error",
            message: err,
          });
        });
    },
    uploadShapefileFile(file, loading) {
      let that = this;
      api
        .uploadShapeFile(file)
        .then((result) => {
          loading.close();
          if (result.code == 200) {
            that.updateData();
            that.dialogBeforeClose();
            that.$message({
              type: "success",
              message: "文件上传成功！",
            });
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          loading.close();
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 创建数据集窗口关闭前
    dialogBeforeClose() {
      this.fromDataRender = {
        // modelId:"",
        threeIdPara: "",
        tableName: "",
        type: 0,
        titlePara: "",
        contentPara: "",
        lonPara: "",
        latPara: "",
        locationPara: "",
        jsonStrPara: "",
        areaCodePara: "",
        richTextPara: "",
        extend1Para: "",
        extend2Para: "",
        extend3Para: "",
      };
      this.advancedOptionsShow = false;
      this.clearAdvancedOptions();
      this.beforeClose();
      this.$refs.single_form.clearValidate();
    },

    // 打开更新点位面板
    openCenterLocation(item) {
      this.centerPoint = [item.centerLon, item.centerLat];
      this.isShowUpdateCenterDialog = true;
    },

    // 更新中心点数据
    updateDataCenterLocation(item) {
      this.fromDataRender.centerLon = item[0];
      this.fromDataRender.centerLat = item[1];
    },

    // 关闭点位
    beforeCloseUpdateCenterDialog() {
      this.updateCenterArr = [0, 0];
      this.isShowUpdateCenterDialog = false;
    },

    // 更改高级选项显示状态
    changeAdvancedOptionsStatue() {
      this.advancedOptionsShow = !this.advancedOptionsShow;
    },

    // 添加 高级选项input 按钮
    addAdvancedOptionsRow() {
      this.listData.push({
        name: "",
        paraName: "",
        unit: "",
      });
    },

    // 删除 高级选项input 按钮
    deleteAdvancedOptionsRow(index) {
      this.listData.splice(index, 1);
    },

    // 清空高级选项
    clearAdvancedOptions() {
      this.listData = [];
    },
  },

  watch: {
    formData(newVal) {
      if (newVal) {
        this.fromDataRender = newVal;
        if (newVal.jsonStr.split("ππ").length != 0) {
          this.advancedOptionsShow = false;
        } else {
          this.advancedOptionsShow = true;
          this.listData = JSON.parse(newVal.jsonStr);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fileImportDialog {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 15px;
  }

  .title {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
  }

  /deep/ .el-dialog__body {
    padding-left: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /deep/ .el-dialog__footer {
    border-top: 1px solid #eeeeee;
    padding: 10px 20px;
  }

  .el-form-item {
    /deep/ .el-form-item__label {
      width: 140px !important;
    }

    /deep/ .el-form-item__content {
      margin-left: 140px !important;
    }
  }

  .tableDiv {
    padding-left: 20px;

    .advanceOptionsTable {
      border: 1px solid #eeeeee;
      border-bottom: 0px solid #eeeeee;
      margin-top: 20px;
    }
  }

  /deep/ .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: " ";
    width: 0px;
    margin-right: 0px;
  }

  .is-required /deep/.el-form-item__label:after {
    content: " *";
    color: #3f9dfe;
    font-size: 150%;
  }
}
</style>