<template>
  <div v-loading="pageloading" class="editBrandEnter">
    <div class="head-title">
      <span @click="CommonJump('firmManager')" 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" class="is-required" size="small">
          <el-input v-model="addMsg.Name" :placeholder="`企业名称`" maxlength="100" style="width: 690px;" />
        </el-form-item>
        <!-- <el-form-item label="企业Logo" class="is-required" prop="Logo" size="small">
          <el-button @click="type=1,choicImg=true" size="small">选择文件</el-button>
          <div
            class="app-gallery-item"
            style="position: relative; width: 100px; margin-top: 10px"
          >
            <img
              v-if="!addMsg.Logo || addMsg.Logo == ''"
              src="../../assets/img/default.png"
              style="width: 80px; height: 80px"
              alt=""
            />
            <el-image
              v-else
              style="width: 80px; height: 80px"
              :src="addMsg.Logo"
              :preview-src-list="LogoList"
            >
            </el-image>
          </div>
        </el-form-item> -->
        <el-form-item :label="`企业图`" prop="BannerList">
          <el-tooltip class="item" effect="dark" content="第一张图片为封面图" placement="top"
            style="position: absolute; left: -5px; top: 12px">
            <i class="el-tooltip el-icon-info"></i>
          </el-tooltip>
          <p style="color: #c9c9c9; margin: 0 0 12px 20px">
            第一张图片为缩略图,其它图片为轮播图,建议像素750*750,最多支持上传9张
          </p>
          <div class="nav_Main">
            <div class="nav_IconContent">
              <draggable v-model="addMsg.BannerList">
                <div style="
                    position: relative;
                    margin-right: 20px;
                    display: inline-block;
                  " v-for="(item, index) in addMsg.BannerList" :key="index + '2'">
                  <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="addMsg.BannerList">
                  </el-image>
                  <el-button @click="ClearCarouse(index)" class="delBtn" type="danger" icon="el-icon-close" circle>
                  </el-button>
                </div>
              </draggable>
            </div>
            <div @click="type=2,choicImg=true" v-if="addMsg.BannerList.length < 9" class="add-image-btn 2222"
              style="cursor: pointer">
              + 添加图片
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="`企业简介`" class="ue-style">
          <el-input type="textarea" :placeholder="`请输入企业简介`" v-model="addMsg.Introduction" maxlength="500" autosize
            style="width: 690px;">
          </el-input>
        </el-form-item>
        <el-form-item label="企业发展意向">
          <el-input v-model="addMsg.DevIntention" style="width: 690px" size="small" placeholder="请输入企业发展意向">
          </el-input>
        </el-form-item>
        <el-form-item label="企业类别">
          <el-select v-model="addMsg.CategoryId" size="small" placeholder="请选择企业类别">
            <el-option v-for="item in ETypeList" :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.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="意向楼宇等级">
          <el-select v-model="addMsg.EType" 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-select v-model="addMsg.Renovation" size="small" placeholder="请选择楼宇装修">
            <el-option v-for="(item,index) in RenovationList" :key="index" :label="item.Name" :value="item.Name">
            </el-option>
          </el-select>
          <!-- <el-input v-model="addMsg.Renovation" style="width: 690px" size="small" placeholder="">
          </el-input> -->
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="addMsg.Payment" size="small" placeholder="请选择付款方式">
            <el-option v-for="(item,index) in PayTypeList" :key="index" :label="item.Name" :value="item.Name">
            </el-option>
          </el-select>
          <!-- <el-input v-model="addMsg.Payment" style="width: 690px" size="small" placeholder="请输入支付方式">
          </el-input> -->
        </el-form-item>
        <el-form-item label="交房日期">
          <el-date-picker v-model="addMsg.HandoverDate" clearable format="yyyy-MM" value-format="yyyy-MM" size="small"
            type="month" placeholder="请选择交房日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="意向楼层">
          <el-input v-model="addMsg.IntentionalFloor" 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.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, 'RentFee')" style="width: 690px"
            size="small" placeholder="请输入月租金">
            <template slot="append">㎡/月</template>
          </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" 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: "editBrandEnter",
    data() {
      let validataType = (rule, value, callback) => {
        if (this.addMsg.CategoryId == 0) {
          return callback(new Error("请选择楼宇等级"));
        } else {
          callback();
        }
      };
      let validataLogo = (rule, value, callback) => {
        if (this.addMsg.BannerList == "") {
          return callback(new Error("请上传企业图片"));
        } else {
          callback();
        }
      };
      return {
        pageloading: false,
        addMsg: {
          ServiceId: 0,
          Name: "", //名称
          Logo: "", //Logo
          BannerList: [], //企业图
          Introduction: "", //企业简介
          DevIntention: "", //企业发展
          Address: "", //楼宇位置
          LatAndLon: "", //经纬度
          OperationTime: "", //投运时间
          CategoryId: 0, //企业分类
          EType: 0, //楼宇等级
          Renovation: "", //楼宇装修
          Payment: "", //支付方式
          HandoverDate: "", //交房日期
          IntentionalFloor: null, //意向楼层
          ElevatorNum: null, //电梯数
          PropertyFee: null, //物业费
          RentFee: null, //月租金
          ContactName: "", //名字
          ContactPhone: null, //电话
        },
        rules: {
          BannerList: [{
            required: true,
            validator: validataLogo,
            trigger: "change",
          }, ],
          Name: [{
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
          }, ],
          Logo: [{
            required: true,
            message: "请选择Logo",
            trigger: "blur",
          }, ],
          Introduction: [{
            required: true,
            message: "请输入企业简介",
            trigger: "blur",
          }, ],
          DevIntention: [{
            required: true,
            message: "企业发展意向",
            trigger: "blur",
          }, ],
          Address: [{
            required: true,
            message: "请输入楼宇位置",
            trigger: "blur",
          }, ],
          OperationTime: [{
            required: true,
            message: "请选择投运时间",
            trigger: "change",
          }, ],
          CategoryId: [{
            required: true,
            validator: validataType,
            trigger: "change",
          }, ],
          Renovation: [{
            required: true,
            message: "请输入楼宇装修",
            trigger: "blur",
          }, ],
          Payment: [{
            required: true,
            message: "请输入支付方式",
            trigger: "blur",
          }, ],
          HandoverDate: [{
            required: true,
            message: "请选择交房日期",
            trigger: "change",
          }, ],
          IntentionalFloor: [{
            required: true,
            message: "请输入意向楼层",
            trigger: "blur",
          }, ],
          ElevatorNum: [{
            required: true,
            message: "请输入电梯数",
            trigger: "blur",
          }, ],
          PropertyFee: [{
            required: true,
            message: "请输入物业费",
            trigger: "blur",
          }, ],
          RentFee: [{
            required: true,
            message: "请输入月租金",
            trigger: "blur",
          }, ],
          ContactName: [{
            required: true,
            message: "请输入楼负责人名字",
            trigger: "blur",
          }, ],
          ContactPhone: [{
            required: true,
            message: "请输入楼负责人电话",
            trigger: "blur",
          }, ],
        },
        ID: 0,
        type: -1,
        choicImg: false,
        changeState1: false,
        LogoList: [],
        CategoryList: [],
        ETypeList: [],
        isShowMap: false,
        RenovationList: [], //装修类型
        PayTypeList: [], //支付方式
      };
    },
    components: {
      ChooseImg,
      Choosevideo,
      draggable,
      commonMap,
    },
    created() {
      this.addMsg.BrandEnterpriseType = 2
      if (this.$route.query.ID) {
        this.ID = this.$route.query.ID;
        this.getData();
      }
      this.getTypeEnumList();
      this.getConfigData();
    },
    methods: {
      getConfigData() {
        this.apipost("/api/Trade/GetYBConfig", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.RenovationList = res.data.data.zhuangXiuList;
            this.PayTypeList = res.data.data.fukuanList;
          }
        });
      },
      //得到地图信息
      mapEvent(e) {
        this.addMsg.LatAndLon = e.lat + "," + e.long;
        // this.addMsg.Address = e.Address;
        this.isShowMap = false;
      },
      //获取类型
      getTypeEnumList() {
        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);
          }
        });
        this.apipost("/api/Trade/GetBrandClassList", {
          BrandCategory: 4
        }, (res) => {
          if (res.data.resultCode == 1) {
            this.ETypeList = res.data.data;
            let obj = {
              ClassName: "请选择",
              ID: 0,
            };
            this.ETypeList.unshift(obj);
          }
        });
      },
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost(
              "/api/YBTrade/SetEnterpriseServicesInfo",
              this.addMsg,
              (res) => {
                if (res.data.resultCode === 1) {
                  this.CommonJump('firmManager');
                  this.Success(res.data.message);
                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },

      getData() {
        this.pageloading = true;
        this.apipost(
          "/api/YBTrade/GetEnterpriseServicesInfo", {
            ServiceId: this.ID,
          },
          (res) => {
            this.pageloading = false;
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              this.addMsg = res.data.data;
              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.addMsg.BannerList.push(msg.url);
        }
        this.choicImg = false;
      },
      ClearCarouse(index) {
        this.addMsg.BannerList.splice(index, 1);
      },
      Selectvideo(val) {
        this.addMsg.VideoUrl = val.Path;
        this.changeState1 = false;
      },
    },
  };

</script>

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

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

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

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

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

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

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

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

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

</style>
