<template>
  <div class="basic-container">
    <Title :name="itemProps.label" />
    <div class="basic-content">
      <GeoComp
        v-if="itemProps.label === '地理位置'"
        :PropInfo="geoInfo"
        @change="geoChange"
      />
      <div
        :class="[
          'basic-item',
          { all: item.dataType === 'ATTACHMENT' || item.code === 'projIntro' },
          { 'project-container': itemProps.label === '项目信息' },
          { 'business-container': itemProps.label === '商业信息' },
        ]"
        v-for="(item, index) in itemProps.child"
        :key="item.id"
        v-if="item.visible"
      >
        <FormItem
          :label="item.name"
          :formType="filterType(item.dataType)"
          :isDisabled="item.unDisabled"
          :formItemObj="item"
          :info="info"
        />
      </div>

      <!-- <div class="basic-line">
        项目本地名称：<span>{{ info.localName }}</span>
      </div> -->
    </div>
  </div>
</template>
<script>
import Title from "../components/title.vue";
import { dataTypeEnum } from "../index.vue";
// import FormItem from "./formItem.vue";
import FormItem from "../form/form.vue";
// import GeoComp from "./geo.vue";
import GeoComp from "../components/geo.vue";
import { $Bus } from "@/utils/Bus";
export default {
  components: {
    Title,
    FormItem,
    GeoComp,
  },
  props: {
    itemProps: {
      type: Object,
      default: () => {
        return {};
      },
    },
    name: {
      type: String,
      default: "",
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    geoInfo() {
      return {
        address: this.info.infos.address, // 详细地址
        longitude: this.info.infos.longitude, // 经度
        latitude: this.info.infos.latitude, // 纬度
      };
    },
  },
  methods: {
    filterType(type) {
      return dataTypeEnum[type];
    },
    filterClass(type) {
      let className = "";
      switch (type) {
        case "ATTACHMENT":
        case "long":
          className = "all";
          return;
      }
    },
    geoChange(info) {
      let entries = Object.entries(info);
      entries = entries.map((i) => {
        return {
          pathArr: ["infos", i[0]],
          value: i[1],
        };
      });
      $Bus.$emit("formInfoChange", entries);
    },
  },
};
</script>
<style lang="less" scoped>
.basic {
  &-container {
    padding-bottom: 40px;
  }
  &-content {
    display: flex;
    padding-left: 16px;
    flex-wrap: wrap;
    .basic-item {
      width: 50%;
      font-size: 14px;
      color: #646c73;
      margin-bottom: 24px;
      span {
        color: #1f2429;
      }
    }
    .all {
      width: 100%;
    }
  }
  // &-line {
  //   font-size: 14px;
  //   color: #646c73;
  //   span {
  //     color: #1f2429;
  //   }
  //   &:nth-child(2) {
  //     margin-left: 157px;
  //   }
  // }
}
</style>
