<template>
  <div class="">
    <van-search
      v-model="searchTime"
      placeholder="请输入编码或名称"
      show-action
      readonly
      @click="onMoreSearch"
      class="hightSearch"
    >
      <i slot="left-icon" class="fa fa-search"></i>
      <template slot="action">
<!--        <div class="font14 float-l common" @click="onSearch">搜索</div>-->
        <div class="font14 float-l common" @click="onMoreSearch">搜索</div>
      </template>
    </van-search>
    <van-tabs
      v-model="activeName"
      class="tabs"
      :line-width="40"
      :line-height="2"
      swipeable
    >
      <van-tab
        v-for="(item, index) in tabsTitle"
        v-if="item.name !== 'summary' || (item.name === 'summary' && isEmpNum !== 1)"
        :key="index"
        :title="item.title"
        :name="item.name"
      >
        <summary-components :chooseTime="time" :saler-info="linkInfo" v-if="item.name === 'summary'"
                            @click="onSummaryClick"/>
        <saleman :chooseTime="time" :tab-data="tabData" v-if="item.name === 'saleman'" @click="onSalemanClick"/>
        <customer :chooseTime="time" :tab-data="tabData" v-if="item.name === 'customer'" @click="onCusClick"/>
        <order :chooseTime="time" :tab-data="tabData" :client-info="clientInfo" v-if="item.name === 'order'" @click="onOrderClick"/>
        <goods :chooseTime="time" :tab-data="tabData" :order-info="orderInfo" v-if="item.name === 'goods'" @click="onGoodsClick"/>
      </van-tab>
    </van-tabs>
    <high-search v-model="moreSearchShow" :choosetime="JSON.parse(JSON.stringify(time))" @onsearch="moreSearchConfirm"/>
  </div>
</template>

<script>
// 引用公共方法
import {getFormateDate} from '@/utils/common'
import {getUserType} from '@/api/saleSituation'
import {bridge} from '@/utils'

// 引用组件
import HighSearch from './components/HighSearch.vue'
import summaryComponents from './summary/index.vue'
import saleman from './saleman/index.vue'
import order from './order/index.vue'
import goods from './goods/index.vue'
import customer from './customer/index.vue'

const allTabsTitle = [
  {title: '汇总', name: 'summary'},
  {title: '销售员', name: 'saleman'},
  {title: '客户', name: 'customer'},
  {title: '订单', name: 'order'},
  {title: '商品', name: 'goods'}
]

