<template>
  <div>
    <el-button @click="save" class="save" type="primary">保 存</el-button>
    <div class="banner">
      <UploadEl style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;" :data="data" field="banner"/>
      <UploadEl style="width: 40%; height: 40%;position:absolute;right:10%;top: 30%;" :data="data" field="banner1"/>
      <div class="bannerInfo" contenteditable="true" @blur="edit1('bannerTitle',$event)">{{ data.bannerTitle }}</div>
      <div class="bannerValue" contenteditable="true" @blur="edit1('bannerValue',$event)">{{ data.bannerValue }}</div>
    </div>

    <div class="product-container">
      <!-- 左侧大图 + 缩略图 -->
      <div class="product-left">
        <!-- 大图 -->
        <div class="main-img">
          <el-image :src="activeImg" fit="contain"></el-image>
        </div>

        <!-- 缩略图 -->
        <div class="thumb-list">
          <div
            v-for="(img, index) in data.imgList"
            :key="index"
            class="thumb-item"
            :class="{ active: activeIndex === index }"
            @mouseenter="changeImg(index)"
          >
            <i class="del el-icon-circle-close" @click="data.imgList.splice(index, 1);"></i>
            <UploadEl style=" " field="url" :data="img"/>
          </div>
          <div class="thumb-item"
               @click="data.imgList.push({url:''})">
            <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 60px"></i>
          </div>

        </div>
      </div>

      <!-- 右侧文字 -->
      <div class="product-right">
        <h2 class="title">产品特点</h2>
        <ul class="features">
          <li v-for="(item, i) in data.features" :key="i" style="position: relative;">
            <i class="del el-icon-circle-close" @click="data.features.splice(i, 1);"></i>
            <i class="el-icon-circle-check"></i>
            <span contenteditable="true" @blur="edit2('name',i,$event)">
            {{ item.name }}
          </span>
          </li>
          <li class="thumb-item"
               @click="data.features.push({name:''})">
            <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 60px"></i>
          </li>
        </ul>
      </div>
    </div>

    <div  class="param-container" style="padding: 5vw 10vw;background-color: #0001">
      <h2 class="title1" style="line-height: 40px">产品参数</h2>

      <div class="paramsTable" v-for="(param, index) in data.params" :key="index" style="position: relative;">
        <i class="del el-icon-circle-close" @click="data.params.splice(index, 1);"></i>
        <div class="th">
          <div class="th1" contenteditable="true" @blur="edit3('title',index,$event)">{{ param.title }}</div>
          <div class="th2">参数值</div>
        </div>
        <div class="td">
          <div v-for="(item, idx) in param.list" :key="idx" style="position: relative;">
            <i class="del el-icon-circle-close" @click="data.params[index].list.splice(idx, 1);"></i>
            <div class="td1" contenteditable="true" @blur="edit4('name',index,idx,$event)">{{ item.name }}</div>
            <div class="td2" contenteditable="true" @blur="edit4('value',index,idx,$event)">{{ item.value }}</div>
          </div>
        </div>
        <div class="td">
          <div class="td1"
              @click="data.params[index].list.push({name:'',value:''})">
            <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 60px"></i>
          </div>
        </div>
      </div>
      <div class="td"
           @click="data.params.push({title:'',list:[]})">
        <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 60px"></i>
      </div>

    </div>

    <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
      <h2 class="title1" style="line-height: 40px">资料下载</h2>
      <div>

        <div v-for="(i,k) in data.fileList" class="fileCard" style="text-align: left;position: relative;">
          <div class="cardTitle" contenteditable="true" @blur="edit5('name',k,$event)">{{ i.name }}</div>
          <div class="cardValue" contenteditable="true" @blur="edit5('value',k,$event)">{{ i.value }}</div>
          <UploadFile style="position:absolute;top: 50%;right: 10px;transform: translateY(-50%)" :data="i" field="url"/>
        </div>
        <div class="fileCard"
             @click="data.fileList.push({name:'名称',value:'介绍',url:'',fileName:''})">
          <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 100px"></i>
        </div>
      </div>

    </div>
    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import {selectMenuTree} from "@/api/productCenter";
