<script name="coreBusiness" setup>
import { reactive, ref, nextTick } from 'vue'
import { getCoreBusinessData } from '@/http/apis/declareMange'
import { storeToRefs } from 'pinia'
import store from '@/store'
const props = defineProps({
  basicInfoData: {
    type: Object
  }
})
const userInfo = storeToRefs(store.userStore).userInfo || {},
  formData = ref({}),
  formRef = ref(),
  rules = {
    coreBusiness: [{ required: true, message: '请至少选择一个核心业务' }]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  // 选择核心业务
  selectCoreBusiness = () => {
    coreBusinessvisible.value = true
    getCoreBusinessTableData({ pageNumber: 1, pageSize: 10 }, true)
  },
  column = [
    {
      type: 'index',
      label: '序号',
      width: 60
    },
    // {
    //   label: '业务编号',
    //   key: 'oid',
    //   prop: 'oid'
    // },
    {
      label: '业务名称',
      key: 'matterName',
      prop: 'matterName'
    },
    {
      label: '所属单位',
      key: 'orgName',
      prop: 'orgName'
    }
  ],
  tableListRef = ref(),
  coreBusinessData = ref([]),
  coreBusinesstotal = ref(0),
  column2 = [
    {
      type: 'selection'
    },
    // {
    //   label: '业务编号',
    //   prop: 'oid',
    //   key: 'oid'
    // },
    {
      label: '业务名称',
      prop: 'matterName',
      key: 'matterName'
    },
    {
      label: '所属单位',
      prop: 'orgName',
      key: 'orgName'
    }
  ],
  coreBusinessvisible = ref(false),
  getCoreBusinessTableData = async (pageParams = tableListRef.value?.pageParams, flag) => {
    var orgCode = []
    props?.basicInfoData?.superOrgCode && orgCode.push(props.basicInfoData.superOrgCode)
    userInfo.value?.empPosUnitCode && orgCode.push(userInfo.value.empPosUnitCode)
    const res = await getCoreBusinessData({
      ...pageParams,
      businessName: coreBusinessParams.businessName,
      orgCode: orgCode.join(',')
    })
    coreBusinessData.value = res.data.data
    coreBusinesstotal.value = res.data.total
    await nextTick()
    if (flag) {
      coreBusinessData.value && coreBusinessData.value.forEach(item => {
        const dataIds = formData.value.coreBusiness && formData.value.coreBusiness.map(i => i.id) || []
        if (dataIds.includes(item.id)) {
          tableListRef.value.toggleRowSelect(item, true)
        } else {
          tableListRef.value.toggleRowSelect(item, false)
        }
      })
    }
  },
  searchCoreBussiness = () => {
    getCoreBusinessTableData()
  },
  coreBusinessTempotary = ref(),
  selectionCoreBusinessChange = (data) => {
    coreBusinessTempotary.value = data
  },
  coreBusinessParams = reactive({
    businessName: undefined
  }),
  handleReset = () => {
    coreBusinessParams.businessName = ''
  },
  confirmCoreBusiness = () => {
    formData.value.coreBusiness = coreBusinessTempotary.value
    coreBusinessvisible.value = false
  },
  // 回显
  setFormData = (data) => {
    formData.value = {
      coreBusiness: data.coreBusiness ? JSON.parse(data.coreBusiness) : []
    }
  }
defineExpose({ validForm, formData, setFormData })
</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="0"
    label-suffix=":"
    scroll-to-error
  >
    <el-row :gutter="40">
      <el-col :span="24" class="mb-16">
        <el-button type="primary" class="float-right" @click="selectCoreBusiness">
          选择核心业务
        </el-button>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="coreBusiness">
          <table-list
            :pagination="false"
            style="width: 100%"
            :column="column"
            :data="formData.coreBusiness"
            :empty-temp="false"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-dialog
    title="选择核心业务"
    :close-on-click-modal="false"
    :before-close="()=>coreBusinessvisible=false"
    :model-value="coreBusinessvisible"
    width="700px"
  >
    <el-row style="margin-bottom: 16px" :gutter="20">
      <el-col :span="12">
        <el-input v-model="coreBusinessParams.businessName" placeholder="请输入" />
      </el-col>
      <el-col :span="12">
        <div class="flex">
          <el-button type="primary" @click="searchCoreBussiness">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <table-list
      ref="tableListRef"
      :column="column2"
      :data="coreBusinessData"
      :total="coreBusinesstotal"
      @selection-change="selectionCoreBusinessChange"
      @get-table-data="getCoreBusinessTableData"
    />
    <template #footer>
      <el-button type="primary" @click="confirmCoreBusiness"> 提交 </el-button>
      <el-button @click="coreBusinessvisible = false"> 关闭 </el-button>
    </template>
  </el-dialog>
</template>

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