<template>
  <el-dialog title="更改计划" top="1vh" :visible.sync="dialogFormVisible">
    <div style="padding: 10px; border: 2px solid green">
      <el-form>
        <span>线上出价: {{ planInfo.cpa_bid }}￥</span><br />
        <span v-if="planInfo.deep_cpabid"
          >深度出价: {{ planInfo.deep_cpabid }}￥</span
        ><br />
        <span
          >预算模式:
          {{
            planInfo.budget_mode === "BUDGET_MODE_DAY" ? "日预算" : "总预算"
          }}</span
        ><br />
        <span>计划预算: {{ planInfo.budget }}</span
        ><br />
        <el-form-item label="计划状态:">
          <el-tag
            type="success"
            v-if="this.planInfo.status === 'AD_STATUS_DELIVERY_OK'"
            >投放中</el-tag
          >
          <el-tag
            type="warn"
            v-else-if="this.planInfo.status === 'AD_STATUS_DISABLE'"
            >计划暂停</el-tag
          >
          <el-tag
            type="warn"
            v-else-if="this.planInfo.status === 'AD_STATUS_BUDGET_EXCEED'"
            >超出预算</el-tag
          >
          <el-tag
            type="warn"
            v-else-if="this.planInfo.status === 'AD_STATUS_BALANCE_EXCEED'"
            >账户余额不足</el-tag
          >
          <el-tag
            type="success"
            v-else-if="this.planInfo.status === 'AD_STATUS_REAUDIT'"
            >修改审核中</el-tag
          >
          <el-tag
            type="success"
            v-else-if="this.planInfo.status === 'AD_STATUS_AUDIT_DENY'"
            >审核不通过</el-tag
          >
          <el-tag
            type="success"
            v-else-if="this.planInfo.status === 'AD_STATUS_CAMPAIGN_DISABLE'"
            >已被广告组暂停</el-tag
          >
          <el-tag
            type="success"
            v-else-if="this.planInfo.status === 'AD_STATUS_CAMPAIGN_EXCEED'"
            >广告组超出预算</el-tag
          >
          <el-tag
            type="warn"
            v-else-if="this.planInfo.status === 'AD_STATUS_DELETE'"
            >已删除</el-tag
          >
          <el-tag
            type="success"
            v-else-if="this.planInfo.status === 'AD_STATUS_NO_SCHEDULE'"
            >不在投放时段</el-tag
          >
          <el-tag
            type="success"
            v-else-if="this.planInfo.status === 'AD_STATUS_NOT_START'"
            >未到达投放时间</el-tag
          >
          <el-tag type="success" v-else>未知状态</el-tag>
        </el-form-item>
      </el-form>
      <el-table
        :data="convertInfo"
        element-loading-text="加载中..."
        border
        highlight-current-row
        max-height="200"
        style="margin-bottom: 10px"
      >
        <el-table-column align="center" label="日期" prop="datadate" />
        <el-table-column align="center" label="消耗" prop="cost" />
        <el-table-column align="center" label="转化数" prop="convert" />
        <el-table-column align="center" label="转化成本" prop="convertCost" />
        <el-table-column align="center" label="点击转化率" prop="convertRate" />
        <el-table-column align="center" label="曝光" prop="showPv" />
        <el-table-column align="center" label="点击" prop="click" />
      </el-table>
      <span>创建时间: {{ planInfo.ad_create_time }}</span
      ><br />
      <span>更新时间: {{ planInfo.ad_modify_time }}</span
      ><br />
    </div>

    <el-form :model="planForm">
      <span style="color: red">
        注意:24小时内修改预算操作，不能超过20次，24小时是指自然天的24小时；
        <br />单次修改预算幅度不能低于100元（增加或者减少）;
        <br />修改后预算金额，不能低于当前已消费金额的105%，以整百单位向上取整
      </span>
      <el-form-item label="计划预算:">
        <el-input-number
          v-model="planForm.budget"
          :precision="2"
          :step="100"
          :min="0"
          :max="100000"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="计划出价:">
        <el-input-number
          v-model="planForm.bid"
          :precision="2"
          :step="5"
          :min="0.1"
          :max="10000"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="深度出价:">
        <el-input-number
          v-model="planForm.deepBid"
          :precision="2"
          :step="5"
          :min="0"
          :max="10000"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="计划状态:">
        <el-switch
          v-model="planForm.optStatus"
          active-color="#13ce66"
          active-value="enable"
          inactive-value="disable"
          inactive-color="#0C2B2E"
          active-text="开启"
          inactive-text="关闭"
        >
        </el-switch>
      </el-form-item>
    </el-form>

    <el-tag type="primary">操作历史:</el-tag>
    <el-table
      v-loading="listLoadingOp"
      :data="opHisData"
      element-loading-text="加载中..."
      stripe
      border
      fit
      highlight-current-row
      max-height="300"
      style="margin-bottom: 10px"
    >
      <el-table-column align="center" label="操作时间" prop="createdAt" />
      <el-table-column align="center" label="更新结果" prop="remark">
        <template slot-scope="props">
          <span v-html="props.row.remark"></span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="更新描述" prop="descInfo" />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="opPlan">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { fetchPlanInfo, opPutinPlan, fetchHis } from "@/api/report";

