<template>
  <div class="app-container">
    <div class="header">
      <h1>{{ formInline.incubatorName }}</h1>
    </div>
    <div class="body">
      <div class="title"><i></i>基本信息</div>
      <div class="form">
        <el-form
          label-width="170px"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          :label-position="labelPosition"
        >
          <el-row>
            <el-form-item label="运行机构">
              <el-input
                v-model="formInline.operatingAgency"
                placeholder=""
                size="middle"
              ></el-input>
            </el-form-item>
            <el-form-item label="孵化器等级">
              <el-select
                v-model="formInline.incubatorLevel"
                style="width: 320px"
                size="middle"
              >
                <el-option
                  :label="item.name"
                  :value="item.value"
                  v-for="item in companyLevelList"
                  :key="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input
                v-model="formInline.contactPerson"
                placeholder=""
                size="middle"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="联系电话">
              <el-input
                v-model="formInline.contactPhone"
                placeholder=""
                size="middle"
              ></el-input>
            </el-form-item>
            <el-form-item label="孵化器使用总面积(m²)">
              <el-input
                v-model="formInline.totalArea"
                placeholder=""
                size="middle"
              ></el-input>
            </el-form-item>
            <el-form-item label="用于企业孵化的面积(m²)">
              <el-input
                v-model="formInline.incubationArea"
                placeholder=""
                size="middle"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="剩余企业孵化的面积(m²)">
              {{ formInline.remainingArea }}
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="孵化器地理位置">
              <el-input
                v-model="formInline.address"
                placeholder=""
                size="small"
                style="width: 500px"
                disabled
              ></el-input>
              <div
                class="map-ctn"
                :style="'width:500px;' + 'height:300px' + ';'"
              >
                <cu-amap ref="amap" :options="amapOptions()" />
              </div>
            </el-form-item>
            <el-form-item style="margin-left: 80px">
              <el-upload
                class="upload-demo"
                :action="`${baseAPI}api/file/upload?modelName=incubator`"
                :on-preview="handlePreview"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :on-error="handleError"
                :on-change="handleChange"
                accept="image/png, image/jpeg, image/jpg"
                :file-list="fileList"
                :show-file-list="false"
                style="margin-bottom: 6px"
              >
                <span style="margin-right: 14px">孵化器展示上传</span>
                <el-button size="mini" type="default">上传图片</el-button>
              </el-upload>
              <div :style="'width:500px;' + 'height:300px' + ';'">
                <div class="imgShowraper">
                  <img
                    :src="`${baseAPI}file/${formInline.incubatorImage}`"
                    alt=""
                    width="500"
                    height="300px"
                  />
                </div>
              </div>
            </el-form-item>
            <el-row
              style="display: flex; justify-content: center; margin-top: 60px"
              ><el-button type="primary" size="small" @click="edit"
                >保存修改信息</el-button
              ></el-row
            >
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
var baseAPI =
  process.env.NODE_ENV === "development"
    ? process.env.VUE_APP_LOCAL_API + "/"
    : (VUE_APP_API.ServiceURL || process.env.VUE_APP_LOCAL_API) + "/";
import crudHome from "@/api/system/home";

import dic from "@/api/system/dict";

import cuAmap from "@/components/AMap";

