<template>
  <div class="recipes_com_wrapper">
    <el-table
      :data="mData"
      border
      :span-method="spanMethod"
      :cell-style="{ padding: '2px 0' }"
      :header-cell-style="{ padding: '4px 0', height: 'unset' }"
      size="mini"
      :style="`outline: ${currentDay === num ? '1px solid #d96969' : 'none'}`"
    >
      <el-table-column prop="type" :width="100" align="center">
        <template slot="header">
          <div class="num_day" @click="handleOnOneDayAnalysis">
            <!-- <div>{{ name }}</div> -->
            <div>{{ `第${numDay}天` }}</div>
          </div>
        </template>
        <template slot-scope="scope">
          <span style="font-weight: bold; font-size: 14px">{{
            typeFormatter(scope.row)
          }}</span>
        </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"
          >
            <span class="num_day" @click="handleOnAdd">菜品</span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-popover placement="right" trigger="hover">
            <div>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                class="fun_button"
                @click="handleOnDelete(scope.row)"
                >删除</el-button
              >
            </div>
            <span class="num_day" slot="reference">{{ scope.row.name }}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="食材"
        prop="igdName"
        align="center"
        :width="180"
      />
      <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="num_day" @click="handleOnOneDayAnalysis">
            <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="num_day" @click="handleOnOneDayAnalysis">
            <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="num_day" @click="handleOnOneDayAnalysis">
            <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="num_day" @click="handleOnOneDayAnalysis">
            <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="num_day" @click="handleOnOneDayAnalysis">
            <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="num_day" @click="handleOnOneDayAnalysis">
            <div>碳水</div>
            <div>含量</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="做法" prop="methods" />
    </el-table>
    <AddDishesDrawer ref="drawerRef" @onConfirm="handleOnDishesConfirm" />
  </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";

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,
  },
  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;
                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;
                  arr[namePos].methodsSpan.rowspan += 1;
                }
              }

              arr.push({
                id: cur.id,
                dishesId: cur.dishesId,
                menuId: cur.menuId,
                name: cur.name,
                type: cur.type,
                isMain: cur.isMain,
                methods: cur.methods,
                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,
                    },
                methodsSpan: lastNameHit
                  ? {
                      rowspan: 0,
                      colspan: 0,
                    }
                  : {
                      rowspan: 1,
                      colspan: 1,
                    },
              });
            });
          }
          return arr;
        }, []);
      // console.log(mData);
      return mData;
    },
    ...mapGetters(["typeDict"]),
    ...mapState(["currentDay"]),
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return row.typeSpan;
      } else if (columnIndex === 1) {
        return row.nameSpan;
      } else if (columnIndex === 11) {
        return row.methodsSpan;
      }
    },
    typeFormatter(row) {
      return this.typeDict[row.type];
    },
    nutriFormatter(row, col) {
      return ((row.weight / 100) * row[col.property]).toFixed(1);
    },
    handleOnOneDayAnalysis(e) {
      // 校验某天
      this.setCurrentDay({ currentDay: this.num });
    },
    handleOnAdd() {
      // console.log(this.num);
      this.$refs.drawerRef.showDrawer();
    },
    handleOnDelete(data) {
      // console.log(data);
      this.deleteDishes({ num: this.num, id: data.id });
    },
    handleOnWeightChange(data, weight) {
      console.log({ data, weight });
      this.updateDishes({
        num: this.num,
        dishesId: data.dishesId,
        igdId: data.igdId,
        weight,
      });
    },
    handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
      // console.log({ data, cusWeight, cusUnit });
      this.updateDishes({
        num: this.num,
        id: data.id,
        dishesId: data.dishesId,
        igdId: data.igdId,
        cusWeight,
        cusUnit,
      });
    },
    handleOnDishesConfirm(data) {
      // console.log(data);
      this.addDishes({
        num: this.num,
        data,
      }).catch((err) => {
        this.$message.error(err.message);
      });
    },
    ...mapActions(["updateDishes", "addDishes", "deleteDishes"]),
    ...mapMutations(["setCurrentDay"]),
  },
};
</script>
<style lang="scss" scoped>
.recipes_com_wrapper {
  margin-bottom: 24px;
  padding: 1px;

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