<template>
  <view class="xd-store-item" @click="handleClick">
    <view class="xd-store-item__flag" :style="'background: ' + uiColor">{{flagName}}</view>
    <view class="xd-store-item__logo">
      <image v-if="image" mode="aspectFit" :src="image"></image>
      <view v-else>
        <xd-font-icon color="#aaa" size="80" icon="iconiconset0149"></xd-font-icon>
      </view>
    </view>
    <view class="xd-store-item__body">
      <view
        class="xd-store-item__body-title"
        :style="{
          borderBottom: '4rpx solid ' + uiColor
        }"
      >{{getName(name)}}</view>
      <view
        class="xd-store-item__body-other"
        v-if="address"
        :style="{
          borderBottom: '1rpx dotted ' + uiColor
        }"
      >地址: {{address}}</view>
      <view
        class="xd-store-item__body-other"
        v-if="time"
        :style="{
          borderBottom: '1rpx dotted ' + uiColor
        }"
      >营业时间: {{time}}</view>
      <view
        class="xd-store-item__body-other"
        v-if="tel"
        :style="{
          borderBottom: '1rpx dotted ' + uiColor
        }"
      >电话: {{tel}}</view>
    </view>
    <view class="xd-store-item__btn" v-if="typeName">
      <xd-button
        :btn-type="i === 0 ? 'primary' : 'default'"
        v-for="(it,i) in typeName"
        :key="i"
        size="small"
      >{{it}}</xd-button>
    </view>
    <view class="xd-store-item__distance" v-if="distance">
      <xd-font-icon size="34" icon="icondiqu" :color="uiColor"></xd-font-icon>
      <text>{{distance}}</text>
    </view>
  </view>
</template>

<script>
  import XdButton from "@/components/XdButton/XdButton";
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';
  
  export default {
    name: "XdItemStore",
    components:{
      XdButton,
      XdFontIcon
    },
    props: {
      image: {
        type: String,
        required: true
      },
      color: {
        type: String,
        default: '',
      },
      flagName: {
        type: String,
        default: '品牌'
      },
      typeName: {
        type: Array,
        default() {
          return [];
        }
      },
      distance: {
        type: String,
        default: '约48.07km'
      },
      name: {
        type: String,
        required: true
      },
      address: {
        type: String,
        default: '',
      },
      time: {
        type: String,
        default: '',
      },
      tel: {
        type: String,
        default: '',
      }
    },
    data(){
      return {
        uiColor: ''
      }
    },
    async created() {
      if(this.color) {
        this.uiColor = this.color;
      }else{
        this.uiColor = await getParentsStyle(this.$parent, '$mainColor');
      }

    },
    methods:{
      getName(name){
        return this.$xdUniHelper.cutStringLen(name,30)
      },
      getStyle(rpx,style='solid'){
        if(rpx < 3) rpx = '1px';
        else rpx = `${rpx}rpx`;
        return `border-bottom: ${rpx} ${style} ${this.uiColor}`;
      },
      handleClick(){
        this.$emit('click');
        this.$emit('tab');
      }
    }
  }
</script>

<style scoped lang="less">
  .xd-store-item {
    box-shadow: 0 unit(5, rpx) unit(10,rpx) rgba(0,0,0,.1);
    min-height: unit(200,rpx);
    background: #fff;
    border-radius: unit(10,rpx);
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &__flag {
      position: absolute;
      top: 0;
      left: 0;
      width: unit(70,rpx);
      height: unit(40,rpx);
      line-height: unit(40,rpx);
      border-radius: unit(10,rpx) 0 unit(16,rpx) 0;
      font-size: @xd-font-size-sm;
      text-align: center;
      color: #fff;
    }

    &__body {
      flex: 1;
      padding: unit(14,rpx) unit(30, rpx)  unit(30,rpx) 0;

      &-title {
        width: 100%;
        height: unit(42,rpx);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: @xd-font-size-lg - 2;
        line-height: unit(42, rpx);
        margin-bottom: unit(5,rpx);
      }

      &-other {
        width: unit(260,rpx);
        height: unit(44,rpx);
        line-height: unit(44, rpx);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: @xd-font-size-sm;
        color: @xd-color-subtitle;
      }

    }

    &__btn {
      position: absolute;
      bottom: unit(40, rpx);
      right: unit(30, rpx);
      display: flex;
      justify-content: flex-end;
      align-items: center;

      > xd-button {
        margin-left: unit(10, rpx);

        &:first-child {
          margin-left: 0;
        }
      }

      /deep/ .xd-button {
        height: unit(40,rpx);
        line-height: unit(40, rpx);
        margin-left: unit(10,rpx);
        &:first-child {
          margin-left: 0;
        }
      }
    }

    &__distance {
      position: absolute;
      top: unit(72,rpx);
      right: unit(30, rpx);
      font-size: @xd-font-size-sm;
      color: #b5b5b5;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    &__logo {
      width: unit(140,rpx);
      margin-right: unit(30,rpx);
      display: flex;
      justify-content: flex-end;
      align-items: center;

      > image {
        width: unit(116,rpx);
        height: unit(116,rpx);
      }

    }
  }
</style>
