<template>
  <div v-loading="pageloading" class="editBrandEnter">
    <div class="head-title">
      <span @click="CommonJump(isBrand?'BrandEnterpriseManager':'EnterpriseManager')"
        class="blue point">{{isBrand?'品牌':'服务'}}管理</span>
      / <span>{{ID?'编辑':'新增'}}{{isBrand?'品牌':'服务'}}</span>
    </div>
    <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="180px">
      <el-card shadow="never" style="margin-top: 10px" class="box-card">

        <el-form-item :label="`${isBrand?'品牌':'服务'}全名`" prop="FullBrandName" class="is-required" size="small">
          <el-input v-model="addMsg.FullBrandName" :placeholder="`请输入${isBrand?'品牌':'服务'}全名`" maxlength="100"
            style="width: 690px;" />
        </el-form-item>
        <el-form-item :label="`${isBrand?'品牌':'服务'}名`" prop="BrandName" class="is-required" size="small">
          <el-input v-model="addMsg.BrandName" :placeholder="`请输入${isBrand?'品牌':'服务'}名`" maxlength="100"
            style="width: 690px;" />
        </el-form-item>
        <el-form-item :label="`${isBrand?'品牌':'服务'}视频`">
          <el-input v-model="addMsg.VideoUrl" size="small" placeholder="请输入内容" style="width: 690px;">
            <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="type=1,choicImg=true" 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="`${isBrand?'品牌':'服务'}介绍图`">
          <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="type=2,choicImg=true" v-if="addMsg.BannerList.length < 9" class="add-image-btn 2222"
              style="cursor: pointer">
              + 添加图片
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="`${isBrand?'品牌':'服务'}分类`">
          <el-select class="w300" v-model="addMsg.CategoryId" size="small" placeholder="请选择">
            <el-option v-for="item in CategoryList" :key="item.ID" :label="item.ClassName" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="`${isBrand?'品牌':'服务'}简介`" class="ue-style">
          <el-input type="textarea" :placeholder="`请输入${isBrand?'品牌':'服务'}简介`" v-model="addMsg.Introduce"
            maxlength="500" autosize style="width: 690px;">
          </el-input>
        </el-form-item>
        <el-form-item label="店铺数量" size="small">
          <el-input v-model="addMsg.ShopNum" placeholder="请输入店铺数量" type="number" maxlength="3" style="width: 690px;" />
        </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-input v-model="addMsg.AreaRequirement" placeholder="请输入店铺数量" type="number" maxlength="3"
            style="width: 690px;">
            <template slot="append">㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="客群定位" size="small">
          <el-input v-model="addMsg.CustomerType" placeholder="请输入客群定位" maxlength="200" style="width: 690px;" />
        </el-form-item>
        <el-form-item :label="`${isBrand?'品牌':'服务'}定位`" size="small">
          <el-input v-model="addMsg.BrandType" :placeholder="`请输入${isBrand?'品牌':'服务'}定位`" maxlength="100"
            style="width: 690px;" />
        </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="招引需求" 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-item label="发展意向" prop="">
          <el-input v-model="addMsg.DevIntention" style="width: 690px" size="small" placeholder="请输入发展意向"
            maxlength="500" show-word-limit>
          </el-input>
        </el-form-item> -->
        <el-form-item label="合作条件" prop="">
          <el-input v-model="addMsg.Cooperation" style="width: 690px" size="small" placeholder="请输入合作条件" maxlength="500"
            show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="物业需求" prop="">
          <!-- <el-input v-model="addMsg.PropertyDemand" style="width: 690px" size="small" placeholder="请输入物业需求"
            maxlength="500" show-word-limit>
          </el-input> -->

          <el-select style="width: 690px" v-model="addMsg.PropertyDemandList"  multiple size="small" placeholder="物业需求">
            <el-option v-for="(item,index) in wuyeList" :key="index" :label="item.Name" :value="item.Name">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="配套需求" prop="">
          <el-input v-model="addMsg.Complementary" style="width: 690px" size="small" placeholder="请输入配套需求"
            maxlength="500" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="addMsg.ContactName" style="width: 690px" size="small" placeholder="请输入联系人" maxlength="50">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="addMsg.ContactPhone" style="width: 690px" size="small" placeholder="请输入联系电话"
            maxlength="50">
          </el-input>
        </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>
  </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: "editBrandEnter",
    data() {
      let validataType = (rule, value, callback) => {
        if (this.addMsg.CategoryId == 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,
          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, //是否成都落地
          CategoryId: 0, //分类ID
          BrandEnterpriseType: 1, //(1-品牌，2-企业服务)
          Introduce: '', //品牌简介/企业简介
          DevIntention: '', //发展意向
          Cooperation: '', //合作条件
          PropertyDemand: '', //物业需求
          PropertyDemandList:[],//物业需求数组,
          Complementary: '', //配套需求
          ContactName: "", //联系人
          ContactPhone: '', //联系电话
        },
        rules: {
          Logo: [{
            required: true,
            validator: validataLogo,
            trigger: "change",
          }, ],
          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",
          }, ],
          CategoryId: [{
            required: true,
            validator: validataType,
            trigger: "change",
          }, ],
        },
        ID: 0,
        type: -1,
        choicImg: false,
        changeState1: false,
        LogoList: [],
        isBrand: true,
        CategoryList: [],
        wuyeList:[],//物业需求
      };
    },
    components: {
      ChooseImg,
      Choosevideo,
      draggable,
    },
    created() {
      this.isBrand = this.$route.query.isBrand
      this.addMsg.BrandEnterpriseType = this.isBrand ? this.isBrand : 2
      if (this.$route.query.ID) {
        this.ID = this.$route.query.ID;
        this.getData();
      }
      this.getTypeEnumList();
      this.getConfigData();
    },
    methods: {
      getConfigData() {
        this.apipost("/api/Trade/GetYBConfig", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.wuyeList = res.data.data.wuyeList;
          }
        });
      },
      //获取类型
      getTypeEnumList() {
        this.apipost("/api/Trade/GetBrandClassList", {
          BrandCategory: this.isBrand ? 3 : 4
        }, (res) => {
          if (res.data.resultCode == 1) {
            this.CategoryList = res.data.data;
            let obj = {
              ClassName: "请选择",
              ID: 0,
            };
            this.CategoryList.unshift(obj);
          }
        });
      },
      Save(formName) {
        //其他
        // 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
        // }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost(
              "/api/Trade/SetBrandEnterprise",
              this.addMsg,
              (res) => {
                if (res.data.resultCode === 1) {
                  this.CommonJump(this.isBrand ? 'BrandEnterpriseManager' : 'EnterpriseManager');
                  this.Success(res.data.message);
                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
      getData() {
        this.pageloading = true;
        this.apipost(
          "/api/Trade/GetBrandEnterpriseInfo", {
            ID: this.ID,
          },
          (res) => {
            this.pageloading = false;
            if (res.data.resultCode == 1) {
              this.addMsg = res.data.data;
              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.addMsg.BannerList.push(msg.url);
        }
        this.choicImg = false;
      },
      ClearCarouse(index) {
        this.addMsg.BannerList.splice(index, 1);
      },
      Selectvideo(val) {
        this.addMsg.VideoUrl = val.Path;
        this.changeState1 = false;
      },
    },
  };

</script>

<style>
  .editBrandEnter .content {
    background: #fff;
    margin-top: 10px;
    box-sizing: border-box;
  }

  .editBrandEnter .editIconImg {
    width: 80px;
    height: 80px;
  }

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

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

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

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

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

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

  .delCarrClose {
    position: absolute;
    right: 53px;
    top: 8px;
    padding: 4px 4px !important;
  }

</style>
