<template>
  <div v-loading="pageloading" class="editVehicle">
    <div class="head-title">
      <span @click="CommonJump('VehicleManagement')" class="blue point">载体管理</span> / 编辑载体
    </div>
    <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
      <el-card shadow="never" style="margin-top:10px" class="box-card">
        <el-form-item label="项目名称" prop="CarrierName">
          <el-input v-model="addMsg.CarrierName" style="width:690px" placeholder="请输入项目名称" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="Logo" prop="Logo">
          <div>
            <el-tooltip class="item" effect="dark" content="建议尺寸:88*88" placement="top-start">
              <el-button size="small" @click="choicImg=true,type=1">选择文件</el-button>
            </el-tooltip>
          </div>
          <div class="editIconImg">
            <el-image style="width: 80px;height:80px;" v-if="addMsg.Logo" :src="addMsg.Logo"
              :preview-src-list="LogoList">
            </el-image>
            <img v-else src="../../assets/img/default.png" alt="" />
          </div>
        </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="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="开发商" prop="Developers">
          <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.VideoUrl" style="width:690px" size="small" placeholder="请输入载体视频">
            <el-button @click="changeState1 = true" slot="append">添加视频</el-button>
          </el-input>
          <div>
            <a v-if="addMsg.VideoUrl != ''" class="blue noline" :href="addMsg.VideoUrl" target="_blank">视频链接</a>
          </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-date-picker v-model="addMsg.OpenTime" clearable value-format="yyyy-MM-dd HH:mm:ss" size="small"
            type="datetime" placeholder="选择开业时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目类型" prop="ProjectType">
          <el-select style="width:220px;" v-model="addMsg.ProjectType" size="small" placeholder="请选择">
            <el-option v-for="item in ProjectTypeList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商业体量">
          <el-input v-model="addMsg.CarrierSize" style="width:690px" size="small" placeholder="请输入商业体量">
            <template slot="append">万平方米</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商业层数">
          <el-input v-model="addMsg.LayersNum" style="width:690px" size="small" placeholder="请输入商业层数">
          </el-input>
        </el-form-item>
        <el-form-item label="车位数量">
          <el-input v-model="addMsg.CarNum" @keyup.native="checkInteger(addMsg,'CarNum')" style="width:690px"
            size="small" placeholder="请输入车位数量">
          </el-input>
        </el-form-item>
        <el-form-item label="业态规则">
          <el-input v-model="addMsg.CarrierPlan" style="width:690px" size="small" placeholder="请输入业态规则">
          </el-input>
        </el-form-item>
        <el-form-item label="招引目标">
          <el-input v-model="addMsg.CarrierTarget" style="width:690px" size="small" placeholder="请输入招引目标">
          </el-input>
        </el-form-item>
        <el-form-item label="总体定位">
          <el-input v-model="addMsg.Location" style="width:690px" size="small" placeholder="请输入总体定位">
          </el-input>
        </el-form-item>
        <el-form-item label="目标人群">
          <el-input v-model="addMsg.Crowd" style="width:690px" size="small" placeholder="请输入目标人群">
          </el-input>
        </el-form-item>
        <el-form-item label="地铁信息">
          <div v-for="(item,index) in MetroList" :key="index" style="position:relative;width:690px;">
            <el-input v-model="item.MetroNum" @keyup.native="checkInteger(item,'MetroNum')" style="width:200px"
              size="small" placeholder="地铁线路" />
            <el-input v-model="item.MetroName" style="width:200px" size="small" placeholder="站点名称" />
            <el-input v-model="item.Distance" style="width:200px" size="small" placeholder="距离" />
            <el-button @click="delCarrier(index)" class="delCarrClose" type="danger" icon="el-icon-close" circle>
            </el-button>
          </div>
          <el-button type="primary" @click="addMetroList" icon="el-icon-plus" circle></el-button>
        </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: {
          ID: 0,
          CarrierName: '', //	载体名称
          Logo: '',
          BannerList: [], //载体介绍图
          VideoUrl: '', //载体视频
          Address: '', //载体地址
          LatAndLon: '', //载体地址经纬度
          Developers: '', //开发商
          OpenTime: '', //开业时间
          ProjectType: 0, //项目类型
          CarrierSize: 0, //商业体量
          LayersNum: '', //商业层数
          CarNum: 0, //车位数量
          CarrierPlan: '', //业态规划
          CarrierTarget: '', //招引目标
          Location: '', //定位
          Crowd: '', //目标人群
          CarrierMetroList: [] //地铁信息
        },
        rules: {
          CarrierName: [{
            required: true,
            message: '请输入载体名称',
            trigger: 'blur'
          }],
          Developers: [{
            required: true,
            message: '请输入开发商',
            trigger: 'blur'
          }],
          ProjectType: [{
            required: true,
            validator: validataType,
            trigger: 'change'
          }],
          Logo: [{
            required: true,
            validator: validataLogo,
            trigger: 'change'
          }]
        },
        ID: 0,
        type: -1,
        choicImg: false,
        changeState1: false,
        isShowMap: false, //显示地图
        MetroList: [], //地铁信息数据
        ProjectTypeList: [], //项目类型数组
        introImgList: [], //介绍图
        LogoList: [],
      }
    },
    components: {
      ChooseImg,
      Choosevideo,
      commonMap,
      draggable
    },
    created() {
      if (this.$route.query.ID) {
        this.ID = this.$route.query.ID;
        this.getData()
      }
      this.getTypeEnumList();
    },
    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);
          }
        })
      },
      //新增地铁信息
      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.MetroList.length > 0) {
              for (var i = 0; i < this.MetroList.length; i++) {
                if (this.MetroList[i].MetroNum == '') {
                  this.Error(`请填写第地铁信息${i+1}行地铁线路`);
                  return;
                }
                if (this.MetroList[i].MetroName == '') {
                  this.Error(`请填写第地铁信息${i+1}行站点名称`);
                  return;
                }
              }
            }
            // if(this.introImgList.length==0){
            //   this.Error('请上传介绍图');
            //   return;
            // }
            this.addMsg.CarrierMetroList = this.MetroList;
            this.addMsg.BannerList = this.introImgList;
            this.apipost('/api/Trade/GetSetCarrier', this.addMsg,
              res => {
                if (res.data.resultCode === 1) {
                  this.CommonJump('VehicleManagement')
                  this.Success(res.data.message)
                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },

      getData() {
        this.pageloading = true;
        this.apipost("/api/Trade/GetCarrierDetails", {
          ID: 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.OpenTime) {
              this.addMsg.OpenTime = this.addMsg.OpenTime.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);
        }
        this.choicImg = false;
      },
      ClearCarouse(index) {
        this.introImgList.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;
      },

    },
  };

</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>
