<!--
  @description: 商品详情页-右侧供应商信息
  @Modifier：杨胜国
  @routerPath:
  @date：  2021/06/02-14:00
-->
<template>
  <div>
    <div class="right">
      <div class="right_top">
        <p class="supplier_name">
          <!-- <img :src="shopInfo.departName | formatPic"> -->
          {{ shopInfo.departName }}
        </p>
        <div class="no_center">
          <p style="justify-content:space-between;">
            <span class="supplier_info_name">统一社会信用代码：</span>
            <span>{{ shopInfo.uniformSocialCreditCode }}</span>
          </p>
          <p>
            <i class="el-icon-phone" />
            <span class="ml5 supplier_info_name">电话：</span>
            <span>{{ shopInfo.departPhone }}</span>
          </p>
          <div class="collection_box">
            <p class="pointer" @click="collectionStore">
              <i :class="shopInfoFlgCopy?'el-icon-star-on':'el-icon-star-off'" />收藏商家
            </p>
          </div>
        </div>
      </div>
      <div class="right_bottom">
        <div class="right_bottom_title">
          <p>商品有售的商家</p>
          <!-- <p>
            商品累计采购
            <span v-if="isLogin" class="purchase_price">￥{{ saleList|formatMoney }}</span>
            <span v-if="!isLogin">登录可见</span>
          </p> -->
        </div>
        <div>
          <div class="table_header">
            <p>供应商</p>
            <p>商城售价</p>
            <p>市场价</p>
          </div>
          <div v-if="saleList.length>0" class="table_body">
            <el-scrollbar style="height:100%;">
              <div v-for="item in saleList" :key="item.id" class="table_body_tr pointer" @click="suppliClick(item)">
                <span>{{ item.supplierName }}</span>
                <span v-if="isLogin">￥{{ item.commodityPrice }}</span>
                <span v-if="!isLogin">登录可见</span>
                <span>￥{{ item.marketPrice }}</span>
              </div>
            </el-scrollbar>
          </div>
          <ul v-else class="table_body">
            <li class="table_body_tr no_content">
              暂无数据
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// api
import { deleteMarkInfo } from '@/api/shoppingmall/tabcenter'
import { hasMarked, addshopMarkInfo } from '@/api/shoppingmall/products'
// 图片
import jd from '@/assets/img/shopmall/tel_icon_01.png'
import chenguang from '@/assets/img/shopmall/tel_icon_03.png'
import shitaibo from '@/assets/img/shopmall/tel_icon_04.png'
import xiyu from '@/assets/img/shopmall/tel_icon_05.png'
import guanjie from '@/assets/img/shopmall/tel_icon_06.png'
import suning from '@/assets/img/shopmall/tel_icon_07.png'
import zhenkunhang from '@/assets/img/shopmall/tel_icon_zkh.png'

export default {
  name: 'SuppilerInfoDetail',
  filters: {
    formatPic: function(value) {
      let src = ''
      switch (value) {
        case '晨光办公':
          src = chenguang
          break
        case '震坤行':
          src = zhenkunhang
          break
        case '固安捷':
          src = guanjie
          break
        case '京东':
          src = jd
          break
        case '苏宁易购':
          src = suning
          break
        case '西域':
          src = xiyu
          break
        case '史泰博':
          src = shitaibo
          break
      }
      return src
    }
  },
  components: {
  },
  props: {
    saleList: {
      type: Array,
      default: function() {
        return []
      }
    },
    shopInfoFlg: {
      type: Boolean,
      default: false
    },
    isLogin: {
      type: Boolean,
      default: false
    },
    addshopParams: {
      type: Object,
      default: function() {
        return {}
      }
    },
    shopInfoStatus: {
      type: Object,
      default: function() {
        return {}
      }
    },
    shopInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      shopInfoFlgCopy: this.shopInfoFlg
    }
  },
  methods: {
    // 跳转商品
    suppliClick(item) {
      this.$router.push({ path: '/shop/goodsClassDetail', query: { id: item.id }})
      // window.open(routes.href, '_blank')
    },
    // 收藏商家
    collectionStore() {
      if (!this.isLogin) {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
        return
      }
      this.addshopParams.supplierId = this.shopInfo.departId
      this.addshopParams.supplierName = this.shopInfo.departName
      // 定一个临时变量
      if (this.shopInfoFlgCopy) {
        var type = '02'
        deleteMarkInfo(this.shopInfo.departId, type).then((res) => {
          if (res.header.ret === '0') {
            this.$message({
              type: 'success',
              message: '取消收藏成功'
            })
          }
          this.shopInfoFlgCopy = false
        }).catch((err) => {
          throw new Error('取消收藏成功' + err)
        })
      } else {
        addshopMarkInfo(this.addshopParams).then((res) => {
          if (res.header.ret === '0') {
            this.$message({
              type: 'success',
              message: '收藏店铺成功'
            })
            hasMarked(this.shopInfoStatus).then(res => {
              this.shopInfoFlgCopy = res.data
            })
          }
        }).catch((err) => {
          throw new Error('收藏店铺失败' + err)
        })
      }
      // 向父组件传值
      this.$emit('shopInfoFlgEmit', this.shopInfoFlgCopy)
    }
  }
}
</script>

<style scoped lang="less">
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
  .right {
    width: 272px;
    height: 460px;
    box-sizing: border-box;
    .right_top {
      text-align: center;
      border: 1px solid #eee;
      font-size: 12px;
      .supplier_name {
        // line-height: 40px;
        // background-color: #f4f7f8;
        font-size: 16px;
        padding: 12px 0;
        img {
          margin-right: 10px;
          vertical-align: top;
          margin-top: 10px;
        }
      }
      .no_center {
        position: relative;
        text-align: left;
        padding:5px 10px;
        p{
          display: flex;
          align-items: center;
          color: #555;
          margin-bottom: 10px;
        }
        .supplier_info_name {
          color: #555;
          display: inline-block;
        }
        .ml5 {
          margin-left: 5px;
        }
      }
      .collection_box {
        position: absolute;
        top: 33px;
        right: 10px;
        display: flex;
        justify-content: space-between;
        i.el-icon-star-on {
          font-size: 16px;
          color: @orange;
          margin-right: 5px;
        }
        i.el-icon-star-off {
          font-size: 16px;
          color: @orange;
          margin-right: 5px;
        }
      }
    }
    .right_bottom {
      text-align: center;
      border: 1px solid #eee;
      font-size: 12px;
      margin-top: 8px;
      .right_bottom_title {
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        // background-color: #f4f7f8;
        padding: 8px 12px;
        .purchase_price {
          display: block;
          color: @orange;
        }
      }
      .table_header {
        display: flex;
        // background-color: #f4f7f8;
        color: #555;
        padding: 5px 0 5px;
        margin: 0 12px;
        border-bottom: 1px dashed #a6a6a6;
        p {
          flex: 1;
          text-align: center;
        }
      }
      .table_body {
        height: 195px;
        // overflow-y: auto;
        color: #666666;
        .table_body_tr {
          display: flex;
          line-height: 30px;
          border-bottom: 1px dashed #a6a6a6;
          margin: 0 12px;
          span {
            width: 33%;
            text-align: center;
            &:nth-of-type(1) {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &:nth-last-of-type(1) {
              color: #F75903;
            }
          }
          &:last-of-type {
            border-bottom: 1px dashed #fff;
          }
          &:hover {
            background-color: #f5f7fa;
          }
        }
        .no_content {
          text-align:center;
          display:block;
          padding-top: 60px;
          border: none;
        }
      }
    }
  }
</style>
