<template>
  <div class="recipes_com_wrapper" @click="handleParentClick">
    <el-table
      :data="mData"
      border
      :span-method="spanMethod"
      :cell-style="{ padding: '2px 0' }"
      :header-cell-style="{ padding: '4px 0', height: 'unset' }"
      size="mini"
      header-row-class-name="recipes_header"
      :cell-class-name="cellClassName"
      :style="`outline: ${currentDay === num ? '1px solid #d53950' : 'none'}`"
    >
      <el-table-column prop="type" :width="100" align="center">
        <template slot="header">
          <div class="pointer_style" @click="handleOnResetCurrentDay">
            {{ `第${numDay}天` }}
          </div>
        </template>
        <template slot-scope="scope">
          <el-popover
            placement="top"
            trigger="hover"
            :title="typeFormatter(scope.row)"
          >
            <div>
              <el-button
                size="mini"
                type="primary"
                @click="handleOnMenuTypeClick(scope.row)"
                >添加
              </el-button>
              <el-button
                size="mini"
                type="primary"
                @click="handleOnPaste(scope.row.type)"
                v-if="canCopyMenuTypes.includes(scope.row.type)"
                >粘贴</el-button
              >
            </div>
            <div
              slot="reference"
              style="font-weight: bold; font-size: 14px; cursor: pointer"
            >
              {{ typeFormatter(scope.row) }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="菜品" prop="name" align="center" :width="180">
        <template slot="header">
          <el-tooltip
            class="item"
            effect="dark"
            content="点击添加菜品"
            placement="top"
          >
            <div class="pointer_style" @click="handleOnAdd">菜品</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-popover placement="right" trigger="hover" :title="scope.row.name">
            <div>
              <div style="margin-bottom: 8px">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-refresh"
                  class="fun_button"
                  @click="handleOnReplace(scope.row)"
                >
                  替换
                </el-button>
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  class="fun_button"
                  @click="handleOnDelete(scope.row)"
                  >删除</el-button
                >
              </div>
              <div>
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-document-copy"
                  class="fun_button"
                  @click="handleOnCopy(scope.row)"
                  >复制</el-button
                >
                <el-button
                  size="mini"
                  icon="el-icon-document-copy"
                  class="fun_button"
                  @click="handleOnSetting(scope.row)"
                  >修改餐类</el-button
                >
              </div>
            </div>
            <div class="pointer_style" slot="reference">
              {{ scope.row.name }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="食材" prop="igdName" align="center" :width="180">
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.nameSpan.colspan === 1 &&
              scope.row.nameSpan.rowspan === 1
            "
          >
            {{ scope.row.igdName }}
          </span>
          <el-popover
            v-else
            placement="right"
            trigger="hover"
            :title="scope.row.igdName"
          >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              class="fun_button"
              @click="handleOnIgdDelete(scope.row)"
              >删除</el-button
            >
            <div class="pointer_style" slot="reference">
              {{ scope.row.igdName }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="分量估算" :width="80" align="center">
        <template slot-scope="scope">
          <EditableUnit
            :weight="scope.row.cusWeight"
            :unit="scope.row.cusUnit"
            @onChange="(val) => handleOnCustomUnitChange(scope.row, val)"
          />
        </template>
      </el-table-column>
      <el-table-column label="重量(g)" prop="weight" :width="80" align="center">
        <template slot-scope="scope">
          <EditableText
            :value="scope.row.weight"
            @onChange="(val) => handleOnWeightChange(scope.row, val)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="蛋白质/100g"
        prop="proteinRatio"
        :width="60"
        align="center"
      >
        <template slot="header">
          <div class="pointer_style">
            <div>蛋白质</div>
            <div>/100g</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="脂肪/100g"
        prop="fatRatio"
        :width="60"
        align="center"
      >
        <template slot="header">
          <div class="pointer_style">
            <div>脂肪</div>
            <div>/100g</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="碳水/100g"
        prop="carbonRatio"
        :width="60"
        align="center"
      >
        <template slot="header">
          <div class="pointer_style">
            <div>碳水</div>
            <div>/100g</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="蛋白质含量"
        prop="proteinRatio"
        :width="60"
        align="center"
        :formatter="nutriFormatter"
      >
        <template slot="header">
          <div class="pointer_style">
            <div>蛋白质</div>
            <div>含量</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="脂肪含量"
        prop="fatRatio"
        :width="60"
        align="center"
        :formatter="nutriFormatter"
      >
        <template slot="header">
          <div class="pointer_style">
            <div>脂肪</div>
            <div>含量</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="碳水含量"
        prop="carbonRatio"
        :width="60"
        align="center"
        :formatter="nutriFormatter"
      >
        <template slot="header">
          <div class="pointer_style">
            <div>碳水</div>
            <div>含量</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="做法" prop="methods" />
      <el-table-column label="备注" prop="remark">
        <template slot-scope="scope">
          <div
            v-if="!scope.row.remark"
            class="empty_remark"
            @click="handleOnEditRemark(scope.row)"
          >
            <em class="el-icon-plus" />
          </div>
          <span
            class="pointer_style"
            @click="handleOnEditRemark(scope.row)"
            v-else
            >{{ scope.row.remark }}</span
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加菜品抽屉 -->
    <AddDishesDrawer ref="drawerRef" @onConfirm="handleOnDishesConfirm" />
    <!-- 菜品复用菜单 -->
    <DishesSettingDialog
      ref="settingDialogRef"
      @onConfirm="handleOnSettingConfirm"
    />
    <!-- 备注弹窗 -->
    <RemarkDialog ref="remarkDialogRef" @onConfirm="handleOnRemarkConfirm" />
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const {
  mapActions,
  mapGetters,
  mapState,
  mapMutations,
} = createNamespacedHelpers("recipes");

import EditableText from "./EditableText";
import EditableUnit from "./EditableUnit";
import AddDishesDrawer from "./AddDishesDrawer";
import DishesSettingDialog from "./DishesSettingDialog";
import VueScrollTo from "vue-scrollto";
import RemarkDialog from "./RemarkDialog";

export default {
  name: "RecipesCom",
  props: {
    data: {
      type: Object,
      default: [],
      required: true,
    },
    name: {
      type: String,
      default: "",
    },
    num: {
      type: Number,
      default: 0,
    },
    numDay: {
      type: Number,
      default: 0,
    },
  },
  components: {
    EditableText,
    EditableUnit,
    AddDishesDrawer,
    DishesSettingDialog,
    RemarkDialog,
  },
  mounted() {
    // console.log(this.data);
  },
  data() {
    return {};
  },
  computed: {
    mData() {
      if (!this.data.dishes) {
        return [];
      }
      const mData = this.data.dishes
        .sort((a, b) => a.type - b.type)
        .reduce((arr, cur, idx) => {
          if (cur.dishesId > 0 && cur.type !== "0") {
            cur.igdList.forEach((igd) => {
              let lastTypeHit = false,
                lastNameHit = false;
              if (arr.length > 0) {
                // 倒推，找到第一个出现的位置
                lastTypeHit = arr[arr.length - 1].type === cur.type;
                if (lastTypeHit) {
                  let typePos = arr.length - 1;
                  for (let i = typePos; i >= 0; i--) {
                    if (arr[i].type !== cur.type) {
                      break;
                    }
                    typePos = i;
                  }
                  arr[typePos].typeSpan.rowspan += 1;
                }
                lastNameHit =
                  arr[arr.length - 1].name === cur.name &&
                  arr[arr.length - 1].type === cur.type;
                if (lastNameHit) {
                  let namePos = arr.length - 1;
                  for (let i = namePos; i >= 0; i--) {
                    if (arr[i].name !== cur.name) {
                      break;
                    }
                    namePos = i;
                  }
                  arr[namePos].nameSpan.rowspan += 1;
                }
              }

              // console.log(cur);

              arr.push({
                id: cur.id,
                dishesId: cur.dishesId,
                menuId: cur.menuId,
                name: cur.name,
                type: cur.type,
                isMain: cur.isMain,
                methods: cur.methods,
                remark: cur.remark,
                igdId: igd.id,
                igdName: igd.name,
                proteinRatio: igd.proteinRatio,
                fatRatio: igd.fatRatio,
                carbonRatio: igd.carbonRatio,
                rec: igd.rec,
                notRec: igd.notRec,
                weight: igd.weight,
                cusWeight: igd.cusWeight,
                cusUnit: igd.cusUnit,
                typeSpan: lastTypeHit
                  ? {
                      rowspan: 0,
                      colspan: 0,
                    }
                  : {
                      rowspan: 1,
                      colspan: 1,
                    },
                nameSpan: lastNameHit
                  ? {
                      rowspan: 0,
                      colspan: 0,
                    }
                  : {
                      rowspan: 1,
                      colspan: 1,
                    },
              });
            });
          }
          return arr;
        }, []);
      // console.log(mData);

      return mData;
    },
    ...mapGetters(["typeDict"]),
    ...mapState(["currentDay", "copyData", "fontSize", "canCopyMenuTypes"]),
  },
  methods: {
    cellClassName({ row, column, rowIndex, columnIndex }) {
      // console.log({ row, column, rowIndex, columnIndex });
      if (!columnIndex) {
        return "recipes_first_col";
      } else {
        return `recipes_cell recipes_cell_${this.fontSize}`;
      }
    },
    handleParentClick(e) {
      // 校验某天
      this.setCurrentDay({ currentDay: this.num });
      VueScrollTo.scrollTo(`#recipes${this.num}`, 500, {
        container: "#recipes_content",
      });
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return row.typeSpan;
      } else if (
        columnIndex === 1 ||
        columnIndex === 11 ||
        columnIndex === 12
      ) {
        return row.nameSpan;
      }
    },
    typeFormatter(row) {
      return this.typeDict[row.type];
    },
    nutriFormatter(row, col) {
      return ((row.weight / 100) * row[col.property]).toFixed(1);
    },
    handleOnResetCurrentDay(e) {
      e.stopPropagation();
      // 取消高亮
      this.resetCurrentDay({ currentDay: this.num });
    },
    handleOnAdd() {
      // console.log(this.num);
      this.$refs.drawerRef.showDrawer({});
    },
    handleOnReplace(data) {
      this.$refs.drawerRef.showDrawer({ data, numDay: this.numDay });
    },
    handleOnDelete(data) {
      // console.log(data);
      this.deleteDishes({ num: this.num, id: data.id });
    },
    handleOnCopy(data) {
      // console.log(data);
      this.setCopyData({ num: this.num, id: data.id })
        .then((msg) => {
          this.$message.success(msg);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    handleOnPaste(type) {
      // console.log(this.copyData);
      if (this.copyData) {
        this.addDishes({
          num: this.num,
          data: { ...this.copyData, type },
        }).catch((err) => {
          this.$message.error(err);
        });
      }
    },
    handleOnWeightChange(data, weight) {
      // console.log({ data, weight });
      this.updateDishes({
        num: this.num,
        id: data.id,
        dishesId: data.dishesId,
        igdId: data.igdId,
        weight,
        actionType: "weight",
      });
    },
    handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
      // console.log({ data, cusWeight, cusUnit });
      const { id, dishesId, igdId } = data;
      this.updateDishes({
        num: this.num,
        id,
        dishesId,
        igdId,
        cusWeight,
        cusUnit,
        actionType: "unit",
      });
    },
    handleOnDishesConfirm({ type, data }) {
      // console.log(data);
      if (type === "add") {
        this.addDishes({
          num: this.num,
          data,
        }).catch((err) => {
          this.$message.error(err);
        });
      } else if (type === "replace") {
        this.updateDishes({
          num: this.num,
          data,
          actionType: type,
        }).catch((err) => {
          this.$message.error(err);
        });
      }
    },
    handleOnSetting(data) {
      this.$refs.settingDialogRef.showDialog({ numDay: this.numDay, data });
    },
    handleOnSettingConfirm({ type, id }) {
      this.updateDishes({
        num: this.num,
        id,
        type,
        actionType: "menuType",
      });
    },
    handleOnMenuTypeClick(data) {
      this.$refs.drawerRef.showDrawer({ type: data.type, numDay: this.numDay });
    },
    handleOnIgdDelete(data) {
      // console.log(data);
      const { id, igdId } = data;
      this.updateDishes({
        num: this.num,
        id,
        igdId,
        actionType: "delIgd",
      });
    },
    handleOnEditRemark(data) {
      this.$refs.remarkDialogRef.showDialog(data);
    },
    handleOnRemarkConfirm(data) {
      console.log(data);
      const { id, remark } = data;
      this.updateDishes({
        num: this.num,
        id,
        remark,
        actionType: "remark",
      });
    },
    ...mapActions([
      "updateDishes",
      "addDishes",
      "deleteDishes",
      "replaceDishes",
      "setCopyData",
    ]),
    ...mapMutations(["setCurrentDay", "resetCurrentDay"]),
  },
};
</script>
<style lang="scss" scoped>
.recipes_com_wrapper {
  margin-bottom: 24px;
  padding: 1px;

  .pointer_style {
    cursor: pointer;
    outline: none;
  }
}
</style>
<style lang="scss">
.fun_button {
  font-size: 12px;
  padding: 4px 8px;
}

.empty_remark {
  cursor: pointer;
  text-align: center;
  em {
    visibility: hidden;
    font-size: 14px;
    font-weight: bold;
    &:hover {
      color: #1890ff;
    }
  }

  &:hover {
    em {
      visibility: visible;
    }
  }
}

.recipes_header {
  & > th {
    background: #d53950 !important;
    color: white !important;
    font-weight: bold;
  }
}

.recipes_first_col {
  background: #d53950 !important;
  color: white !important;
  font-weight: bold;
}

.recipes_cell {
  font-weight: bold;
  color: #595959;
}

.recipes_cell_12 {
  font-size: 12px;
}
.recipes_cell_14 {
  font-size: 14px;
}
.recipes_cell_16 {
  font-size: 16px;
}
.recipes_cell_18 {
  font-size: 18px;
}
</style>
