<template>
  <th-dialog
    ref="dialog"
    v-bind="dialogProps"
    :loading="loading"
  >
    <template>
      <th-tabs
        ref="tabs"
        v-model="activeTab"
        :tabs="tabs"
        pane-style="height:70vh;"
        @onSelect="onSelect"
      />
    </template>
  </th-dialog>
</template>

<script>
import baseForm from '../../../../src/mixins/baseForm'
import PersonTable from './PersonTable'
import ContactTable from './ContactTable'

export default {
  mixins: [baseForm],
  props: {
    request: {
      type: Object,
      default: () => ({})
    },
    hostOrgOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      dialogProps: {
        title: '督办人员选择',
        width: '60%',
        props: {
          appendToBody: true
        },
        buttons: [],
        showCancelButton: false
      },
      activeTab: 'qxry',
      source: ''
    }
  },
  computed: {
    tabs() {
      return [
        {
          label: '抢修人员',
          name: 'qxry',
          component: PersonTable,
          type: '1',
          request: this.request,
          hostOrgOptions: this.hostOrgOptions
        },
        {
          label: '指挥人员',
          name: 'zhry',
          component: PersonTable,
          type: '2',
          request: this.request,
          hostOrgOptions: this.hostOrgOptions
        },
        {
          label: '客户经理',
          name: 'hfjl',
          component: PersonTable,
          type: '3',
          request: this.request,
          hostOrgOptions: this.hostOrgOptions
        },
        {
          label: '常用联系人',
          name: 'cylxr',
          component: ContactTable,
          type: '4',
          request: this.request,
          hostOrgOptions: this.hostOrgOptions
        }
      ]
    }
  },
  methods: {
    // 显示弹框
    showDialog(source) {
      this.source = source
      this.activeTab = 'qxry'
      this.$refs.dialog.showDialog()
      const that = this
      this.$nextTick(() => {
        that.tabs.forEach(d => {
          that.$refs.tabs.$refs[d.name][0].fetchTableApi()
        })
      })
    },
    // 确认选择
    onSelect(rows) {
      this.$emit('onSelect', rows, this.source)
      this.$refs.dialog.handleCancel()
    }
  }
}
</script>
