<template>
<div class="saleman w100 h100">
  <van-cell class="userAvater border" :title="tabData.salerName" is-link @click="onSaleClick">
    <template #icon>
      <img class="avater" src="@/assets/img/avater.png" alt="头像">
    </template>
  </van-cell>
  <van-cell class="common border" title="箱数" :value="userInfo.boxsTotal | separator('',' 箱')">
    <template #icon>
      <div class="iconContent">
        <i class="fa fa-archive"></i>
      </div>
    </template>
  </van-cell>
  <van-cell class="common border" title="含税金额" :value="userInfo.taxAmountTotal | separator('',' 元')">
    <template #icon>
      <div class="iconContent">
        <i class="fa fa-money"></i>
      </div>
    </template>
  </van-cell>
  <van-cell class="common border" title="无税金额" :value="userInfo.taxFreeTotal | separator('',' 元')">
    <template #icon>
      <div class="iconContent">
        <i class="fa fa-money"></i>
      </div>
    </template>
  </van-cell>
  <van-cell class="common border" title="税额" :value="userInfo.taxFeeTotal | separator('',' 元')">
    <template #icon>
      <div class="iconContent">¥</div>
    </template>
  </van-cell>
  <p class="text-center font15 saleTitle">销售开单时间: {{time.start}} 至 {{time.end}}</p>
</div>
</template>

<script>
// 引入接口
import {
  saleInfo
} from '@/api/saleSituation'

// 引入公共方法
import {
  getFormateDate
} from '@/utils/common'

export default {
  name: 'saleman',
  data() {
    return {
      userInfo: {},
      time: {
        start: getFormateDate(new Date(), 'yyyy-MM-dd'),
        end: getFormateDate(new Date(), 'yyyy-MM-dd')
      }
    }
  },
  props: {
    chooseTime: {
      type: Object,
      default: () => {}
    },
    tabData: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    chooseTime: {
      deep: true,
      handler(val) {
        console.log("222222")
        this.tabData.end = this.chooseTime.end,
          this.tabData.start = this.chooseTime.start
        this.time = JSON.parse(JSON.stringify(this.chooseTime))
        this.getUserInfo()
      }
    },
    tabData: {
      deep: true,
      handler(val) {
        console.log("11111")
        this.getUserInfo()
      }
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    onSaleClick() {
      this.$emit('click', '')
    },
    getUserInfo() {
      this.time.end = this.tabData.end,
        this.time.start = this.tabData.start
      saleInfo({
        orgId: this.tabData.orgId,
        startdate: this.time.start,
        enddate: this.time.end,
        saler: this.tabData.saler,
        start: '1',
        length: '999',
        dbName: this.tabData.sysDbSource
      }).then(res => {
        if (res.code !== '1') return false
        this.userInfo = res.data[0]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.saleman {
  .saleTitle {
    color: #23262a;
    font-weight: 600;
    font-size: 15px;
  }

  .avater {
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  .iconContent {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #2F78ED;
    margin-right: 10px;
    position: relative;
    text-align: center;
    font-size: 12px;
    line-height: 25px;
    color: #fff;
  }

  .border {
    &:not(:last-child)::after {
      left: 0;
      border-color: #EDF0F4;
    }
  }

  .userAvater {
    padding: 50px 16px 50px 92px;

    /deep/ .van-cell__left-icon {
      font-size: 55px;
      color: #c9cfd2;
    }
  }

  .common {
    padding: 20px 16px;

    /deep/ .van-cell__title {
      flex: none;
    }

    /deep/ .van-cell__value {
      color: #323233;
    }

    /deep/ .van-cell__left-icon {
      font-size: 35px;
      color: #8c8d8e;
    }
  }
}
</style>
