<template>
  <LjDrawer
    v-if="visible"
    ref="LjDrawerRef"
    :class="`${prefixCls}`"
    :id="prefixCls"
    direction="btt"
    size="70%"
    destroy-on-close
    append-to-body
    :show-close="false"
    @close="autoClose"
  >
    <template #header>
      <div class="flx-justify-between">
        <div class="">
          详细报价
          <el-segmented v-model="dannumValue" :options="dannumOptions" class="ml-32" size="default" />
        </div>
        <div class="flx-shrink">
          <el-button type="danger" :icon="Close" text circle @click="cancelClick"></el-button>
        </div>
      </div>
    </template>
    <template #default>
      <!-- <template v-if="iforigin"> -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="新公式" name="first">
          <el-skeleton :loading="formulaList.length == 0" animated :count="8">
            <template #template>
              <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 24px">
                <el-skeleton-item variant="h1" style="width: 120px" />
                <el-skeleton-item variant="h1" style="margin-left: 16px" />
              </div>
            </template>
            <template #default>
              <FormulaGroup :data="isNormalFormulasPart1" :fields="isFieldsReplace" />
              <FormulaGroup
                v-for="(itm, index) in isFieldsReplaceBendet"
                :key="index"
                :prefix-label="'床网' + (index + 1)"
                :data="isNormalFormulasBednet"
                :fields="itm.replace"
              />
              <FormulaGroup :data="isNormalFormulasPart2" :fields="isFieldsReplace" />
            </template>
          </el-skeleton>
        </el-tab-pane>
        <el-tab-pane label="旧公式" name="second" v-if="iforigin">
          <el-skeleton :loading="formulaList.length == 0" animated :count="8">
            <template #template>
              <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 24px">
                <el-skeleton-item variant="h1" style="width: 120px" />
                <el-skeleton-item variant="h1" style="margin-left: 16px" />
              </div>
            </template>
            <template #default>
              <FormulaGroup :data="isNormalFormulasOri" :fields="isFieldsReplaceOri" />
            </template>
          </el-skeleton>
        </el-tab-pane>
      </el-tabs>
      <!-- </template> -->
      <!-- <template v-else>
        <FormulaGroup :data="isNormalFormulas" :fields="isFieldsReplace" />
      </template> -->
    </template>
  </LjDrawer>
</template>

<script setup lang="ts" name="mattressQuoteDetail_AllFormula">
import { ref, computed, watch, nextTick } from "vue";
import LjDrawer from "@/components/LjDrawer/index.vue";
import { useI18n } from "vue-i18n";
import { useDesign } from "@/hooks/useDesign";
import { useGlobalStore } from "@/stores/modules/global";
import { Close, Search } from "@element-plus/icons-vue";
import { ElSegmented } from "element-plus";
import FormulaGroup from "./FormulaGroup.vue";
import LjHeader from "@/components/LjHeader/index.vue";
import { cloneDeep } from "lodash-es";

interface WidgetProps {
  iforigin: boolean;
  /**
   * @description 字段对照表
   */
  dannum_type: any;
  replace: any[];
  formula: any[];
  formula_ori: any[];
  formula_bednet: any[];
  differ: any[];
}

const props = withDefaults(defineProps<WidgetProps>(), {
  iforigin: false
});

const { t } = useI18n();
const { prefixCls } = useDesign("bednet-formal-detail");
const globalStore = useGlobalStore();

const visible = ref(false);
const LjDrawerRef = ref();
const formulaList = ref<any>([]);
const fieldsReplace = ref<any>([]);
const formulaListOri = ref<any>([]);
const formulaListBednet = ref<any>([]);
const differArr = ref<any>([]);
// const mainData = ref<any>({});
const formulaMxList = ref<any>([]);

const dannumValue = ref("标准");

const dannumOptions = ["散单", "小单", "标准", "大单"];

const getFormula = () => {
  let _formula = formulaList.value
    .map((item: any) => {
      let matchArr = formulaList.value.filter((_item: any) => _item.type != 0 && item.value.indexOf(_item.label) > -1);

      if (matchArr.length > 0) {
        item.children = matchArr;
      }
      if (["【车间成本】"].includes(item.label)) item.ifFold = true;
      return item;
    })
    .filter((item: any) => item.type == 0);

  console.log(
    "return _formula.filter((item: any) => item.type == 0); :>> ",
    _formula.filter((item: any) => item.type == 0)
  );

  return _formula.filter((item: any) => item.type == 0);
};

const isNormalFormulasPart1 = computed(() => {
  return getFormula().filter((item: any) => ["【车间成本】", "【总床垫车间成本】"].includes(item.label));
});
const isNormalFormulasPart2 = computed(() => {
  return getFormula().filter((item: any) => !["【车间成本】", "【总床垫车间成本】"].includes(item.label));
});

const isNormalFormulasBednet = computed(() => {
  let _formula = formulaListBednet.value
    .map((item: any) => {
      let matchArr = formulaListBednet.value.filter((_item: any) => _item.type != 0 && item.value.indexOf(_item.label) > -1);

      if (matchArr.length > 0) {
        item.children = matchArr;
      }
      if (["【大小单系数】"].includes(item.label)) item.ifFold = true;
      return item;
    })
    .filter((item: any) => item.type == 0);

  console.log(
    "isNormalFormulasBednet return _formula.filter((item: any) => item.type == 0); :>> ",
    _formula.filter((item: any) => item.type == 0)
  );

  return _formula.filter((item: any) => item.label == "【车间成本】");
});

