<!-- 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 type { ISendBack, IlabMeasureList } from '../myTask-interface'
import { getConstSyncDataList } from '@/api/business/manager/task'
import { isIp, isPort } from '@/utils/validate'

// 对外暴露的方法： 退回成功
const emit = defineEmits(['onSuccess'])
// 弹窗显示状态
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({
  offset: 1,
  limit: 20,
})
const columns = ([ // 表头
  { text: '设备名称', value: 'sampleName', align: 'center' },
  { text: '规格型号', value: 'sampleModel', align: 'center' },
  { text: '出厂编号', value: 'manufactureNo', align: 'center' },
  { text: '任务单编号', value: 'orderNo', align: 'center' },
  { text: '检校类别', value: 'measureCategoryName', align: 'center' },
  { text: '检定日期', value: 'traceDate', align: 'center', width: '120' },
  { text: '检定结论', value: 'conclusion', align: 'center' },
  { text: '检定有效期', value: 'certificateValid', align: 'center', width: '120' },
])
const list = ref([]) // 表格数据
const total = ref(0) // 总数
const loadingTable = ref(false) // 表格加载状态
const checkoutList = ref([]) // 选中的内容
// 多选
const handleSelectionChange = (val: any) => {
  checkoutList.value = val
}

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

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

// 点击测试连接
const testLink = () => {
  if (dataFormRef.value) {
    dataFormRef.value?.validate((valid: boolean) => {
      if (valid) {
        loading.value = true
        setTimeout(() => {
          ElMessage.success('连接成功')
          isLink.value = true
          loading.value = false
        }, 2500)
      }
    })
  }
}

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

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

// 数据查询
function fetchData(isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  // getConstSyncDataList(listQuery.value).then((res) => {
  //   list.value = res.data.rows.map((item: any) => {
  //     return {
  //       ...item,

  //       traceDate: item.traceDate ? dayjs(item.traceDate).format('YYYY-MM-DD') : item.traceDate, // 检定有效期
  //       certificateValid: item.certificateValid ? dayjs(item.certificateValid).format('YYYY-MM-DD') : item.certificateValid, // 证书有效期
  //     }
  //   })
  //   total.value = res.data.total
  //   loadingTable.value = false
  // }).catch(() => {
  //   loadingTable.value = false
  // })
  list.value = [
    { sampleName: '1111' },
    { sampleName: '2' },
    { sampleName: '3' },
    { sampleName: '4' },
  ]
  if (!list.value.length) {
    ElMessage.warning('未匹配到任何数据，请重新尝试')
  }
  loadingTable.value = false
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
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 uploadData = () => {
  // 这里需要提示一下是否存在两个属性值完全一样的数据
}

// ----------------------- 以下是暴露的方法内容 ----------------------------
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"
          :list-loading="loadingTable" 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>