<template>
<div class="table-box">
  <div style="display: flex;flex-direction: column;">
    <div style="flex-grow: 1;height: 66vh;overflow-y: auto;overflow-x: hidden">
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
        <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in columns" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'">
            <template #default="scope">
              <template v-if="item.prop === 'c'">
                <el-date-picker
                  class="no-border"
                  v-model="scope.row.c"
                  type="date"
                  placeholder="请选择日期"
                />
              </template>
              <template v-if="item.prop === 'd'">
                <div style="min-height: 20px" @dblclick="editCell(scope.row, 'd')">
                  <el-input v-if="isEditing(scope.row, 'd')" ref="inputRef" v-model="scope.row.d" @blur="saveEdit(scope.row, 'd')" />
                  <span v-else>{{ scope.row.d }}</span>
                </div>
              </template>
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button type="primary" link @click="handleUpdate">
                    <el-icon >
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </template>
          </el-table-column>
        </template>

        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
    </div>
    <div class="disposition-bottom">
      <el-button > 取消 </el-button>
      <el-button type="primary" plain> 上一步 </el-button>
      <el-button type="primary"> 下一步 </el-button>
    </div>
  </div>
  <!-- 添加或修改对话框 -->
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
    <el-form ref="formRef" :model="instrumentForm" :rules="rules" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="20">
          <el-radio-group v-model="instrumentForm.type">
            <el-radio-button  label="PWS" value="PWS" plain/>
            <el-radio-button  label="PWD" value="PWD" plain/>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20" style="margin-top: 10px">
          <el-button type="primary" plain>新增</el-button>
          <el-button plain>删除</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20" style="margin-top: 10px">
          <el-button type="primary">NA</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="12">
          <el-form-item label="检定条件" prop="verification">
            <el-input v-model="instrumentForm.verification"  clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证书编号" prop="certificate">
            <el-input v-model="instrumentForm.certificate"  clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="检定员编号" prop="inspector">
            <el-input v-model="instrumentForm.inspector"  clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检定参数类型" prop="typeParameter" style="display: flex; align-items: center">
            <el-radio-group v-model="instrumentForm.typeParameter">
              <el-radio value="1" size="large">校准系数</el-radio>
              <el-radio value="2" size="large">多点校准系数</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="instrumentForm.type==='PWD'">
        <el-col :span="12">
          <el-form-item label="校准系数" prop="coefficient">
            <el-input v-model="instrumentForm.coefficient"  clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="instrumentForm.typeParameter==='2'" class="table-box" style="margin-top: 10px;height: 160px" >
      <el-table stripe ref="tableRef" :border="true" :data="processTableData2"  size="small" >
        <template v-for="item in columns2" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
            <template v-if="item.prop === 'operation'">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button type="primary" link >
                  <el-icon >
                    <Delete />
                  </el-icon>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>

        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
      </div>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</div>
</template>

<script setup lang="tsx">
import {reactive, ref} from "vue";
import {ColumnProps} from "@/components/ProTable/interface";
const formRef = ref<any>();
const dialog = reactive<any>({
  visible: false,
  title: '',
  isMode: true
});

const rules = ref<any>(
  {
    verification: [{ required: true, message: "检定条件不能为空", trigger: "blur" }],
    certificate: [{ required: true, message: "证书编号不能为空", trigger: "blur" }],
    inspector: [{ required: true, message: "检定员编号不能为空", trigger: "blur" }],
    typeParameter: [{ required: true, message: "检定参数类型不能为空", trigger: "blur" }],
  }
);

const initFormData = ref<any>(
  {
    type:'PWS',
    verification:'',
    certificate:'',
    inspector:'',
    typeParameter:'1',
    coefficient:''

  }
);

const instrumentForm = ref<any>({
  type:'PWS',
  verification:'',
  certificate:'',
  inspector:'',
  typeParameter:'1',
  coefficient:''
});

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "新增";
  dialog.isMode = true;
}

/** 修改按钮操作 */
const handleUpdate = async (row?: any) => {
  reset();
  dialog.visible = true;
  dialog.title = "编辑";
  dialog.isMode = false;
}


/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
  instrumentForm.value = { ...initFormData };
  console.log(instrumentForm.value)
  formRef.value?.resetFields();
}

/** 修改密码提交按钮 */
const submitFormPassword = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      dialog.visible = false;
    }
  });
}



const processTableData = ref([
  {
    a: "超声风传感器",
    b: "",
    c: "",
    d: "11111111111111111",
    e: ""
  },
  {
    a: "超声风传感器",
    b: "",
    c: "",
    d: "11111111111111111",
    e: ""
  }
]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "a", label: "检定项目" },
  { prop: "b", label: "传感器序列号" },
  { prop: "c", label: "检定日期" },
  { prop: "d", label: "检定周期(月)" },
  { prop: "e", label: "下一次检定日期" },
  { prop: "operation", label: "操作", width:150,align: 'center' }
]);

const processTableData2 = ref([
  {

  },
  {

  }
]);

// 表格配置项
const columns2 = reactive<ColumnProps[]>([
  { prop: "a", label: "检定值" },
  { prop: "b", label: "修正值" },
  { prop: "operation", label: "操作", width:150,align: 'center' }
]);

const editingRow = ref<any | null>(null);
const editingField = ref<string | null>(null);
const editCell = (row: any, field: string) => {
  editingRow.value = row;
  editingField.value = field;
};

const isEditing = (row: any, field: string) => {
  return editingRow.value === row && editingField.value === field;
};

const saveEdit = (row: any, field: string) => {
  editingRow.value = null;
  editingField.value = null;
};
</script>

<style scoped>
.table-box{
  height: 100%;
}

::v-deep .no-border .el-input__wrapper  {
  box-shadow: 0 0 0 0px!important;
  background-color: #00000000;
}


</style>