export default {
  data() {
    return {
      listLoadingOp: false,
      dialogFormVisible: false,
      updateRowData: {},
      planInfo: {},
      convertInfo: [],
      opHisData: [],
      planForm: {
        advertiserId: "",
        planId: "",
        bid: "",
        budget: "",
        status: true,
        optStatus: "", //"enable"表示启用计划, "disable"表示暂停计划
        deepBid: "",
      },
    };
  },

  created() {},

  methods: {
    APIfetchHis(planId) {
      this.listLoadingOp = true;
      fetchHis({ planId: planId }).then((resp) => {
        this.listLoadingOp = false;
        this.opHisData = resp.result.data;
      });
    },

    opPlanForm(row) {
      this.updateRowData = row;
      this.planForm.advertiserId = row.advertiser_id;
      this.planForm.planId = row.plan_id;
      fetchPlanInfo({
        advertiserId: row.advertiser_id,
        planId: row.plan_id,
      }).then((resp) => {
        this.convertInfo = resp.result.data.convertInfo;
        this.planInfo = resp.result.data.baseInfo;
        this.planForm.bid = resp.result.data.baseInfo.cpa_bid;
        this.planForm.deepBid = resp.result.data.baseInfo.deep_cpabid;
        this.planForm.budget = resp.result.data.baseInfo.budget;
        this.planForm.optStatus =
          resp.result.data.baseInfo.status === "AD_STATUS_DELIVERY_OK"
            ? "enable"
            : "disable";
      });
      this.dialogFormVisible = true;
      this.APIfetchHis(row.plan_id);
    },

    opPlan() {
      let form = {
        advertiserId: this.planForm.advertiserId,
        planId: this.planForm.planId,
      };
      if (this.planForm.bid !== this.planInfo.cpa_bid) {
        form.bid = this.planForm.bid;
      }
      if (this.planForm.budget !== this.planInfo.budget) {
        form.budget = this.planForm.budget;
      }
      let planStatus =
        this.planInfo.status === "AD_STATUS_DELIVERY_OK" ? "enable" : "disable";
      if (this.planForm.optStatus !== planStatus) {
        form.optStatus = this.planForm.optStatus;
      }
      if (this.planInfo.deep_cpabid && this.planInfo.deep_cpabid != "") {
        form.deepBid = this.planForm.deepBid;
      }

      form.history = JSON.stringify(this.planInfo);

      opPutinPlan(form)
        .then((resp) => {
          let cache = this.updateRowData;
          if (cache) {
            if (resp.result.data.optResStatus) {
              cache.opt_status =
                form.optStatus === "enable" ? "AD_STATUS_ENABLE" : "计划暂停";
            }
          }

          this.$notify({
            title: "更新提示",
            message: resp.msg,
            duration: 6000,
            dangerouslyUseHTMLString: true,
            type: "success",
          });
          this.dialogFormVisible = false;
        })
        .catch((e) => {});
    },
  },
};
</script>

<style></style>
