<script name="relatedIrsAppDialog"  setup>
import { nextTick, ref, watch } from 'vue'
import { govStripList } from '@/http/apis/declareMange'

const
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object,
    column: {
      type: Array,
      default: () => {
        return [
          {
            type: 'radio',
            key: 'businessStripCode',
            width: '60'
          },
          {
            label: '单位名称',
            key: 'businessStripName',
            prop: 'businessStripName',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            label: '单位编码',
            key: 'businessStripCode',
            prop: 'businessStripCode',
            minWidth: '150',
            showOverflowTooltip: true
          }
        ]
      }
    }
  }),
  searchForm = ref({
    name: undefined
  }),
  // 表格数据
  tableListRef = ref(),
  total = ref(0),
  tableData = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await govStripList({ ...pageParams, ...searchForm.value })
    tableData.value = res.data
    await nextTick()
    tableListRef.value.setRadio(props?.data?.businessStripCode || '')
  },
  // 搜索
  search = () => {
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  reset = () => {
    tableListRef.value.pageParams.pageNumber = 1
    searchForm.value.businessStripName = undefined
    getTableData()
  },
  selectData = ref(),
  radioChange = (val) => {
    selectData.value = val
  },
  submit = async () => {
    emits('getBaseProvManDeprt', selectData.value)
    emits('close', true)
  },
  emits = defineEmits(['close', 'getBaseProvManDeprt'])

watch(() => props.visible, async (val) => {
  if (val) {
    await nextTick()
    await getTableData()
  } else {
    tableListRef.value.tableRef.clearSelection()
  }
})
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="选择单位"
    :width="840"
    @close="emits('close')"
  >
    <el-form :model="searchForm" label-suffix=":">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="单位名称">
            <el-input v-model="searchForm.businessStripName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="search_btn">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <table-list
      ref="tableListRef"
      :column="column"
      :data="tableData"
      :total="total"
      row-key="appId"
      :pagination="false"
      @radio-change="radioChange"
      @get-table-data="getTableData"
    />

    <template #footer>
      <div class="flex justify-center">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="emits('close')">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
