<template>
  <div v-loading="pageloading" class="editVehicle">
    <div class="head-title">
      <span @click="CommonJump('tenementManager')" class="blue point">楼宇管理</span>
      / <span>{{ID?'编辑':'新增'}}楼宇</span>
    </div>
    <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="180px">
      <el-card shadow="never" style="margin-top: 10px" class="box-card">
        <el-form-item label="楼宇名称" prop="Name">
          <el-input v-model="addMsg.Name" style="width: 690px" placeholder="请输入楼宇名称" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="楼宇图(多张)" class="is-required">
          <div class="nav_Main">
            <div class="nav_IconContent">
              <draggable v-model="introImgList">
                <div v-for="(item, index) in introImgList" :key="index + '2'" style="
                    margin-right: 20px;
                    position: relative;
                    display: inline-block;
                  ">
                  <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="introImgList">
                  </el-image>
                  <el-button @click="type=2,ClearCarouse(index)" class="delBtn" type="danger" icon="el-icon-close"
                    circle>
                  </el-button>
                </div>
              </draggable>
            </div>
            <div @click="(choicImg = true), (type = 2)" class="add-image-btn 2222">
              + 添加图片
            </div>
          </div>
        </el-form-item>
        <el-form-item label="楼宇位置">
          <el-input v-model="addMsg.Address" style="width: 690px" size="small" placeholder="请输入楼宇位置"></el-input>
        </el-form-item>
        <el-form-item label="经纬度" style="margin-top: 15px" size="small">
          <el-input v-model="addMsg.LatAndLon" style="width: 690px" :disabled="true">
            <el-button @click="isShowMap = true" slot="append">展开地图</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="投运时间">
          <el-input v-model="addMsg.OperationTime" style="width: 690px" size="small" placeholder="请输入投运时间">
          </el-input>
        </el-form-item>
        <el-form-item label="楼宇等级" prop="CategoryId">
          <el-select v-model="addMsg.CategoryId" size="small" placeholder="请选择楼宇等级">
            <el-option v-for="item in CategoryList" :key="item.ID" :label="item.ClassName" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼宇建筑面积">
          <el-input v-model="addMsg.Areas" style="width: 690px" size="small" placeholder="请输入楼宇建筑面积">
          </el-input>
        </el-form-item>
        <el-form-item label="楼栋数量">
          <el-input v-model="addMsg.BuildingNum" style="width: 690px" size="small" placeholder="请输入楼栋数量">
          </el-input>
        </el-form-item>
        <el-form-item label="楼层量">
          <el-input v-model="addMsg.FloorNum" style="width: 690px" size="small" placeholder="请输入楼层量">
          </el-input>
        </el-form-item>
        <el-form-item label="电梯数">
          <el-input v-model="addMsg.ElevatorNum" style="width: 690px" size="small" placeholder="请输入电梯数">
          </el-input>
        </el-form-item>
        <el-form-item label="层高">
          <el-input v-model="addMsg.FloorHeight" @keyup.native="checkPrice(addMsg, 'FloorHeight')" style="width: 690px"
            size="small" placeholder="请输入层高">
            <template slot="append">m</template>
          </el-input>
        </el-form-item>
        <el-form-item label="开发商">
          <el-input v-model="addMsg.Developers" style="width: 690px" size="small" placeholder="请输入开发商"></el-input>
        </el-form-item>
        <el-form-item label="物业公司">
          <el-input v-model="addMsg.PropertyComp" style="width: 690px" size="small" placeholder="请输入物业公司">
          </el-input>
        </el-form-item>
        <el-form-item label="销售/自持比例">
          <el-input v-model="addMsg.SaleOrSelf" style="width: 690px" size="small" placeholder="请输入销售/自持比例">
          </el-input>
        </el-form-item>
        <el-form-item label="是否统一运营">
          <el-switch v-model="addMsg.IsAllOperate" :active-value="Number(1)" :inactive-value="Number(0)">
          </el-switch>
        </el-form-item>
        <el-form-item label="建设时间">
          <el-input v-model="addMsg.ConstructionTime" style="width: 690px" size="small" placeholder="请输入建设时间">
          </el-input>
        </el-form-item>
        <el-form-item label="物业费(元)">
          <el-input v-model="addMsg.PropertyFee" @keyup.native="checkPrice(addMsg, 'PropertyFee')" style="width: 690px"
            size="small" placeholder="请输入物业费">
            <template slot="append">㎡/月</template>
          </el-input>
        </el-form-item>
        <el-form-item label="月租金(元)">
          <el-input v-model="addMsg.RentFee" @keyup.native="checkPrice(addMsg, 'Areas')" style="width: 690px"
            size="small" placeholder="请输入月租金">
            <template slot="append">㎡/月</template>
          </el-input>
        </el-form-item>
        <el-form-item label="拟主导产业方向">
          <el-input v-model="addMsg.IndustryDirection" show-word-limit rows="4" style="width: 690px" size="small"
            placeholder="请输入拟主导产业方向">
          </el-input>
        </el-form-item>
        <el-form-item label="目标企业招引需求">
          <el-input type="textarea" v-model="addMsg.BrandDemand" show-word-limit rows="4" style="width: 690px"
            size="small" placeholder="请输入目标企业招引需求" autosize>
          </el-input>
        </el-form-item>
        <el-form-item label="其他需求">
          <el-input type="textarea" v-model="addMsg.Other" show-word-limit rows="4" style="width: 690px" size="small"
            placeholder="请输入其他需求" autosize>
          </el-input>
        </el-form-item>
        <el-form-item label="负责人名字">
          <el-input v-model="addMsg.ContactName" style="width: 690px" size="small" placeholder="请输入楼负责人名字">
          </el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="addMsg.ContactPhone" @keyup.native="checkPrice(addMsg, 'ContactPhone')"
            style="width: 690px" size="small" placeholder="请输入楼负责人电话">
          </el-input>
        </el-form-item>
      </el-card>
    </el-form>
    <div style="padding: 20px; background: #fff; margin-top: 10px">
      <el-button @click="Save('addMsg')" size="small" type="primary">保存</el-button>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 选择视频 -->
    <el-dialog title="选择文件" :visible.sync="changeState1" width="1240px">
      <Choosevideo @Selectvideo="Selectvideo"></Choosevideo>
    </el-dialog>
    <!-- 地图选址 -->
    <el-dialog title="地图展示" :visible.sync="isShowMap" width="960px">
      <commonMap @map-submit="mapEvent"></commonMap>
    </el-dialog>
  </div>
