<template>
  <div>
    <byTable
      ref="table"
      :tableHeight="tableHeight"
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      highlight-current-row
      :selectConfig="selectConfig"
      :action-list="[]"
      @get-list="getList"
    >
    </byTable>
    <div>
      <div>已选择货品</div>
      <div style="margin: 10px 0px">
        <el-tag
          style="margin-right: 10px; margin-bottom: 5px"
          type="info"
          closable
          v-for="(good, index) in goodList"
          :key="good.id"
          @close="handleRemove(index)"
        >
          {{ good.name }}
        </el-tag>
      </div>
      <div style="text-align: center">
        <el-button @click="handleCancel" size="large">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" size="large"
          >确 定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import byTable from "@/components/byTable/index";
import { computed, ref } from "vue";

const tableHeight = ref(0);
const getTableHeight = () => {
  tableHeight.value = window.innerHeight - 455;
};
getTableHeight();
window.addEventListener("resize", () => {
  getTableHeight();
});
const loading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
    type: "",
    productClassifyId: "",
    keyword: "",
    definition: "1",
  },
});
const { proxy } = getCurrentInstance();
const selectConfig = reactive([
  {
    label: "物品类型",
    prop: "definition",
    isShowAll: false,
    data: [
      {
        label: "产品",
        value: "1",
      },
      {
        label: "物料",
        value: "2",
      },
    ],
  },
]);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "货品类型",
        prop: "type",
      },
      render(type) {
        return sourceList.value.pagination.definition == 1 ? "产品" : "物料";
      },
    },
    {
      attrs: {
        label: "所属分类",
        prop: "classifyName",
      },
    },
    {
      attrs: {
        label: "货品编码",
        prop: "code",
      },
    },
    {
      attrs: {
        label: "货品名称",
        prop: "name",
      },
    },

    {
      attrs: {
        label: "规格型号",
        prop: "spec",
      },
    },
    {
      attrs: {
        label: "单位",
        prop: "unit",
      },
      render(unit) {
        return proxy.dictValueLabel(unit, productUnit.value);
      },
    },
    {
      attrs: {
        label: "操作",
        width: "60",
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "选择",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              handleSelect(row);
            },
          },
        ];
      },
    },
  ];
});
const table = ref(null);
const productUnit = ref([]);
const getDict = () => {
  proxy.getDictOne(["unit"]).then((res) => {
    productUnit.value = res["unit"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
  });
};
getDict();
const getList = async (req = {}) => {
  sourceList.value.pagination = {
    ...sourceList.value.pagination,
    ...req,
  };
  loading.value = true;
  proxy
    .post("/productInfo/page", sourceList.value.pagination)
    .then((message) => {
      sourceList.value.data = message.rows.map((x) => ({ ...x, fileList: [] }));
      sourceList.value.pagination.total = message.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
      const productIdList = message.rows.map((x) => x.id);
      if (productIdList.length > 0) {
        proxy
          .post("/fileInfo/getList", { businessIdList: productIdList })
          .then((fileObj) => {
            for (let i = 0; i < sourceList.value.data.length; i++) {
              const e = sourceList.value.data[i];
              for (const key in fileObj) {
                if (e.id === key) {
                  e.fileList = fileObj[key];
                }
              }
            }
          });
      }
    });
};
getList();
// 接收父组件的传值
const props = defineProps({
  selectList: Array,
});
const goodList = ref([]);
onMounted(() => {
  goodList.value = proxy.deepClone(props.selectList);
});
const handleSelect = (row) => {
  const flag = goodList.value.some((x) => x.id === row.id);
  if (flag)
    return ElMessage({
      message: "该产品已选择",
      type: "info",
    });
  goodList.value.push({
    ...row,
    goodType: sourceList.value.pagination.definition,
  });
  return ElMessage({
    message: "选择成功",
    type: "success",
  });
};
const handleRemove = (index) => {
  goodList.value.splice(index, 1);
  return ElMessage({
    message: "删除成功",
    type: "success",
  });
};
const handleSubmit = () => {
  if (!goodList.value.length > 0)
    return ElMessage({
      message: "请添加货品",
      type: "info",
    });
  proxy.$emit("pushGoods", goodList.value);
  goodList.value = [];
};
const handleCancel = () => {
  goodList.value = [];
  proxy.$emit("cancel");
};
</script>

<style lang="scss" scoped>
.user {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  .tree {
    width: 300px;
  }
  .content {
    width: calc(100% - 320px);
  }
}
.pic {
  object-fit: contain;
  width: 50px;
  height: 50px;
  cursor: pointer;
  vertical-align: middle;
}
</style>
