<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="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></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²)">
            {{ remainingArea }}
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="孵化器地理位置">
              <el-input
                v-model="formInline.address"
                placeholder=""
                size="small"
                style="width: 360px;"
                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"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-success="handleSuccess"
                :on-error="handleError"
                :limit="1"
                :on-exceed="handleExceed"
                :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 IconSelect from "@/components/IconSelect";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import DateRangePicker from "@/components/DateRangePicker";

import cuAmap from "@/components/AMap";

// crud交由presenter持有
const defaultForm = {
  id: null,
  title: null,
  menuSort: 999,
  path: null,
  component: null,
  componentName: null,
  iframe: false,
  roles: [],
  pid: 0,
  icon: null,
  cache: false,
  hidden: false,
  type: 0,
  permission: null,
};
export default {
  name: "Menu",
  components: {
    cuAmap,
    Treeselect,
    IconSelect,
    crudOperation,
    rrOperation,
    udOperation,
    DateRangePicker,
  },
  cruds() {
    return CRUD({
      title: "菜单",
      url: "api/menus",
      crudMethod: { ...crudHome },
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      baseAPI:baseAPI,
      labelPosition: "right",
      fileList: [],

      Dict: { selectList: [] },
      formInline: {
        address: "",
        contactPerson: "",
        contactPhone: "",
        id:'',
        incubationArea:'',
        incubatorImage:'',
        incubatorLevel:'',
        incubatorName:'',
        latitude:'',
        longitude:'',
        operatingAgency:'',
        totalArea:'',
      },

      menus: [],
      permission: {
        add: ["admin", "menu:add"],
        edit: ["admin", "menu:edit"],
        del: ["admin", "menu:del"],
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        path: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
    };
  },
  computed: {
    remainingArea() {
      return this.formInline.totalArea - this.formInline.incubationArea;
    }
  },
  mounted(){
    this.getData()
  },
  methods: {
    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: '上传失败',
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    initMap(lng, lat){
      // var opts = {
			// 	center:[lng || 107.260044, lat || 36.737982],
			// 	showLabel: true,
			// 	pitch: 40,
			// 	zoom: 4,
			// 	mapStyle: 'amap://styles/blue',
			// };
			var cmap = this.$refs.amap.init(amapOptions());
    },
    amapOptions(cmap) {
      var item = this.formInline.item,
        self = this,
        form = this.formInline;
      return {
        zoom: 12,
        center: [122.050189, 37.515189],
        //showLabel: true,
        //pitch: 40,
        onload: function (cmap) {
          this.Dict.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) {
                var lnglat = e.lnglat;
                cmap.deGeocode([lnglat.lng, lnglat.lat], function (addr) {
                  form.address = addr;
                  form.longitude = lnglat.lng;
                  form.latitude = lnglat.lat;
                  self.$forceUpdate();
                });
              },
            });
          }
        },
        click: function (e, cmap) {
          var lnglat = e.lnglat;
          cmap.deGeocode([lnglat.lng, lnglat.lat], function (addr) {
            form.address = addr;
            form.longitude = lnglat.lng;
            form.latitude = lnglat.lat;
          });
          cmap.marker && cmap.removeMarker();

          // 添加标记
          cmap.addMarker({
            lnglat: [lnglat.lng, lnglat.lat],
            title: "",
            draggable: true,
            dragend: function (e) {
              var lnglat = e.lnglat;
              cmap.deGeocode([lnglat.lng, lnglat.lat], function (addr) {
                form.address = addr;
                form.longitude = lnglat.lng;
                form.latitude = lnglat.lat;
              });
            },
          });
        },
      };
    },
    onSubmit() {
      console.log("submit!");
    },
    edit(){
      crudHome.edit(this.formInline).then((res) => {
        if(res && res.code === 200){
          this.$message.warning(res.msg)
        }
      });
    },
    getData() {
        crudHome.getData().then((res) => {
          this.formInline = res.body
          this.formInline.incubatorImage = res.body.incubatorImage
          // this.$refs.amap.init(amapOptions());
          const center = [this.formInline.lat, this.formInline.lng ];
          this.$refs.amap.map.setCenter(center);
          this.Dict.cmap.marker.setPosition(new AMap.LngLat(this.formInline.lng, this.formInline.lat));
        });
    },
    // 选中图标
    selected(name) {
      this.form.icon = name;
    },
  },
};
</script>
<style>
.app-main {
  background-color: #fff !important;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.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: 25px;
      left: 28px;
      height: 100%;
      width: 1.58rem;
    }
  }
}
.body {
  
  .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__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>
