<!-- const数据同步弹窗 -->
<script lang="ts" setup name="ConstDataSynchronousDialog">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'
import dayjs from 'dayjs'
import { reject } from 'lodash-es'
import type { ISendBack, IlabMeasureList } from '../myTask-interface'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import { constTestLlnk, dataSave, getConstSyncDataList } from '@/api/business/taskMeasure/myTask'
import { isIp, isPort } from '@/utils/validate'
const emit = defineEmits(['onSuccess']) // 对外暴露的方法： 退回成功
const user = useUserStore()
const dialogVisible = ref(false) // 弹窗显示状态
// 表单数据对象
const form = ref({
  ip: '', // 设备ip
  port: '', // 设备端口号
})

const btnLoading = ref(false) // 保存按钮加载状态
const showTable = ref(false) // 是否显示表格
const isLink = ref(false) // 测试连接是否成功
const loading = ref(false)
const dataFormRef = ref<FormInstance>() // 表单对象
const tableRef = ref()
const validateIp = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('设备ip不能为空'))
  }
  if (!isIp(value)) {
    callback(new Error('请输入正确格式的ip'))
  }

  callback()
}
const validatePort = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('设备端口号不能为空'))
  }
  if (!isPort(value)) {
    callback(new Error('请输入正确格式的端口号'))
  }

  callback()
}
// 校验规则
const rules: FormRules = reactive({
  ip: [{ required: true, validator: validateIp, trigger: ['blur', 'change'] }],
  port: [{ required: true, validator: validatePort, trigger: ['blur', 'change'] }],
})
const listQuery = ref({
  ipPort: '',
  offset: 1,
  limit: 20,
})
const columns = ([ // 表头
  { text: '设备名称', value: 'deviceName', align: 'center' },
  { text: '规格型号', value: 'deviceModel', align: 'center' },
  { text: '出厂编号', value: 'deviceManufactureNo', align: 'center' },
  { text: '任务单编号', value: 'orderNo', align: 'center' },
  { text: '检校类别', value: 'measureCategory', align: 'center' },
  { text: '检定日期', value: 'measureDate', align: 'center', width: '120' },
  { text: '检定结论', value: 'conclusion', align: 'center' },
  { text: '检定有效期', value: 'measureValidDate', align: 'center', width: '120' },
])
const list = ref([]) // 表格数据
const total = ref(0) // 总数
const checkoutList = ref([]) // 选中的内容

// 多选
const handleSelectionChange = (val: any) => {
  checkoutList.value = val
  console.log('多选选中的数据', checkoutList.value)
}

/**
 * 初始化审批弹窗
 * @param type 审批类型
 * @param taskId 任务id
 */
function initDialog() {
  dialogVisible.value = true
}

// 关闭弹窗
function handleClose() {
  dataFormRef.value?.resetFields()
  dialogVisible.value = false
  loading.value = false
  isLink.value = false
}

// 点击测试连接
const testLink = async () => {
  if (dataFormRef.value) {
    await dataFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        loading.value = true
        const params = `http://${form.value.ip}:${form.value.port}`
        constTestLlnk({ ipPort: params }).then((res) => {
          ElMessage.success('连接成功')
          isLink.value = true
          loading.value = false
        }).catch(() => {
          ElMessage.warning('const连接失败，请重试测试连接！！')
          isLink.value = false
          loading.value = false
        })
      }
    })
  }
}

// 点击开始数据同步
const startDataSync = async () => {
  showTable.value = true
  fetchData()
}

// 点击取消数据同步
const cancleDataSync = () => {
  showTable.value = false
  list.value = []
}