</template>

<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import Choosevideo from "@/components/global/Choosevideo.vue";
  import commonMap from "@/components/common/commonMap.vue";
  import draggable from "vuedraggable";

  export default {
    name: "editVehicle",
    data() {
      let validataType = (rule, value, callback) => {
        if (this.addMsg.ProjectType == 0) {
          return callback(new Error("请选择项目类型"));
        } else {
          callback();
        }
      };
      let validataLogo = (rule, value, callback) => {
        if (this.addMsg.Logo == "") {
          return callback(new Error("请上传Logo"));
        } else {
          callback();
        }
      };
      return {
        pageloading: false,
        addMsg: {
          BuildId: 0,
          Name: '',
          Address: "", //地址
          LatAndLon: "", //地址经纬度
          OperationTime: "", //投运时间
          CategoryId: 0, //分类
          Areas: null, //楼宇建筑面积
          BuildingNum: null, //楼栋数
          FloorNum: null, //楼层数
          ElevatorNum: null, //电梯数数
          FloorHeight: null, //层高
          Developers: "", //开发商
          PropertyComp: "", //物业公司
          SaleOrSelf: "", //销售自持比例
          IsAllOperate: 1, //是否统一运营(1-是，0-否)
          ConstructionTime: "", //建设时间
          PropertyFee: null, //管理公司及管理费
          RentFee: null, //月租金(元/㎡)
          IndustryDirection: "", //拟主导产业方向
          BrandDemand: "", //目标招商业态及品牌需求
          Other: "", //其他需求
          ContactName: "", //联系人
          ContactPhone: null, //联系电话
          Banner: [], //介绍图
        },
        rules: {
          Name: [{
            required: true,
            message: "请输入楼宇名称",
            trigger: "blur",
          }, ],
          Address: [{
            required: true,
            message: "请输入楼宇地址",
            trigger: "blur",
          }, ],
          ConstructionTime: [{
            required: true,
            message: "请选择建设时间",
            trigger: "change",
          }, ],
          OperationTime: [{
            required: true,
            message: "请选择投运时间",
            trigger: "change",
          }, ],
          CategoryId: [{
            required: true,
            message: "请选择楼宇等级",
            trigger: "change",
          }, ],
          Areas: [{
            required: true,
            message: "请输入楼宇建筑面积",
            trigger: "burl",
          }, ],
          BuildingNum: [{
            required: true,
            message: "请输入楼栋数量",
            trigger: "burl",
          }, ],
          FloorNum: [{
            required: true,
            message: "请输入楼层量",
            trigger: "burl",
          }, ],
          ElevatorNum: [{
            required: true,
            message: "请输入电梯数",
            trigger: "burl",
          }, ],
          FloorHeight: [{
            required: true,
            message: "请输入层高",
            trigger: "burl",
          }, ],
          Developers: [{
            required: true,
            message: "请输入开发商",
            trigger: "blur",
          }, ],
          PropertyComp: [{
            required: true,
            message: "请输入物业公司",
            trigger: "blur",
          }, ],
          SaleOrSelf: [{
            required: true,
            message: "请输入销售/自持比例",
            trigger: "blur",
          }, ],
          PropertyFee: [{
            required: true,
            message: "请输入物业费",
            trigger: "blur",
          }, ],
          RentFee: [{
            required: true,
            message: "请输入月租金",
            trigger: "blur",
          }, ],
          IndustryDirection: [{
            required: true,
            message: "请输入拟主导产业方向",
            trigger: "burl",
          }, ],
          Logo: [{
            required: true,
            validator: validataLogo,
            trigger: "change",
          }, ],
          BrandDemand: [{
            required: true,
            message: "请输入目标企业招引需求",
            trigger: "burl",
          }, ],
          ContactName: [{
            required: true,
            message: "请输入楼负责人名字",
            trigger: "burl",
          }, ],
          ContactPhone: [{
            required: true,
            message: "请输入楼负责人电话",
            trigger: "burl",
          }, ],
        },
        ID: 0,
        type: -1,
        choicImg: false,
        changeState1: false,
        isShowMap: false, //显示地图
        MetroList: [], //地铁信息数据
        ProjectTypeList: [], //项目类型数组
        introImgList: [], //介绍图
        LogoList: [],
        shenList: [],
        CategoryList: []
      };
    },
    components: {
      ChooseImg,
      Choosevideo,
      commonMap,
      draggable,
    },
    created() {
      if (this.$route.query.ID) {
        this.ID = this.$route.query.ID;
        this.getData();
      }
      this.getTypeEnumList();
      this.GetAuthenticationCategoryEnumList();
    },
    methods: {
      //获取项目类型
      getTypeEnumList() {
        this.apipost("/api/Trade/GetProjectTypeEnumList", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.ProjectTypeList = res.data.data;
            let obj = {
              Name: "不限",
              Id: 0,
            };
            this.ProjectTypeList.unshift(obj);
          }
        });
        this.apipost("/api/Trade/GetBrandClassList", {
          BrandCategory: 2
        }, (res) => {
          if (res.data.resultCode == 1) {
            this.CategoryList = res.data.data;
            let obj = {
              ClassName: "不限",
              ID: 0,
            };
            this.CategoryList.unshift(obj);
          }
        });
      },
      //新增地铁信息
      addMetroList() {
        let obj = {
          MetroNum: "",
          MetroName: "",
          Distance: "",
        };
        this.MetroList.push(obj);
      },
      //删除地铁信息
      delCarrier(index) {
        this.MetroList.splice(index, 1);
      },
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // if(this.introImgList.length==0){
            //   this.Error('请上传介绍图');
            //   return;
            // }
            this.addMsg.CarrierMetroList = this.MetroList;
            // this.addMsg.BannerList = this.introImgList;
            this.addMsg.Banner = this.introImgList;
            this.apipost(
              "/api/YBTrade/SetBuildingInfo",
              this.addMsg,
              (res) => {
                if (res.data.resultCode === 1) {
                  this.CommonJump('tenementManager');
                  this.Success(res.data.message);
                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },

      getData() {
        this.pageloading = true;
        this.apipost(
          "/api/YBTrade/GetBuildingInfo", {
            BuildId: this.ID,
          },
          (res) => {
            this.pageloading = false;
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              this.addMsg = res.data.data;
              if (
                res.data.data.CarrierMetroList &&
                res.data.data.CarrierMetroList.length > 0
              ) {
                this.MetroList = res.data.data.CarrierMetroList;
              }
              // if (
              //   res.data.data.BannerList &&
              //   res.data.data.BannerList.length > 0
              // ) {
              //   this.introImgList = res.data.data.BannerList;
              // }
              if (
                res.data.data.Banner &&
                res.data.data.Banner.length > 0
              ) {
                this.introImgList = res.data.data.Banner;
              }
              if (res.data.data.OperationTime) {
                this.addMsg.OperationTime = this.addMsg.OperationTime.replace("T", " ");
              }
              this.LogoList = [];
              this.LogoList.push(this.addMsg.Logo);
            } else {
              this.Error(res.data.message);
            }
          }
        );
      },
      //选择图片
      SelectId(msg) {
        if (this.type == 1) {
          this.addMsg.Logo = this.getIconLink(msg.url);
        }
        if (this.type == 2) {
          this.introImgList.push(msg.url);
        }
        if (this.type == 3) {
          // this.addMsg.HonorList.push(msg.url);
          this.addMsg.Honor.push(msg.url);
        }
        this.choicImg = false;
      },
      ClearCarouse(index) {
        if (this.type == 2) {
          this.introImgList.splice(index, 1);
        }
        if (this.type == 3) {
          // this.addMsg.HonorList.splice(index, 1);
          this.addMsg.Honor.splice(index, 1);
        }
      },
      Selectvideo(val) {
        this.addMsg.VideoUrl = val.Path;
        this.changeState1 = false;
      },
      //得到地图信息
      mapEvent(e) {
        this.addMsg.LatAndLon = e.lat + "," + e.long;
        // this.addMsg.Address = e.Address;
        this.isShowMap = false;
      },
      //获取首店类别
      GetAuthenticationCategoryEnumList() {
        this.apipost(
          "/api/AppletTrade/GetAuthenticationCategoryEnumList", {
            Name: "",
            Id: ""
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.shenList = res.data.data;
              if (this.addMsg.FirstShopNumList && this.addMsg.FirstShopNumList.length === 0) {
                this.shenList.map((e) => {
                  let obj = {
                    Id: e.Id,
                    Name: e.Name,
                    Num: 0,
                  };
                  this.addMsg.FirstShopNumList.push(obj);
                });
              }
            }
          }
        );
      },
      addTypeAndNum() {
        this.addMsg.FirstShopNumList.push({
          Id: 0,
          Name: "",
          Num: 0,
        });
      },
      delTypeAndNum(index) {
        this.addMsg.FirstShopNumList.splice(index, 1);
      },
    },
  };

</script>

<style>
  .editVehicle .content {
    background: #fff;
    margin-top: 10px;
    box-sizing: border-box;
  }

  .editVehicle .editIconImg {
    width: 80px;
    height: 80px;
  }

  .editVehicle .add-image-btn {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #419efb;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    text-align: center;
  }

  .editVehicle .nav_Main {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .editVehicle .nav_IconContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* .editVehicle .nav_IconContent div>div {
    display: inline-block;
  } */

  .editVehicle .colapp-image {
    background-size: cover;
    background-position: center center;
    width: 100px;
    height: 100px;
    border-radius: 0%;
  }

  .editVehicle .delBtn {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px !important;
  }

  .delCarrClose {
    position: absolute;
    right: 53px;
    top: 8px;
    padding: 4px 4px !important;
  }

</style>
