<template>
  <el-card class="box-card">
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
      <template #priceBillingStandardDetailList>
        <div style="width: 100%">
          <el-table :data="formData.data.priceBillingStandardDetailList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
            <el-table-column min-width="260">
              <template #header>
                <span style="margin-right: 16px">收费项目</span>
                <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="clickAdd()">+ 添加收费项目</a>
              </template>
              <template #default="{ row, $index }">
                <el-form-item
                  :prop="'priceBillingStandardDetailList.' + $index + '.chargeItem'"
                  :rules="rules.chargeItem"
                  :inline-message="true"
                  style="width: 100%">
                  <el-select v-model="row.chargeItem" placeholder="收费项目" style="width: 100%">
                    <el-option v-for="item in useUserStore().allDict['charge_item']" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="收费模式" width="140">
              <template #default="{ row, $index }">
                <el-form-item
                  :prop="'priceBillingStandardDetailList.' + $index + '.chargeMode'"
                  :rules="rules.chargeMode"
                  :inline-message="true"
                  style="width: 100%">
                  <el-select v-model="row.chargeMode" placeholder="收费模式" style="width: 100%">
                    <el-option v-for="item in useUserStore().allDict['charge_mode']" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="收费模式数值区间" min-width="260">
              <template #default="{ row, $index }">
                <el-row>
                  <el-col :span="11">
                    <el-form-item
                      :prop="'priceBillingStandardDetailList.' + $index + '.sectionMin'"
                      :rules="rules.sectionMin"
                      :inline-message="true"
                      style="width: 100%">
                      <el-input-number
                        onmousewheel="return false;"
                        v-model="row.sectionMin"
                        placeholder="区间起始值"
                        style="width: 100%"
                        :controls="false"
                        :min="0"
                        :precision="0"
                        :max="99999999" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="2" style="text-align: center">-</el-col>
                  <el-col :span="11">
                    <el-form-item
                      :prop="'priceBillingStandardDetailList.' + $index + '.sectionMax'"
                      :rules="rules.sectionMax"
                      :inline-message="true"
                      style="width: 100%">
                      <el-input-number
                        onmousewheel="return false;"
                        v-model="row.sectionMax"
                        placeholder="区间结束值"
                        style="width: 100%"
                        :controls="false"
                        :min="0"
                        :precision="0"
                        :max="99999999" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column label="收费价格/元/件" width="140">
              <template #default="{ row, $index }">
                <el-form-item
                  :prop="'priceBillingStandardDetailList.' + $index + '.chargePrice'"
                  :rules="rules.chargePrice"
                  :inline-message="true"
                  style="width: 100%">
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="row.chargePrice"
                    placeholder="收费价格"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :precision="2" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="成本价/元/件" width="140">
              <template #default="{ row, $index }">
                <el-form-item
                  :prop="'priceBillingStandardDetailList.' + $index + '.costPrice'"
                  :rules="rules.costPrice"
                  :inline-message="true"
                  style="width: 100%">
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="row.costPrice"
                    placeholder="成本价"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :precision="2" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="排序" width="120">
              <template #default="{ row, $index }">
                <el-form-item :prop="'priceBillingStandardDetailList.' + $index + '.sort'" :rules="rules.sort" :inline-message="true" style="width: 100%">
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="row.sort"
                    placeholder="排序"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :precision="0" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="80">
              <template #default="{ $index }">
                <el-button type="danger" @click="clickDelete($index)" text>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </byForm>
    <div style="text-align: center; margin: 10px">
      <el-button type="primary" @click="submitForm()" size="large" v-preReClick>保 存</el-button>
    </div>
  </el-card>
</template>

