<template>
  <div v-loading="loading" class="addbrand">
    <div class="head-title">
      <span @click="CommonJump('brandManagement')" class="blue point">品牌管理</span>
      / 编辑品牌管理
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width: 70%">
        <el-form-item label="品牌分类" class="is-required"  >
          <el-cascader class="w300" size="small" placeholder="请选择"  
            v-model="addMsg.MoreBrandClassIdList" :options="BrandClassList"></el-cascader>
        </el-form-item>
        <el-form-item label="品牌全名" prop="FullBrandName" class="is-required" size="small">
          <el-input v-model="addMsg.FullBrandName" class="w600" placeholder="请输入品牌全名" maxlength="100" />
        </el-form-item>
        <el-form-item label="品牌名" prop="BrandName" class="is-required" size="small">
          <el-input v-model="addMsg.BrandName" class="w600" placeholder="请输入品牌名" maxlength="100" />
        </el-form-item>
        <el-form-item label="品牌视频">
          <el-input v-model="addMsg.VideoUrl" class="w600" size="small" placeholder="请输入内容">
            <el-button @click="changeState1 = true" slot="append">添加视频</el-button>
          </el-input>
          <a v-if="addMsg.VideoUrl != ''" class="blue noline" :href="addMsg.VideoUrl" target="_blank">视频链接</a>
        </el-form-item>
        <el-form-item label="Logo" class="is-required" prop="Logo" size="small">
          <el-button @click="openChangeDig(1)" 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="品牌介绍图">
          <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="openChangeDig(2)" v-if="addMsg.BannerList.length < 9" class="add-image-btn 2222"
              style="cursor: pointer">
              + 添加图片
            </div>
          </div>
        </el-form-item>
        <el-form-item label="店铺数量" prop="ShopNum" class="is-required" size="small">
          <el-input v-model="addMsg.ShopNum" class="w600" placeholder="请输入店铺数量" type="number" maxlength="3" />
        </el-form-item>
        <el-form-item label="建筑面积" size="small">
          <el-input v-model="addMsg.BuiltUpArea" placeholder="请输入建筑面积" type="number" style="width: 200px"
            maxlength="7" />
          <span style="margin: 0 10px">~</span>
          <el-input v-model="addMsg.EndBuiltUpArea" placeholder="请输入建筑面积" type="number" style="width: 200px"
            maxlength="7" />
        </el-form-item>
        <el-form-item label="需求面积" size="small">
          <el-input v-model="addMsg.AreaRequirement" placeholder="请输入需求面积" type="number" style="width: 200px"
            maxlength="7" />
          <span style="margin: 0 10px">~</span>
          <el-input v-model="addMsg.EndAreaRequirement" placeholder="请输入需求面积" type="number" style="width: 200px"
            maxlength="7" />
        </el-form-item>
        <el-form-item label="客群定位" size="small">
          <el-input v-model="addMsg.CustomerType" placeholder="请输入客群定位" class="w600" maxlength="200" />
        </el-form-item>
        <el-form-item label="品牌定位" size="small">
          <el-input v-model="addMsg.BrandType" placeholder="请输入品牌定位" class="w600" maxlength="100" />
        </el-form-item>
        <el-form-item label="拓店区域" size="small">
          <el-input v-model="addMsg.StoreExpansion" placeholder="请输入拓店区域" class="w600" maxlength="200" />
        </el-form-item>
        <el-form-item label="商铺区域" size="small">
          <el-select class="w300" v-model="addMsg.ProjectType" size="small" placeholder="请选择商铺区域">
            <el-option :key="0" label="请选择" :value="0"></el-option>
            <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="电量" size="small">
          <el-input v-model="addMsg.ShopSize" class="w600" placeholder="请输入电量" maxlength="80" />
        </el-form-item> -->
        <div class="brandShuxing">
          <div class="brandShuxing_item">
            <el-form-item label="店铺开口尺寸" class="is-required">
              <el-radio v-model="addMsg.IsShopSize" :label="1">是</el-radio>
              <el-radio v-model="addMsg.IsShopSize" :label="0">否</el-radio>
            </el-form-item>
            <el-input v-model="addMsg.ShopSize" v-if="addMsg.IsShopSize == 1" size="small" class="w120"
              placeholder="店铺开口尺寸" maxlength="80" />
          </div>
          <div class="brandShuxing_item">
            <el-form-item label="燃气" class="is-required">
              <el-radio v-model="addMsg.RanQi" :label="1">是</el-radio>
              <el-radio v-model="addMsg.RanQi" :label="0">否</el-radio>
            </el-form-item>
            <el-input v-model="addMsg.RanQiBZ" v-if="addMsg.RanQi == 1" size="small" class="w120" placeholder="燃气备注"
              maxlength="80" />
          </div>
        </div>
        <div class="brandShuxing">
          <div class="brandShuxing_item">
            <el-form-item label="排烟量" class="is-required">
              <el-radio v-model="addMsg.PaiYan" :label="1">是</el-radio>
              <el-radio v-model="addMsg.PaiYan" :label="0">否</el-radio>
            </el-form-item>
            <el-input v-model="addMsg.PaiYanBZ" v-if="addMsg.PaiYan == 1" size="small" class="w120" placeholder="排烟量"
              maxlength="80" />
          </div>
          <div class="brandShuxing_item">
            <el-form-item label="电量" class="is-required">
              <el-radio v-model="addMsg.IsDianLiang" :label="1">是</el-radio>
              <el-radio v-model="addMsg.IsDianLiang" :label="0">否</el-radio>
            </el-form-item>
            <el-input v-model="addMsg.DianLiang" v-if="addMsg.IsDianLiang == 1" size="small" class="w120"
              placeholder="电量" maxlength="80" />
          </div>
        </div>
        <div class="brandShuxing">
          <div class="brandShuxing_item">
            <el-form-item label="上下水" class="is-required">
              <el-radio v-model="addMsg.Plumbing" :label="1">是</el-radio>
              <el-radio v-model="addMsg.Plumbing" :label="0">否</el-radio>
            </el-form-item>
          </div>
          <div class="brandShuxing_item">
            <el-form-item label="管径" class="is-required">
              <el-radio v-model="addMsg.Caliber" :label="1">是</el-radio>
              <el-radio v-model="addMsg.Caliber" :label="0">否</el-radio>
            </el-form-item>
          </div>
        </div>
        <div class="brandShuxing">
          <div class="brandShuxing_item">
            <el-form-item label="排污" class="is-required">
              <el-radio v-model="addMsg.Sewage" :label="1">是</el-radio>
              <el-radio v-model="addMsg.Sewage" :label="0">否</el-radio>
            </el-form-item>
          </div>
          <div class="brandShuxing_item">
            <el-form-item label="空调" class="is-required">
              <el-radio v-model="addMsg.KongTiao" :label="1">是</el-radio>
              <el-radio v-model="addMsg.KongTiao" :label="0">否</el-radio>
            </el-form-item>
          </div>

        </div>

        <div class="brandShuxing">

          <div class="brandShuxing_item">
            <el-form-item label="新风" class="is-required">
              <el-radio v-model="addMsg.XinFeng" :label="1">是</el-radio>
              <el-radio v-model="addMsg.XinFeng" :label="0">否</el-radio>
            </el-form-item>
          </div>
          <div class="brandShuxing_item">
            <el-form-item label="成都落地" class="is-required">
              <el-radio v-model="addMsg.IsInChengdu" :label="1">是</el-radio>
              <el-radio v-model="addMsg.IsInChengdu" :label="0">否</el-radio>
            </el-form-item>
          </div>

        </div>
        <div class="brandShuxing">

          <div class="brandShuxing_item">
            <el-form-item label="开店意愿" class="is-required">
              <el-radio v-model="ShopWish" :label="1">是</el-radio>
              <el-radio v-model="ShopWish" :label="0">否</el-radio>
            </el-form-item>

            <el-rate style="margin-top: 10px;" v-model="addMsg.OpenShopWish" v-if="ShopWish == 1" :colors="colors">
            </el-rate>
          </div>

        </div>
        <el-form-item label="联系人">
          <el-input v-model="addMsg.ContactName" class="w600" size="small" placeholder="请输入联系人">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="addMsg.ContactPhone" class="w600" size="small" placeholder="请输入联系电话">
          </el-input>
        </el-form-item>
        <el-form-item label="招引需求" class="ue-style">
          <el-input type="textarea" placeholder="请输入招引需求" v-model="addMsg.Other" maxlength="500" show-word-limit
            class="w600" rows="8">
          </el-input>
        </el-form-item>
        <el-form-item label="广告" class="ue-style">
          <UE style="width: 700px" :defaultMsg="Advertising" :config="config" :IsMultiple="true" ref="ue"></UE>
        </el-form-item>
        <!-- <el-form-item label="其他" class="ue-style">
          <UE
            style="width: 700px"
            :defaultMsg="Other"
            :config="config"
            :IsMultiple="true"
            ref="ueother"
          ></UE>
        </el-form-item> -->
      </el-form>
    </div>
    <div style="margin-top: 20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 选择视频 -->
    <el-dialog title="选择文件" :visible.sync="changeState1" width="1240px">
      <Choosevideo @Selectvideo="Selectvideo"></Choosevideo>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import UE from "@/components/global/UE.vue";
  import Choosevideo from "@/components/global/Choosevideo.vue";
  import draggable from "vuedraggable";
  export default {
    components: {
      ChooseImg,
      UE,
      Choosevideo,
      draggable,
    },
    data() {
      return {
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        addMsg: {
          ID: 0,
          Logo: "", //Logo
          BannerList: [], //品牌介绍图
          VideoUrl: "", //品牌视频
          FullBrandName: "", //品牌全名
          BrandName: "", //品牌名
          ShopNum: "", //店铺数量
          BuiltUpArea: 0, //建筑面积小
          EndBuiltUpArea: 0, //建筑面积大
          CustomerType: "", //客群定位
          BrandType: "", //品牌定位
          StoreExpansion: "", //扩店区域
          ProjectType: 0, //商铺性质
          AreaRequirement: 0, //
          EndAreaRequirement: 0, //
          Advertising: "", //广告
          Other: "", //其他
          ShopSize: 1, //店铺开口尺寸
          Plumbing: 1, //上下水
          Caliber: 1, //管径
          Sewage: 1, //排污
          RanQi: 1, //燃气
          DianLiang: "", //电量
          PaiYan: 1, //排烟量
          KongTiao: 1, //空调
          XinFeng: 1, //新风
          BrandClassId: 0, //品牌分类Id
          RanQiBZ: "", //燃气备注
          IsDianLiang: 1, //电量（0-否1-有）
          PaiYanBZ: "", //排烟量备注
          ShopSize: "", //店铺开口尺寸
          IsShopSize: 1, //店铺开口尺寸（0-否1-有）
          OpenShopWish: 5, //开店意愿
          IsInChengdu: 0, //是否成都落地
          ContactName: "", //联系人
          ContactPhone: "", //联系电话
          MoreBrandClassIdList:[],//分类层级Id
        },
        loadingPeople: false,
        dynamicTags: [],
        dynamicTags2: [],
        inputVisible: false,
        inputValue: "",
        inputVisible2: false,
        inputValue2: "",
        Advertising: "",
        Other: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 200,
        },
        Picindex: 0,
        rules: {
          FullBrandName: [{
            required: true,
            message: "请输入品牌全名",
            trigger: "blur",
          }, ],
          BrandName: [{
            required: true,
            message: "请输入品牌名",
            trigger: "blur",
          }, ],
          Logo: [{
            required: true,
            message: "请选择Logo",
            trigger: "blur",
          }, ],
          ShopNum: [{
            required: true,
            message: "请输入店铺数量",
            trigger: "blur",
          }, ],
        },
        loading: false,
        changeState: false,
        changeState1: false,
        imgType: 0,
        peopleData: [],
        BrandClassList: [], //品牌分类列表
        ProjectTypeList: [], //商铺性质列表
        logoList: [],
        ShopWish: 1,
      };
    },
    created() {
      this.getBrandClassList();
      this.getProjectType();
    },
    mounted() {
      if (this.$route.query.ID) {
        this.getData(this.$route.query.ID);
      }
    },
    methods: {
      //获取商铺性质
      getProjectType() {
        this.apipost("/api/Trade/GetProjectTypeEnumList", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.ProjectTypeList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //选择图片
      SelectId(msg) {
        let url = this.getIconLink(msg.url);
        if (this.imgType == 1) {
          this.addMsg.Logo = url;
        }
        if (this.imgType == 2) {
          this.addMsg.BannerList.push(url);
        }
        this.changeState = false;
      },
      //删除品牌介绍图片
      ClearCarouse(index) {
        this.addMsg.BannerList.splice(index, 1);
      },
      openChangeDig(num) {
        this.changeState = true;
        this.imgType = num;
      },
      Selectvideo(val) {
        this.addMsg.VideoUrl = val.Path;
        this.changeState1 = false;
      },
      getBrandClassList() {
        this.apipost("/api/Trade/GetBrandClassTree", {
          BrandCategory: 3
        }, (res) => {
          if (res.data.resultCode == 1) {
            this.BrandClassList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //保存品牌
      Save(formName) {
        //广告
        let advertising = this.$refs.ue.getUEContent();
        this.addMsg.Advertising = advertising;
        //其他
        // let other = this.$refs.ueother.getUEContent();
        // this.addMsg.Other = other;
        if (this.addMsg.BuiltUpArea === '' || this.addMsg.EndBuiltUpArea === '') {
          this.Error('请输入建筑面积')
          return
        }
        if (this.addMsg.AreaRequirement === '' || this.addMsg.EndAreaRequirement === '') {
          this.Error('请输入需求面积')
          return
        }
        if (this.ShopWish == 0) {
          this.addMsg.OpenShopWish = -1
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost("/api/Trade/GetSetBrand", this.addMsg, (res) => {
              if (res.data.resultCode == 1) {
                this.CommonJump("brandManagement");
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            });
          } else {
            return false;
          }
        });
      },
      //获取详情
      getData(ID) {
        this.loading = true;
        this.apipost(
          "/api/Trade/GetBrandDetails", {
            ID: ID,
          },
          (res) => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.addMsg = res.data.data;
              if (this.addMsg.Advertising && this.addMsg.Advertising != "") {
                this.Advertising = this.addMsg.Advertising;
              }
              // if (this.addMsg.Other && this.addMsg.Other != "") {
              //   this.Other = this.addMsg.Other;
              // }
              if (this.addMsg.OpenShopWish == -1) {
                this.ShopWish = 0
              }
              this.logoList = [];
              this.logoList.push(this.addMsg.Logo);
            }
          }
        );
      },
    },
  };

</script>
<style>
  .app-add-cat .el-checkbox-group {
    font-size: 14px !important;
  }

  .app-add-cat .el-checkbox {
    margin-right: 0;
  }

  .app-add-cat .el-dialog__body {
    padding: 10px 20px !important;
  }

  .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }

  .app-add-cat .tag-box {
    margin: 20px 0;
  }

  .app-add-cat .app-goods-cat-list .active {
    background: #fafafa;
  }

  .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }

  .app-add-cat .app-goods-cat-list {
    border: 1px solid #e8eaee;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }

  .addbrand .blue {
    color: #409eff;
  }

  .addbrand .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .addbrand .gez_list {
    /*width: 650px;*/
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
  }

  .addbrand .quyu {
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 5px;
  }

  .addbrand .el-tag+.el-tag {
    margin-left: 10px;
  }

  .addbrand .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .addbrand .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .addbrand .ue-style .el-form-item__content {
    line-height: 0;
  }

  .addbrand .app-gallery-item {
    border: none;
  }

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

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

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

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

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

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

  .addbrand .w600 {
    width: 600px;
  }

  .addbrand .brandShuxing {
    display: flex;
    justify-content: space-between;
    width: 850px;
  }

  .addbrand .brandShuxing_item {
    display: flex;
    justify-content: space-between;
    width: 50%;
  }

</style>