const isNormalFormulas = computed(() => {
  // let _formula = formulaList.value.filter((item: any) => item.type == 0);
  // let _formula1 = formulaList.value.filter((item: any) => item.type == 1);
  // _formula = _formula.map((item: any) => {
  // let _val = fieldsReplace.value.find((_item: any) => _item.label == item.label);
  // if (!_val) {
  //   let tgItem = formulaList.value.find(_item => _item.value.indexOf(item.label) > -1);
  //   if (tgItem) {
  //     item.parentId = tgItem.label;
  //   } else {
  //     item.parentId = null;
  //   }
  // } else {
  //   item.parentId = null;
  // }
  //   return item;
  // });

  // return buildTreeArr(_formula);

  let _formula = formulaList.value
    .map((item: any) => {
      let matchArr = formulaList.value.filter((_item: any) => _item.type != 0 && item.value.indexOf(_item.label) > -1);

      if (matchArr.length > 0) {
        item.children = matchArr;
      }
      if (["【车间成本】"].includes(item.label)) item.ifFold = true;
      return item;
    })
    .filter((item: any) => item.type == 0);

  // let bednetList = [];
  // let bednetSum = 0
  // let _val = fieldsReplace.value.find((_item: any) => _item.label == '【总床网车间成本】');
  // if (_val) {
  //   bednetSum = _val.value
  // }

  // if (bednetSum > 0) {
  //   let _mattressIdx = _formula.findIndex((item: any) => item.label == '【总床垫车间成本】');

  //   let _differL = differ.value.find((item: any) => item.type == getDannumType.value);
  //   console.log('isNormalFormulas _bednetL :>> ', _differL);

  //   _differL.

  //   let _bednetFormula = formulaListBednet.value.find(t => t.label == "【车间成本】");

  //   _formula.splice(_mattressIdx, 0, _bednetFormula);
  // }

  console.log(
    "return _formula.filter((item: any) => item.type == 0); :>> ",
    _formula.filter((item: any) => item.type == 0)
  );

  return _formula.filter((item: any) => item.type == 0);
});
const isNormalFormulasOri = computed(() => {
  return formulaListOri.value.filter((item: any) => item.type == 0);
});

const getDannumType = computed(() => {
  let _type = 1;
  switch (dannumValue.value) {
    case "标准":
      _type = 2;
      break;
    case "散单":
      _type = 1;
      break;
    case "大单":
      _type = 3;
      break;
    case "小单":
      _type = 4;
      break;
  }
  return _type;
});

const isFieldsReplace = computed(() => {
  let tg = differArr.value.find((item: any) => item.type == getDannumType.value);
  return tg.replace;
});
const isFieldsReplaceBendet = computed(() => {
  let tg = differArr.value.find((item: any) => item.type == getDannumType.value);
  return tg.replace_bednet;
});
const isFieldsReplaceOri = computed(() => {
  let tg = differArr.value.find((item: any) => item.type == getDannumType.value);
  return tg.replace_origin;
});

const isMxFormulas = computed(() => {
  return formulaList.value.filter((item: any) => item.type == 2);
});
// const isWeigthFormulas = computed(() => {
//   return formulaList.value.filter((item: any) => item.type == 3);
// });

const buildTreeArr = (items, parentId = null) => {
  return items
    .filter(item => item.parentId === parentId)
    .map(item => ({
      ...item,
      children: buildTreeArr(items, item.label)
    }));
};

const activeName = ref("first");

const autoClose = () => {
  setTimeout(() => {
    visible.value = false;
  }, 200);
};

const cancelClick = () => {
  // searchField.value = "";
  LjDrawerRef.value.hide();
  // selectColumn.value = [];
  // ifAllSelect.value = false;
};

/**
 * @description 显示组件
 */
const open = (data: any) => {
  // switch (data.dannum_type) {
  //   case 2:
  //     dannumValue.value = "标准";
  //     break;
  //   case 1:
  //     dannumValue.value = "散单";
  //     break;
  //   case 3:
  //     dannumValue.value = "大单";
  //     break;
  //   case 4:
  //     dannumValue.value = "小单";
  //     break;
  // }

  visible.value = true;
  // formulaList.value = data.formula;
  // fieldsReplace.value = data.replace;
  // formulaListOri.value = data.formula_ori;
  // formulaListBednet.value = data.formula_bednet;
  // differ.value = data.differ;

  nextTick(() => {
    LjDrawerRef.value.show();
  });
};

watch(
  () => props.formula,
  val => {
    formulaList.value = val;
  },
  { deep: true }
);

watch(
  () => props.replace,
  val => {
    fieldsReplace.value = val;
  },
  { deep: true }
);
watch(
  () => props.dannum_type,
  val => {
    switch (val) {
      case 2:
        dannumValue.value = "标准";
        break;
      case 1:
        dannumValue.value = "散单";
        break;
      case 3:
        dannumValue.value = "大单";
        break;
      case 4:
        dannumValue.value = "小单";
        break;
    }
  }
);
watch(
  () => props.formula_ori,
  val => {
    formulaListOri.value = val;
  },
  { deep: true }
);
watch(
  () => props.formula_bednet,
  val => {
    formulaListBednet.value = val;
  },
  { deep: true }
);
watch(
  () => props.differ,
  val => {
    differArr.value = val;
  },
  { deep: true }
);

defineExpose({
  open
});
</script>

<style lang="scss" scoped>
$prefix-cls: "#{$namespace}-bednet-formal-detail";

.#{$prefix-cls} {
  .summary-wrapper {
    &__label-item {
      position: relative;
      margin-right: $space-a3;

      &::after {
        content: "=";
        position: absolute;
        bottom: 0;
        right: -$space-b3;
        font-size: 24px;
        color: $color-text-disable;
      }
    }
  }
}
</style>
