<template>
  <div class="mainContentBox">
    <avue-crud
      ref="crudRef"
      :data="dataList"
      :option="option"
      @selectable="selectable"
      @selection-change="selectionChange1"
    >
    </avue-crud>
  </div>
</template>
<script setup>
import { defineProps, ref } from "vue";
import { useCommonStoreHook } from "@/store";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const emit = defineEmits(["syncList"])
const props = defineProps({
  diffList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const selectable = (row, index) =>{ // row当前列队数据
  if (row.use === '1') { // 判断条件
    return false; // 灰掉 不可选
  } else {
    return true // 可选
  }
}
const dataList = ref([])
const selectionChange1 = (rows) => {
  let ids = [];
  rows?.forEach((element) => {
    ids.push(
        element["routeId"]
    );
  });
  emit("syncList", ids)
};
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
watch(
  () => props.diffList,
  () => {
    dataList.value = []
    dataList.value = props.diffList
  }
);

// 设置表格列或者其他自定义的option
const option = {
  delBtn: false,
  selection: true,
  search: false,
  filterBtn: false,
  columnBtn: false,
  editBtn: false,
  refreshBtn: false,
  addBtn: false,
  selectable: (row, index) =>{ // row当前列队数据
    if (row.use === '1') { // 判断条件
      return false; // 灰掉 不可选
    } else {
      return true // 可选
    }
  },
  viewBtn: false,
  menu: false,
  column: [
    {
      label: "工艺路线",
      prop: "routeName",
      width: 180,
      overHidden: true,
    },
    {
      label: "状态",
      prop: "use",
      width: 80,
      type: "select",
      dicData: [{"dictLabel": "已生产","dictValue": "1"},{"dictLabel": "未生产","dictValue": "0"}],
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
    },
    {
      label: "更改内容",
      prop: "diffRecord",
      overHidden: true,
    },
  ],
}
onMounted(() => {
  dataList.value = []
  dataList.value = props.diffList
});
</script>

<style scoped lang="scss">
@media print {
  #print {
    position: absolute; /* 或 absolute, fixed, 根据需要调整 */
    top: 20px; /* 调整顶部位置 */
    margin: 0; /* 重置边距 */
    //width: 1000px;
  }
}

table {
  //width: 800px;
  margin: 0 auto;
  //border: 1px solid #000000;
  border-collapse: collapse;
}

th,
td {
  //border: 1px solid #000000;
  text-align: center;
  padding: 3px;
}

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 70%;
}
</style>
