<template>
  <div>
    <el-dialog
      :visible.sync="disBoxs"
      width="660px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">
          匹配商品
          <span style="font-size: 12px; color: #333333">(可以多选)</span>
        </div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="disBoxs = false"
          />
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <el-input
          :size="size"
          v-model="goodsName"
          style="width: 190px"
          placeholder="请输入商品名称"
        ></el-input>
        <el-button
          :size="size"
          style="margin-left: 10px"
          type="primary"
          @click="search()"
          >查询</el-button
        >
        <el-button :size="size" @click="init()">重置</el-button>
      </div>
      <el-row :gutter="10">
        <el-col :span="4" style="overflow-y: auto; max-height: 250px">
          <ul v-for="(item, index) in goodsSubjectList" :key="index">
            {{
              item.subjectName
            }}
            <li
              v-for="(subItem, subIndex) in item.goodsTypeList"
              :key="subIndex"
              class="liSty"
              :style="
                activeData.type === subItem.goodsType &&
                activeData.id === item.id
                  ? 'color:red;'
                  : ''
              "
              @click="selectActive(item.id, subItem.goodsType)"
            >
              {{ subItem.goodsTypeName }}
            </li>
          </ul>
        </el-col>
        <el-col :span="20" v-loading="loading">
          <div
            style="margin-top: 14px; text-align: center"
            v-if="!goodsList.length"
          >
            暂无符合条件商品
          </div>
          <ul
            style="
              max-height: 240px;
              overflow: auto;
              background: #eee;
              margin-top: 10px;
            "
          >
            <li
              v-for="(item, index) in goodsList"
              :key="index"
              style="padding: 10px; font-size: 13px"
            >
              <el-checkbox
                v-model="item.checked"
                @change="uploadNewData(item, $event)"
              >
                {{ item.year }} / {{ item.goodsName }} /
                <span style="color: red">￥{{ item.standPrice }}</span>
              </el-checkbox>
            </li>
          </ul>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="disBoxs = false">取 消</el-button>
        <el-button @click="submitForms">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      size: "mini",
      queryData: {},
      businessData: {},
      disBoxs: false,
      goodsSubjectList: [],
      activeData: {},
      goodsName: "",
      newDatas: [], // 父级传入的初始化参数
      goodsList: [],
      loading: false,
      index: 0,
      businessId: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    async openBoxs(row, businessId) {
      this.disBoxs = true;
      this.businessId = businessId;
      await this.getGoodsSubjectList();
      this.newDatas = JSON.parse(JSON.stringify(row));
      // 如果是多选，则清空所有学员选中的科目列表
      this.newDatas.forEach((item, index, arrs) => {
        if (arrs.length > 1) {
          this.$set(item, "subjectIdsList", []);
        }
      });
    },
    selectActive(id, type) {
      this.activeData = {
        id: id,
        type: type,
      };
      this.getGoodsList(id, type);
    },
    // 根据业务层次获取科目
    getGoodsSubjectList() {
      this.loading = true;
      var data = {
        businessId: this.businessId,
      };
      this.$api
        .goodsSubjectList(data)
        .then((res) => {
          this.goodsSubjectList = res.rows;
          // 默认加载第一项数据
          this.activeData = {
            id: this.goodsSubjectList[0].id,
            type: this.goodsSubjectList[0].goodsTypeList[0].goodsType,
          };
          this.getGoodsList();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 根据科目获取商品
    getGoodsList() {
      this.loading = true;
      var data = {
        businessId: this.businessId,
        subjectId: this.activeData.id,
        goodsType: this.activeData.type,
        goodsName: this.goodsName || "",
      };
      this.$api
        .subjectGoodsList(data)
        .then((res) => {
          res.rows.forEach((item) => {
            item.subjectId = this.activeData.id;
            item.checked = false;
            this.newDatas.forEach((newItem) => {
              if (newItem.subjectIdsList && newItem.subjectIdsList.length > 0) {
                newItem.subjectIdsList = newItem.subjectIdsList.filter((subItem) => {
                  subItem.goodsIdsList = subItem.goodsIdsList.filter((i) => {
                    if (
                      subItem.subjectId == item.subjectId &&
                      i.goodsId == item.goodsId
                    ) {
                      this.$set(item, "checked", i.checked);
                    }
                    return i.checked;
                  });
                  return subItem.goodsIdsList.length;
                });
              } else {
                this.$set(newItem, "subjectIdsList", []);
              }
            });
          });
          this.goodsList = res.rows;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 选中数据修改选中状态
    uploadNewData(row) {
      this.newDatas.forEach((item) => {
        this.changeSelectDate(row, item.subjectIdsList);
      });
    },
    // 改变选中的数据结构
    changeSelectDate(row, arrays) {
      if (arrays.length > 0) {
        let aIndex = arrays.findIndex((item) => {
          return item.subjectId == row.subjectId;
        });
        if (aIndex != -1) {
          let i = arrays[aIndex].goodsIdsList.findIndex(
            (item) => item.goodsId == row.goodsId && item.checked
          );
          if (i != -1) {
            arrays[aIndex].goodsIdsList.splice(i, 1);
            if (!arrays[aIndex].goodsIdsList.length) arrays.splice(aIndex, 1);
          } else {
            arrays[aIndex].goodsIdsList.push(row);
          }
        } else {
          arrays.push({
            subjectNames: row.subjectNames,
            subjectId: row.subjectId,
            goodsIdsList: [row],
          });
        }
      } else {
        arrays.push({
          subjectNames: row.subjectNames,
          subjectId: row.subjectId,
          goodsIdsList: [row],
        });
      }
    },
    // 搜索
    search() {
      this.getGoodsList();
    },
    // 重置
    init() {
      this.goodsName = "";
      this.getGoodsList();
    },
    submitForms() {
      console.log(this.newDatas, "提交");
      this.$emit(
        "handle-matching-data",
        JSON.parse(JSON.stringify(this.newDatas))
      );
      this.$message.success("提交成功~");
      this.disBoxs = false;
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>
  
  <style lang="less" scoped>
.liSty {
  padding: 8px 0px;
  cursor: pointer;
  text-align: center;
}
.topSty {
  display: inline-block;
  font-size: 14px;
  margin-left: 12px;
  background: #eee;
  padding: 4px;
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__body {
    padding: 10px 20px;
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>
  