<template>
  <div>
    <a-form
      :layout="formState.layout"
      :model="formState"
      v-bind="formItemLayout"
      :label-col="{ span: 8 }"
      :wrapper-col="{ offset: 1 }"
    >
      <a-form-item label=" 回传条件">
        <a-select
          v-model:value="orangeReturnItem[currentTab].value"
          style="width: 160px"
          size="small"
        >
          <!-- <a-select-option :value="'current_day_register_first_recharge'"
            >当日注册当日首充</a-select-option
          >
          <a-select-option :value="' recharge_not_less_than_min_price'"
            >充值金额不小于30元</a-select-option
          > -->
          <a-select-option
            v-for="item in orangeReturnItem"
            :key="item.desc"
            :value="item.value"
            >{{ item.desc }}</a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item label="回传比例">
        <a-input
          style="width: 160px"
          v-model:value="formState.rate"
          placeholder="请输入回传比例"
          :min="0"
          :max="100"
          type="number"
        >
          <template #suffix>
            <a-tooltip title="比例0-100">
              <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
            </a-tooltip>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item label="回传付费最低金额">
        <a-input
          v-model:value="formState.price"
          size="small"
          style="width: 160px"
          type="number"
          placeholder="回传比例"
          :min="0"
        >
          <template #suffix>
            <a-tooltip title="元">
              <span>元</span>
            </a-tooltip>
          </template>
        </a-input>
      </a-form-item>
      <!-- <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
                <a-button type="primary" @click="submit">确定</a-button>
                <span style="padding:20px;"></span>
                <a-button type="primary" @click="cancel">取消</a-button>
            </a-form-item>-->
    </a-form>
  </div>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  reactive,
  UnwrapRef,
  toRefs,
  onMounted,
  ref,
  watch,
} from "vue";
import { upDateReportConfigApi } from "@/api";
import { InfoCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
interface FormState {
  layout: "horizontal" | "vertical" | "inline";
  condition: string;
  rate: string;
  price: string;
}
// interface OrangeForm {
//   value: string;
//   reportresult: {
//     appflag: string;
//     rate: string;
//     condition: string;
//     price: string;
//   };
// }
export default defineComponent({
  name: "OrangeForm",
  components: {
    InfoCircleOutlined,
  },
  props: {
    formrate: String || undefined,
    condition: String,
  },
  emits: ["getShowFlag", "handleOk", "initOrangeList", "add"],
  setup(props, ctx) {
    const state: any = reactive({
      value: "",
      orangeReturnItem: [
        {
          value: "",
          desc: "当日注册当日首充",
          _id: 1,
        },
      ],
      currentTab: 0,
      reportresult: {
        appflag: "",
        rate: "",
        condition: "",
        price: "",
      },
    });
    const showFlag = reactive({
      showflag: true,
    });
    const formState: UnwrapRef<FormState> = reactive({
      layout: "horizontal",
      rate: "100",
      condition: "",
      price: "30",
    });
    const OrangeFormMsg = ref("OrangeForm");
    const formItemLayout = computed(() => {
      const { layout } = formState;
      return layout === "horizontal"
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    });
    const buttonItemLayout = computed(() => {
      const { layout } = formState;
      return layout === "horizontal"
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : {};
    });
    //获得app标识
    watch(props, () => {
      formState.rate = props.formrate as string;
      state.orangeReturnItem[0].value = props.condition;
      
    });

    onMounted(() => {
      formState.rate = props.formrate as string;
      state.orangeReturnItem[0].value =props.condition
      console.log(state.orangeReturnItem[0].value)
    });
    //提交回传比例表单
    const submit = async () => {
      state.reportresult.rate = formState.rate;
      state.reportresult.condition =
        state.orangeReturnItem[state.currentTab].value;
      state.reportresult.appflag = localStorage.getItem("OrangeAppflag") || "0";
      state.reportresult.price = formState.price;
      const res = await upDateReportConfigApi(state.reportresult);
      if (res.data.result == 1) {
        ctx.emit("initOrangeList");
        ctx.emit("add");
        message.success("修改回传比例成功！");
        formState.price = "30";
      } else {
        message.error("修改失败,暂无配置");
      }
      ctx.emit("getShowFlag", showFlag.showflag);
    };
    //点击关闭抽屉层
    return {
      ...toRefs(state),
      formState,
      formItemLayout,
      buttonItemLayout,
      submit,
      OrangeFormMsg,
    };
  },
});
</script>
