<!-- 选择委托书中的样品 -->
<script lang="ts" setup name="SelectOrderSamplesDialog">
import { ElMessage } from 'element-plus'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getTypeSelect } from '@/api/system/price'
import { getDictByCode } from '@/api/system/dict'
import type { typeofSign } from '@/views/system/tool/tool_interface'
import { templatePage } from '@/api/system/tool'
import { getOrderDetail } from '@/api/business/schedule/order'

const emits = defineEmits(['confirm'])
const dialogFormVisible = ref(false) // 控制弹窗显隐
const orderId = ref('') // 委托书id
const loadingTable = ref(false) // loading
const list = ref([]) // 表格参数
const tableRef = ref()
const needFilterByInterchangeId = ref(false) // 交接单中需要过滤掉已经绑定委托单的样品
const isMulti = ref(true) // 是否多选默认为多选
const columns = ref<TableColumn[]>([
  { text: '被测样品名称', value: 'sampleName', align: 'center', required: true },
  { text: '型号规格', value: 'sampleModel', align: 'center', required: true },
  { text: '仪器编号', value: 'manufacturingNo', align: 'center', required: true },
  { text: '生产厂家', value: 'manufacturer', align: 'center', required: true },
  { text: '样品编号', value: 'sampleNo', align: 'center', width: '170', required: true },
  { text: '证书要求', value: 'certificateRequire', align: 'center', required: false },
  { text: '外观状态', value: 'appearanceStatus', align: 'center', required: false },
  // { text: '客户特殊要求', value: 'specialRequire', align: 'center', required: false },
  { text: '备注', value: 'remark', align: 'center', required: false },
])
const checkoutList = ref<string[]>([]) // 多选选中参数

// 获取数据列表
const getList = () => {
  loadingTable.value = true
  getOrderDetail({ id: orderId.value }).then((res) => {
    list.value = res.data.customerSampleInfoList
    if (needFilterByInterchangeId.value) {
      list.value = list.value.filter((item: { interchangeId: string }) => item.interchangeId === '')
    }
    loadingTable.value = false
  })
}

// 点击保存
const submitForm = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请选择样品')
  }
  else {
    emits('confirm', checkoutList.value)
    dialogFormVisible.value = false
    tableRef.value.clearMulti()
  }
}

// 取消
const resetForm = () => {
  dialogFormVisible.value = false
  tableRef.value.clearMulti()
}

// 多选选中
const handleSelectionChange = (val: any) => {
  checkoutList.value = val
}

// 初始化
const initDialog = (orderIdParam: string, isMultiParam = true, specialOprate = '') => {
  dialogFormVisible.value = true
  orderId.value = orderIdParam
  isMulti.value = isMultiParam
  needFilterByInterchangeId.value = specialOprate === 'needFilterByInterchangeId'
  console.log('p-p--0-0--9', needFilterByInterchangeId.value, specialOprate)
  getList()
}
defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="选择样品(样品来源于委托单下的样品清单)" width="65%">
    <!-- 查询结果Table显示 -->
    <div style="padding: 12px;">
      <normal-table
        ref="tableRef"
        :data="list"
        :columns="columns"
        is-showmulti-select
        :list-loading="loadingTable"
        :is-multi="isMulti"
        :height="300"
        :pagination="false"
        @multi-select="handleSelectionChange"
      >
        <!-- 序号 -->
        <template #preColumns>
          <el-table-column label="#" width="55" align="center" fixed>
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm">确认</el-button>
        <el-button @click="resetForm">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-radio__label) {
  display: none;
}
</style>