<script setup>
import byForm from "/src/components/byForm/index";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import useTagsViewStore from "/src/store/modules/tagsView.js";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const submit = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: "80px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
});
const formData = reactive({
  data: {
    priceBillingStandardDetailList: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "name",
      label: "规则名称",
      itemType: "text",
    },
    {
      type: "select",
      prop: "species",
      data: proxy.useUserStore().allDict["bom_species"],
      label: "种类",
    },
    {
      type: "slot",
      slotName: "priceBillingStandardDetailList",
      label: "",
    },
  ];
});
const rules = ref({
  name: [{ required: true, message: "请输入规则名称", trigger: "blur" }],
  species: [{ required: true, message: "请输入请选择种类", trigger: "blur" }],
  chargeItem: [{ required: true, message: "请选择收费项目", trigger: "change" }],
  chargeMode: [{ required: true, message: "请选择收费模式", trigger: "change" }],
  sectionMin: [{ required: true, message: "请输入区间起始值", trigger: "blur" }],
  sectionMax: [{ required: true, message: "请输入区间结束值", trigger: "blur" }],
  chargePrice: [{ required: true, message: "请输入收费价格", trigger: "blur" }],
  costPrice: [{ required: true, message: "请输入成本价", trigger: "blur" }],
  sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
});
const type = ref("add");
const submitForm = () => {
  submit.value.handleSubmit(() => {
    if (formData.data.priceBillingStandardDetailList && formData.data.priceBillingStandardDetailList.length > 0) {
      let data = formData.data.priceBillingStandardDetailList.filter((item) => ["10", "20"].includes(item.chargeItem));
      if (data && data.length > 1) {
        let chargeMode = data[0].chargeMode;
        for (let i = 0; i < data.length; i++) {
          if (chargeMode !== data[i].chargeMode) {
            return ElMessage("配置异常");
          }
        }
      }
      for (let j = 0; j < proxy.useUserStore().allDict["charge_item"].length; j++) {
        let dataTwo = formData.data.priceBillingStandardDetailList.filter((item) => item.chargeItem === proxy.useUserStore().allDict["charge_item"][j].dictKey);
        if (dataTwo && dataTwo.length > 1) {
          let chargeModeTwo = dataTwo[0].chargeMode;
          for (let x = 0; x < dataTwo.length; x++) {
            if (chargeModeTwo !== dataTwo[x].chargeMode) {
              return ElMessage("配置异常");
            } else {
              for (let y = 0; y < dataTwo.length; y++) {
                if (x !== y) {
                  if (
                    dataTwo[x].sectionMax >= dataTwo[x].sectionMin &&
                    ([dataTwo[y].sectionMin, dataTwo[y].sectionMax].includes(dataTwo[x].sectionMin) ||
                      [dataTwo[y].sectionMin, dataTwo[y].sectionMax].includes(dataTwo[x].sectionMax))
                  ) {
                    return ElMessage("区间重叠");
                  } else {
                    if (dataTwo[x].sectionMax > dataTwo[y].sectionMax) {
                      if (dataTwo[x].sectionMin < dataTwo[y].sectionMax) {
                        return ElMessage("区间重叠");
                      }
                    } else {
                      if (dataTwo[x].sectionMax > dataTwo[y].sectionMin) {
                        return ElMessage("区间重叠");
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      proxy.post("/priceBillingStandard/" + type.value, formData.data).then(() => {
        ElMessage({
          message: type.value == "add" ? "保存成功" : "编辑成功",
          type: "success",
        });
        const useTagsStore = useTagsViewStore();
        useTagsStore.delVisitedView(router.currentRoute.value);
        router.replace({
          path: "/group/selling-price/charging-standard",
        });
      });
    } else {
      return ElMessage("请添加收费项目");
    }
  });
};
onMounted(() => {
  if (route.query.id) {
    type.value = "edit";
    proxy.post("/priceBillingStandard/detail", { id: route.query.id }).then((res) => {
      formData.data = res;
    });
  }
});
const clickAdd = () => {
  formData.data.priceBillingStandardDetailList.push({
    chargeItem: "",
    chargeMode: "",
    sectionMin: undefined,
    sectionMax: undefined,
    chargePrice: undefined,
    costPrice: undefined,
    sort: undefined,
  });
};
const clickDelete = (index) => {
  formData.data.priceBillingStandardDetailList.splice(index, 1);
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
