<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 style="width: 80px; height: 80px" 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="荣誉徽章">
          <div class="nav_Main">
            <div class="nav_IconContent">
              <draggable v-model="addMsg.HonorList">
                <div v-for="(item, index) in addMsg.HonorList" :key="index + '2'" style="
                    margin-right: 20px;
                    position: relative;
                    display: inline-block;
                  ">
                  <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="addMsg.HonorList">
                  </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 = 3)" 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="开业状态" prop="">
          <el-select v-model="addMsg.OpeningStatus" filterable size="small" placeholder="请选择">
            <el-option v-for="item in OpeningStatusList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="">
          <div slot="label">
            首店类型/数量
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="添加首店类型/数量"
              placement="top"
            >
              <i class="el-icon-plus" @click="addTypeAndNum"></i>
            </el-tooltip> -->
          </div>
          <div style="width: 690px; display: flex; align-items: center" v-for="(item, index) in addMsg.FirstShopNumList"
            :key="index">
            <!-- <el-select
              v-model="item.Id"
              filterable
              size="small"
              placeholder="请选择"
            >
              <el-option
                v-for="item in shenList"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select> -->
            <div style="
                width: 40%;
                white-space: nowrap;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                height: 32px;
                line-height: 32px;
              ">
              {{ item.Name }}
            </div>
            <el-input v-model="item.Num" size="small" placeholder="首店数量"></el-input>
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="删除首店类型/数量"
              placement="top"
            >
              <i class="el-icon-delete" @click="delTypeAndNum(index)"></i>
            </el-tooltip> -->
          </div>
        </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="项目地址" prop="Address">
          <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="店铺数量" prop="ShopNum">
          <el-input v-model="addMsg.ShopNum" @keyup.native="checkInteger(addMsg, 'ShopNum')" style="width: 690px"
            size="small" placeholder="请输入店铺数量">
          </el-input>
        </el-form-item>
        <el-form-item label="经营面积" prop="BuiltUpArea">
          <el-input v-model="addMsg.BuiltUpArea" @keyup.native="checkPrice(addMsg, 'BuiltUpArea')" style="width: 690px"
            size="small" placeholder="请输入经营面积">
            <template slot="append">㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="可租赁面积" prop="AreaRequirement">
          <el-input v-model="addMsg.AreaRequirement" @keyup.native="checkPrice(addMsg, 'AreaRequirement')"
            style="width: 690px" size="small" placeholder="请输入可租赁面积">
            <template slot="append">㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="去年业绩" prop="YeJi">
          <el-input v-model="addMsg.YeJi" @keyup.native="checkPrice(addMsg, 'YeJi')" style="width: 690px" size="small"
            placeholder="请输入去年业绩">
          </el-input>
        </el-form-item>
        <el-form-item label="商业体量" prop="CarrierSize">
          <el-input v-model="addMsg.CarrierSize" @keyup.native="checkPrice(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="招引优惠政策">
          <el-input v-model="addMsg.Discount" style="width: 690px" size="small" placeholder="请输入招引优惠政策">
          </el-input>
        </el-form-item>
        <el-form-item label="首发、首秀、首展的招引优惠政策">
          <el-input v-model="addMsg.StartingInfo" style="width: 690px" size="small" placeholder="请输入首发、首秀、首展的招引优惠政策">
          </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-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: [], //地铁信息
          FirstShopNumList: [
            //载体类型、数量
            // {
            //   Id: 0,
            //   Name: "",
            //   Num: 0,
            // },
          ],
          HonorList: [], //载体荣誉
          Discount: "", //招引优惠政策
          StartingInfo: "", //首发政策
          FirstShow: "", //首秀政策
          FirstExhibition: "", //首展政策
          ShopNum: "", //店铺数量
          BuiltUpArea: "", //经营面积
          AreaRequirement: "", //可租赁面积
          YeJi: "", //去年业绩
          OpeningStatus: -1,
          ContactName: "", //联系人
          ContactPhone: "", //联系电话
        },
        OpeningStatusList: [{
            id: 0,
            name: "即将开业",
          },
          {
            id: 1,
            name: "已开业",
          },
        ],
        rules: {
          CarrierName: [{
            required: true,
            message: "请输入载体名称",
            trigger: "blur",
          }, ],
          Developers: [{
            required: true,
            message: "请输入开发商",
            trigger: "blur",
          }, ],
          Address: [{
            required: true,
            message: "请输入项目地址",
            trigger: "blur",
          }, ],
          OpenTime: [{
            required: true,
            message: "请选择开业时间",
            trigger: "blur",
          }, ],
          ProjectType: [{
            required: true,
            validator: validataType,
            trigger: "change",
          }, ],
          Logo: [{
            required: true,
            validator: validataLogo,
            trigger: "change",
          }, ],
          ShopNum: [{
            required: true,
            message: "请输入店铺数量",
            trigger: "change",
          }, ],
          BuiltUpArea: [{
            required: true,
            message: "请输入经营面积",
            trigger: "change",
          }, ],
          AreaRequirement: [{
            required: true,
            message: "请输入可租赁面积",
            trigger: "change",
          }, ],
          YeJi: [{
            required: true,
            message: "请输入去年业绩",
            trigger: "change",
          }, ],
          CarrierSize: [{
            required: true,
            message: "请输入商业体量",
            trigger: "change",
          }, ],
        },
        ID: 0,
        type: -1,
        choicImg: false,
        changeState1: false,
        isShowMap: false, //显示地图
        MetroList: [], //地铁信息数据
        ProjectTypeList: [], //项目类型数组
        introImgList: [], //介绍图
        LogoList: [],
        shenList: [],
      };
    },
    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);
          }
        });
      },
      //新增地铁信息
      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);
        }
        if (this.type == 3) {
          this.addMsg.HonorList.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);
        }
      },
      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.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>
