<template>
    <div class="supply-renderer eye-clear"
         :class="'supply-renderer__'+modeType">
        <div class="main-pic">
            <img :src="(data.mianPicUrl || data.mainPicUrl) | img"/>
        </div>
        <div class="supply-info">
            <p class="title">{{data.title}}</p>
            <p class="desc" :style="descStyle">{{data.desc}}</p>
            <p class="address">{{data.fullAddress}}</p>
            <p class="price" :style="priceStyle">
                <small>￥</small>{{data.orgPrice}}/{{data.unit}}
                <s class="price-remove">￥{{data.price}}/{{data.unit}}</s>
            </p>
        </div>
    </div>
</template>

<script type="text/babel">

    import Renderer from '../mixins/renderer'

    export default {

      props: {
          data:{
              type: Object,
              default:()=>{
                  return {}
              }
          },
          modeType:{
              type:String,
              default: "row"
          }
      },

      mixins : [ Renderer ],

    };

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .eye-clear {
        *zoom:1;
        &:before{ content:' '; display:table;}
        &:after{display:block; content:""; font-size: 0; height:0; clear:both; overflow:hidden; visibility:hidden;}
    }
    .supply-renderer {
        position: relative;
        p {
            height: 30px;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }



        .title {
            font-weight: 500;
            margin-top: 5px;
            clear: both;
            display: block;
            height: auto;
        }

        .price-remove {
            color: #606060;
            font-size: 14px;
            padding-left: 10px;
        }
    }

    .supply-renderer__row {

        .main-pic {
            height: 180px;
            width: 40%;
            overflow: hidden;

            float: left;

            img {
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }


        .supply-info {
            position: absolute;
            left: 40%;
            padding-left: 10px;
            right: 0;
        }
    }

    .supply-renderer__flex {

        .title,.desc,.address,.price {
            text-align: center;
        }

        .main-pic {
            height: 180px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }
    }

</style>








