<template>
  <section class="p_all_20">
<el-tabs v-model="activeTop" type="card" @tab-click="handleClick">
    <el-tab-pane label="品牌介绍" name="1">
      <div class="" v-loading="loading" element-loading-text="加载中">
        <!-- <div class="brandList_box" id="brandList">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              v-for="item in brandList"
              :key="item.brandId"
              :label="item.brandName"
              :name="item.brandId"
            ></el-tab-pane>
          </el-tabs>
        </div> -->

        <div class="brandContent" v-if="brandInfo">
          <div id="brandInfo">
            <div class="bImg brandIdVal">
              <img :src="brandInfo.logo" alt class="logoImg" />
            </div>
            <div class="bpart">
              <p class="btext_title">品牌简介</p>
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入品牌简介..."
                v-model="brandInfo.introduction"
                maxlength="300"
                show-word-limit
              ></el-input>
            </div>
            <div class="bpart">
              <p class="btext_title">门店地址</p>
              <el-input
                type="textarea"
                placeholder="请输入门店地址..."
                v-model="brandInfo.address"
                maxlength="100"
                show-word-limit
              ></el-input>
            </div>

            <div class="bpart bpart2">
              <p class="btext_title">品牌banner</p>
              <div class="updateTips" style="color:#999;font-size:14px;padding-bottom:15px;">尺寸标准为952px*480px，格式为jpg或png，图片大小不超过1M。</div>
              <div class="udpatebox" v-if="!brandInfo.bannerPath">
                <div class="updateBtn">
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadData.host|| '' "
                    :show-file-list="false"
                    :on-success="handleSuccessBanner"
                    :before-upload="beforeUpload"
                    :data="uploadData"
                    name="file"
                    :multiple="false"
                  >
                    <i class="el-icon-plus avatar-uploader-icon" @click="isEdit=0"></i>
                  </el-upload>
                  <p class="iconText">添加品牌图片</p>
                </div>

              </div>
              <div v-if="brandInfo.bannerPath">
                <template>
                    <div class="updateShowImg">
                      <div class="imgBox">
                        <img :src="brandInfo.bannerPath" class="preview imageLen" alt />
                      </div>
                      <div class="btnBox">
                        <!-- 操作按钮 -->
                        <!-- <span class="editdelBtn editBtn el-icon-edit-outline" @click="editBtn(item,index)"> -->
                        <!-- <input type="file" name="fileImg" class="upInput" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="fileUploadImage(this,0)"> -->
                        <el-upload
                          class="avatar-uploader-edit"
                          :action="uploadData.host|| '' "
                          :show-file-list="false"
                          :on-success="handleSuccessBanner"
                          :before-upload="beforeUpload"
                          :data="uploadData"
                          name="file"
                        >
                          <i
                            class="editdelBtn editBtn el-icon-edit-outline"
                          ></i>
                        </el-upload>
                        <!-- </span> -->
                        <span
                          class="editdelBtn delBtn el-icon-delete"
                          @click="delBtnBanner()"
                        ></span>
                      </div>
                    </div>
                    <!-- <div class="updateShowText">
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 4}"
                        placeholder="编辑文案"
                        maxlength="1000"
                        show-word-limit
                        v-model="item.description"
                      ></el-input>
                    </div> -->
                  </template>
              </div>
            </div>

            <div class="bpart bpart2">
              <p class="btext_title">品牌详情</p>

              <div class="showBox" id="showBoxVideo">
                <div class="updateShow" v-for="(item,index) in brandInfo.resource" :key="index">
                  <template v-if="item.type == 0 && item.isDel != 1">
                    <div class="updateShowImg">
                      <div class="imgBox">
                        <video controls class="videoBox" :src="item.path"></video>
                      </div>
                      <div class="btnBox">
                        <!-- 操作按钮 -->
                        <!-- <span class="editdelBtn editBtn el-icon-edit-outline" @click="editBtn(item,index)"> -->
                        <!-- <input type="file" name="fileImg" class="upInput" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="fileUploadImage(this,0)"> -->
                        <el-upload
                          class="avatar-uploader-edit"
                          :action="uploadData.host|| '' "
                          :show-file-list="false"
                          :on-success="handleSuccessVideoEdit"
                          :before-upload="beforeUploadVideo"
                          :data="uploadData"
                          name="file"
                        >
                          <i
                            class="editdelBtn editBtn el-icon-edit-outline"
                            @click="editBtn(item,index)"
                          ></i>
                        </el-upload>
                        <!-- </span> -->
                        <span
                          class="editdelBtn delBtn el-icon-delete"
                          @click="delBtn(item.resourceId,item.uid)"
                        ></span>
                      </div>
                    </div>
                    <div class="updateShowText">
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 4}"
                        placeholder="编辑的文案"
                        maxlength="1000"
                        show-word-limit
                        v-model="item.description"
                      ></el-input>
                    </div>
                  </template>

                  <template v-if="item.type == 1 && item.isDel != 1">
                    <div class="updateShowImg">
                      <div class="imgBox">
                        <img :src="item.path" class="preview imageLen" alt />
                      </div>
                      <div class="btnBox">
                        <!-- 操作按钮 -->
                        <!-- <span class="editdelBtn editBtn el-icon-edit-outline" @click="editBtn(item,index)"> -->
                        <!-- <input type="file" name="fileImg" class="upInput" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="fileUploadImage(this,0)"> -->
                        <el-upload
                          class="avatar-uploader-edit"
                          :action="uploadData.host|| '' "
                          :show-file-list="false"
                          :on-success="handleSuccessEdit"
                          :before-upload="beforeUpload"
                          :data="uploadData"
                          name="file"
                        >
                          <i
                            class="editdelBtn editBtn el-icon-edit-outline"
                            @click="editBtn(item,index)"
                          ></i>
                        </el-upload>
                        <!-- </span> -->
                        <span
                          class="editdelBtn delBtn el-icon-delete"
                          @click="delBtn(item.resourceId,item.uid)"
                        ></span>
                      </div>
                    </div>
                    <div class="updateShowText">
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 4}"
                        placeholder="编辑文案"
                        maxlength="1000"
                        show-word-limit
                        v-model="item.description"
                      ></el-input>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <!-- 上传图片 -->
          <div class="udpatebox">
            <div class="updateBtn">
              <el-upload
                class="avatar-uploader"
                :action="uploadData.host|| '' "
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
                :data="uploadData"
                name="file"
              >
                <i class="el-icon-plus avatar-uploader-icon" @click="isEdit=0"></i>
              </el-upload>
              <p class="iconText">添加品牌图片</p>
            </div>
            <div class="updateTips">上传图片不超过10张，每张大小不超过2M</div>
          </div>
          <!-- 上传视频 -->
          <div class="udpatebox">
            <div class="updateBtn">
              <el-upload
                class="avatar-uploader"
                :action="uploadData.host|| '' "
                :show-file-list="false"
                :on-success="handleSuccessVideo"
                :before-upload="beforeUploadVideo"
                :data="uploadData"
                name="file"
              >
                <i class="el-icon-plus avatar-uploader-icon" @click="isEdit=0"></i>
              </el-upload>
              <p class="iconText">添加品牌视频</p>
            </div>
            <div class="updateTips">品牌视频不超过3个，每个视频大小不超过200M</div>
          </div>

          <div class="saveBtnBox">
            <el-button class="" type="primary" @click="saveBtn()">保存</el-button>
              <!-- <el-button class="" type="primary" plain @click="onBack()">取消</el-button> -->
            <!-- <div class="saveBtn" @click="saveBtn">保存</div>
            <div class="saveBtn close_btn">
              <a href="javascript:window.history.go(-1);">取消</a>
            </div> -->
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="成功案例" name="2">
      <plan-List></plan-List>
    </el-tab-pane>
  </el-tabs>
  </section>
