<template>
  <div class="app-container">
    <div class="header">
      <ul>
        <li @click="changeNav(0)" :class="{ active: activeIndex === 0 }">
          <div class="title">孵化器概况</div>
        </li>
        <li @click="changeNav(1)" :class="{ active: activeIndex === 1 }">
          <div class="title">在孵企业</div>
        </li>
        <li @click="changeNav(2)" :class="{ active: activeIndex === 2 }">
          <div class="title">毕业企业</div>
        </li>
        <li @click="changeNav(3)" :class="{ active: activeIndex === 3 }">
          <div class="title">中介机构</div>
        </li>
        <li @click="changeNav(4)" :class="{ active: activeIndex === 4 }">
          <div class="title">创业导师</div>
        </li>
      </ul>
    </div>

    <div class="body">
      <ul class="list">
        <li class="overview tab_panel_0" v-if="activeIndex === 1">
          <h2>威海高新区创业中心</h2>
          <div class="contentWrapper">
            <div class="left">
              <div class="item">
                <div class="title">
                  <span class="_left">总收入</span>
                  <span class="_right">查看更多>></span>
                </div>
                <div class="body">
                  <div class="_left">
                    <ul>
                      <li>孵化器总收入：12342万元</li>
                      <li>综合服务收入：12342万元</li>
                      <li>物业费收入：12342万元</li>
                      <li>房租费收入：12342万元</li>
                      <li>投资收入：12342万元</li>
                      <li>政策性收入：12342万元</li>
                      <li>其他：12342万元</li>
                    </ul>
                  </div>
                  <div class="_right">
                    <div class="charts pie"></div>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="title">
                  <span class="_left">总收入</span>
                  <span class="_right">查看更多>></span>
                </div>
                <div class="body">
                  <div class="_left">
                    <ul>
                      <li>运营机构:威海高新创业园运营管理有限公司</li>
                      <li>联 系人:联系人姓名</li>
                      <li>联系电话:0631-1234567</li>
                      <li>中心位于高新区内，交通便利</li>
                    </ul>
                  </div>
                  <div class="_right">
                    <div class="charts pie"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="item">
                <div class="title">
                  <span class="_left">简介</span>
                  <span class="_right">查看更多>></span>
                </div>
                <div class="body">
                  <div class="_top">
                    <ul>
                      <li>运营机构:威海高新创业园运营管理有限公司</li>
                      <li>联 系人:联系人姓名</li>
                      <li>联系电话:0631-1234567</li>
                      <li>中心位于高新区内，交通便利</li>
                    </ul>
                  </div>
                  <div class="_bottom">
                    <img src="" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="tab_panel_1" v-if="activeIndex === 0">
          <div class="_left">
            <div class="_title">
              <span>在孵企业</span>
              <span>280家</span>
            </div>
            <div class="_list">
              <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="searchText"
                style="100%"
              ></el-input>

              <ul>
                <li v-for="item1 in 10" :key="item1">
                  威海众智惠新信息科技有限公司
                </li>
              </ul>
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="totalItems"
                layout="prev, pager, next"
              />
            </div>
          </div>
          <div class="_right">
            <h2>威海众智惠新信息科技有限公司</h2>
            <div class="divider"></div>
            <div class="_title prefixDiv">
              <div class="_left">企业基础信息</div>
              <div class="_right">查看企业简介>></div>
            </div>
            <div class="_body">
              <ul>
                <li v-for="item in 10" class="prefixPoint">
                  入驻时间: 2021-10-10
                </li>
              </ul>
            </div>

            <div class="_title prefixDiv">
              <div class="_left">知识产权</div>
            </div>
            <div class="_body">
              <ul>
                <li v-for="item in 10" class="prefixPoint">
                  入驻时间: 2021-10-10
                </li>
              </ul>
            </div>


            <div class="_title prefixDiv">
              <div class="_left">创业创新企业情况</div>
            </div>
            <div class="_body">
              <ul>
                <li v-for="item in 10" class="prefixPoint">
                  入驻时间: 2021-10-10
                </li>
              </ul>
            </div>


            <div class="_title prefixDiv">
              <div class="_left">今年企业经营信息</div>
              <div class="_right">查看更多>></div>
            </div>
            <div class="_body">
              <ul>
                <li v-for="item in 10" class="prefixPoint">
                  入驻时间: 2021-10-10
                </li>
              </ul>
            </div>

