<template>
  <div>
    <obj-modal ref="modal" labelWidth="150px" :modalConfig="modalConfig" :modalData="modalData"
      :modalHandles="modalHandles">
      <div slot="dialog__content">
        <div v-for="(item, index) in AttributeData" :key="index">
          <el-row>
            <el-input style="width: 80%; margin: 0 20px 0 0" placeholder="请输入属性" v-model="item.attributeName" clearable>
            </el-input>
            <el-button @click="deleteAttribute(index)" type="danger" icon="el-icon-delete" circle></el-button>
          </el-row>

          <el-row>
            <el-tag :key="tag" v-for="tag in item.attributeValue" closable :disable-transitions="false"
              @close="handleClose(index, tag)">
              {{ tag }}
            </el-tag>
            <el-input class="input-new-tag" v-if="item.inputVisible" v-model="inputValue" :ref="`saveTagInput${index}`"
              size="small" @keyup.enter.native="handleInputConfirm(index)" @blur="handleInputConfirm(index)">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+新增规格</el-button></el-row>
        </div>
        <el-row type="flex" justify="center">
          <el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row>
        <obj-table-plus slot="dialog__after" style="height: 50vh" ref="oTable" @query="queryTableData"
          v-model="tableData" :tableCols="tableCols" :tableProp="tableProp" :toolbarProp="toolbarProp"
          :tableEvent="tableEvent" :enableAutoQuery="false">
          <!-- <div slot="tableTop" class="mb-2">
            <el-button type="primary" size="mini" @click="calculation"
              >计算属性</el-button
            >
          </div> -->
        </obj-table-plus>
      </div>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //监控对象数据
      tableData: [],
      //表格属性
      tableProp: {
        height: "auto",
        border: true,
        "auto-resize": false,
        "print-config": {},
        "row-config": { isCurrent: true, isHover: true },
        "highlight-hover-row": true,
        "highlight-current-row": true,
      },
      toolbarProp: {},
      tableEvent: {},
      modalConfig: {
        title: "属性",
        show: false,
        width: "80%",
      },
      modalData: {},
      AttributeData: [
        {
          attributeName: "",
          attributeValue: [],
          inputVisible: false,
        },
      ], //
      input: "",
      dynamicTags: [],
      inputValue: "",
    };
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e.row));
      }
      return {
        add: (productAttributeList, productSpecificationList) => {
          this.modalConfig.title = "添加属性";
          if (productAttributeList.length == 0) {
            this.AttributeData = [
              {
                attributeName: "",
                attributeValue: [],
                inputVisible: false,
              },
            ];
          } else {
            this.AttributeData = productAttributeList.map((item) => {
              return {
                attributeName: item.attributeName,
                attributeValue: item.attributeValue.split(","),
                id: item.id,
                inputVisible: false,
              };
            });
          }
          this.tableData = productSpecificationList;
          this.isAdd = true;
        },
        update: (productAttributeList, productSpecificationList) => {
          this.modalConfig.title = "编辑属性";
          console.log(productAttributeList, productSpecificationList);
          if (productAttributeList.length == 0) {
            this.AttributeData = [
              {
                attributeName: "",
                attributeValue: [],
                inputVisible: false,
              },
            ];
          } else {
            this.AttributeData = productAttributeList.map((item) => {
              return {
                attributeName: item.attributeName,
                attributeValue: item.attributeValue.split(","),
                id: item.id,
                inputVisible: false,
              };
            });
          }
          this.tableData = productSpecificationList;
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = row;
    },
    handleClose(index, tag) {
      this.AttributeData[index].attributeValue.splice(
        this.AttributeData[index].attributeValue.indexOf(tag),
        1
      );
      this.calculation();
    },
    //聚焦
    showInput(index) {
      console.log(index);

      this.AttributeData[index].inputVisible = true;
      this.$nextTick(() => {
        console.log(this.$refs[`saveTagInput${index}`]);
        this.$refs[`saveTagInput${index}`][0].focus();
      });
    },
    handleInputConfirm(index) {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.AttributeData[index].attributeValue.push(inputValue);
      }
      this.AttributeData[index].inputVisible = false;
      this.inputValue = "";
      this.calculation();
    },
    //添加属性
    addAttribute() {
      this.AttributeData.push({
        attributeName: "",
        attributeValue: [],
        inputVisible: false,
      });
      console.log(this.AttributeData);
    },
    //删除属性
    deleteAttribute(index) {
      this.AttributeData.splice(index, 1);
      this.calculation();
    },
    //计算属性
    calculation() {
      let data = [];
      let list = [];
      for (let i = 0; i < this.AttributeData.length; i++) {
        if (i == 0) {
          data = this.AttributeData[i].attributeValue.map((item) => {
            return {
              attributeList: [
                {
                  attributeName: this.AttributeData[i].attributeName,
                  attributeValue: item,
                },
              ],
              name: item,
            };
          });
        } else {
          data.forEach((it) => {
            this.AttributeData[i].attributeValue.forEach((e) => {
              console.log(it.attributeList);
              let attributeList = JSON.parse(JSON.stringify(it.attributeList));
              attributeList.push({
                attributeName: this.AttributeData[i].attributeName,
                attributeValue: e,
              });
              list.push({
                attributeList,
                name: it.name + e,
              });
              console.log(list);
              // list.push(it + e);
            });
          });
          data = list;
          list = [];
        }
      }
      this.tableData = data.map((item) => {
        return {
          attributeList: item.attributeList,
          attributeValue: item.name,
          salePrice: 0,
          costPrice: 0,
          marketPrice: 0,
          stockNum: 0,
          weight: 0,
          volume: 0,
        };
      });
      console.log(data);
    },
  },
  computed: {
    tableCols() {
      return [
        { title: "序号", type: "seq", width: "60px", fixed: "left" },
        {
          title: "属性",
          field: "attributeValue",
          align: "center",
          "min-width": "160px",
        },
        {
          title: "成本（元）",
          field: "costPrice",
          align: "center",
          "min-width": "160px",
          type: "jsx",
          render: ({ row }) => {
            return (
              <div>
                <el-input-number
                  min={0}
                  size="small"
                  v-model={row.costPrice}
                  placeholder="请输入成本"
                ></el-input-number>
              </div>
            );
          },
        },
        {
          title: "市场价（元）",
          field: "marketPrice",
          align: "center",
          "min-width": "160px",
          type: "jsx",
          render: ({ row }) => {
            return (
              <div>
                <el-input-number
                  min={0}
                  size="small"
                  v-model={row.marketPrice}
                  placeholder="请输入成本"
                ></el-input-number>
              </div>
            );
          },
        },
        {
          title: "库存",
          field: "stockNum",
          align: "center",
          "min-width": "160px",
          type: "jsx",
          render: ({ row }) => {
            return (
              <div>
                <el-input-number
                  min={0}
                  size="small"
                  v-model={row.stockNum}
                  placeholder="请输入库存"
                ></el-input-number>
              </div>
            );
          },
        },
        {
          title: "重量（千克）",
          field: "weight",
          align: "center",
          "min-width": "160px",
          type: "jsx",
          render: ({ row }) => {
            return (
              <div>
                <el-input-number
                  min={0}
                  size="small"
                  v-model={row.weight}
                  placeholder="请输入重量"
                ></el-input-number>
              </div>
            );
          },
        },
        {
          title: "体积（立方米）",
          field: "volume",
          align: "center",
          "min-width": "160px",
          type: "jsx",
          render: ({ row }) => {
            return (
              <div>
                <el-input-number
                  min={0}
                  size="small"
                  v-model={row.volume}
                  placeholder="请输入体积"
                ></el-input-number>
              </div>
            );
          },
        },
        {
          title: "操作",
          fixed: "right",
          width: "150px",
          type: "jsx",
          align: "center",
          render: (row) => {
            let remove = () => {
              this.tableData.splice(row.$rowIndex, 1);
            };
            return (
              <el-popconfirm onConfirm={remove} title="确认删除？" class="ml-1">
                <el-button type="danger" size="mini" slot="reference">
                  删除
                </el-button>
              </el-popconfirm>
            );
          },
        },
      ];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: this.isAdd ? "确认添加" : "确认修改",
          type: "primary",
          loading: this.isLoading,
          // disabled: () => this.tableData.length <= 0,
          // submit: true,
          handle: () => {
            this.$emit(
              "getSpecs",
              this.tableData,
              this.AttributeData,
            );
            this.toggle();
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>