<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" prop="BrandClassId">
          <el-select
            class="w300"
            v-model="addMsg.BrandClassId"
            size="small"
            placeholder="请选择"
          >
            <el-option :key="0" label="请选择" :value="0"></el-option>
            <el-option
              v-for="item in BrandClassList"
              :key="item.ID"
              :label="item.ClassName"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </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>
        

        <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 {
      addMsg: {
        ID: 0,
        Logo: "", //Logo
        BannerList: [], //品牌介绍图
        VideoUrl: "", //品牌视频
        FullBrandName: "", //品牌全名
        BrandName: "", //品牌名
        ShopNum: "", //店铺数量
        BuiltUpArea: "", //建筑面积小
        EndBuiltUpArea: "", //建筑面积大
        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-有）
      },
      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: [],
    };
  },
  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/GetBrandClassList", {}, (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;
      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;
            }
            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>
