<!--
  @description:对比弹框
  @Modifier：qk
  @routerPath: /shopmall/mailingaddressonvoice
  @date：  2019/11/30-14:48
-->
<template>
  <div>
    <el-dialog
      :visible.sync="childrenContrast.dialog"
      :close-on-click-modal="false"
      title="商品对比"
      modal-append-to-body
      append-to-body
      width="1010px"
      custom-class="shop_mall_dialog"
    >
      <div class="clearfix-dl">
        <dl v-for="(item, index) in saleList" :key="index" :class="activrs === index?'activr':''">
          <dt @click="goToGoodDetail(item)">
            <img :src="item.productPicture" alt="">
          </dt>
          <dd>
            <div class="price_amount">
              <p style="color:#FF6600;">
                {{ item.commodityPrice || item.price }}
              </p>
              <p style="color:#ABB0B7;">
                已售：{{ item.salesQuantity }}
              </p>
            </div>
            <p class="goods_item_title_two">
              {{ item.productName }}
            </p>
            <p class="textCenter">
              <span class="addclearfix" @click="addclearfix(index,item)">{{ activrs === index? '■':'□' }}</span>
              <button class="commodity-btn" @click="delClick(index)">
                移除商品
              </button>
            </p>
          </dd>
        </dl>
      </div>
      <div class="search_inline">
        <el-input
          v-model="searchForm.keywords"
          placeholder="请输入商品名称、品牌"
          size="medium"
          @keyup.13.native="searchGood"
        >
          <el-button slot="append" @click="searchGood">
            搜索
          </el-button>
        </el-input>
      </div>
      <div class="clearfix">
        <div class="clearfix-dl">
          <dl v-for="(item, index) in contrastList" :key="index">
            <dt @click="goToGoodDetail(item)">
              <img :src="item.productPicture" alt="">
            </dt>
            <dd>
              <div class="price_amount">
                <p style="color:#FF6600;">
                  {{ item.price }}
                </p>
                <p style="color:#ABB0B7;">
                  已售：{{ item.salesQuantity }}
                </p>
              </div>
              <p class="goods_item_title_two">
                {{ item.productName }}
              </p>
            </dd>
            <dd class="sales_number">
              <p class="join_button" @click="collectionGood(item)">
                <i :class="item.hasMarked?'el-icon-star-on':'el-icon-star-off'" />收藏
              </p>
              <p class="join_button">
                <button @click="addList(item)">
                  加入对比
                </button>
              </p>
              <!-- <p class="join_button">
                <i class="iconfont icon-paixu" @click="duibiBtn(item)">对比</i>
              </p> -->
            </dd>
          </dl>
        </div>
        <div v-if="contrastList.length" style="margin-top:10px;margin-bottom:10px;display:flex;justify-content:flex-end;align-items:center;">
          <el-pagination
            :current-page="searchForm.pageNo + 1"
            :total="totalPage"
            class="fr"
            layout="prev, pager, next"
            @current-change="pickHandle"
          />
        </div>
      </div>
      <!-- <el-table
        ref="multipleTable"
        :data="saleList"
        tooltip-effect="dark"
        style="width: 40%;float: left"
        height="300px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"/>
        <el-table-column
          label="商品名称"
          width="130">
          <template slot-scope="scope">{{ scope.row.productName | ellipsis }}</template>
        </el-table-column>
        <el-table-column
          label="商品价格"
          width="80">
          <template slot-scope="scope">{{ scope.row.commodityPrice }}</template>
        </el-table-column>
        <el-table-column
          label="供应商"
          width="80">
          <template slot-scope="scope">{{ scope.row.supplierName }}</template>
        </el-table-column>
      </el-table>
      <table class="tableData" style="width: 50%;margin-left: 30%;">
        <tr >
          <td style="width:70px;">商品名称</td>
          <td colspan="1" >
            {{ productDetailsData.productName }}
          </td>
          <td colspan="1" >
            {{ contrastProductDetailsData.productName }}
          </td>
        </tr>
        <tr >
          <td>商品图片</td>
          <td>
            <span class="shop_image" @click="windowOpen(productDetailsData)">
              <img :src="productDetailsData.productPicture" style="height: 100px;width: 100px">
            </span>
          </td>
          <td>
            <span class="shop_image" @click="windowOpen(contrastProductDetailsData)">
              <img :src="contrastProductDetailsData.productPicture" style="height: 100px;width: 100px">
            </span>
          </td>
        </tr>
        <tr >
          <td>品牌名称</td>
          <td>
            {{ productDetailsData.brandName }}
          </td>
          <td>
            {{ contrastProductDetailsData.brandName }}
          </td>
        </tr>
        <tr>
          <td>商品价格</td>
          <td>
            {{ productDetailsData.price }}
          </td>
          <td>
            {{ contrastProductDetailsData.price }}
          </td>
        </tr>
        <tr>
          <td>商品市场价</td>
          <td>
            {{ productDetailsData.marketPrice }}
          </td>
          <td>
            {{ contrastProductDetailsData.marketPrice }}
          </td>
        </tr>
        <tr>
          <td>供应商名称</td>
          <td>
            {{ productDetailsData.departName }}
          </td>
          <td>
            {{ contrastProductDetailsData.departName }}
          </td>
        </tr>
        <tr>
          <td>销量</td>
          <td>
            {{ productDetailsData.salesQuantity }}
          </td>
          <td>
            {{ contrastProductDetailsData.salesQuantity }}
          </td>
        </tr>
        <tr>
          <td>规格参数</td>
          <td style="width:150px;" class="msgHtmlBox" valign="top" v-html="productDetailsData.specs"/>
          <td style="width:150px;" class="msgHtmlBox" valign="top" v-html="contrastProductDetailsData.specs"/>
        </tr>
      </table> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doneAddClickBtn">确 定</el-button>
        <el-button @click="childrenContrast.dialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { productDetails } from '@api/shoppingmall/products'
