<template>
  <div class="page-wrap page-wrap-account page-adplan">
    <tool-bar
      :text="['ad_id', 'advertiser_id', 'campaign_id', 'channel_id']"
      :label="['计划名称', '所属账号', '所属广告组', '所属公众号']"
      :placeholder="[
        '请输入计划名称或ID',
        '请输入账户名称或ID',
        '请输入广告组名称或ID',
        '所属公众号',
      ]"
      :defaultVal="defaultToolvalue"
      v-model:loading="inSearching"
      @confirm="onSearch"
    >
      <div class="tool-bar-item" v-if="optionList.length > 0">
        <p class="label">投放状态</p>
        <a-select class="full-width" v-model:value="currentSelect">
          <a-select-option
            v-for="item in optionList"
            :value="item.name"
            :key="item.name"
            >{{ item.desc }}</a-select-option
          >
        </a-select>
      </div>

      <div class="tool-bar-item">
        <p class="label">计划状态</p>
        <a-select class="full-width" v-model:value="currentSelectStatus">
          <a-select-option :value="null" key="3"> 不限 </a-select-option>
          <a-select-option value="1" key="1"> 启用 </a-select-option>
          <a-select-option value="0" key="0"> 不启用 </a-select-option>
        </a-select>
      </div>

      <template v-if="!!showDropDownBox">
        <div class="tool-bar-item">
          <p class="label">推广员</p>
          <a-select
            v-model:value="groupuids"
            placeholder="请选择组"
            style="width: 300px"
            @change="groupChange"
          >
            <a-select-option
              v-for="(user, index) in filter_users"
              :key="user.group_name"
              :value="user.group_id"
            >
              {{ user.group_name }}

              <div style="display:inline-block;float:right">
                是否全选
                <a-checkbox
                  v-model:checked="isCheckoutAll[index]"
                  @change.native="getCheckoutChange(index, isCheckoutAll)"
                ></a-checkbox>
              </div>
            </a-select-option>
          </a-select>

          <!-- {{ filter_users }} -->
          <!-- <a-cascader
            v-model:value="getuids"
            style="width: 100%"
            mode="multiple"
            max-tag-count="responsive"
            :options="options"
            placeholder="请选择推广员"
            @change="getPromoteUser"
            :allowClear="false"
          ></a-cascader> -->
        </div>
        <a-select
          mode="multiple"
          v-model:value="uids"
          placeholder="请选择推广员"
          style="width: 300px"
          allowClear
        >
          <a-select-option
            v-for="user in filter_user_item"
            :key="user.uid"
            :value="user.uid"
          >
            {{ user.nickname }}
          </a-select-option>
        </a-select>
        <!-- <div class="tool-bar-item">
          <a-select
            v-model:value="uidslabel"
            mode="tags"
            style="width: 100%"
            placeholder="推广员"
            allowClear
            @change="delItems"
          >
          </a-select>
        </div> -->
      </template>
    </tool-bar>

    <div class="table-filter">
      <div class="item-right">
        <span class="label">数据类型</span>
        <a-select class="full-width" v-model:value="currentStats">
          <a-select-option
            v-for="item in statsList"
            :value="item.name"
            :key="item.name"
            >{{ item.desc }}</a-select-option
          >
        </a-select>
      </div>
      <div class="item-right">
        <span class="label">筛选条件：</span>
        <a-range-picker
          v-model:value="pickerFilter"
          @change="switchDate"
          :ranges="rangePick"
          format="YYYY/MM/DD"
        />
      </div>
      <!-- <a-button type="primary" @click="openBackDrawer">
        回本数据
      </a-button> -->
      <a-button
        type="primary"
        @click="openCustomLine"
        style="margin-left: 10px"
      >
        自定义列
      </a-button>
    </div>
    <template v-if="showTable">
      <a-table
        :columns="columns"
        :data-source="list"
        :pagination="tablePageOptions"
        :loading="tableLoading"
        @change="handleTableChange"
        rowKey="id"
        size="small"
        bordered
        :scroll="{ x: 1600, y: scrollY }"
        >ad_name
        <template #switch="{ record }">
          <a-switch
            v-model:checked="record.enable"
            @change="switchMethod(record)"
          />
        </template>
        <template #external_url="{ record }">
          <p @click="onGo(record)"><a>前往落地页链接</a></p>
        </template>
        <template #ad_name="{ record }">
          <p class="small-font">{{ record.ad_name }}</p>
          <p class="small-font" style="color: rgb(160, 160, 160)">
            ID:{{ record.ad_id }}
          </p>
        </template>
        <template #advertiser_name="{ record }">
          <p class="small-font">{{ record.advertiser_name }}</p>
          <p class="small-font" style="color: rgb(160, 160, 160)">
            ID:{{ record.advertiser_id }}
          </p>
        </template>
        <template #campaign_name="{ record }">
          <p class="small-font">{{ record.campaign_name }}</p>
          <p class="small-font" style="color: rgb(160, 160, 160)">
            ID:{{ record.campaign_id }}
          </p>
        </template>
        <template #dayt="{ record }">
          <div class="flex-box line-box">
            <a-popover title="回传配置" placement="left" trigger="click">
              <template #content>
                <div class="tab-list" style="width: 220px">
                  <a-tabs size="small" @change="tabChangeBack">
                    <a-tab-pane
                      v-for="(d, i) in popForm"
                      :key="i"
                      :tab="d.desc"
                    ></a-tab-pane>
                  </a-tabs>
                </div>
                <div class="hover-content">
                  <span class="label">回传条件</span
                  ><a-select
                    style="width: 150px"
                    size="small"
                    v-model:value="popForm[currentTbs].condition"
                  >
                    <a-select-option
                      :value="item.name"
                      v-for="item in popForm[currentTbs].report_conditions"
                      :key="item"
                    >
                      {{ item.desc }}
                    </a-select-option>
                  </a-select>
                </div>
                <div class="hover-content">
                  <span class="label">回传开关</span>
                  <a-switch
                    v-model:checked="popForm[currentTbs].back_on"
                    checked-children="开"
                    un-checked-children="关"
                  />
                </div>
                <div class="hover-content">
                  <span class="label">回传比例</span
                  ><a-input
                    v-model:value="popForm[currentTbs].rate"
                    size="small"
                    style="width: 150px"
                    type="number"
                    placeholder="回传比例"
                  >
                    <template #suffix>
                      <a-tooltip title="比例0-100">
                        <info-circle-outlined
                          style="color: rgba(0, 0, 0, 0.45)"
                        />
                      </a-tooltip>
                    </template>
                  </a-input>
                </div>
                <div class="hover-content">
                  <span class="label">回传平台</span
                  ><a-input
                    v-model:value="popForm[currentTbs].back_platform"
                    disabled
                    size="small"
                    style="width: 150px"
                  />
                </div>
                <div
                  class="hover-content"
                  v-if="popForm[currentTbs].report_type == 'recharge'"
                >
                  <span class="label">回传付费最低金额</span
                  ><a-input
                    v-model:value="popForm[currentTbs].price"
                    size="small"
                    style="width: 150px"
                    type="number"
                    placeholder="回传付费最低金额"
                  />
                </div>
                <div class="hover-content">
                  <span class="label">浮动回传比例</span
                  ><a-input
                    v-model:value="popForm[currentTbs].float_rate"
                    size="small"
                    style="width: 150px"
                    type="number"
                    placeholder="浮动回传比例"
                  >
                    <template #suffix>
                      <a-tooltip title="浮动比例小于固定回传比例">
                        <info-circle-outlined
                          style="color: rgba(0, 0, 0, 0.45)"
                        />
                      </a-tooltip>
                    </template>
                  </a-input>
                </div>
                <div class="footer-slot">
                  <a-popconfirm
                    title="是否要修改回传配置?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="confirmEdit"
                  >
                    <a-button
                      type="primary"
                      size="small"
                      :disabled="!hasPopFormData"
                      @click="editBackConfig"
                    >
                      修改
                    </a-button>
                  </a-popconfirm>
                </div>
              </template>
              <p @click="getBackData(record)"><a>回传</a></p>
            </a-popover>
            <p @click="getregister(record)"><a>注册用户</a></p>
            <p @click="getmoreLineData(record)"><a>更多数据</a></p>
            <!-- <p @click="openBackDrawer(reocrd)"><a>更多数据</a></p> -->
          </div>
        </template>

        <template #cpa_bid="{ text, record }">
          <editable-cell
            :text="`${text}`"
            title="预算"
            @change="(val) => onCellChange(record, 'cpa_bid', val)"
          />
        </template>

        <template #budget="{ text, record }">
          <editable-cell
            :text="`${text}`"
            title="出价"
            @change="(val) => onCellChange(record, 'budget', val)"
          />
        </template>
        <template #opertate="{ record }">
          <p @click="openDrawer(record)"><a>操作日志</a></p>
        </template>
      </a-table>
    </template>

    <a-drawer
      title="操作日志"
      placement="right"
      :closable="false"
      v-model:visible="visible"
    >
      <put-data :id="currentId"></put-data>
    </a-drawer>
    <a-drawer
      title="回本数据"
      placement="right"
      :closable="false"
      v-model:visible="visible1"
    >
      <put-count
        :ids="backData.ids"
        :begin_date="backData.begin_date"
        :end_date="backData.end_date"
        :field="backData.field"
      ></put-count>
    </a-drawer>
    <a-drawer
      title="补充数据"
      placement="right"
      :closable="false"
      v-model:visible="lineVisable"
    >
      <put-count
        :ids="backData.ids"
        :begin_date="backData.begin_date"
        :end_date="backData.end_date"
        :field="backData.field"
      ></put-count>

      <a-descriptions bordered title="扩展数据" size="small">
        <a-descriptions-item
          :label="item.title"
          v-for="item in innerClomuns"
          :key="item"
        >
          {{ temData[item.dataIndex] }}
        </a-descriptions-item>
      </a-descriptions>
    </a-drawer>

    <a-drawer
      title="注册用户"
      placement="right"
      :closable="false"
      v-model:visible="registerVisable"
    >
      <register-datad
        :ad_lid="register.ad_lid"
        :back_platform="register.back_platform"
      ></register-datad>
    </a-drawer>

    <custom-cloumn
      :show="columnShow"
      @closeClomnShow="openCustomLine"
      @dineClounmList="dineClounmList"
    ></custom-cloumn>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  unref,
  onMounted,
  computed,
  toRef,
} from "vue";
import moment, { Moment } from "moment";
import ToolBar from "@/components/tool-bar/index.vue";
import PutData from "@/views/put/put-log.vue";
import CustomCloumn from "@/views/put/component/customClomu.vue";
import useApp from "@/hooks/useApp";
import PutCount from "@/views/put/put-ad-count.vue";
import RegisterDatad from "@/views/put/register-data.vue";
import EditableCell from "@/components/edit-cell/index.vue";
import usePagination from "@/hooks/usePagination";
import { picker } from "@/helper/config/range";
import { InfoCircleOutlined } from "@ant-design/icons-vue";
import { MutationType } from "@/store/modules/app/_type";

