<template>
<div class="price-config-container">
    <a-form-model :model="formModel" :label-col="{span:4}" :wrapper-col="{span: 10}" :rules="formRules" ref="formv">
        <a-form-model-item label="会员价格" ref="vipPriceVal" prop="vipPrice">
            <a-input v-model="formModel.vipPrice" suffix="1个月"></a-input>
        </a-form-model-item>
        <a-form-model-item label="标签用户会员价格">
            <a-row justify="space-between" v-for="utp in formModel.userTagPrice" :key="utp.id" :value="utp.id">
                <a-col :span="4">
                    <span class="required">*</span>会员价格:
                </a-col>
                <a-col :span="7">
                    <a-input v-model="utp.price" suffix="1个月"></a-input>
                </a-col>
                <a-col :span="3" class="spliter">
                    适用于:
                </a-col>
                <a-col :span="7">
                    <a-select v-model="utp.id">
                        <a-select-option :value="tag.id" v-for="tag in userTags" :key="tag.id">
                            {{tag.name}}
                        </a-select-option>
                    </a-select>
                </a-col>
            </a-row>
            <a-button type="primary" @click="addTagedMember">+继续添加</a-button>
        </a-form-model-item>

        <a-form-model-item label="企业会员价格" ref="enterpriceVipPriceVal" prop="enterpriceVipPrice">
            <a-input v-model="formModel.enterpriceVipPrice" suffix="1个月"></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{offset:4}">
            <a-button type="primary" @click="onSubmit" :loading="btnLoading">保存</a-button>
        </a-form-model-item>
    </a-form-model>
</div>
</template>

<script>
import { getConfig, updateConfig } from "@/api/biz/priceConfig";

import { disposereq } from "@/utils/util";

import { fetchAllUserTags } from "@/api/admin/user";

export default {
  data() {
    let validatorPrice = (rule, value, callback) => {
      var val = parseFloat(value);
      if (val <= 0.0) {
        return callback(new Error("必须大于0"));
      }
      return true;
    };
    return {
      userTags: [],
      formModel: {
        vipPrice: 0,
        discountFor3Mon: 0,
        discountFor6Mon: 0,
        discountFor12Mon: 0,
        enterpriceVipPrice: 0,
      },
      btnLoading: false,
      formRules: {
        vipPrice: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "必须为数字",
            trigger: "blur",
            transform: (value) => {
              return Number(value);
            },
          },
          {
            validator: validatorPrice,
            message: "必须大于0",
            trigger: "blur",
          },
        ],
        discountFor3Mon: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "必须为数字",
            trigger: "blur",
            transform: (value) => {
              return Number(value);
            },
          },
        ],
        discountFor6Mon: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "必须为数字",
            trigger: "blur",
            transform: (value) => {
              return Number(value);
            },
          },
        ],
        discountFor12Mon: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "必须为数字",
            trigger: "blur",
            transform: (value) => {
              return Number(value);
            },
          },
        ],
        enterpriceVipPrice: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "必须为数字",
            trigger: "blur",
            transform: (value) => {
              return Number(value);
            },
          },
          {
            validator: validatorPrice,
            message: "必须大于0",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getPriceConfig();
    fetchAllUserTags({
      pageIndex: 0,
      pageSize: 1000,
    }).then((resp) => {
      this.userTags = resp.data;
    });
  },
  beforeUpdate() {},
  methods: {
    blurValidate(prop) {
      this.$refs[prop].onFieldBlur();
    },
    getPriceConfig() {
      getConfig()
        .then((res) => {
          if (res.resp_code == 200) {
            this.formModel = res.datas;
          } else {
            this.$message.info(res.resp_msg);
          }
        })
        .catch((err) => {
          disposereq(err);
        });
    },
    addTagedMember() {
      if (!this.formModel.userTagPrice) {
        this.formModel.userTagPrice = [];
      }
      this.formModel.userTagPrice.push({
        name: "",
        price: 0,
      });
    },
    onSubmit() {
      this.btnLoading = true;
      this.$refs.formv.validate((valid) => {
        if (valid) {
          const utp = this.formModel.userTagPrice;
          utp.forEach((tmp) => {
            const tag = this.userTags.find((ut) => ut.id === tmp.id);
            if (tag) {
              tmp.name = tag.name;
            }
          });
            updateConfig(this.formModel)
              .then((res) => {
                if (res.resp_code == 200) {
                  this.$message.info("保存成功");
                } else {
                  this.$message.info(res.resp_msg);
                }
                this.btnLoading = false;
              })
              .catch((err) => {
                this.btnLoading = false;
                disposereq(err);
              });
        } else {
          this.btnLoading = false;
        }
      });
    },
  },
};
</script>

<style>
.price-config-container {
  margin: 10px;
}

.required {
  color: #f5222c;
}

.spliter {
  margin-left: 10px;
}
</style>