</template>

<script>
import { _regMobile, _uuid, _getOssToken, _getStorage } from "@/utils/utils";
import planList from '@/pages/marketing/shop/brand/planList'
export default {
  name: "saleBrandDetial",
  data() {
    return {
      brandId:'',
      loading: true,
      uploadData: {},
      uploadEdit: null,
      isEdit: 0,
      activeName: "1",
      activeTop:"1",
      brandList: [],
      //          brandInfo:null,
      brandInfo: {
        logo: "",
        brandId: "",
        introduction: "",
        address: "",
        resource: [],
        bannerPath:""
      }
    };
  },
  components: {
    planList
  },
  mounted() {
    // this.getBrand();
    let { brandId } = _getStorage('info');
    this.brandId=brandId;
    this.getBrandinfo(this.brandId);
  },
  methods: {
    // getBrand() {
    //   this.$axios
    //     .get(this.HOST + "/v1/brand/list", {
    //       params: {}
    //     })
    //     .then(res => {
    //       // console.log(res.data.data)
    //       if (res.data.code == 200) {
    //         if (res.data.data.length > 0) {
    //           this.brandList = res.data.data;
    //           this.getBrandinfo(res.data.data[0].brandId);
    //         } else {
    //           this.$message.error("您还没有品牌");
    //         }
    //       }
    //     });
    // },
    //返回
    onBack(){
      this.$router.back();
    },
    handleClick(tab, event) {
      this.getBrandinfo(this.brandId);
    },
    getBrandinfo(brandId) {
      let e = this;
      this.brandInfo.resource = [];
      this.uploadData = {};
      this.$axios
        .get("/brand/info", {
          params: {
            brandId: brandId
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            var data = res.data.data;
            // console.log(data.resource[0])
            this.brandInfo.logo = data.logo;
            this.brandInfo.brandId = brandId;
            if (data.info) {
              this.brandInfo.introduction = data.info.introduction;
              this.brandInfo.address = data.info.address;
              this.brandInfo.resource = data.info.resource;
              this.brandInfo.bannerPath=data.info.bannerPath || '';
            } else {
              this.brandInfo.introduction = "";
              this.brandInfo.address = "";
              this.brandInfo.resource = [];
              this.brandInfo.bannerPath='';
            }
            
            this.loading = false;
          }
        });
    },
    //保存
    saveBtn() {
      console.dir(this.brandInfo);
      // let params = JSON.parse(JSON.stringify(this.brandInfo))
      // params.resource = params.resource.reverse()
      // debugger
      this.$axios
        .post("/brand/info/modify", this.brandInfo)
        .then(res => {
          if (res.data.code == 200) {
            this.$alert("保存成功", "提示", {
              type: "success"
            })
              .then(() => {
                this.login_status = 0;
                this.getBrandinfo(this.brandInfo.brandId); // 取回数据，保证数据初始化
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消"
                });
              });
          }
        });
    },
    editBtn(item, index) {
      // debugger
      // console.dir(item)
      item.index = index;
      this.uploadEdit = item;
      this.isEdit = 1;
    },
    delBtnBanner(){
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.brandInfo.bannerPath="";
        })
        .catch(() => {});
    },
    delBtn(id, uid) {
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.delInfo(id, uid);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    delInfo(id, uid, info) {
      // 删除，修改操作
      // this.brandInfo.resource.push();
      // console.dir(info)
      var list = this.brandInfo.resource;
      if (id) {
        // 处理请求回来的数据
        for (var i = 0; i < list.length; i++) {
          if (list[i].resourceId == id) {
            if (info) {
              list[i].path = info.path;
            } else {
              this.$set(list[i], "isDel", 1);
            }
          }
        }
      } else {
        // 处理新增未提交的数据
        for (var i = 0; i < list.length; i++) {
          if (list[i].uid == uid) {
            if (info) {
              list[i].path = info.path;
            } else {
              list.splice(i, 1);
            }
          }
        }
      }
    },
    // 上传图片(编辑)
    handleSuccessEdit(res, file, fileList) {
      var item = this.uploadEdit;
      var imgInfo = {
        path: this.uploadData.host + "/" + this.uploadData.key,
        description: item.description,
        type: 1,
        resourceId: "",
        uid: file.uid
      };
      // debugger
      this.delInfo(item.resourceId, item.uid, imgInfo);
      // this.brandInfo.resource.push();

      this.uploadData = {};
      this.loading = false;
    },
    handleSuccessBanner(res, file, fileList){
      console.log(res, file, fileList)
      this.brandInfo.bannerPath=this.uploadData.host + "/" + this.uploadData.key,
      this.loading = false;

    },
    // 上传图片
    handleSuccess(res, file, fileList) {
      var imgInfo = {
        path: this.uploadData.host + "/" + this.uploadData.key,
        description: "",
        type: 1,
        resourceId: "",
        uid: file.uid
      };
      // if(!this.brandInfo.resource.length){
      //   this.brandInfo.resource = []
      // }
      this.brandInfo.resource.push(imgInfo);
      this.uploadData = {};
      this.loading = false;
    },
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$message.error("请上传图片格式文件");
        return false;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片大小不能超过2M");
        return false;
      }
      var list = this.brandInfo.resource;
      var count = 0;
      for (var i = 0; i < list.length; i++) {
        if (list[i].type == 1 && list[i].isDel != 1) {
          count = count + 1;
        }
      }
      if (count >= 10 && this.isEdit == 0) {
        this.$message.error("最多只能上传10张图片");
        return false;
      }
      this.loading = true;
      return new Promise((resolve, reject) => {
        _getOssToken
          .call(this, null)
          .then(res => {
            let fileExt = /\.[^\.]+$/.exec(file.name);
            this.uploadData = res;
            this.uploadData.key = "resource/avatar/sjback" + _uuid() + fileExt;
            resolve();
          })
          .catch(err => {
            reject(err);
          });
      });
    },
    // 上传视频(编辑)
    handleSuccessVideoEdit(res, file, fileList) {
      var item = this.uploadEdit;
      var videoInfo = {
        path: this.uploadData.host + "/" + this.uploadData.key,
        description: item.description,
        type: 0,
        resourceId: "",
        uid: file.uid
      };
      this.delInfo(item.resourceId, item.uid, videoInfo);
      // this.brandInfo.resource.push(videoInfo);

      this.uploadData = {};
      this.loading = false;
    },
    //上传视频
    handleSuccessVideo(res, file, fileList) {
      var videoInfo = {
        path: this.uploadData.host + "/" + this.uploadData.key,
        description: "",
        type: 0,
        resourceId: "",
        uid: file.uid
      };
      // if(!this.brandInfo.resource.length){
      //   this.brandInfo.resource = []
      // }
      this.brandInfo.resource.push(videoInfo);
      this.uploadData = {};
      this.loading = false;
    },
    beforeUploadVideo(file) {
      if (file.type.indexOf("video/") == -1) {
        this.$message.error("请上传视频格式文件");
        return false;
      }
      if (file.size > 200 * 1024 * 1024) {
        this.$message.error("视频大小不能超过200M");
        return false;
      }
      var list = this.brandInfo.resource;
      var count = 0;
      for (var i = 0; i < list.length; i++) {
        if (list[i].type == 0 && list[i].isDel != 1) {
          count = count + 1;
        }
      }
      if (count >= 3 && this.isEdit == 0) {
        this.$message.error("最多只能上传3个小视频");
        return false;
      }
      this.loading = true;
      return new Promise((resolve, reject) => {
        _getOssToken
          .call(this, null)
          .then(res => {
            let fileExt = /\.[^\.]+$/.exec(file.name);
            this.uploadData = res;
            this.uploadData.key = "resource/avatar/sjback" + _uuid() + fileExt;
            resolve();
          })
          .catch(err => {
            reject(err);
          });
      });
    }
  }
};
</script>

