<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="荣誉徽章" class="is-required">
          <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"
              >
              </el-option>
            </el-select>
            <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="项目地址">
          <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.ShopNum"
            type="number"
            style="width: 690px"
            size="small"
            placeholder="请输入店铺数量"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="经营面积">
          <el-input
            v-model="addMsg.BuiltUpArea"
            type="number"
            style="width: 690px"
            size="small"
            placeholder="请输入经营面积"
          >
            <template slot="append">㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="可租赁面积">
          <el-input
            v-model="addMsg.AreaRequirement"
            type="number"
            style="width: 690px"
            size="small"
            placeholder="请输入可租赁面积"
          >
            <template slot="append">㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="去年业绩">
          <el-input
            v-model="addMsg.YeJi"
            type="number"
            style="width: 690px"
            size="small"
            placeholder="请输入去年业绩"
          >
          </el-input>
        </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="招引优惠政策">
          <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="地铁信息">
          <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,
      },
      OpeningStatusList: [
        {
          id: 0,
          name: "即将开业",
        },
        {
          id: 1,
          name: "已开业",
        },
      ],
      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: [],
      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;
          }
        }
      );
    },
    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>
