<!--
  @description: 商品列表
  @Modifier：lcg
  @date：  2019/10/18-16:30
-->
<template>
  <div>
    <div class="contrast-wrap">
      <div class="contrast-inner">
        <div class="contrast-title">
          <span
            style="color:#003333;font-weight: bold;font-size: 14px;font-family: 'MicrosoftYaHei-Bold'"
          >商品对比</span>
          <span
            style="color: #00AACA;font-size: 14px;font-family: 'MicrosoftYaHei';cursor: pointer;"
            @click="hideDialogBtn"
          >关闭</span>
        </div>
        <div class="shop-info">
          <div class="info-wrap-1">
            <div v-if="duibiArray[0]" class="info-content">
              <div class="left" style="cursor: pointer;" @click="goToDetail(duibiArray[0])">
                <img :src="duibiArray[0].productPicture" alt width="67" height="61">
              </div>
              <div class="rights" style="margin-right: 5px;margin-left: 15px;position: relative">
                <p class="shop_name" :title="duibiArray[0].productName" style="cursor: pointer;" @click="goToDetail(duibiArray[0])">
                  {{ duibiArray[0].productName }}
                </p>
                <p
                  style="color: #00AACA;float: right;margin-top: 5px;position: absolute;bottom: 10px;right: 5px;cursor: pointer;"
                  @click="deleteShopBtn(duibiArray[0])"
                >
                  删除
                </p>
              </div>
            </div>
          </div>
          <div class="info-wrap-2">
            <div v-if="duibiArray[1]" class="info-content">
              <div class="left" style="cursor: pointer;" @click="goToDetail(duibiArray[1])">
                <img :src="duibiArray[1].productPicture" alt width="67" height="61">
              </div>
              <div class="rights" style="margin-right: 5px;margin-left: 15px;position: relative">
                <p class="shop_name" :title="duibiArray[1].productName" style="cursor: pointer;" @click="goToDetail(duibiArray[1])">
                  {{ duibiArray[1].productName }}
                </p>
                <p
                  style="color: #00AACA;float: right;margin-top: 5px;position: absolute;bottom: 10px;right: 5px;cursor: pointer;"
                  @click="deleteShopBtn(duibiArray[1])"
                >
                  删除
                </p>
              </div>
            </div>
          </div>
          <div class="info-wrap-3">
            <div v-if="duibiArray[2]" class="info-content">
              <div class="left" style="cursor: pointer;" @click="goToDetail(duibiArray[2])">
                <img :src="duibiArray[2].productPicture" alt width="67" height="61">
              </div>
              <div class="rights" style="margin-right: 5px;margin-left: 15px;position: relative">
                <p class="shop_name" :title="duibiArray[2].productName" style="cursor: pointer;" @click="goToDetail(duibiArray[2])">
                  {{ duibiArray[2].productName }}
                </p>
                <p
                  style="color: #00AACA;float: right;margin-top: 5px;position: absolute;bottom: 10px;right: 5px;cursor: pointer;"
                  @click="deleteShopBtn(duibiArray[2])"
                >
                  删除
                </p>
              </div>
            </div>
          </div>

          <div class="info-wrap-4">
            <div class="info-content">
              <div style="text-align: center">
                <el-button
                  type="primary"
                  style="background: #FF6600;color: #ffffff;border-color: #FF6600;"
                  @click.native="duibiClickBtn"
                >
                  对比
                </el-button>
              </div>
              <div style="color: #00AACA;margin-top: 10px;cursor: pointer;" @click="clearClickBtn">
                清空对比栏
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <goodScontrast
      v-if="childensData.dialog"
      :childens-data="childensData"
      :ids-array="idsArray"
    />
  </div>
</template>

<script>
import goodScontrast from './goodScontrast'
import { getToken } from '@/assets/js/utils/auth'
export default {
  components: {
    goodScontrast
  },
  data() {
    return {
      isLogin: false,
      idsArray: [],
      duibiArray: [],
      flg: false,
      childensData: {
        dialog: false
      }
    }
  },
  created() {
    this.isLogin = !!getToken()
  },
  methods: {
    deleteShopBtn(tag) {
      this.duibiArray.splice(this.duibiArray.indexOf(tag), 1)
      this.idsArray.splice(this.idsArray.indexOf(tag.id), 1)
    },
    hideDialogBtn() {
      this.$emit('isShow_Hide', false)
    },
    duibiBtn(item) {
      if (this.idsArray.length >= 3) {
        this.$message({
          message: '您选择的商品不能超过3个',
          type: 'warning'
        })
        return
      } else {
        this.idsArray.push(item.id)
        this.duibiArray.push(item)
        const dui = Array.from(new Set(this.duibiArray))
        const duo = Array.from(new Set(this.idsArray))
        this.duibiArray = dui
        this.idsArray = duo
      }
    },
    duibiClickBtn() {
      if (this.isLogin) {
        if (this.duibiArray.length < 2) {
          this.$message({
            showClose: true,
            message: '您选择的商品少于2个不能进行对比',
            type: 'warning'
          })
          return
        } else {
          this.childensData.dialog = true
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
      }
    },
    clearClickBtn() {
      this.idsArray = []
      this.duibiArray = []
    },
    goToDetail(val) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: val.id }
      })
      // window.open(routes.href, '_blank')
    }
  }
}
</script>

<style  scoped lang="less">
.contrast-wrap {
  width: 799px;
  // height: 120px;
  border: 1px solid #ff6600;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: #ffffff;
  padding-bottom: 5px;

  .contrast-inner {
    margin: 0 10px;
    .contrast-title {
      height: 40px;
      /*border-bottom: 1px dashed #d6d6d6;*/
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 7px;
    }

    .shop-info {
      width: 778px;
      height: 80px;
      background: url("../../../assets/img/shopmall/shop_duibi.png") 0 0
        no-repeat;
      position: relative;
      .left {
        width: 76.7px;
        height:72px;
        border: 1px solid #d6d6d6;
        // line-height: 72px;
      }

      .info-wrap-1 {
        width: 172px;
        height: 64px;
        position: absolute;
        left: 5px;
        top: 9px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .info-content {
          display: flex;
          justify-content: space-between;
          background: #ffffff;
          height: 72px;
          width: 100%;
        }

        .right {
          width: 110px;
        }
      }

      .info-wrap-2 {
        width: 172px;
        height: 64px;
        position: absolute;
        top: 9px;
        left: 202px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .info-content {
          display: flex;
          justify-content: space-between;
          background: #ffffff;
          height: 72px;
          width: 100%;
        }

        .right {
          width: 110px;
        }
      }

      .info-wrap-3 {
        width: 172px;
        height: 64px;
        position: absolute;
        left: 403px;
        top: 9px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .info-content {
          display: flex;
          justify-content: space-between;
          background: #ffffff;
          height: 72px;
          width: 100%;
        }

        .right {
          width: 110px;
        }
      }

      .info-wrap-4 {
        width: 172px;
        height: 67px;
        position: absolute;
        left: 602px;
        top: 10px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.shop-info .left img {
  width: 100%;
  height: 100%;
}
.shop-info .shop_name {
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