import { salesOfBusinesProducts } from '@/api/shoppingmall/products'
import { searchProduct, addMarkInfo } from '@/api/shoppingmall/products'
export default {
  name: 'ConstrastAdd',
  components: {
    productDetails
  },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 10) {
        return value.slice(0, 10) + '...'
      }
      return value
    }
  },
  props: {
    childrenContrast: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      activrs: -1,
      collectionParams: {
        productCode: '',
        img: '',
        productName: '',
        supplierName: '',
        unitPrice: 0,
        type: '2'
      },
      totalPage: null,
      searchForm: {
        keywords: '',
        pageNo: 0, // 当前页
        pageSize: 8
      },
      radio: -1,
      childenData: {
        dialog: false, // 弹框
        type: '',
        id: '' // 00 编辑 01 增加
      },
      listData: [],
      productDetailsData: [],
      saleList: [],
      contrastList: []
    }
  },
  created() {
    this.getEffectiveplanInit()
    // console.log(this.childrenContrast.goodsId)
  },
  methods: {
    // 移除商品
    delClick(index) {
      this.saleList.splice(index, 1)
    },
    pickHandle(val) {
      this.searchForm.pageNo = val - 1
      searchProduct(this.searchForm).then(res => {
        // console.log(res)
        this.contrastList = res.data.list
        this.totalPage = res.data.total
      })
    },
    // 确定对比
    addclearfix(index, item) {
      // console.log(index)
      this.activrs = index
      this.listData = item
    },
    // 搜索商品
    searchGood() {
      searchProduct(this.searchForm).then(res => {
        // console.log(res)
        this.contrastList = res.data.list
        this.totalPage = res.data.total
      })
    },
    // 添加对比
    addList(item) {
      // console.log(item)
      // console.log(this.saleList.includes(item))
      if (this.saleList.includes(item)) {
        this.$message.error('已经添加过该商品')
      } else {
        if (this.saleList.length >= 8) {
          this.$message.error('最多只能添加8个商品')
        } else {
          this.saleList.push(item)
        }
      }
    },
    collectionGood(item) {
      this.collectionParams.img = item.productPicture
      this.collectionParams.productName = item.productName
      this.collectionParams.productCode = item.id
      this.collectionParams.supplierName = item.supplierName
      this.collectionParams.unitPrice = item.commodityPrice
      // 调用收藏商品接口
      addMarkInfo(this.collectionParams).then(res => {
        if (res.header.ret === '0') {
          this.$message({
            type: 'success',
            message: res.data
          })
          searchProduct(this.searchForm).then(res => {
            this.contrastList = res.data.list
            this.totalPage = res.data.total
          })
        }
      })
    },
    // 点击商品去到商品详情
    goToGoodDetail(item) {
      this.$router.push({ path: '/shop/goodsClassDetail', query: { id: item.id }})
      // window.open(routes.href, '_blank')
    },
    doneAddClickBtn() {
      this.childrenContrast.dialog = false
      this.listData.goodsIds = this.childrenContrast.goodsId
      this.$emit('childrenContrasts', this.listData)
    },
    getEffectiveplanInit() {
      productDetails(this.childrenContrast.goodsId).then(res => {
        if (res.header.ret === '0') {
          this.productDetailsData = res.data
        }
      })
      // 商品详情页之商家在售
      salesOfBusinesProducts(this.childrenContrast.goodsId)
        .then(res => {
          if (res.header.ret === '0') {
            this.saleList = res.data
            // console.log(this.saleList)
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="less">
.pagination {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.clearfix-dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 5px;
  dl {
    margin-left: 10px;
    margin-top: 10px;
    width: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    dt {
      width: 100%;
      height: 227px;
      img {
        width: 100%;
        height: 227px;
      }
    }
    dd {
      width: 100%;
      .price_amount {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
      }
      .goods_item_title_two {
        padding: 0 5px;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .textCenter{
        border: 1px solid #ccc;
        width: 100%;
        display: flex;
        align-items: center;
        height: 34px;
        span{
          width: 20%;
          text-align: center;
          font-size: 24px;
        }
      }
      .commodity-btn {
        width: 80%;
        height: 100%;
        background: #ff6600;
        color: #fff;
        font-size: 14px;
        padding: 5px 15px;
        border: 0;
        text-align: center;
      }
    }
  }
  .activr{
        border: 1px solid #ff6600;
        span{
          color: #ff6600;
        }
      }
}
.search_inline {
  border: 2px solid #00aaca;
  margin-top: 10px;
  background: rgba(255, 255, 255, 1);
  .el-input__inner {
    border: none;
  }
  .el-input-group__append {
    padding: 0px 28px;
    background: #00aaca;
    color: #fff;
    border: 1px solid #00aaca;
  }
}
.sales_number {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  p{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    button{
      width: 100%;
      padding: 7px 0;
      border: none;
      background: #FF6600;
      color: #fff;
    }
  }
}
  i.el-icon-star-on {
    font-size: 16px;
    color: #FF6600;
    margin-right: 5px;
        }
  i.el-icon-star-off {
    font-size: 16px;
    color: #FF6600;
      margin-right: 5px;
        }
</style>