<style scoped>
.avatar-uploader >>> .el-upload--text {
  width: 178px;
  height: 178px;
}
.avatar-uploader-edit {
  display: inline-block;
}
.avatar-uploader-edit >>> .el-upload--text {
  width: 29px;
  height: 26px;
  background: inherit;
  border: none;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.recommend_wrap {
  display: inline-block;
  box-shadow: 1px 0 5px #ccc;
  margin-left: 15px;
  width: 83%;
  background: #fff;
}
/*    .brandList_box {border-bottom:1px solid #E4E4E4;border-top:1px solid #E4E4E4;position:relative;height:46px;background-color:#F6FAFD;}*/
.ulBox {
  position: absolute;
  bottom: -1px;
  overflow: hidden;
  width: 100%;
}
.brand_nav {
  white-space: nowrap;
  font-size: 0;
  position: relative;
  overflow-x: auto;
  width: 100%;
  min-height: 46px;
}
.brand_nav::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
.brand_nav::-webkit-scrollbar {
  width: 4px;
  height: 6px;
  background-color: rgba(0, 0, 0, 0.34);
}
.brand_nav::-webkit-scrollbar-thumb {
  background-color: #8b8b8b;
  border-radius: 10px;
}
.brand_nav .listName {
  display: inline-block;
  color: #797979;
  font-size: 14px;
  padding: 0px 40px;
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  background: #f6fafd;
  cursor: pointer;
  border-top: 2px solid #e4e4e4;
  height: 46px;
  line-height: 46px;
}
.brand_nav .actCss {
  background: #fff;
  border-bottom: 1px solid #fff;
  border-top: 2px solid #f60;
}

.brandContent {
  padding: 20px;
}
.brandContent .bImg {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
  position: relative;
}
.logoImg {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bpart {
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 10px;
  position: relative;
}
.tipsNum {
  position: absolute;
  right: 60px;
  bottom: 10px;
  color: #999;
}
.bpart .btext_title {
  font-size: 16px;
  padding: 10px 0;
}
.bpart .bTex2 {
  min-height: 100px;
  width: 96%;
  border: none;
  outline: none;
}
.bpart1 {
  border: none;
}

.udpatebox {
  overflow: hidden;
  margin-bottom: 30px;
}
.updateBtn {
  width: 178px;
  height: 178px;
  background-color: #f6fafd;
  float: left;
  position: relative;
  cursor: pointer;
}
.upInput {
  border: 1px solid red;
  width: 40%;
  height: 100%;
  opacity: 0;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
.updateBtn .iconUp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.updateBtn .iconImg {
  width: 60px;
  display: block;
  margin: 0 auto;
}
.updateBtn .iconText {
  text-align: center;
  color: #999;
  position: absolute;
  top: 109px;
  /*left: 42px;*/
  width: 100%;
}
.udpatebox .updateTips {
  vertical-align: top;
  float: left;
  margin-left: 20px;
}

.saveBtnBox {
  padding: 20px;
  cursor: pointer;
}
.saveBtnBox .saveBtn {
  background: #409eff;
  color: #fff;
  width: 100px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 4px;
  display: inline-block;
  margin-right: 20px;
  border: 1px solid #409eff;
}
.saveBtnBox .close_btn {
  background-color: #fff;
  border: 1px solid #409eff;
  color: #409eff;
}
.saveBtnBox .close_btn a {
  display: block;
  width: 100%;
  color: #409eff;
}
.bpart2 {
  border-bottom: none;
}
/*添加上传后的显示框*/
.updateShowImg {
  position: relative;
  width: 440px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  margin-bottom: 10px;
}
.updateShowText {
  width: 440px;
  padding-bottom: 20px;
}
/*    .updateShowText textarea{height:40px;width:440px;margin-bottom:20px;border:none;outline:none;border-bottom:1px solid #E4E4E4;}*/
.updateShowImg .imgBox {
  position: relative;
  display: block;
  width: 440px;
  height: 250px;
  margin-bottom: 10px;
}
.updateShowImg img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.btnBox {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: none;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 4px 2px 2px;
}
.updateShowImg:hover .btnBox {
  display: block;
}

.editdelBtn {
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-size: 30px;
}
.editdelBtn input {
  width: 30px;
  min-width: 30px;
  height: 30px;
  overflow: hidden;
  margin-left: -30px;
  font-size: 0;
}
.editBtn {
  background-size: 100% 100%;
}
.videoBox {
  width: 440px;
  height: 250px;
  margin-bottom: 10px;
}
.bpart .bTex2.addressText {
  min-height: 50px;
}
</style>