import UploadEl from "@/components/editEl/uploadEl.vue";
import UploadFile from "@/components/editEl/uploadFile.vue";
import {addHwWeb, listHwWeb, listHwWeb1, updateHwWeb, updateHwWeb1} from "@/api/hwWeb";


export default {
  name: 'ProductCenter',
  components: {
    UploadEl,
    UploadFile,
    ContactUs,
    Copyright,
  },
  data() {
    return {
      activeIndex: 0,
      data: {}
    }
  },
  computed: {
    activeImg() {
      return this.data?.imgList?.[this.activeIndex]?.url;
    },
  },
  mounted() {
    this.getData()
  },
  watch: {
    '$route'() {
      this.getData()
    }
  },
  methods: {
    changeImg(index) {
      this.activeIndex = index;
    },
    edit1(key, e) {
      this.data[key] = e.target.innerText
    },
    edit2(key, index, e) {
      this.data.features[index][key] = e.target.innerText
    },
    edit3(key, index, e) {
      this.data.params[index][key] = e.target.innerText
    },
    edit4(key, index,index1, e) {
      this.data.params[index].list[index1][key] = e.target.innerText
    },
    edit5(key, index, e) {
      console.log(this.data.fileList[index][key])
      this.data.fileList[index][key] = e.target.innerText
    },
    getData() {
      listHwWeb1({webCode: this.$route.query.type, deviceId: this.$route.query.id}).then(e => {
        console.log(e)
        this.data = e.rows?.[0]?.webJsonString ? JSON.parse(e.rows[0].webJsonString) : {
          banner: '',
          banner1: '',
          bannerTitle: '设备名称',
          bannerValue: '设备介绍',

          imgList: [],
          features: [],
          params: [],

          fileList: [],
        }
      })
    },
    save() {
      updateHwWeb1({
        webCode: this.$route.query.type,
        deviceId: this.$route.query.id,
        webJsonString: JSON.stringify(this.data),
      })
    },
    downFile(e) {
      const a = document.createElement('a');
      a.href = url;

      // 如果传了 filename，就设置下载名称
      if (filename) {
        a.download = filename;
      } else {
        // 如果没有 filename，尝试从 URL 里截取文件名
        a.download = url.split('/').pop();
      }

      document.body.appendChild(a);
      a.click(); // 模拟点击下载
      document.body.removeChild(a);
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.banner {
  width: 100%;
  height: 35.5vw;
  position: relative;

  .bannerInfo {
    position: absolute;
    top: 35%;
    left: 19%;
    width: 40%;
    text-align: left;
    font-size: 2.5vw;
    color: #000;
    font-weight: 700;
    line-height: 3vw;
    letter-spacing: 2px;
    word-break: break-all;
  }

  .bannerValue {
    position: absolute;
    top: calc(35% + 3vw);
    left: 19%;
    width: 40%;
    text-align: left;
    font-size: 1vw;
    color: #000;
    font-weight: 500;
    line-height: 2vw;
    word-break: break-all;
  }

  .bannerBtn {
    position: absolute;
    top: 58%;
    left: 19%;
    width: 11.5vw;
    font-size: 1.2vw;
    line-height: 2vw;
    letter-spacing: 2px;
  }

  .tabs {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
    backdrop-filter: saturate(50%) blur(4px);

    .content {
      width: 62%;
      position: relative;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);

      .tab {
        display: inline-block;
        width: 50%;
        line-height: 6.2vw;
        font-size: 1.6vw;
        letter-spacing: 3px;
      }

      .tab.active {
        color: @standard-color;
        width: calc(50% - 3px);
        border: 1px solid #fff;
        box-shadow: 0 0 3px #0002;
      }
    }
  }
}



.tabs {
  text-align: left;
  margin-top: 2.3vw;

  /deep/ .el-tabs__header {
    margin: 0 10vw 15px;
  }

  /deep/ .el-tabs__content {
    padding: 0 10vw;
    background-color: fade(@standard-color, 10);
  }

  /deep/ .el-tabs__nav-wrap::after {
    display: none;
  }

  /deep/ .el-tabs__item {
    letter-spacing: 3px;
    padding: 0 2vw;
    height: 2.9vw;
    font-size: 1.6vw;
  }

  /deep/ .el-tabs__item {
    line-height: 2.9vw;
  }

  /deep/ .el-tabs__item.is-active {
    font-weight: 600;
    color: @standard-color;
  }

  /deep/ .el-tabs__active-bar {
    height: 4px;
    background-color: @standard-color;
  }

  .content {
    padding: 2.2vw 0;
    display: inline-block;
    width: 47%;
    cursor: pointer;
    &:nth-child(2n){
      margin-left: 5%;
  }
    &:hover{

      .itemTitle {
        color: #5c8eff;
      }
      .img-wrap {
        .image{
          transform: scale(1.2);
        }
      }
    }
    .custom-card {
      width: 100%;
      padding: 16px;
      border-radius: 16px;
      display: inline-block;

    }

    .itemTitle {
      font-size: 26px;
      font-weight: 600;
      margin: 0;
      text-align: center;
      transition: all 0.5s ease;
    }

    .description {
      font-size: 14px;
      color: #666;
      margin: 0;
      margin-top: 12px;
      line-height: 1.6;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 限制两行 */
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
    }

    .btn-wrap {
      display: flex;
      justify-content: center;
    }

    .more-btn {
      margin-top: 12px;
      background-color: transparent;
      border: 1px solid #dcdfe6;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .more-btn:hover {
      border-color: #409eff;
      color: #409eff;
      background-color: rgba(64, 158, 255, 0.05);
    }

    .icon {
      font-size: 16px;
      margin-left: 4px;
    }

    .img-wrap {
      margin-top: 12px;
      overflow: hidden;
      .image{
        transition: transform 0.5s ease;
      }
    }
  }

}

.contactUs {
  width: 100%;
  background-color: #2e445c;
}

.copyright {
  width: 100%;
  background-color: #1d3348;
}

.product-container {
  padding: 5vw 10vw;
  display: flex;
  gap: 40px;
}

.product-left {
  width: 400px;
}

.main-img {
  width: 100%;
  height: 300px;
  border: 1px solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumb-list {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.thumb-item {
  width: 80px;
  height: 60px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}

.thumb-item.active {
  border-color: #409eff;
}

.thumb-item .el-image {
  width: 100%;
  height: 100%;
}

.product-right {
  flex: 1;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
}

.features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features li {
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
  display: flex;
  align-items: center;
  line-height: 24px;
}

.features i {
  color: #409eff;
  margin-right: 6px;
}
.paramsTable{
  .th{
    background-color: #DBDFE7;
    line-height: 3vw;
    font-size: 1.3vw;
    font-weight: 700;
    text-align: left;
    .th1{
      width: calc(30% - 2vw - 2px);
      display: inline-block;
      padding-left: 2vw;
      border-right: 1px solid #0001
    }
    .th2{
      width: calc(70% - 2vw - 2px);
      display: inline-block;
      padding-left: 2vw;
    }
  }
  .td{
    line-height: 3vw;
    font-size: 0.9vw;
    text-align: left;
    .td1{
      background-color: #F2F4F8;
      width: calc(30% - 2vw - 2px);
      display: inline-block;
      padding-left: 2vw;
      border: 1px solid #0001
    }
    .td2{
      background-color: #EEEEEE;
      width: calc(70% - 2vw - 2px);
      display: inline-block;
      padding-left: 2vw;
      border: 1px solid #0001
    }
  }
}

.fileCard {
  vertical-align: top;
  display: inline-block;
  width: 40%;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-top: 1vw;
  position: relative;

  .cardTitle {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 22px;
    font-weight: 700;
    line-height: 45px;
    width: calc(100% - 80px);
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }

  .cardValue {
    position: absolute;
    top: 55px;
    width: calc(100% - 80px);
    left: 20px;
    font-size: 14px;
    line-height: 45px;
    color: #aaa;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }

  .downIcon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  &:nth-child(2n) {
    margin-left: 5%;
  }
}

.del {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.save {
  position: fixed;
  top: 100px;
  right: 10px;
  z-index: 999;
}
</style>
