<template>
  <div v-loading="loading" class="h_edit_brand">
    <div class="head-title">
      <span @click="CommonJump('hbrand')" class="blue point">品牌管理</span>
      {{ addMsg.Id ? '/ 编辑品牌管理' : '/ 新增品牌管理' }}
    </div>
    <div class="content">
      <el-form :rules="rules" :model="addMsg" ref="addMsg" label-width="150px" style="width: 70%">
        <el-form-item label="品牌分类" class="is-required" prop="CategoryId">
          <el-select class="w300" v-model="addMsg.CategoryId" size="small" placeholder="请选择">
            <el-option :key="0" label="请选择" :value="0"></el-option>
            <el-option v-for="item in CategoryList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌名" prop="Name" class="is-required" size="small">
          <el-input v-model="addMsg.Name" class="w600" placeholder="请输入品牌名" maxlength="100" />
        </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">
            </el-image>
          </div>
        </el-form-item>
        <el-form-item label="品牌介绍图" prop="BrandImgList">
          <div class="nav_Main">
            <div class="nav_IconContent">
              <draggable v-model="addMsg.BrandImgList">
                <div style="
                    position: relative;
                    margin-right: 20px;
                    display: inline-block;
                  " v-for="(item, index) in addMsg.BrandImgList" :key="index + '2'">
                  <el-image style="width: 100px;height: 100px" :src="item.Path">
                  </el-image><br />
                  <el-input v-model="item.Name" style="width: 100px;" placeholder="描述"></el-input>
                  <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.BrandImgList.length < 9" class="add-image-btn 2222"
              style="cursor: pointer">
              + 添加图片
            </div>
          </div>
        </el-form-item>
        <el-form-item label="热门推荐" size="small">
          <el-radio v-model="addMsg.IsHot" :label="1">是</el-radio>
          <el-radio v-model="addMsg.IsHot" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="更多描述" size="small">
          <el-input v-model="addMsg.MoreDesc" placeholder="请输入更多描述" class="w600" maxlength="500" />
        </el-form-item>
        <el-form-item label="备注描述" size="small">
          <el-input v-model="addMsg.RemarkDesc" placeholder="请输入备注描述" class="w600" maxlength="500" />
        </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="isShowIamge" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";

import draggable from "vuedraggable";
export default {
  components: {
    ChooseImg,
    draggable
  },
  data() {
    return {
      addMsg: {
        Id: 0,
        Name: "", //品牌名称
        Logo: "", //Logo
        IsHot: 0,
        CategoryId: "", //品牌分类
        MoreDesc: "", //更多描述
        RemarkDesc: "", //备注描述
        BrandImgList: [] //品牌介绍图
      },
      CategoryList: [], //品牌分类列表
      isShowIamge: false,
      chooseType: 0,
      loading: false,
      rules: {
        Name: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
        CategoryId: [
          { required: true, message: "请选择分类", trigger: "change" }
        ],
        BrandImgList: [
          { required: true, message: "请选择图片", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.getCategoryList();
  },
  mounted() {
    if (this.$route.query.Id) {
      this.addMsg.Id = this.$route.query.Id;
      this.initData();
    }
  },
  methods: {
    //删除图片
    ClearCarouse(index) {
      if (this.addMsg.BrandImgList && this.addMsg.BrandImgList.length > 0) {
        this.addMsg.BrandImgList.splice(index, 1);
      }
    },
    initData() {
      var qMsg = {
        BrandId: this.addMsg.Id
      };
      this.apipost("/api/Assess/GetBrandInfo", qMsg, res => {
        if (res.data.resultCode == 1) {
          var tempData = res.data.data;
          if (tempData) {
            let {
              Id,
              Name,
              Logo,
              CategoryId,
              IsHot,
              MoreDesc,
              RemarkDesc
            } = tempData;
            this.addMsg = {
              Id,
              Name,
              Logo,
              CategoryId,
              IsHot,
              MoreDesc,
              RemarkDesc
            };
            if (tempData.BrandImgList && tempData.BrandImgList.length > 0) {
              this.addMsg.BrandImgList = tempData.BrandImgList;
            }
          }
        }
      });
    },
    SelectId(msg) {
      let url = this.getIconLink(msg.url);
      if (this.chooseType == 1) {
        this.addMsg.Logo = url;
      }
      if (this.chooseType == 2) {
        this.addMsg.BrandImgList.push({
          Sort: 1,
          Name: "",
          Path: url
        });
      }
      this.isShowIamge = false;
    },
    //显示图片弹窗
    openChangeDig(type) {
      this.chooseType = type;
      this.isShowIamge = true;
    },
    //获取品牌分类
    getCategoryList() {
      this.apipost("/api/Assess/GetCategoryDropList", {}, res => {
        if (res.data.resultCode == 1) {
          this.CategoryList = res.data.data;
        }
      });
    },
    //保存品牌
    Save(formName) {
      this.$refs[formName].validate(valid => {
        if (valid && this.addMsg.Logo && this.addMsg.BrandImgList[0]) {
          this.apipost("/api/Assess/SetBrandInfo", this.addMsg, res => {
            if (res.data.resultCode == 1) {
              this.CommonJump("hbrand");
              this.Success(res.data.message);
            } else {
              this.Error(res.data.message);
            }
          });
        } else {
          this.$message.error('请填写完整信息');
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.h_edit_brand .w600 {
  width: 600px;
}

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

.h_edit_brand .brandShuxing_item {
  display: flex;
  justify-content: space-between;
  width: 50%;
}
</style>
