<!-- 新增pad选菜页 -->
<template>
  <div>
    <el-dialog :title="`${preview ? '预览' : form.id ? '编辑' : '添加'}平板菜谱`" top="5vh" width="1000px" v-model="dialogVisible"
      :show-close="preview">
      <div class="content" v-loading="pageLoading">
        <div class="editor_wrap" :class="[`type${typeListActive}`]">
          <template v-if="typeListActive != 6">
            <div class="btn_wrap" :class="[`div${index + 1}`]" v-for="(item, index) in form.list" :key="index"
              @click="showSelectGoods(index)">
              <div class="btn" v-if="!item.id">
                <el-icon size="40" color="#dddfe6">
                  <Plus />
                </el-icon>
              </div>
              <div class="cover" v-else>
                <img class="img" :src="item.coverImg" />
              </div>
            </div>
          </template>
          <template v-else>
            <div class="btn_wrap" v-if="!form.list.length">
              <div class="btn">
                <el-button @click="oneClick">一键生成菜单</el-button>
              </div>
            </div>
            <div class="goods_list" v-else>
              <div class="btn_wrap" :class="[`div${index + 1}`]" v-for="(item, index) in form.list" :key="index"
                @click="selectGoods(item)">
                <div class="info" :class="{ active: item.active }">
                  <span class="t1">{{ item.name }}</span>
                  <span class="t1">￥{{ item.lowPrice }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="tab" v-if="!preview">
          <el-radio-group v-model="typeListActive" @change="tabChange">
            <el-radio-button :value="item.id" v-for="item in typeList" :key="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="dialog_footer" v-if="!preview">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitHandle">保 存</el-button>
      </div>
    </el-dialog>
    <GoodsSelect ref="refSelGoods" radio disableCategory @success="selectConfirmGoods"></GoodsSelect>
    <!-- <shopList ref="shopList" disableCategory radio @success="selectConfirmGoods" /> -->
  </div>
</template>

<script>
import { ElNotification } from "element-plus";
import padApi from "@/api/account/padProd";
export default {
  props: {
    category: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      dialogVisible: false,
      pageLoading: false,
      loading: false,
      activeItem: 0,
      form: {
        id: "",
        list: [],
      },
      typeListActive: "1",
      typeList: [],
      preview: false,
    };
  },
  mounted() {
    this.layoutlist();
  },
  methods: {
    // 选中菜品
    selectGoods(item) {
      item.active = !item.active;
    },
    // 一键生成菜单
    async oneClick() {
      try {
        const res = await tbProduct({
          categoryId: this.category,
          page: 1,
          size: 20,
          sort: "id",
          shopId: localStorage.getItem("shopId"),
        });
        this.form.list = res.content.map((item, index) => {
          if (index == 0 || index == 12) {
            item.active = true;
          } else {
            item.active = false;
          }
          return item;
        });
      } catch (error) {
        console.log(error);
      }
    },
    // 提交
    async submitHandle() {
      try {
        if (this.typeList.find((item) => item.id == this.typeListActive).code == "text-menu") {
          if (!this.form.list.length) {
            ElNotification.error({
              title: "错误",
              message: "请生成菜单",
            });
            return;
          }
        }

        let isEmpty = true;
        this.form.list.map((item) => {
          if (!item.id) isEmpty = false;
        });

        if (!isEmpty) {
          ElNotification.error({
            title: "错误",
            message: "请添加商品",
          });
          return;
        }

        this.loading = true;
        let res = null;
        if (this.form.id) {
          await padApi.edit({
            id: this.form.id,
            padLayoutId: this.typeListActive,
            productCategoryId: this.category || this.form.list[0].categoryId,
            productIdList: this.form.list.map((item) => item.id),
          });
        } else {
          res = await padApi.add({
            padLayoutId: this.typeListActive,
            productCategoryId: this.category,
            productIdList: this.form.list.map((item) => item.id),
          });
        }
        this.loading = false;
        if (this.form.id) {
          ElNotification.success({
            title: "提示",
            message: "编辑成功",
          });
        } else {
          ElNotification.success({
            title: "提示",
            message: "添加成功",
          });
        }
        this.dialogVisible = false;
        this.$emit("success");
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },
    // 获取
    async layoutlist() {
      try {
        const res = await padApi.getLayout();
        this.typeList = res.records;
      } catch (error) {
        console.log(error);
      }
    },
    // 显示选择商品
    showSelectGoods(index) {
      this.activeItem = index;
      this.$refs.refSelGoods.show([], this.category);
    },
    // 确认选择商品
    selectConfirmGoods(res) {
      // this.form.list = res
      const flag = this.form.list.filter((item) => item.id == res[0].id);
      this.form.list[this.activeItem] = { ...res[0] };

      if (flag.length) {
        ElNotification({
          title: "注意",
          message: "请勿重复添加",
          type: "error",
        });
      } else {
        this.form.list[this.activeItem] = { ...res[0] };
      }
    },
    // 切换tab
    tabChange() {
      this.form.list = [];
      if (this.typeListActive != 6) {
        this.init();
      }
    },
    // 初始化
    init() {
      let num = this.typeList.find((item) => item.id == this.typeListActive).maximum;
      for (let i = 0; i < num; i++) {
        this.form.list.push({});
      }
    },
    // 获取详情
    async productCategoryDetail(id) {
      try {
        this.pageLoading = true;
        const res = await padApi.get({ id });
        this.pageLoading = false;
        this.typeListActive = res.padLayoutId;
        this.form.id = res.id;

        this.form.list = [];
        this.form.list = res.productList;
      } catch (error) {
        console.log(error);
      }
    },
    reset() {
      this.form.id = "";
      this.form.list = [];
    },
    // 显示 type=1 编辑 type=2预览
    async show(id = "", type = 1) {
      this.reset();
      this.typeListActive = "1";
      this.dialogVisible = true;
      this.tabChange();
      if (id) {
        await this.productCategoryDetail(id);
      }
      if (type == 2) {
        this.preview = true;
      } else {
        this.preview = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  .editor_wrap {
    width: 100%;
    height: 560px;

    &.type2 {
      display: flex;
      gap: 10px;
    }

    &.type3 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 10px;
      grid-row-gap: 10px;

      .div1 {
        grid-area: 1 / 1 / 3 / 2;
      }

      .div2 {
        grid-area: 1 / 2 / 2 / 3;
      }

      .div3 {
        grid-area: 2 / 2 / 3 / 3;
      }
    }

    &.type4 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 10px;
      grid-row-gap: 10px;

      .div1 {
        grid-area: 1 / 1 / 2 / 2;
      }

      .div2 {
        grid-area: 1 / 2 / 2 / 3;
      }

      .div3 {
        grid-area: 2 / 1 / 3 / 2;
      }

      .div4 {
        grid-area: 2 / 2 / 3 / 3;
      }
    }

    &.type5 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 10px;
      grid-row-gap: 10px;

      .div1 {
        grid-area: 1 / 1 / 2 / 2;
      }

      .div2 {
        grid-area: 1 / 2 / 2 / 3;
      }

      .div3 {
        grid-area: 1 / 3 / 2 / 4;
      }

      .div4 {
        grid-area: 2 / 1 / 3 / 2;
      }

      .div5 {
        grid-area: 2 / 2 / 3 / 3;
      }

      .div6 {
        grid-area: 2 / 3 / 3 / 4;
      }
    }

    &.type6 {
      .goods_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(10, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 0px;

        .div1 {
          grid-area: 1 / 1 / 2 / 2;
        }

        .div2 {
          grid-area: 2 / 1 / 3 / 2;
        }

        .div3 {
          grid-area: 3 / 1 / 4 / 2;
        }

        .div4 {
          grid-area: 4 / 1 / 5 / 2;
        }

        .div5 {
          grid-area: 5 / 1 / 6 / 2;
        }

        .div6 {
          grid-area: 6 / 1 / 7 / 2;
        }

        .div7 {
          grid-area: 7 / 1 / 8 / 2;
        }

        .div8 {
          grid-area: 8 / 1 / 9 / 2;
        }

        .div9 {
          grid-area: 9 / 1 / 10 / 2;
        }

        .div10 {
          grid-area: 10 / 1 / 11 / 2;
        }

        .div11 {
          grid-area: 1 / 2 / 2 / 3;
        }

        .div12 {
          grid-area: 2 / 2 / 3 / 3;
        }

        .div13 {
          grid-area: 3 / 2 / 4 / 3;
        }

        .div14 {
          grid-area: 4 / 2 / 5 / 3;
        }

        .div15 {
          grid-area: 5 / 2 / 6 / 3;
        }

        .div16 {
          grid-area: 6 / 2 / 7 / 3;
        }

        .div17 {
          grid-area: 7 / 2 / 8 / 3;
        }

        .div18 {
          grid-area: 8 / 2 / 9 / 3;
        }

        .div19 {
          grid-area: 9 / 2 / 10 / 3;
        }

        .div20 {
          grid-area: 10 / 2 / 11 / 3;
        }
      }
    }

    .goods_list {
      height: 100%;
    }

    .btn_wrap {
      flex: 1;
      height: 100%;
      position: relative;

      .info {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ececec;
        padding: 0 20px;
        font-size: 16px;
        font-weight: bold;
        overflow: hidden;

        &.active {
          background-color: #bc1414;
          color: #fff;

          &::after {
            content: "";
            width: 120px;
            height: 60px;
            border: 22px solid #fff;
            border-top: none;
            border-right: none;
            opacity: 0.3;
            position: absolute;
            top: -20px;
            right: 10%;
            transform: rotate(-45deg);
          }
        }
      }

      .btn {
        height: 100%;
        border: 1px solid #dddfe6;
        background: #f7f7fa;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
          font-size: 40px;
          color: #dddfe6;
        }
      }

      .cover {
        height: 100%;
        background: #f7f7fa;
        position: relative;

        .img {
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          object-fit: cover;
        }
      }
    }
  }

  .tab {
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }
}

.dialog_footer {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>