<template>
  <view class="app-body">
    <!-- userInfo start -->
    <view class="app-body__header-info">
      <view>
        <xd-font-icon v-if="!avatar" icon="iconShape" color="#bbb" size="150"></xd-font-icon>
        <img v-else :src="avatar"/>
      </view>
      <view class="app-body__header-info-font">
        <view>{{nickName}}</view>
        <view>{{phone}}</view>
      </view>
    </view>
    <!-- userInfo end -->

    <!-- order start -->
    <view class="app-body__order">
      <view class="app-body__order-title">
        <view>我的订单</view>
        <view
          @click="handleToAll"
        >全部订单<xd-font-icon icon="iconjiantou" size="24" color="#8a8a8a"></xd-font-icon>
        </view>
      </view>
      <view class="app-body__order-type">
        <view
          class="app-body__order-type-item"
          @click="handleToOrderList(item)"
          v-for="item in testOrderTypeList"
          :key="item.value"
        >
          <view>
            <xd-font-icon
              :size="item.size || 35"
              :color="item.color || '#000'"
              :icon="item.icon"
            ></xd-font-icon>
          </view>
          <view>{{item['label']}}</view>
        </view>
      </view>
    </view>
    <!-- order end -->
    <!-- my start -->
    <view class="app-body__my">
      <view class="app-body__my-collect" v-for="(item,index) in testEnterList" :key="index" @click="handleToEnter(item)">
        <view>
          <xd-font-icon
            :icon="item.icon"
            :size="item.size"
            :color="styleMainColor"
          ></xd-font-icon>
          <view>{{item.name}}</view>
        </view>
      </view>
    </view>
    <!-- my end -->
    <!-- 服务热线 start -->
    <view class="app-body__hot-line">
      <view>服务热线 {{hotLine}}</view>
    </view>
    <!-- 服务热线 end -->
    <!-- 广告 start -->
    <view class="app-body__banner"></view>
    <!-- 广告 end -->
  </view>

</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';

  export default {
    name: "XdMy",
    props: {
      avatar: {
        type: String,
        default: ''
      },
      nickName: {
        type: String,
        default: ''
      },
      phone: {
        type: String,
        default: ''
      },
      hotLine: {
        type: String,
        default: ''
      },
      orderTypeList: {
        type: Array,
        default: null
      },
      enterList: {
        type: Array,
        default: null
      },
    },
    components: {
      XdFontIcon
    },
    data() {
      return {
        testEnterList: [
          {
            name: '收藏夹',
            icon: 'iconlovefont  iconloveshoucang1',
            size: 35,
          }
        ],
        testOrderTypeList: [
          {
            icon: "iconlovefont iconlovedingdan-daifukuan",
            label: "待付款",
            size: 48,
            color: '#666',
            value: 1,
          },
          {
            icon: "iconlovefont iconloveico_yiyuanguanjia_yuyuetijian",
            label: "待体检",
            size: 42,
            value: 2,
            color: '#666'
          },
          {
            icon: "iconlovefont iconlovequxiaodingdan_icon",
            label: "已取消",
            value: 3,
            color: '#666'
          },
          {
            icon: "iconlovefont iconlovedingdanwancheng_icon",
            label: "已完成",
            value: 4,
            color: '#666'
          }
        ],
        styleMainColor: '', //插件主题风格样式
      };
    },
  
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
      
      if(this.enterList) {
        this.testEnterList = this.$xdUniHelper.cloneDeep(this.enterList)
      }
      if (this.orderTypeList) {
        this.testOrderTypeList = this.$xdUniHelper.cloneDeep(this.orderTypeList)
      }
    },

    watch: {},

    computed: {},


    mounted() {

    },

    methods: {
      handleToAll() {
        this.$emit('toAll')
      },
      handleToOrderList(item) {
        this.$emit('toItem',item)
      },
      handleToEnter(item) {
        this.$emit('toEnter', item)
      }
    },
  };
</script>

<style scoped lang="less">
  .app-body {
    font-size: unit(28, rpx);

    &__header-info {
      height: unit(166, rpx);
      display: flex;
      align-items: center;
      padding: unit(20, rpx);

      &-font {
        & > view:nth-child(2) {
          margin-top: unit(10, rpx);
        }
      }

      view {
        margin-left: unit(20, rpx);
      }

      img {
        width: unit(130, rpx);
        height: unit(130, rpx);
        border-radius: 50%;
      }
    }

    &__order {
      background: #fff;
      padding: unit(20, rpx);
      margin-left: unit(20, rpx);
      margin-right: unit(20, rpx);
      margin-bottom: unit(20, rpx);

      &-title {
        margin-bottom: unit(20, rpx);
        display: flex;
        justify-content: space-between;

        & > view:nth-child(2) {
          font-size: unit(24, rpx);
          color: #8a8a8a;
          display: flex;
        }
      }

      &-type {
        display: flex;
        justify-content: space-around;
        padding: unit(20, rpx) 0 0 0;

        &-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;

          & > view:first-child {
            display: flex;
            justify-content: center;
            align-items: center;
            height: unit(50,rpx);
            width: unit(50,rpx);
          }

          & > view:nth-child(2) {
            margin-top: unit(10, rpx);
          }
        }
      }
    }

    &__my {
      background: #fff;
      margin-left: unit(20, rpx);
      margin-right: unit(20, rpx);

      &-address {
        border-bottom: unit(1, rpx) solid #efefef;
      }

      &-address, &-collect {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: unit(20, rpx);

        view:first-child {
          display: flex;

          view {
            margin-left: unit(10, rpx);
          }
        }
      }
    }

    &__hot-line {
      margin-top: unit(20,rpx);
      margin-left: unit(20, rpx);
      margin-right: unit(20, rpx);

      view {
        text-align: center;
        padding-top: unit(10, rpx);
        padding-bottom: unit(10, rpx);
      }
    }

    &__banner {
      margin-left: unit(20, rpx);
      margin-right: unit(20, rpx);
      margin-bottom: unit(40, rpx);
      height: unit(360, rpx);
      /*background: #f2dd39;*/
    }
  }

</style>
