<template>
  <el-form ref="ruleFormRef" label-width="150px" class="demo-ruleForm" status-icon>
    <el-form-item label="规格属性">
      <el-table :data="skuList" border>
        <el-table-column
          :label="item.label"
          :prop="item.value"
          v-for="(item, index) in props.specTableHeaders"
          :key="index"
        ></el-table-column>
        <el-table-column prop="salePrice">
          <template #header>
            <span>售价</span>
            <el-icon
              style="margin-left: 10px"
              color="#409EFC"
              class="no-inherit"
              @click="batchNumber('salePrice')"
            >
              <EditPen />
            </el-icon>
          </template>
          <template v-slot="scope">
            <el-input-number
              size="default"
              v-model="scope.row.salePrice"
              @change="priceFormat(scope.row, 'salePrice')"
              @blur="priceFormat(scope.row, 'salePrice')"
              controls-position="right"
              :disabled="isSyncStatus()"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="originPrice">
          <template #header>
            <span>原价</span>
            <el-icon
              style="margin-left: 10px"
              color="#409EFC"
              class="no-inherit"
              @click="batchNumber('originPrice')"
            >
              <EditPen />
            </el-icon>
          </template>
          <template v-slot="scope">
            <el-input-number
              @change="priceFormat(scope.row, 'originPrice')"
              v-model="scope.row.originPrice"
              @blur="priceFormat(scope.row, 'originPrice')"
              controls-position="right"
              :disabled="isSyncStatus()"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="costPrice">
          <template #header>
            <span>成本价</span>
            <el-icon
              style="margin-left: 10px"
              color="#409EFC"
              class="no-inherit"
              @click="batchNumber('costPrice')"
            >
              <EditPen />
            </el-icon>
          </template>
          <template v-slot="scope">
            <el-input-number
              @change="priceFormat(scope.row, 'costPrice')"
              v-model="scope.row.costPrice"
              @blur="priceFormat(scope.row, 'costPrice')"
              controls-position="right"
              :disabled="isSyncStatus()"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="memberPrice">
          <template #header>
            <span>会员价</span>
            <el-icon
              style="margin-left: 10px"
              color="#409EFC"
              class="no-inherit"
              @click="batchNumber('memberPrice')"
            >
              <EditPen />
            </el-icon>
          </template>
          <template v-slot="scope">
            <el-input-number
              @change="priceFormat(scope.row, 'memberPrice')"
              v-model="scope.row.memberPrice"
              @blur="priceFormat(scope.row, 'memberPrice')"
              controls-position="right"
              :disabled="isSyncStatus()"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="起售数量" prop="suitNum">
          <template #header>
            <span>起售数量</span>
            <el-icon
              style="margin-left: 10px"
              color="#409EFC"
              class="no-inherit"
              @click="batchNumber('suitNum')"
            >
              <EditPen />
            </el-icon>
          </template>
          <template v-slot="scope">
            <el-input-number
              @change="priceFormat(scope.row, 'suitNum')"
              v-model="scope.row.suitNum"
              @blur="priceFormat(scope.row, 'suitNum')"
              :min="0"
              controls-position="right"
              v-if="props.info.type == 'weigh'"
              :disabled="isSyncStatus()"
            ></el-input-number>
            <el-input-number
              @change="priceFormat(scope.row, 'suitNum')"
              v-model="scope.row.suitNum"
              @blur="priceFormat(scope.row, 'suitNum')"
              :min="1"
              controls-position="right"
              :disabled="isSyncStatus()"
              v-else
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </el-form>
  <el-dialog title="批量修改" width="400px" v-model="showBatchModal">
    <el-form :model="batchNumberForm">
      <el-form-item>
        <el-input-number
          @change="priceFormat(batchNumberForm, 'batchNumber')"
          @blur="priceFormat(batchNumberForm, 'batchNumber')"
          v-model="batchNumberForm.batchNumber"
          controls-position="right"
          style="width: 100%"
          :disabled="isSyncStatus()"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showBatchModal = false">取 消</el-button>
        <el-button type="primary" @click="batchNumberFormConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { isSyncStatus } from "@/utils/index";

const ruleFormRef = ref(null);
let batchNumberKey = ref(null);
let batchNumberForm = reactive({
  batchNumber: 0,
});
let skuList = ref([]);
let showBatchModal = ref(false);
const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {};
    },
  },
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
  specTableHeaders: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

onMounted(() => {
  skuList.value = props.list;
});
watch(
  () => props.list,
  (newval) => {
    skuList.value = newval;
  },
  { deep: true }
);
// 批量修改规格
function batchNumber(key) {
  batchNumberKey.value = key;
  showBatchModal.value = true;
}
// 确认批量修改规格
function batchNumberFormConfirm() {
  skuList.value.map((item, index) => {
    let newitem = { ...item };
    newitem[batchNumberKey.value] = batchNumberForm.batchNumber;
    skuList.value[index] = { ...newitem };
  });
  showBatchModal.value = false;
  batchNumberForm.batchNumber = 0;
}
function getdata() {
  return skuList.value;
}
function priceFormat(item, key) {
  // 输入售价其他行为0值时候同样回填售价值
  // 原价 originPrice
  if (key == "salePrice" && item.originPrice == 0) {
    item.originPrice = item.salePrice;
  }
  // 会员价 memberPrice
  /*
  if (key == "salePrice" && item.memberPrice == 0) {
    item.memberPrice = item.costPrice;
  }
    */
  // 成本价 costPrice
  if (key == "salePrice" && item.costPrice == 0) {
    item.costPrice = item.originPrice;
  }
  nextTick(() => {
    const min = 0;
    const max = 100000000;
    const newval = formatPrice(item[key], min, max, true);
    if (typeof newval !== "number") {
      item[key] = newval.value;
      ElMessage.warning(`请输入${min}到${max}范围内的数字`);
    }
  });
}
//  格式化价格函数，将价格限定在指定的最小值和最大值范围内，并保留两位小数。
const formatPrice = (price, min = -Infinity, max = 100000000, returnIsArea = false) => {
  if (price === undefined || price === null || price === "") {
    return 0;
  }
  // 将价格转换为浮点数并保留两位小数
  const newval = parseFloat((Math.floor(price * 100) / 100).toFixed(2));
  // 如果价格大于最大值，返回最大值
  if (newval > max) {
    return returnIsArea ? { value: max, error: true } : max;
  }
  // 如果价格小于最小值，返回最小值
  if (newval < min) {
    return returnIsArea ? { value: min, error: true } : min;
  }
  // 如果价格小于最小值，返回最小值
  if (newval < min) {
    return min;
  }
  // 返回格式化后的价格
  return newval;
};
defineExpose({ getdata });
</script>