export default {
  components: {
    HighSearch,
    summaryComponents,
    saleman,
    order,
    goods,
    customer
  },
  data() {
    return {
      activeName: allTabsTitle[0].name,
      tabsTitle: [],
      moreSearchShow: false,
      time: {
        start: getFormateDate(new Date(), 'yyyy-MM-dd'),
        end: getFormateDate(new Date(), 'yyyy-MM-dd')
      },
      tabData: {
        saler: '',
        orgId: '',
        sysDbSource: '',
        tmsTestDb: '',
        tmsRealDb: '',
        appTestDb: '',
        appRealDb: ''
      },
      clientInfo: {
        clientId: '',
        clientName: ''
      },
      orderInfo: {
        orderNo: '',
        orderId: ''
      },
      isEmpNum: 0 // 是否是销售员
    }
  },
  computed: {
    linkInfo () {
      return this.$store.state.linkInfo
    },
    routKey() {
      return this.$route.path
    },
    searchTime() {
      let time = this.time.start + '/' + this.time.end
      return time
    }
  },
  mounted() {
    // 设置标题栏关闭返回按钮
    this.$store.commit('setNavBar', {
      show: true,
      leftArrow: true,
      title: '销售执行情况',
      leftClick: this.closeAppPage
    })

    // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
    window.addEventListener('popstate', this.onBrowserBack, false)

    this.checkUserType()
  },
  destroyed() {
    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
    window.removeEventListener('popstate', this.onBrowserBack, false)
  },
  methods: {
    onBrowserBack() {
      if (this.moreSearchShow) {
        this.moreSearchShow = false
        return
      }
      this.$router.go(-1)
    },
    onSearch() {

    },
    onMoreSearch() {
      this.moreSearchShow = !this.moreSearchShow
      if (this.moreSearchShow) {
        window.history.pushState(null, null, document.URL)
      }
    },
    moreSearchConfirm(data) {
      console.log('000000000')
      this.time = JSON.parse(JSON.stringify(data))
    },
    onSummaryClick(data) {
      console.log('=======')
      // 汇总点击事件
      this.tabData = {
        saler: data.empId,
        salerName: data.empName,
        orgId: this.linkInfo.sysOrgId,
        sysDbSource: this.linkInfo.sysDbSource,
        tmsTestDb: this.linkInfo.tmsTestDb,
        tmsRealDb: this.linkInfo.tmsRealDb,
        appTestDb: this.linkInfo.appTestDb,
        appRealDb: this.linkInfo.appRealDb,
        start: this.time.start,
        end: this.time.end
      }
      this.addNextTab(1)
    },
    onSalemanClick(data) {
      if (this.isEmpNum === 0 || this.isEmpNum === 1) {
        this.addNextTab(2)
      } else {
        this.$dialog.alert({
          title: '提示',
          message: '无相关数据'
        }).then(() => {
        })
      }
    },
    onCusClick(data) {
      this.clientInfo = {
        clientId: data.clientPartyId,
        clientName: data.clientPartyId + '/(' + data.partyOpcode + ')' + data.partyName
      }
      this.addNextTab(3)
    },
    onOrderClick(data) {
      this.orderInfo = {
        orderNo: data.orderNo,
        orderId: data.sysOrderTypeId
      }
      this.addNextTab(4)
    },
    onGoodsClick(data) {

    },
    addNextTab(pos) {
      // 加载下一个页面
      this.tabsTitle = allTabsTitle.slice(0, pos)
      let nextTab = allTabsTitle[pos]
      this.tabsTitle.push(nextTab)
      this.$nextTick(() => {
        this.activeName = nextTab.name
      })
      console.log(this.activeName)
    },
    checkUserType() {
      let param = {
        'attr': {
          'saler': this.linkInfo.sysUserId, // '23528',
          'orgId': this.linkInfo.sysOrgId, // '301',
          'inAttr1': this.linkInfo.sysDbSource, // 'erp_ogg_shaphar',
          'inAttr2': this.linkInfo.appRealDb, // 'app_real_shaphar',
          'inAttr3': '',
          'inAttr4': '',
          'inAttr5': '',
          'inAttr6': '',
          'inAttr7': '',
          'inAttr8': '',
          'inAttr9': '',
          'inAttr10': ''
        },
        'dbName': this.linkInfo.sysDbSource // 'erp_ogg_shaphar'
      }
      getUserType(param).then(result => {
        if (result.code === 1 || result.code === '1') {
          this.isEmpNum = Number(result.data[0].empNum)
          let power = result.data[0].empNum
          // 当为0时代表为销售经理
          if (power === 0 || power === '0') {
            this.tabsTitle = [allTabsTitle[0]]
            this.activeName = allTabsTitle[0].name
          } else {
            this.tabData = {
              saler: this.linkInfo.sysUserId,
              salerName: this.linkInfo.userName,
              orgId: this.linkInfo.sysOrgId,
              sysDbSource: this.linkInfo.sysDbSource,
              tmsTestDb: this.linkInfo.tmsTestDb,
              tmsRealDb: this.linkInfo.tmsRealDb,
              appTestDb: this.linkInfo.appTestDb,
              appRealDb: this.linkInfo.appRealDb,
              start: this.time.start,
              end: this.time.end
            }
            this.tabsTitle = [allTabsTitle[1]]
            this.activeName = allTabsTitle[1].name
          }
        } else {
          this.$toast.fail('用户类型请求失败')
        }
      }).catch(e => {
        this.$toast.fail('接口请求失败')
      })
    },
    closeAppPage() {
      console.log('关闭页面')
      bridge.closeWindow_c()
    }
  }
}
</script>

<style lang="scss" scoped>
  .tabs {
    height: calc(100vh - 104px);

    /deep/ .van-tab {
      max-width: 25%;
    }

    /deep/ .van-tab__pane {
      height: calc(100vh - 148px);
    }
  }
</style>