import {
  TableColumnOfPutAdPlan,
  ALLCloumnList,
} from "../_pageOptions/table-put";

import {
  getADPlanlist,
  getCustomColumn,
  adChangeMoney,
  adChangeCrem,
  statusChange,
  getAddStatus,
  getAdBackPlan,
  setBackConfig,
  getAdStatus,
  getadDataSum,
  getAuthorUser,
} from "@/api";

import { ADPlanItem, PageOptions, PlanBack } from "#/api";
import useAuthUser from "@/hooks/composable/useAuthUser";
import ARow from "ant-design-vue/lib/grid/Row";
import { any, arrayOf } from "vue-types";
const PutAdPlan = defineComponent({
  components: {
    ToolBar,
    EditableCell,
    PutData,
    PutCount,
    InfoCircleOutlined,
    RegisterDatad,
    CustomCloumn,
  },

  setup() {
    let { loading, meta, tablePageOptions } = usePagination();
    const { showDropDownBox, available_uids } = useAuthUser();
    const { router, route, store } = useApp();
    let list: any[] = [],
      opList: any[] = [],
      stList: any = [];
    const state = reactive({
      platform: "platform1",
      list: ref<ADPlanItem[]>([]),
      currentSelectStatus: null,
      inSearching: false,
      loading,
      currentSelect: "AD_STATUS_DELIVERY_OK",
      picker: [],
      currentId: "",
      innerClomuns: ref<any[]>([]),
      lineVisable: false,
      defaultToolvalue: {},
      tableLoading: false,
      scrollY: 600,
      visible: false,
      popconfirmShow: false,
      showPop: false,
      visible1: false,
      showTable: false,
      registerVisable: false,
      columnShow: false,
      register: {
        ad_lid: 0,
        back_platform: "",
      },
      pickerFilter: computed(() =>
        store.getters.selectTime.length > 0
          ? [
              moment(store.getters.selectTime[0]),
              moment(store.getters.selectTime[1]),
            ]
          : [moment(), moment()]
      ),
      tablePageOptions,
      columns: list,
      temData: {},
      backData: {
        ids: "",
        begin_date: "",
        end_date: "",
        field: "",
      },

      currentTbs: 0,
      hasPopFormData: false,
      popForm: [
        {
          id: 0,
          back_on: false,
          rate: 0,
          condition: "",
          price: 0,
          float_rate: 0,
        },
      ],
      isInit: false,
      cost_order: 0,
      convert_order: 0,
      convert_cost_order: 0,
      optionList: opList,
      statsList: stList,
      currentStats: "paid_order_amount",
      defaultColumns: TableColumnOfPutAdPlan,
      fields: {},
      rangePick: picker,
      uids: ref<number[]>([]),
      options: ref<any>([]),
      filter_users: ref<any>([]),
      groupuids: ref<number>(),
      // getuids: ref<number[]>([]),
      // uidslabel: ref<string[]>([]),
      // uidslabelCurrent: ref<any>([]),
      filter_user_item: ref<any>([]),
      checkAllFlag: [],
      isCheckoutAll: [],
    });
    const groupChange = (val: any) => {
      state.isCheckoutAll = [];
      state.groupuids = val;
      state.filter_users.map((item: any) => {
        if (item.group_id == val) {
          state.filter_user_item = item.users;
        }
      });
    };
    const getCheckoutChange = (index: any, ischeckList: any) => {
      state.checkAllFlag = ischeckList;
      console.log(state.checkAllFlag[index]);
      let arr = [] as any;
      if (state.checkAllFlag[index]) {
        console.log(state.filter_user_item);
        state.checkAllFlag.map((item: any) => {
          if (item) {
            state.filter_user_item.map((item: any) => {
              arr.push(item.uid);
            });
          }
        });

        state.uids = arr;
      }
      state.checkAllFlag = [];
    };
    const groupHandle = () => {
      getAuthorUser().then((res) => {
        state.filter_users = res.data.filter_users;
      });
    };
    groupHandle();
    if (
      route.query &&
      (route.query.campaign_id || route.query.channel_id || route.query.book_id)
    ) {
      state.defaultToolvalue = {
        campaign_id: route.query.campaign_id || "",
        channel_id: route.query.channel_id || "",
        book_id: route.query.book_id || "",
      };
      state.fields = {
        campaign_id: route.query.campaign_id || "",
        channel_id: route.query.channel_id || "",
        book_id: route.query.book_id || "",
      };
    }
    if (route.query.channel_id && route.query.book_id) {
      state.currentSelect = "";
    }
    if (route.query && route.query.begin_date && route.query.end_date) {
      // state.pickerFilter = [
      //   moment("route.query.begin_date" as any),
      //   moment("route.query.end_date" as any),
      // ];
      state.pickerFilter[0] = moment(route.query.begin_date as any);
      state.pickerFilter[1] = moment(route.query.end_date as any);
    }

    getAddStatus().then((res) => {
      res.data.unshift({
        name: "",
        desc: "不限",
      });
      state.optionList = res.data;
    });

    const onSearch = async (fields: Record<string, string>) => {
      try {
        const { ad_id, campaign_id, status } = fields;
        state.fields = fields;
        const data = {
          ad_id,
          status: state.currentSelect,
          campaign_id,
          page: 1,
        };
        getData(data);
      } catch (e) {
        console.log(e);
      } finally {
        state.inSearching = false;
      }
    };

    const switchDate = (date: any, dateString: any[]) => {
      if (Array.isArray(dateString) && dateString.join("")) {
        store.commit(MutationType.setSelectTime, dateString);
        onSearch(state.fields);
      }
    };

    const getData = async (query?: any) => {
      state.tableLoading = true;
      const { pickerFilter } = state;
      let [begin_dates, end_dates] = pickerFilter;
      let begin_date = moment(begin_dates).format("YYYY-MM-DD");
      let end_date = moment(end_dates).format("YYYY-MM-DD");
      let datas = Object.assign(
        {
          page: 1,
          status: "AD_STATUS_DELIVERY_OK",
          ...state.fields,
        },
        query || {},
        {
          begin_date,
          end_date,
          status: state.currentSelect,
          is_enable: state.currentSelectStatus,
        },
        {
          cost_order: state.cost_order,
          convert_order: state.convert_order,
          convert_cost_order: state.convert_cost_order,
          uids: state.uids.toString(),
        }
      );
      const { data } = await getADPlanlist(datas);
      const { data: taotals } = await getadDataSum(datas);
      let newList: any[] = data.list.map((item) => {
        item.enable = item.is_enable == 1 ? true : false;
        item.popShow = false;
        return item;
      });
      let sortList = ["cost", "convert", "convert_cost"];
      let columns = state.columns.map((r) => {
        if (r.dataIndex === "ad_name") {
          r.width = 130;
          r.children = [
            {
              title: "总计",
              dataIndex: "ad_name",
              slots: {
                customRender: "ad_name",
              },
              width: r.width,
              ellipsis: true,
            },
          ];
        }
        if (r.dataIndex == "ad_id" || r.dataIndex == "budget") {
          r.width = 180;
        }
        if (Object.keys(taotals).includes(r.dataIndex)) {
          r.children = [
            {
              title: taotals[r.dataIndex],
              dataIndex: r.dataIndex,
              width: r.width,
              ellipsis: true,
              sorter: sortList.includes(r.dataIndex) ? true : false,
              sortDirections: ["descend", "ascend", false],
            },
          ];
        }
        return r;
      });
      state.showTable = true;
      state.columns = columns;
      state.list = newList;
      meta.value = data.meta;
      state.inSearching = false;
      state.tableLoading = false;
    };

    getAdStatus().then((res) => {
      state.statsList = res.data;
    });
    getCustomColumn().then((res) => {
      let columns: any[] = [];
      let blackList = [
        "email",
        "ad_name",
        // "account_name",
        // "ad_id",
        "delivery_platform",
      ];
      let extendList = [
        "campaign_name",
        "landing_type",
        "start_end_time",
        "pricing",
        "promotion_type",
        "delivery_range",
        "inventory_type",
        "convert_id",
        "external_actions",
        "ad_create_time",
        "cost_protect_status",
        "learning_phase",
      ];
      res.data.map(
        (item: { desc: string; name: string; width?: number | string }) => {
          let lolumnItem: {
            title: string;
            dataIndex: string;
            slots?: any;
            width?: string | number;
            sorter?: boolean;
            ellipsis?: boolean;
            children?: any;
          } = {
            title: item.desc,
            dataIndex: item.name,
            width: item.width ? item.width : 95,
            ellipsis: true,
          };

          if (item.name == "external_url") {
            lolumnItem.slots = { customRender: "external_url" };
          }

          if (item.name == "cpa_bid") {
            lolumnItem.slots = { customRender: item.name };
            lolumnItem.width = 130;
          }
          if (item.name == "budget") {
            lolumnItem.slots = { customRender: item.name };
          }
          // 所属广告组插槽
          if (item.name == "campaign_name") {
            lolumnItem.slots = { customRender: item.name };
          }
          // 所属账户插槽
          if (item.name == "advertiser_name") {
            lolumnItem.slots = { customRender: item.name };
          }
          if (extendList.includes(item.name)) {
            state.innerClomuns.push(lolumnItem);
          }

          columns.push(lolumnItem);
        }
      );

      let newColunms = columns.filter(
        (item) => !blackList.includes(item.dataIndex)
      );

      state.columns = [];
      state.columns.push(...state.defaultColumns);
      state.columns.push(...newColunms);
      state.columns.push({
        title: "操作记录",
        dataIndex: "opertate",
        slots: { customRender: "opertate" },
        width: 100,
      });
      state.columns.push({
        title: "日志",
        dataIndex: "opertate",
        fixed: "right",
        slots: { customRender: "dayt" },
        width: 230,
      });
    });
    // const getPromoteUser = (val: any, selectedOptions: any) => {
    //   if (val) {
    //     state.uids.push(val.slice(-1));
    //     state.uidslabelCurrent.push(selectedOptions[1]);
    //     state.uidslabel.push(selectedOptions[1].label);
    //   }
    //   console.log(state.uids, "state.uids");
    // };
    //删除监听
    // const delItems = (value: any) => {
    //   if (!value[0]) {
    //     state.uids = [];
    //   }
    //   let arr = [] as any;
    //   state.uidslabelCurrent.map((item: any) =>
    //     value.map((i: any) => {
    //       if (i == item.label) {
    //         console.log(item.value);
    //         arr.push(item.value);
    //       }
    //     })
    //   );
    //   state.uids = unique(arr) as any;
    // };
    //去重
    // const unique = (arr: any) => {
    //   if (!Array.isArray(arr)) {
    //     console.log("type error!");
    //     return;
    //   }
    //   return Array.from(new Set(arr));
    // };

    const setSateSwitch = (val: string, name: string) => {
      state.cost_order = 0;
      state.convert_order = 0;
      state.convert_cost_order = 0;
      switch (val) {
        case "ascend":
          (state as any)[name] = 2;
          break;
        case "descend":
          (state as any)[name] = 1;
          break;
        default:
          (state as any)[name] = 0;
      }
    };

    const handleTableChange = (
      pagination: PageOptions,
      filters: any,
      sorter: any
    ) => {
      if (sorter.columnKey == "cost") {
        setSateSwitch(sorter.order, "cost_order");
      }
      if (sorter.columnKey == "convert") {
        setSateSwitch(sorter.order, "convert_order");
      }
      if (sorter.columnKey == "convert_cost") {
        setSateSwitch(sorter.order, "convert_cost_order");
      }

      const { current, pageSize, total } = pagination;
      getData({
        campaign_id: route.query?.campaign_id ?? "",
        channel_id: route.query?.channel_id ?? "",
        book_id: route.query?.book_id ?? "",
        page: current,
      });
    };

    onMounted(() => {
      setTimeout(() => {
        getData({
          campaign_id: route.query?.campaign_id ?? "",
          channel_id: route.query?.channel_id ?? "",
          book_id: route.query?.book_id ?? "",
          current: 1,
        });
      }, 200);
    });

    return {
      ...toRefs(state),
      showDropDownBox,
      available_uids,
      handleTableChange,
      onSearch,
      switchDate,
      getCheckoutChange,
      groupChange,
    };
  },
  mounted() {
    let winHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    this.scrollY = winHeight - 352;
  },
  methods: {
    moment,
    onGo(record: any) {
      window.open(record.external_url);
    },
    getTest() {},
    openDrawer(record: any) {
      this.visible = true;
      this.currentId = record.ad_id;
    },
    handleVisibleChange(visibale: boolean) {
      if (!visibale) {
        this.popconfirmShow = false;
        return;
      }
      if (!this.hasPopFormData) {
        this.popconfirmShow = false;
      } else {
        this.popconfirmShow = true;
      }
    },
    getmoreLineData(record: any) {
      let [begin_dates, end_dates] = this.pickerFilter;
      let begin_date = moment(begin_dates).format("YYYY-MM-DD");
      let end_date = moment(end_dates).format("YYYY-MM-DD");
      this.backData.ids = record.id;
      this.backData.begin_date = begin_date;
      this.backData.end_date = end_date;
      this.backData.field = this.currentStats;
      this.lineVisable = true;
      this.temData = record;
    },
    confirmEdit() {
      let { id, back_on, rate, condition, price, float_rate } = this.popForm[
        this.currentTbs
      ];
      if (float_rate && float_rate >= rate) {
        this.$message.error("浮动比例必须小于固定回传比例");
        return;
      }

      let data = {
        id,
        back_on: Number(back_on),
        rate,
        condition,
        price,
        float_rate,
      };

      setBackConfig(data).then((res) => {
        this.$message.success("修改成功！");
      });
    },
    getregister(record: any) {
      this.register.ad_lid = record.id;
      this.register.back_platform = record.delivery_platform;

      this.registerVisable = true;
    },
    onCellChange(record: any, dataIndex: string, value: string) {
      let ad_id = record.ad_id;
      if (dataIndex == "cpa_bid") {
        adChangeCrem({ ad_id, bid: Number(value) })
          .then((res) => {
            this.$message.success("修改成功！");
          })
          .catch((e) => {
            //location.reload();
          });
      }
      if (dataIndex == "budget") {
        adChangeMoney({ ad_id, budget: Number(value) })
          .then((res) => {
            this.$message.success("修改成功！");
          })
          .catch((e) => {
            //location.reload();
          });
      }
    },
    tabChangeBack(key: number) {
      this.currentTbs = key;
    },
    editBackConfig() {},
    switchMethod(record: any) {
      let ad_id = record.ad_id;
      statusChange({
        ad_id,
        status: record.enable ? "disable" : "enable",
      }).then((res) => {
        this.$message.success("修改广告状态成功！");
      });
    },
    openBackDrawer(record: any) {
      this.visible1 = true;
    },
    getBackData(record: any) {
      getAdBackPlan({
        ad_lid: record.id,
        back_platform: record.delivery_platform,
      }).then((res) => {
        let list = res.data.map((r: PlanBack) => {
          r.price = r.extra?.price;
          r.float_rate = r.extra?.float_rate;
          r.back_on = !!Number(r.back_on);
          return r;
        });
        list.length > 0
          ? (this.hasPopFormData = true)
          : (this.hasPopFormData = false);
        this.popForm = list;
      });
    },
    openCustomLine() {
      this.columnShow = !this.columnShow;
    },
    dineClounmList() {
      setTimeout(() => {
        location.reload();
      }, 1500);
    },
  },
});

export default PutAdPlan;
</script>
<style lang="scss">
.table-filter {
  display: flex;
  justify-content: flex-end;
  padding: 5px 0 15px;
  align-items: center;
}
.ant-drawer-content-wrapper {
  width: 80vw !important;
}
.item-right {
  margin-right: 10px;
  display: flex;
  align-items: center;
  .ant-select {
    width: 100px;
  }
  .label {
    display: inline-block;
    min-width: 80px;
  }
}
.line-box {
  > p {
    margin-left: 10px;
  }
}
.hover-content {
  margin: 8px 0 5px;
  display: flex;
  align-items: center;
  .label {
    padding-right: 15px;
    display: inline-block;
    max-width: 72px;
    width: 72px;
  }
  .ant-switch {
    width: 50px;
  }
}
.footer-slot {
  margin-top: 10px;
  button {
    margin-right: 10px;
  }
}
</style>