<!--  -->
            <div class="_title prefixDiv">
              <div class="_left">企业产品</div>
              <div class="_right">查看更多>></div>
            </div>
            <div class="_body">
              <dl>
                <dd v-for="item in 10">
                  <img src="" alt="">
                  <h3>环境监测设备</h3>
                  <p>内置NB-IoT物联网SIM卡，把数据传 输到晶合云平台或客户私有云平台， 实现数据</p>
                </dd>
              </dl>
            </div>

          </div>
        </li>
        <li class="tab_panel_4" v-if="activeIndex === 4">
          <div class="_title">
            <span>创业导师</span>
            <el-input
              placeholder="请输入姓名搜索"
              prefix-icon="el-icon-search"
              v-model="searchText4teacher"
            ></el-input>
          </div>
          <ul>
            <li v-for="item in 10" :key="item">
              <img src="" alt="" />
              <p>姓名：张丽力</p>
              <p>学历：博士</p>
              <p>毕业学校：山东大学</p>
              <p>联系电话：13521457845</p>
              <a>查看简介&gt;</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <el-dialog
      title="新增孵化器信息"
      :visible.sync="dialogVisible"
      @close="resetForm"
    >
      <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.incubatorName"
              placeholder=""
              size="middle"
            ></el-input>
          </el-form-item>
          <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: 200px"
              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="孵化器地理位置">
            <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: 5px; margin-left: -17px; font-weight: bold"
                >孵化器图片</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>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
  </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";
