<template>
  <LjDrawer
    v-if="visible"
    ref="LjDrawerRef"
    :class="`${prefixCls}`"
    :id="prefixCls"
    direction="btt"
    size="60%"
    destroy-on-close
    append-to-body
    :show-close="false"
    @close="autoClose"
  >
    <template #header>
      <div class="flx-justify-between">
        <div class="">详细报价</div>
        <!-- <div class="flx flx-center mr-4" id="settingSearchInput">
          <el-input
            v-model="searchField"
            :prefix-icon="Search"
            clearable
            style="width: 240px; height: 34px"
            :placeholder="$t('business.baseMsgSetting.searchPh')"
            @clear="searchEvent"
            @input="disshow(searchField)"
          >
            <template #suffix v-if="searchField.length">
              {{ matchSearchNum }}
            </template>
          </el-input>
          <el-tooltip effect="dark" :content="$t('common.table.sesarhFilter')" placement="top" :show-after="200">
            <el-button
              :type="ifSearchFilter ? 'primary' : 'default'"
              plain
              class="ml-8 pl-10 pr-10"
              @click="
                () => {
                  ifSearchFilter = !ifSearchFilter;
                  disshow(searchField);
                }
              "
            >
              <template #icon>
                <i class="iconfont" :class="ifSearchFilter ? 'iconfilter-funnel-01-fill' : 'iconfilter-funnel-01'"></i>
              </template>
            </el-button>
          </el-tooltip>
        </div> -->
        <div class="flx-shrink">
          <el-button type="danger" :icon="Close" text circle @click="cancelClick"></el-button>
        </div>
      </div>
    </template>
    <template #default>
      <LjHeader class="flx-1" title="单据统计" />
      <el-skeleton :loading="formulaList.length == 0" animated :count="6">
        <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="isNormalFormulas" :fields="fieldsReplace" />
        </template>
      </el-skeleton>

      <LjHeader class="flx-1 mt-16" title="详细报价" />

      <el-skeleton :loading="formulaList.length == 0" animated :count="6">
        <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="isMxFormulas" :fields="fieldsReplace" />
        </template>
      </el-skeleton>

      <LjHeader class="flx-1 mt-16" title="重量" />

      <el-skeleton :loading="formulaList.length == 0" animated :count="6">
        <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="isWeigthFormulas" :fields="fieldsReplace" />
        </template>
      </el-skeleton>
    </template>
  </LjDrawer>
</template>

<script setup lang="ts" name="bednetQuoteDetail_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 FormulaGroup from "./FormulaGroup.vue";
import LjHeader from "@/components/LjHeader/index.vue";
import { cloneDeep } from "lodash-es";

interface WidgetProps {
  /**
   * @description 字段对照表
   */
  replace: any[];
  formula: any[];
}

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

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 formulaMxList = ref<any>([]);

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

const isNormalFormulas = computed(() => {
  // return formulaList.value.filter((item: any) => item.type == 0);

  // let _formula = formulaList.value.filter((item: any) => item.type == 0);
  let _formula = cloneDeep(formulaList.value);
  // _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).filter((item: any) => item.type == 0);

  _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;
    }
    return item;
  });
  console.log("_formula :>> ", _formula);
  console.log(
    "_formula 0:>> ",
    _formula.filter((item: any) => item.type == 0)
  );
  // console.log("isNormalFormulas: >>> ", buildTreeArr(_formula));
  // return buildTreeArr(_formula);

  // let replaceFormula = cloneDeep(_formula.filter((item: any) => item.ifnotreplace == true));

  // _formula = cloneDeep(_formula.filter((item: any) => !item.ifnotreplace));

  // replaceFormula.map((item: any) => {
  //   let index = _formula.findIndex((_item: any) => _item.value.indexOf(item.label) > -1);
  //   if (index > -1) {
  //     if (!Object.keys(_formula[index]).includes("children")) {
  //       _formula[index].children = [];
  //     }
  //     item.ifnotreplace = null;
  //     _formula[index].children.push(item);
  //   }
  // });
  console.log("_formula :>> ", _formula);
  // console.log("isNormalFormulas: >>> ", buildTreeArr(_formula));

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

const isMxFormulas = computed(() => {
  let arr = formulaList.value.filter((item: any) => item.type == 2 && !/【\d+弹簧材料总成本】/.test(item.label));
  let springArr = formulaList.value.filter((item: any) => item.type == 2 && /【\d+弹簧材料总成本】/.test(item.label));
  console.log("springArr :>> ", springArr);
  if (springArr.length > 0) {
    arr = arr.map((item: any) => {
      if (item.label == "【弹簧材料总成本】") {
        item.mxformula = springArr;
      }
      return item;
    });
  }
  return arr;
});
const isWeigthFormulas = computed(() => {
  let arr = formulaList.value.filter((item: any) => item.type == 3 && !/【\d+钢丝重量】/.test(item.label));
  let wireArr = formulaList.value.filter((item: any) => item.type == 3 && /【\d+钢丝重量】/.test(item.label));
  if (wireArr.length > 0) {
    arr = arr.map((item: any) => {
      if (item.label == "【钢丝重量】") {
        item.mxformula = wireArr;
      }
      return item;
    });
  }
  return arr;
});

watch(
  () => visible.value,
  val => {
    if (!val) {
      // searchField.value = "";
      LjDrawerRef.value.hide();
      // selectColumn.value = [];
      // ifAllSelect.value = false;
    }
    return;
  }
);

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

watch(
  () => props.replace,
  val => {
    fieldsReplace.value = val;
  }
);

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

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

/**
 * @description 显示组件
 */
const open = (formulas: any, replace: any, data: any) => {
  visible.value = true;
  // formulaList.value = formulas;
  // fieldsReplace.value = replace;

  // formulaMxList.value;

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

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>
