<script setup name="userDialog">
import { reactive, ref, watch } from 'vue'
import { userList } from '@/http/apis/systemManage/userManage'

const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: {
      type: Array,
      default: undefined
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }),
  emits = defineEmits(['close', 'getUserData']),
  column = [
    {
      type: 'radio',
      key: 'userId',
      width: 60
    },
    {
      label: '序号',
      type: 'index',
      width: 60
    },
    {
      label: '姓名',
      key: 'name',
      prop: 'name'
    },
    {
      label: '所属单位（主职）',
      key: 'orgName',
      prop: 'orgName',
      showOverflowTooltip: true,
      width: 250
    },
    {
      label: '手机号码',
      key: 'phoneNo',
      prop: 'phoneNo',
      width: '150'
    }

  ],
  tableListRef = ref(),
  total = ref(0),
  tableData = ref([]),
  searchForm = reactive({
    name: undefined
  }),
  getTableData = async (pageParams = tableListRef.value?.pageParams) => {
    const res = await userList({
      ...pageParams,
      ...searchForm,
      ...props.params
    })
    total.value = res.data.total
    tableData.value = res.data.records || []
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.name = undefined
    searchForm.phoneNo = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  userData = ref(),
  radioChange = (val) => {
    userData.value = val
  },
  submit = () => {
    emits('getUserData', userData.value)
    emits('close')
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      getTableData()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="项目负责人/项目联系人"
    width="70%"
    destroy-on-close
    @close="emits('close')"
  >
    <div class="search mb-16">
      <el-form label-suffix=":" :model="searchForm" size="small">
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="用户姓名">
              <el-input v-model="searchForm.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input v-model="searchForm.phoneNo" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="btn">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <table-list
      ref="tableListRef"
      :column="column"
      class="mt-15"
      :data="tableData"
      :total="total"
      row-key="userId"
      @radio-change="radioChange"
      @get-table-data="getTableData"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('close')">关闭</el-button>
        <el-button
          type="primary"
          @click="submit"
        >
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
