<template>
  <th-dialog
    ref="dialog"
    class="th-sms"
    v-bind="dialogProps"
    :loading="loading"
  >
    <el-container class="sms-dialog-box">
      <el-main>
        <left-table
          ref="leftTable"
          :sms-type-options="smsTypeOptions"
          :sms-sheet-type-options="smsSheetTypeOptions"
          :sms-send-obj-options="smsSendObjOptions"
          :request="request"
          @select="onSelect"
        />
      </el-main>
      <el-aside width="40%">
        <right-table
          ref="rightTable"
          :sms-sheet-type-options="smsSheetTypeOptions"
          :sms-send-obj-options="smsSendObjOptions"
          :request="request"
        />
      </el-aside>
    </el-container>
  </th-dialog>
</template>
<script>
import ThDialog from '../../dialog/src/main'
import LeftTable from './left-table'
import RightTable from './right-table'
import mixin from './mixin.js'

export default {
  name: 'ThSms',
  components: {
    ThDialog,
    LeftTable,
    RightTable
  },
  mixins: [mixin],
  data() {
    return {
      loading: false,
      dialogProps: {
        title: '短信查询',
        showCancelButton: false,
        buttons: [],
        props: {
          fullscreen: true
        },
        isDisabledFullScreen: true
      }
    }
  },
  methods: {
    showDialog(row) {
      this.$refs.dialog.showDialog()
      this.FetchSmsTypeOptions()
      this.FetchSmsSheetTypeOptions()
      this.FetchSmsSendObjOptions()
      this.$nextTick(() => {
        this.$refs.leftTable.fetchTableApi(row)
        this.$refs.rightTable.clearTable()
      })
    },
    // 选择左边表格行
    onSelect(row) {
      this.$refs.rightTable.fetchTableApi(row.GROUP_ID)
    }
  }
}
</script>
