<template>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
    <el-form label-width="110px">
      <el-form-item label="匹配ID类型">
        <el-select v-model="putinCfg.matchIdType" disabled filterable clearable>
          <el-option
            v-for="item in matchIdTypeOptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="匹配ID">
        <el-input
          v-model="putinCfg.matchId"
          autocomplete="off"
          disabled
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="应用">
        <el-input
          v-model="putinCfg.appName"
          autocomplete="off"
          disabled
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="上报类型">
        <el-select
          v-model="putinCfg.reportType"
          placeholder="上报类型选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in reportTypeOptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="统计方式">
        <el-select
          v-model="putinCfg.statMethod"
          placeholder="统计方式选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in statMethodOptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <template
        v-if="putinCfg.statMethod == 'cpm' || putinCfg.statMethod == 'mix'"
      >
        <el-form-item label="ecpm">
          <el-input-number
            v-model="putinCfg.ecpm"
            :precision="2"
            :step="20"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="ecpm所需视频">
          <el-input-number
            v-model="putinCfg.ecpmVideoNum"
            :precision="0"
            autocomplete="off"
            :step="10"
            :min="0"
            style="width: 200px"
          ></el-input-number>
        </el-form-item>
      </template>

      <template
        v-if="
          putinCfg.statMethod == 'accumulate' || putinCfg.statMethod == 'mix'
        "
      >
        <el-form-item label="上报触发事件">
          <el-input v-model="putinCfg.event" style="width: 200px"></el-input>
        </el-form-item>

        <el-form-item label="触发次数">
          <el-input-number
            v-model="putinCfg.times"
            :precision="0"
            autocomplete="off"
            :step="10"
            :min="0"
            style="width: 200px"
          ></el-input-number>
        </el-form-item>
      </template>

      <el-form-item label="上报时间">
        <el-select
          v-model="putinCfg.reportTimeMethod"
          placeholder="上报时间选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in reportTimeMethod"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <template v-if="putinCfg.reportTimeMethod == 'nextHour'">
        <el-form-item label="小时数">
          <el-input-number
            v-model="putinCfg.reportHour"
            :precision="0"
            autocomplete="off"
            :step="1"
            :min="1"
            :max="24"
            style="width: 200px"
          ></el-input-number>
        </el-form-item>
      </template>

      <el-form-item label="上报率">
        <el-input-number
          v-model="putinCfg.ratio"
          :precision="0"
          autocomplete="off"
          :step="10"
          :min="0"
          :max="100"
          style="width: 200px"
        ></el-input-number>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="commitEdit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateOrAddList } from "@/api/report.js";

import {
  matchIdType,
  reportType,
  statMethod,
  reportTimeMethod,
} from "@/const/const";

export default {
  props: {
    putinCfg: {
      type: Object,
      require: true,
    },
    putinCfgType: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      dialogVisible: false,

      // 常量选择
      matchIdTypeOptions: matchIdType, // 匹配ID类型参数
      reportTypeOptions: reportType, // 上报类型参数
      statMethodOptions: statMethod, // 统计类型参数
      reportTimeMethod: reportTimeMethod, // 上报时间

      condition: {},
      formLabelWidth: "120",
      is_save: false,
    };
  },

  created() {},

  methods: {
    init() {
      this.dialogVisible = true;
    },

    // 网络请求 新增或更新
    _updateOrAddList() {
      let params = {
        id: this.putinCfg.id,
        matchId: this.putinCfg.matchId,
        pkg: this.putinCfg.pkg,
        matchIdType: this.putinCfg.matchIdType,
        reportType: this.putinCfg.reportType,
        statMethod: this.putinCfg.statMethod,
        ecpm: this.putinCfg.ecpm,
        ecpmVideoNum: this.putinCfg.ecpmVideoNum,
        event: this.putinCfg.event,
        times: this.putinCfg.times,
        ratio: this.putinCfg.ratio,
        reportTimeMethod: this.putinCfg.reportTimeMethod,
        reportHour: this.putinCfg.reportHour,
      };
      if (this.putinCfg.statMethod == "cpm") {
        delete params.times;
        delete params.event;
      } else if (this.putinCfg.statMethod == "accumulate") {
        delete params.ecpm;
        delete params.ecpmVideoNum;
      }
      if (this.putinCfg.reportTimeMethod == "day") {
        delete params.reportHour;
      }
      if (this.putinCfgType != "plan") {
        delete params.id;
        params.idGroups = this.putinCfg.idGroups;
      }
      return updateOrAddList(params);
    },

    // 提交更改
    commitEdit() {
      this.proving();

      if (this.is_save) {
        this._updateOrAddList().then((resp) => {
          this.dialogVisible = false;
          this.$emit("saveSuccess");
          // this.putinCfg.matchIdType = "";
          // this.putinCfg.reportType = "";
          // this.putinCfg.statMethod = "";
          // this.addCanClick = true;
          if (resp.status === 200) {
            this.$message.info("保存成功");
          } else {
            this.$message.error(resp.message);
          }
        });
      }
    },

    // 保存时做验证
    proving() {
      var statMethod = this.putinCfg.statMethod;
      if (statMethod == "" || statMethod == null) {
        this.$message.warning("请选择统计方式！");
        return (this.is_save = false);
      }
      if (this.putinCfg.reportType == "" || this.putinCfg.reportType == null) {
        this.$message.warning("请选择上报类型！");
        return (this.is_save = false);
      }
      if (
        this.putinCfg.reportTimeMethod == "" ||
        this.putinCfg.reportTimeMethod == null
      ) {
        this.$message.warning("请选择上报时间！");
        return (this.is_save = false);
      }
      this.is_save = true;
      switch (statMethod) {
        case "cpm":
          if (this.putinCfg.ecpm <= 0) {
            this.$message.warning("ecpm值必须大于0！");
            return (this.is_save = false);
          } else if (this.putinCfg.ecpmVideoNum <= 0) {
            this.$message.warning("ecpm所需视频值必须大于0！");
            return (this.is_save = false);
          } else {
            this.is_save = true;
          }
          break;
        case "accumulate":
          if (this.putinCfg.times <= 0) {
            this.$message.warning("触发次数必须大于0！");
            return (this.is_save = false);
          } else if (
            this.putinCfg.event.replace(/^\s*|\s*$/g, "") == "" ||
            this.putinCfg.event.replace(/^\s*|\s*$/g, "") == null
          ) {
            this.$message.warning("上报触发事件名不能为空！");
            return (this.is_save = false);
          } else {
            this.putinCfg.event = this.putinCfg.event.replace(/^\s+|\s+$/g, "");
            this.is_save = true;
          }
          break;
        case "mix": {
          if (!this.putinCfg.times > 0) {
            this.$message.warning("触发次数必须大于0！");
            return (this.is_save = false);
          } else if (this.putinCfg.ecpm <= 0) {
            this.$message.warning("ecpm值必须大于0！");
            return (this.is_save = false);
          } else if (this.putinCfg.event == "" || this.putinCfg.event == null) {
            this.$message.warning("上报触发事件名不能为空！");
            return (this.is_save = false);
          } else {
            this.putinCfg.event = this.putinCfg.event.trim();
            return (this.is_save = true);
          }
        }
      }
    },
  },
};
</script>

<style>
</style>