<template>
    <div>
        <el-tabs :before-leave="beforeLeave" type="border-card" v-model="componentName">
            <el-tab-pane :label=orderTrackTitle name="orderTrackList">
            </el-tab-pane>
            <el-tab-pane :label=abnormalOrderTitl name="abnormalOrderList">
            </el-tab-pane>
          <keep-alive>
            <component :is="componentName" :menuId="menuId" @setNeedSave="updateNeedSave"></component>
          </keep-alive>
        </el-tabs>
    </div>
</template>

<script>
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'

// 跟单记录表
import orderTrackList from '@/components/tracemgr/factoringCommissioner/workbench/orderTrack/orderTrackList'
// 异常订单记录表
import abnormalOrderList from '@/components/tracemgr/factoringCommissioner/workbench/abnormalOrder/abnormalOrderList'

export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'factoringCommissionerWorkbenchPage',
  data () {
    return {
      componentName: 'orderTrackList',
      functionComponent: [],
      orderTrackTitle: this.$i18n.messages[this.$i18n.locale].common.orderTrackTitle,
      abnormalOrderTitl: this.$i18n.messages[this.$i18n.locale].common.abnormalOrderTitl,
      /* 跟单记录数据是否更改 */
      isChangeOrderTrack: false,
      isNeedSave: false
    }
  },
  components: {
    orderTrackList,
    abnormalOrderList
  },
  methods: {
    /*
     * 跟单记录变化出发的方法
     */
    isChangeOrderTrackCallback (flag) {
      this.isChangeOrderTrack = flag
    },
    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
    }
  }
}
</script>
