<template>
  <div class="right">
    <view-grid ref="grid" :columns="columns" :detail="detail" :editFormFields="editFormFields"
      :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions"
      :table="table" :extend="extend" :onInit="onInit" :onInited="onInited" :searchAfter="searchAfter"
      :modelOpenAfter="modelOpenAfter">
    </view-grid>
  </div>
</template>
<script setup lang="jsx">
//extend这一行不要复制了
import extend from "@/extension/mes/mes/MES_Material.jsx";
//viewOptions这一行不要复制了
import viewOptions from "./MES_Material/options.js";
import { ref, reactive, getCurrentInstance, nextTick, watch, onMounted } from "vue";
const grid = ref(null);
const { proxy } = getCurrentInstance();
const { table, editFormFields, editFormOptions, searchFormFields,
  searchFormOptions, columns, detail } = reactive(viewOptions());

let gridRef; //对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
  gridRef = $vm;
  gridRef.boxOptions.width = 600;
};
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
  const unitOption = gridRef.getFormOption("Unit");//unit改为你的字段
  //自定义字段表头
  unitOption.labelRender = (h, { }) => {
    return (
      <el-tooltip effect="dark" placement="top-start">
        {{
          default: () => {
            return (
              <span style="color:rgb(2,71,222);font-size:14px;" onClick={($e) => { proxy.$message.success("提示信息"); }}
                class="el-icon-info">物料规格 </span>
            );
          },
          content: () => { return (<div style="font-size:12px">可全完自定义显示的内容,包括实时计算</div>); },
        }}
      </el-tooltip>
    )
  };
  //配置说明：unit单位字段设置自定义显示内容,下面的editFormFields.字段改为你的字段，除了单位字段，代码生成器上其他字段编辑行设置为0
  unitOption.render = (h, { }) => {
    return (
      <div class="merge-content" style="margin:5px 0 10px 0">
        <span>长</span> <el-input-number style="width:80px" controls-position="right" v-model={(editFormFields.len)} />
        <span style="margin-left:5px">宽</span> <el-input-number style="width:80px" controls-position="right" v-model={(editFormFields.width)} />
        <span style="margin-left:5px">=</span> <span style="width:80px" >{((editFormFields.len || 0) * (editFormFields.width || 0))}</span>
        <span style="margin:0 5px 0 15px">单位</span>
        {/* 绑定数据源 */}
        <el-select style="width: 90px" v-model={editFormFields.Unit} filterable
          placeholder="请选择" clearable>
          {["吨", "个", "件", "KG"].map(x => { return <el-option label={x} value={x}></el-option> })}
        </el-select>
      </div>
    )
  }
};
const searchAfter = async (rows, result) => {
  return true;
};
//row：编辑的行数据
//currentAction：当前编辑状态(Add或者update)
//isCopyClick：是否复制按钮调用的弹出框
const modelOpenAfter = (row, currentAction, isCopyClick) => {
  const isAdd = currentAction == 'Add';//判断是否为新建操作
  //弹出框打开后给上面自定义内容字段重新设置值(len,width改为你的实际字段)
  editFormFields.len = isAdd ? null : row.len
  editFormFields.width = isAdd ? null : row.width
}
</script>
<style scoped lang="less">
</style>