<script name="provincialExamine" setup>
import { nextTick, reactive, ref } from 'vue'
import { govStripList } from '@/http/apis/declareMange'
const formData = ref({}),
  formRef = ref(),
  rules = {
    operationManageUnitName: [{ required: true, message: '请选择业务主管部门' }]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  // 回显
  setFormData = (data) => {
    formData.value = {
      operationManageUnit: data.operationManageUnit,
      operationManageUnitName: ''
    }
    if (data.operationManageUnit) {
      getTableData(true)
    }
  },
  dialogVisible = ref(false),
  tableListRef = ref(),
  searchForm = reactive({
    businessStripName: undefined
  }),
  showDialog = async () => {
    dialogVisible.value = true
    getTableData()
  },
  column = [
    {
      type: 'selection',
      key: 'businessStripCode',
      width: '60'
    },
    {
      label: '单位名称',
      key: 'businessStripName',
      prop: 'businessStripName',
      minWidth: '150',
      showOverflowTooltip: true
    },
    {
      label: '单位编码',
      key: 'businessStripCode',
      prop: 'businessStripCode',
      minWidth: '150',
      showOverflowTooltip: true
    }
  ],
  tableData = ref(),
  getTableData = async (flag) => {
    const res = await govStripList({ ...searchForm })
    tableData.value = res.data
    await nextTick()
    const operationManageUnitName = []
    tableData.value && tableData.value.forEach(item => {
      const dataIds = formData.value?.operationManageUnit?.split(',') || []
      if (dataIds.includes(item.businessStripCode)) {
        if (!flag) {
          tableListRef.value.toggleRowSelect(item, true)
        } else {
          operationManageUnitName.push(item.businessStripName)
        }
      }
    })
    if (flag) {
      formData.value.operationManageUnitName = operationManageUnitName.join('，') || ''
    }
  },
  reset = () => {
    searchForm.businessStripName = undefined
    getTableData()
  },
  selectUnit = ref([]),
  selectionChange = (val) => {
    selectUnit.value = val
  },
  submit = () => {
    dialogVisible.value = false
    formData.value.operationManageUnitName = selectUnit.value.map(i => i.businessStripName).join('，')
    formData.value.operationManageUnit = selectUnit.value.map(i => i.businessStripCode).join(',')
  }
defineExpose({ validForm, formData, setFormData })
</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="180px"
    label-suffix=":"
    scroll-to-error
  >
    <el-row :gutter="40">
      <el-col :span="24">
        <el-form-item label="业务主管部门（省级）" prop="operationManageUnitName">
          <el-input
            v-model="formData.operationManageUnitName"
            placeholder="请选择"
            readonly
            @click="showDialog"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-dialog
    :model-value="dialogVisible"
    title="上级条线主管单位"
    width="60%"
    @close="dialogVisible = false"
  >
    <el-form
      :model="searchForm"
      size="small"
      label-suffix=":"
    >
      <el-row
        :gutter="16"
        class="mb-16"
      >
        <el-col :span="8">
          <el-form-item label="单位名称">
            <el-input
              v-model="searchForm.businessStripName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item class="btn">
            <div class="flex">
              <el-button
                type="primary"
                @click="getTableData"
              >查询</el-button>
              <el-button
                @click="reset"
              >重置</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="tableData"
      :pagination="false"
      style="height: 600px;overflow: auto"
      @get-table-data="getTableData"
      @selection-change="selectionChange"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button
          type="primary"
          @click="submit"
        >
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="less">
.el-upload-list{
  width: 100%;
}
</style>