// 数据查询
function fetchData(isNowPage = false) {
  loading.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  const params = {
    ...listQuery.value,
    ipPort: `http://${form.value.ip}:${form.value.port}`,
  }
  getConstSyncDataList(params).then((res) => {
    list.value = res.data.rows.map((item: any) => {
      return {
        ...item,
        measureDate: item.measureDate ? dayjs(item.measureDate).format('YYYY-MM-DD') : item.measureDate, // 检定有效期
        measureValidDate: item.measureValidDate ? dayjs(item.measureValidDate).format('YYYY-MM-DD') : item.measureValidDate, // 证书有效期
      }
    })
    total.value = res.data.total
    if (!list.value.length) {
      ElMessage.warning('未匹配到任何数据，请重新尝试')
    }
    loading.value = false
  }).catch(() => {
    ElMessage.warning('数据同步失败！！')
    loading.value = false
  })
  // 模拟数据
  // setTimeout(() => {
  //   list.value = [
  //     { deviceName: '1', deviceModel: '1', deviceManufactureNo: '1', orderNo: '1' },
  //     { deviceName: '1', deviceModel: '1', deviceManufactureNo: '1', orderNo: '1' },
  //     { deviceName: '3' },
  //     { deviceName: '4' },
  //   ]
  //   // checkoutList.value = list.value // 默认全部选中
  //   loading.value = false
  // }, 2000)
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  fetchData(true)
}

const checkCheckoutList = (checkoutList = [] as any) => {
  if (Array.isArray(checkoutList) && !checkoutList.length) {
    return false // 无数据，不通过校验
  }
  for (let i = 0; i < checkoutList.length; i++) {
    const index = checkoutList.findIndex((e: any) =>
      checkoutList[i].deviceName === e.deviceName
      && checkoutList[i].deviceModel === e.deviceModel
      && checkoutList[i].deviceManufactureNo === e.deviceManufactureNo
      && checkoutList[i].orderNo === e.orderNo,
    )
    if (index !== -1) {
      ElMessage.warning(`【设备名称：${checkoutList[index].deviceName}】【规格型号：${checkoutList[index].deviceModel}】【出厂编号：${checkoutList[index].deviceManufactureNo}】【任务单编号：${checkoutList[index].orderNo}】存在两条相同的数据，只允许上传其中一条`)
      return false // 校验不通过
    }
  }
  return true // 校验通过
}

// 点击上传业务系统
const uploadData = () => {
  // 这里需要提示一下是否存在两个属性值完全一样的数据
  if (user.bizLabCode === '') {
    ElMessage.warning('此用户非计量人员，不允许上传')
    return false
  }
  if (user.groupNo === '') {
    ElMessage.warning('此用户非计量人员，不允许上传')
    return false
  }
  if (!checkoutList.value.length) {
    ElMessage.warning('请至少选中一条数据')
    return false
  }
  // 校验checkoutList是否存在两条同样的数据:设备名称、规格型号、出厂编号、任务单编号
  if (!checkCheckoutList(checkoutList.value)) {
    return false
  }
  const params = checkoutList.value.map((item: any) => {
    return {
      ...item,
      labCode: user.bizLabCode,
      groupCode: user.groupNo,
      ipPort: `http://${form.value.ip}:${form.value.port}`,
    }
  })
  loading.value = true
  dataSave(params).then(() => {
    ElMessage.success('上传成功')
    handleClose()
  }).catch(() => {
    ElMessage.warning('上传失败')
    loading.value = false
  })
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="康斯特数据同步"
    width="85%"
    :before-close="handleClose"
  >
    <div v-loading="loading">
      <div style="display: flex;justify-content: space-between;">
        <el-form
          ref="dataFormRef"
          label-position="left"
          label-width="100px"
          :model="form"
          :rules="rules"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="设备ip" prop="ip">
                <el-input v-model.trim="form.ip" placeholder="设备ip" class="short-input" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备端口号" prop="port">
                <el-input v-model.trim="form.port" placeholder="设备端口号" class="short-input" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div style="display: flex;">
          <el-button type="warning" style="margin-right: 32px;" @click="testLink">
            测试连接
          </el-button>
          <el-button type="primary" :disabled="!isLink" @click="startDataSync">
            开启数据同步
          </el-button>
          <el-button type="info" :disabled="!isLink" @click="cancleDataSync">
            取消数据同步
          </el-button>
        </div>
      </div>
      <table-container v-if="showTable">
        <template #btns-right>
          <el-button type="primary" @click="uploadData">
            上传至业务系统
          </el-button>
        </template>
        <normal-table
          ref="tableRef" :is-check-all="true"
          :data="list" :total="total" :columns="listQuery.measureStatus === '4' ? columns_complete : columns" :query="listQuery"
          is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
        >
          <template #preColumns>
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>
    </div>
    <template #footer>
      <el-button type="info" @click="handleClose">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 样式
</style>