console.log(crudHome);
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 dic from "@/api/system/dict";

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 {
      // panel1,2,3
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的条目数量
      totalItems: 100, // 总条目数
      // 顶部切换菜单
      activeIndex: 0,
      searchText4teacher: "",
      teacherList: [],
      data: {
        incubatorAllCount: 6,
        incubatorCompanyCount: 10,
        intermediaryAgencyCount: 10,
        mentorAllCount: 7,
        remainingArea: -99750,
        total: 6,
        totalArea: 382,
        unIncubatorCompanyCount: 14,
        list: [],
      },

      dialogVisible: false,
      baseAPI: baseAPI,
      labelPosition: "right",
      fileList: [],
      cmap: null,
      Dict: { selectList: [] },
      formInline: {
        address: "",
        contactPerson: "",
        contactPhone: "",
        id: "",
        incubationArea: "",
        incubatorImage: "",
        incubatorLevel: 2,
        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();
    dic.getCompanyDicts().then((res) => {
      console.log(res);
      this.companyLevelList = res.body.incubatorLevel || [];
    });
    this.getData();
  },
  methods: {
    handleCurrentChange(newPage) {
      // 切换分页
      this.currentPage = newPage;
      // 这里可以添加代码来加载新页的数据
      console.log(`当前页: ${newPage}`);
    },
    changeNav(index) {
      this.activeIndex = ~~index;
    },
    go2overview() {
      alert("数据概览页开发ing~");
    },
    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}？`);
    },
    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) {
                // 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();
                // });
                VUE.getAddrPlus(e, cmap);
              },
            });
          }
        },
        click: function (e, cmap) {
          // 经纬度坐标
          VUE.getAddrPlus(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: [e.lnglat.lng, e.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;
              // });
              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() {
      if (this.formInline.incubatorName) {
      }
      crudHome.add(this.formInline).then((res) => {
        if (res && res.code === 200) {
          this.$message.success("保存成功"); // res.msg
          this.getData();
          this.dialogVisible = false;
        }
      });
    },
    getData(fn) {
      crudHome
        .getData4tech({
          page: 0,
          size: 999,
        })
        .then((res) => {
          console.log(res, "getData4tech");
          this.data = res.body;
        });
    },
    // 选中图标
    selected(name) {
      this.form.icon = name;
    },
  },
};
</script>
  <style>
/* .app-main {
    background-color: #fff !important;
  } */
</style>
  <style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #fff;
  font-family: Microsoft YaHei;
}

.page-footer{
    display:none !important;
}

.header {
  background: #f5f7fa;
  ul {
    display: flex;
    justify-content: start;
    border: 1px solid #d8dce5;
    background-color: #fff;
    li {
      width: 238px;
      height: 48px;
      display: flex;
      align-items: center;
      list-style: none;
      justify-content: center;
      cursor: pointer;

      &:active,
      &.active {
        background: #1890ff;
        .title {
          color: #ffffff;
        }
      }
      .title {
        font-size: 16px;
        color: #303133;
        font-weight: bold;
      }
    }
  }
}

.imgShowraper {
  margin-left: 90px;
}

/**公共类 */
.divider {
  width: 100%;
  height: 1px;
  border: 1px dashed #dddee1;
}
.prefixDiv {
  position: relative;
  &:before {
    width: 4px;
    height: 16px;
    background: #1890ff;
    position: absolute;
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确居中 */
    left: 16px;
    content: "";
  }
}
.prefixPoint {
  position: relative;
  &:before {
    content: "";
    width: 6px;
    height: 6px;
    background: #1890ff;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确居中 */
  }
}


/** 第五个面板 */
.tab_panel_4 {
  ._title {
    font-size: 16px;
    color: #1890ff;
    width: 100%;
    height: 50px;
    background: #e4f2ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-left: 26px;
    &:before {
      width: 4px;
      height: 16px;
      background: #1890ff;
      position: absolute;
      //   top: 19px;
      top: 50%; /* 垂直居中 */
      transform: translateY(-50%); /* 精确居中 */
      left: 16px;
      content: "";
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: 60px;
    // margin-top: 20px;
    & > li {
      position: relative;
      width: 260px;
      height: 334px;
      background: #fff;
      border: 1px solid #dddee1;
      text-align: center;
      padding: 10px;
      margin-left: 10px;
      margin-right: 40px;
      margin-top: 20px;
      img {
        width: 200px;
        height: 200px;
        margin: 0 auto;
      }
      a {
        position: absolute;
        right: 6px;
        bottom: 60px;
        font-size: 15px;
        color: #1890ff;
      }
      p {
        font-size: 15px;
        color: #606266;
        padding-left: 18px;
        text-align: left;
        position: relative;
        padding-top: 3px;
        padding-bottom: 3px;
        &:before {
          content: "";
          width: 6px;
          height: 6px;
          background: #1890ff;
          border-radius: 50%;
          position: absolute;
          left: 5px;
          top: 50%; /* 垂直居中 */
          transform: translateY(-50%); /* 精确居中 */
        }
      }
    }
  }
}
.tab_panel_1 {
  display: flex;
  padding: 10px;
  & > ._left {
    flex: 1;
    margin-right: 20px;
    height: 798px !important;
    border: 1px solid #DDDEE1;
    padding: 20px;
    ._title {
      display: flex;
      width: 100%;
      justify-content: space-between;
      margin-top: 10px;
      margin-bottom: 20px;
      span {
        &:first-child {
          font-size: 19px;
          color: #303133;
        }
        &:last-child {
          font-size: 19px;
          color: #42b983;
        }
      }
    }
    li {
      font-size: 15px;
      color: #666666;
      width: 100%;
      height: 38px;
      line-height: 38px;
      text-align: left;
      padding-left: 10px;
      cursor: pointer;
      &.active,
      &:hover {
        background: #1890ff;
        color: #fff;
      }
    }
  }
  & > ._right {
    flex: 4;
    h2 {
      font-weight: 400;
      font-size: 27px;
      color: #42b983;
      text-align: center;
      margin-top: 20px;
      margin-block: 20px;
    }

    ._title {
      width: 100%;
      height: 36px;
      background: #e4f2ff;
      font-size: 16px;
      color: #1890ff;
      margin-top: 10px;
      margin-bottom: 6px;

      ._left {
        float: left;
        margin-left: 30px;
        margin-top: 6px;
      }
      ._right {
        float: right;
        margin-right: 30px;
        margin-top: 6px;
      }
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding-left: 20px;
      li {
        width: 290px;
        font-size: 15px;
        color: #606266;
        padding: 10px;
        padding-left: 20px;
      }
    }
    dl{
        display: flex;
      flex-wrap: wrap;
      padding-left: 20px;
      dd {
        width: 250px;
    height: 274px;
    font-size: 15px;
    color: #606266;
    /* padding: 10px; */

    margin-left: 20px;
    margin-right: 20px;
    border: 1px solid #DDDEE1;
    margin-top: 10px;
        img{
            width: 250px;
            height: 150px;
        }
        h3{
            font-size: 15px;
            color: #606266;
            padding-left: 15px;
        }
        p{
            font-size: 13px;
            color: #969AA3;
            padding-left: 15px;
            line-height: 20px;
        }
      }
    }
  }
}

.list {
  // ul元素
  background: #f5f6fb;
  display: flex;
  flex-wrap: wrap;
  & > li {
    width: 100%;
    height: 442px;
    background: #ffffff;
    position: relative;
  }

  .overview {
    h2 {
      font-weight: 400;
      font-size: 27px;
      color: #42b983;
      text-align: center;
      padding-top: 16px;
      padding-bottom: 16px;
    }
    .contentWrapper {
      border-top: 1px dashed #dddee1;
      display: flex;
      padding: 16px;
      & > div {
        flex: 1;
      }
      .left {
        border-right: 1px dashed #dddee1;
        .body {
          display: flex;
          ._left,
          ._right {
            flex: 1;
          }
        }
        li {
          font-size: 15px;
          color: #606266;
          line-height: 16px;
          padding: 4px 42px;
        }
      }
      .right {
        .body {
          display: flex;
        }
        li {
          font-size: 15px;
          color: #606266;
          line-height: 16px;
          padding: 4px 42px;
        }
      }
    }
  }
}

.body {
  background-color: #fff;
  .title {
    color: #1890ff;
    height: 48px;
    background: #e4f2ff;
    font-weight: 400;
    font-size: 16px;
    line-height: 48px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
  }
}
// ::v-deep .el-input {
//   width: 200px;
// }
// ::v-deep .el-input__inner {
//   height: 38px;
// }
</style>
  