<template>
  <!--    区域专员工作台 -->
  <div>
    <el-tabs  v-model="componentName" type="border-card" :before-leave="beforeLeave">
      <el-tab-pane name="orderTrack"  :label="$t('common.orderTrackTitle')">
      </el-tab-pane>
      <el-tab-pane  :label="$t('common.abnormalOrderTitl')" name="personList">
      </el-tab-pane>
      <keep-alive>
        <component :is="componentName"  @setNeedSave="updateNeedSave"></component>
      </keep-alive>
    </el-tabs>
  </div>
</template>
<script>
// 跟单记录表
import orderTrack from '@/components/tracemgr/regionalCommissioner/workbench/orderTrack/orderTrackList.vue'
// 异常订单记录表
import personList from '@/components/tracemgr/regionalCommissioner/workbench/abnormalOrder/abnormalOrderList.vue'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'

export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'regionalCommissionerWorkbenchPage',
  data () {
    return {
      checkDataSourceList: false,
      item: {},
      componentName: 'orderTrack',
      isNeedSave: false
    }
  },
  methods: {
    aa (flag) {
      this.checkDataSourceList = flag
    },
    listMessageColse (flag) {
      this.checkDataSourceList = flag
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    beforeLeave (item) {
      if (this.isNeedSave) {
        var p = new Promise((resolve, reject) => {
          this.$confirm(this.$i18n.messages[this.$i18n.locale].traceMgr.TipsInfo, this.$i18n.messages[this.$i18n.locale].common.tip, {
            confirmButtonText: this.$i18n.messages[this.$i18n.locale].traceMgr.leaveInfo,
            cancelButtonText: this.$i18n.messages[this.$i18n.locale].approval.cancel,
            type: 'warning'
          }).then(() => {
            // 点击离开
            this.isNeedSave = false
            resolve()
          }).catch(err => {
            // 点击取消
            // 你可以在这儿做些操作
            reject(err)
          })
        })
        return p
      }
    },
    updateNeedSave (isNeedSave) {
      this.isNeedSave = isNeedSave
    }
  },
  components: {
    orderTrack,
    personList
  }
}
</script>