export default {
  name: "Home",
  components: {
    cuAmap,
  },

  data() {
    return {
      baseAPI: baseAPI,
      labelPosition: "right",
      fileList: [],
      cmap: null,
      Dict: { selectList: [] },
      companyLevelList: [],
      formInline: {
        address: "",
        contactPerson: "",
        contactPhone: "",
        id: "",
        incubationArea: "",
        incubatorImage: "",
        incubatorLevel: "",
        incubatorName: "",
        latitude: "",
        longitude: "",
        operatingAgency: "",
        totalArea: "",
      },
    };
  },
  computed: {
    // remainingArea() {
    //   return this.formInline.totalArea - this.formInline.incubationArea;
    // },
  },
  mounted() {
    // this.getData();
  },
  methods: {
    handleChange(file) {
      this.fileList = [file];  // 保留最新上传的文件，覆盖旧文件
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        this.$message.error('只能上传图片文件');
      }
      return isImage;
    },
    handleSuccess(response, file) {
      // 处理上传成功
      console.log("Upload success:", response, file);

      this.formInline.incubatorImage = response.body;
      // this.fileList.push(file);  // 存储已上传文件
      // this.tableData.push({
      //   name: file.name,
      //   status: '上传成功',
      // });
    },
    handleError(err, file) {
      // 处理上传错误
      console.error("Upload failed:", err, file);
      this.tableData.push({
        name: file.name,
        status: "上传失败",
      });
    },

    handlePreview(file) {
      console.log(file);
    },
    amapOptions(cmap) {
      var VUE = this;
      var self = this,
        form = this.formInline;
      return {
        zoom: 12,
        center: [122.050189, 37.515189],
        //showLabel: true,
        //pitch: 40,
        onload: function (cmap) {
          // debugger
          VUE.cmap = cmap;
          var center = cmap.options.center;
          var lng = form.longitude || center[0],
            lat = form.latitude || center[1];
          if (lng && lat) {
            cmap.setCenter([lng, lat]);

            // 添加标记
            cmap.addMarker({
              lnglat: [lng, lat],
              title: "",
              draggable: true,
              dragend: function (e) {
                VUE.getAddrPlus(e, cmap);
              },
            });
          }

          VUE.getData();
        },
        click: function (e, cmap) {
          // 经纬度坐标
          VUE.getAddrPlus(e, cmap);

          cmap.marker && cmap.removeMarker();

          // 添加标记
          cmap.addMarker({
            lnglat: [e.lnglat.lng, e.lnglat.lat],
            title: "",
            draggable: true,
            dragend: function (e) {
              VUE.getAddrPlus(e, cmap, form);
            },
          });
        },
      };
    },
    getAddrPlus(e, cmap, form) {
      var lnglat = e.lnglat;
      let longitude = lnglat.lng;
      let latitude = lnglat.lat;

      // 创建逆地理编码对象
      let geocoder;
      AMap.plugin("AMap.Geocoder", () => {
        geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all",
        });
        console.log();
        // 根据经纬度进行逆地理编码查询
        geocoder.getAddress([longitude, latitude], (status, result) => {
          if (status === "complete" && result.info === "OK") {
            if (result.regeocode && result.regeocode.formattedAddress) {
              let address = result.regeocode.formattedAddress;
              this.formInline.address = address;
              this.formInline.longitude = longitude;
              this.formInline.latitude = latitude;
              this.$forceUpdate();
              console.log("精确地址获取", address);
            }
          } else {
            console.error("获取地址失败");
          }
        });
      });
    },
    onSubmit() {
      console.log("submit!");
    },
    edit() {
      crudHome.edit(this.formInline).then((res) => {
        if (res && res.code === 200) {
          this.$message.success("保存成功"); // res.msg
          this.getData();
        }
      });
    },
    getData() {
      crudHome.getData().then((res) => {
        dic.getCompanyDicts().then((res1) => {
          this.companyLevelList = res1.body.incubatorLevel || [];

          this.formInline = res.body;
          this.formInline.incubatorImage = res.body.incubatorImage;
          const lat = this.formInline.latitude;
          const lng = this.formInline.longitude;
          // this.$refs.amap.init(amapOptions());
          const center = [lng, lat];
          // setTimeout(() => {
          // 定位中心地址
          this.$refs.amap.setCenter(center);
          console.log("map", this.cmap);
          // 定位marker设置
          this.cmap.marker.setPosition(new AMap.LngLat(lng, lat));
          // }, 3000);
          console.log();
        });
      });
    },
    // 选中图标
    selected(name) {
      this.form.icon = name;
    },
  },
};
</script>
<style>
/* .app-main {
  background-color: #fff !important;
} */
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  background-color: #f5f6fb;
}
.header {
  background: #f5f6fb;
  height: 52px;
  line-height: 52px;
  h1 {
    color: #303133;
    font-size: 19px;
    padding-left: 32px;
    &:before {
      content: "";
      display: block;
      background: no-repeat top left url("~@/assets/images/iconNew/icon1.png");
      position: absolute;
      top: 32px;
      left: 28px;
      height: 100%;
      width: 1.58rem;
    }
  }
}
.body {
  background-color: #fff;
  .title {
    color: #1890ff;
    height: 48px;
    background: #e4f2ff;
    font-weight: 400;
    font-size: 16px;
    line-height: 48px;
    margin-bottom: 20px;
    i {
      width: 4px;
      height: 16px;
      background: #1890ff;
      margin-right: 6px;
      display: inline-block;
      vertical-align: -2px;
      margin-left: 18px;
    }
  }
}
::v-deep .el-input {
  width: 320px;
}
::v-deep .el-input__inner {
  height: 38px;
}
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
