<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">
      <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
      <template #gridHeader> </template>
      <!-- cd -->
      <template #gridBody>
        <div class="demo-card" v-show="showCard" :style="{ height: height + 'px' }">
          <el-scrollbar style="height: 100%;">
            <div class="demo-card-content">
              <div class="no-data" v-if="!cardRows.length">无数据</div>
              <div class="demo-card-item" v-for="(row, index) in cardRows" :key="index">
                <QrcodeVue :value="row.CatalogCode" :size="80" />
                <div class="demo-card-text">
                  <div>物料名称:{{ row.MaterialName }}</div>
                  <div>物料类型:{{ row.MaterialType }}</div>
                    <!-- 字段带数据源的，可以手动转换下数据字典(代码生成器上需要给此字段绑定数据源) -->
                  <div>物料分类:{{getDicData( row.CatalogID) }}</div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </template>
    </view-grid>
  </div>
</template>
<script setup lang="jsx">
import QrcodeVue from "qrcode.vue";
//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());

/*****下面标识了cd的都是卡片配置代码****/
//cd
//手动转换数据字典
const getDicData=(val)=>{
    const dicData=  columns.find(x=>{return x.field=='CatalogID'}).bind.data;
    return  dicData.find(x=>{return x.key==val})?.value||val
}

const showCard = ref(false)
//cd自定义卡片高度
const height = ref(0);

let gridRef; //对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
  gridRef = $vm;
  gridRef.boxOptions.width = 600;
  //cd
  gridRef.buttons.push({
    name: showCard.value ? '列表' : '卡片',
    icon: "el-icon-document", //按钮图标:组件示例->图标
    type: "primary",plain: true,
    onClick: () => {
      showCard.value = !showCard.value;
    },
  });
};
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
  //cd设置自定义卡片高度
  height.value = gridRef.height;// - 38;
};
//cd查询后获取记录当前页面的行数据
const cardRows = ref([]);
const searchAfter = async (rows, result) => {
  cardRows.value = rows;
  return true;
};
</script>
<style scoped lang="less">
// 下面都是卡片的css配置，自行修改
.demo-card {
  padding: 10px;
  padding-left: 0;
  position: absolute;
  z-index: 9;
  left: 15px;
  right: 10px;
  background: #fff;
  .demo-card-content {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 33.333%);
  }
  .demo-card-item {
    margin-right: 12px;
    display: flex;
    position: relative;
    cursor: pointer;
    margin-bottom: 12px;
    transition: transform 0.8s;
    background: #fff;
    border: 1px solid #eee;
    height: 100px;
    padding: 10px;
    box-shadow: 1px 5px 12px #f0f0f0;
    border-radius: 5px;
  }
  .demo-card-text {
    display: flex;
    flex-direction: column;
    align-items: left;
    padding-left: 15px;
    font-size: 13px;
    line-height: 1.6;
    color: #6a6a6a;
  }
}
.no-data {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 30%;
  color: #9f9f9f;
}
</style>