<template>
  <div class="account-select">
    <a-input-search
      v-model:value="adAccountSearch"
      placeholder="请输入广告主账号"
      style="width: 200px"
      @input="onSearch"
    />
    <div style="height: 10px"></div>
    <div class="common-box">
      <div class="title-box"><h3>头条账号</h3></div>
      <div class="list-box">
        <a-radio-group @change="getAdAccountList">
          <a-radio
            v-for="item in toutiaoAccountList"
            :key="item.account_id"
            :value="item"
            :title="item.account_email"
            >{{ item.account_email }}</a-radio
          >
        </a-radio-group>
      </div>
    </div>
    <div class="common-box">
      <div class="title-box"><h3>广告主账号</h3></div>
      <div class="list-box">
        <a-empty v-if="adAccountList.length === 0" />

        <a-radio-group v-else v-model:value="selectedAccount">
          <a-radio
            v-for="item in adAccountList"
            :key="item.advertiser_id"
            :value="item"
            :title="item.advertiser_name"
            >{{ item.advertiser_name }}</a-radio
          >
        </a-radio-group>
      </div>
    </div>
    <div class="common-box">
      <div class="title-box"><h3>已选</h3></div>
      <div class="list-box">
        <a-empty v-if="!selectedAccount.advertiser_id" />
        <p v-else>
          <span
            class="selected-account"
            :title="selectedAccount.advertiser_name"
            >{{ selectedAccount.advertiser_name }}</span
          ><i class="iconfont icon-guanbi" @click="selectedAccount = {}"></i>
        </p>
        <div
          style="
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: red;
          "
          v-show="warningFlag && !selectedAccount.advertiser_id"
        >
          请选择要投放的广告主账号
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, createVNode } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { getAdvertiser } from "@/api";
import { message, Modal } from "ant-design-vue";
import Bus from "@/utils/bus";

const AccountSelect = defineComponent({
  setup() {
    const state = reactive({
      adAccountSearch: "", // 搜索框
      toutiaoAccountList: ref<any[]>([]), // 一级头条账号列表
      adAccountList: ref<any[]>([]), // 二级广告主列表
      adAccountListOrigin: ref<any[]>([]), // 二级广告主列表
      selectedAccount: { advertiser_id: 0 }, // 选中的账号
      account_id: 0, // 最终选择的广告主账户id
      warningFlag: false,
    });
    return { ...toRefs(state) };
  },
  beforeRouteLeave(to: any, from, next) {
    if (to.href.indexOf("plan-create/group-select") > -1) return next();
    Modal.confirm({
      title: "确认离开当前页面吗?",
      icon: createVNode(ExclamationCircleOutlined),
      content: createVNode(
        "div",
        { style: "color:gray;" },
        "未保存内容将会丢失"
      ),
      onOk() {
        window.localStorage.removeItem("plan-ad-account");
        next();
      },
      onCancel() {
        next(false);
      },
      class: "test",
    });
  },
  mounted() {
    this.getList();
    if (window.localStorage.getItem("plan-ad-account"))
      this.selectedAccount = JSON.parse(
        String(window.localStorage.getItem("plan-ad-account"))
      );
    Bus.$on("stepOneCheck", () => {
      let data = this.check();
      if (data.flag) Bus.$emit("stepOneBack", data.account_id);
    });
  },
  methods: {
    // 跳转前校验页面
    check() {
      //选择当前投放的账号
      if (!this.selectedAccount.advertiser_id) {
        this.warningFlag = true;
        message.warning("请选择要投放的广告主账号");
        return { flag: false, account_id: "" };
      } else {
        window.localStorage.setItem(
          "plan-ad-account",
          JSON.stringify(this.selectedAccount)
        );
        return { flag: true, account_id: this.selectedAccount.advertiser_id };
      }
    },
    onSearch() {
      //搜索广告主账号
      this.adAccountList = this.adAccountListOrigin.filter((item: any) => {
        return item.advertiser_name.indexOf(this.adAccountSearch) > -1;
      });
    },
    // 获取头条账户
    async getList() {
      let { data } = await getAdvertiser();
      this.toutiaoAccountList = data;
    },
    // 选择头条账户获取广告主账户
    getAdAccountList(item: any) {
      console.log(item)
      this.adAccountList = item.target.value.advertises;
      this.adAccountListOrigin = JSON.parse(
        JSON.stringify(item.target.value.advertises)
      );
    },
  },

  beforeUnmount() {
    Bus.$off("stepOneCheck");
  },
});

export default AccountSelect;
</script>
<style lang="scss" scoped>
// @import "@/assets/common-style/scroll-bar.scss";
.account-select {
  overflow: hidden;
  .common-box {
    width: 230px;
    height: 320px;
    border: 1px solid rgb(220, 220, 220);
    float: left;
    margin-right: 10px;
    .title-box {
      border-bottom: 1px solid rgb(220, 220, 220);
      height: 39px;
      line-height: 39px;
      padding-left: 10px;
    }
    .list-box {
      height: 260px;
      padding: 10px;
      overflow: auto;
      .ant-radio-wrapper,
      .selected-account {
        display: block;
        height: 40px;
        line-height: 40px;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        background: rgb(246, 246, 246);
        height: 30px;
        line-height: 30px;
        border: 1px solid rgb(207, 207, 207);
        cursor: pointer;
        i {
          font-size: 13px;
        }
        .selected-account {
          height: 30px;
          line-height: 30px;
          padding: 0 4px;
          width: 190px;
          float: left;
        }
      }
    }
  }
}
</style>
