<template>
  <div style="display: table" @click="handleClick">
    <el-row class="statistic-row h-full" :gutter="8" style="width: 280px" :class="{ 'is-admin': userInfo.usermode === 0 }">
      <el-col :span="12" v-for="(item, index) in statisticData" :key="index">
        <StatisticItem :data="item" v-bind="$attrs" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="mattressQuoteDetail_statistic">
import { ref, watch } from "vue";
import StatisticItem from "./StatisticItem.vue";
import { useUserStore } from "@/stores/modules/user";

interface WidgetProps {
  data: any;
}

interface statisticDataProps {
  label: string;
  subtitle?: string;
  value: number;
  power?: () => boolean;
}

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

const emit = defineEmits(["click"]);

const { userInfo } = useUserStore();

const statisticData = ref<statisticDataProps[]>([
  {
    label: "【弹簧材料总成本】",
    value: 0,
    subtitle: "【弹簧总材料成本】",
    power: () => {
      return userInfo.usermode === 0;
    }
  },
  {
    label: "【弹簧总人工成本】",
    value: 0,
    power: () => {
      return userInfo.usermode === 0;
    }
  },
  {
    label: "【总材料成本】",
    value: 0,
    power: () => {
      return userInfo.usermode === 0;
    }
  },
  {
    label: "【不含税出厂价】",
    value: 0,
    power: () => {
      return userInfo.usermode === 0;
    }
  },
  {
    label: "【总人力费用】",
    value: 0,
    power: () => {
      return userInfo.usermode === 0;
    }
  },
  {
    label: "【部门不含税价】",
    value: 0,
    power: () => {
      return userInfo.usermode === 0;
    }
  },
  {
    label: "【总费用成本】",
    value: 0,
    power: () => {
      return userInfo.usermode === 0;
    }
  },
  {
    label: "【部门含税价】",
    subtitle: "【部门售价】",
    value: 0
  },
  {
    label: "【车间成本】",
    value: 0,
    power: () => {
      return userInfo.usermode === 0;
    }
  },
  {
    label: "【外币价】",
    value: 0
  },
  {
    label: "【总重量】",
    value: 0
  }
]);

watch(
  () => props.data,
  val => {
    if (val) {
      console.log("statisticData.value ==== ", statisticData.value, val);
      statisticData.value = statisticData.value.filter(o => {
        let tg = val.find(item => item.label === o.label);
        o.value = tg ? tg.value : 0;
        if (o?.power) {
          return o.power();
        } else {
          return true;
        }
      });
    }
    // statisticData.value = statisticData.value.filter(o => o);
  },
  { immediate: true, deep: true }
);

const handleClick = () => {
  if (userInfo.usermode === 0) {
    emit("click");
  }
};
</script>

<style lang="scss" scoped>
.statistic-row {
  border-radius: 8px;
  // background-color: $color-gray-3;
  padding: 8px 0;
  background-color: $color-primary-400;

  &.is-admin {
    cursor: pointer;
  }

  > .el-col:not(:nth-child(-n + 2)) {
    margin-top: 8px;
  }
}
</style>
