<template>
  <div class="plan-management">
    <div class="title-box-common">
      <h3>计划管理</h3>
      <a-button type="primary" @click="newAdd">新建</a-button>
    </div>
    <div class="padding-box-common">
      <div class="search-box">
        <div class="search-item">
          <span class="label">计划名称：</span>
          <a-input v-model:value="search.ad_name" placeholder="请输入计划名称或ID"></a-input>
        </div>
        <div class="search-item">
          <span class="label">所属账户：</span>
          <a-input v-model:value="search.advertiser_name" placeholder="请输入账户名称或ID"></a-input>
        </div>
        <div class="search-item">
          <span class="label">所属广告组：</span>
          <a-input v-model:value="search.campaign_name" placeholder="请输入广告组名称或ID"></a-input>
        </div>
        <div class="search-item">
          <span class="label">状态：</span>
          <a-select placeholder="请选择" style="width: 200px" v-model:value="search.status">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="DOING">下发中</a-select-option>
            <a-select-option value="FAIL">下发失败</a-select-option>
            <a-select-option value="SUCCESS">下发成功</a-select-option>
          </a-select>
        </div>
        <div class="search-item">
          <span class="label"></span>
          <a-button type="primary" @click="searchList">搜索</a-button>
          <a-button @click="resetSearch">重置</a-button>
        </div>
      </div>
      <div class="table-box">
        <a-table
          bordered
          :data-source="list"
          :columns="columns"
          rowKey="id"
          :loading="palnloading"
          :pagination="tablePageOptions"
        >
          <template #status="{ text, record }">
            <p v-if="record.status == 'SUCCESS'">下发成功</p>
            <p v-if="record.status == 'DOING'">下发中</p>
            <p v-if="record.status == 'FAIL'">下发失败</p>
          </template>

          <template #setting="{ text, record }">
            <template v-if="record.status == 'SUCCESS'">
              <a-button @click="editMatch(record)">数据</a-button>
              <a-button @click="editItem(record)">编辑</a-button>
              <a-popconfirm
                placement="top"
                ok-text="删除"
                cancel-text="取消"
                @confirm="delItem(record)"
                :title="`确认删除广告计划${record.ad_name}?`"
              >
                <a-button>删除</a-button>
              </a-popconfirm>
            </template>
            <template v-if="record.status == 'FAIL'">
              <a-popconfirm
                placement="top"
                ok-text="删除"
                cancel-text="取消"
                @confirm="delItem(record)"
                :title="`确认删除广告计划${record.ad_name}?`"
              >
                <a-button>删除</a-button>
              </a-popconfirm>
              <a-button @click="editItem(record)">编辑</a-button>
            </template>
            <template v-if="record.status == 'DOING'">
              <a-popconfirm
                placement="top"
                ok-text="删除"
                cancel-text="取消"
                @confirm="delItem(record)"
                :title="`确认删除广告计划${record.ad_name}?`"
              >
                <a-button>删除</a-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <a-modal v-model:visible="visible" title="选择模板" @ok="handleOk" okText="直接创建" width="1000px">
      <a-input-search
        style="width: 200px; margin-bottom: 10px"
        placeholder="请输入模板名称"
        @search="onSearch"
      ></a-input-search>
      <a-table
        bordered
        :data-source="templatelist"
        :columns="templateColumns"
        rowKey="id"
        :loading="loading"
        :pagination="tablePageOptions"
      >
        <template #action="{ text, record }">
          <a-button @click="useModel(record)">使用</a-button>
          <a-popconfirm
            placement="top"
            ok-text="删除"
            cancel-text="取消"
            @confirm="delModelItem(record)"
            :title="`确认删除摸版名为${record.name}?`"
          >
            <a-button>删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import usePagination from "@/hooks/usePagination";
import { getPlanList, getPlanTemplate, delPlanList, delModelItem } from "@/api";
import { PlanCloumn, PlanTemplateCloumn } from "../_pageOptions/table-put";
import { message } from 'ant-design-vue';
const PlanManagement = defineComponent({
  setup() {
    let { meta, tablePageOptions, loading } = usePagination();
    const state = reactive({
      search: {
        ad_name: "",
        advertiser_name: "",
        campaign_name: "",
        status: "",

      },
      visible: false,
      list: [],
      templatelist: [],
      columns: PlanCloumn,
      templateColumns: PlanTemplateCloumn,
      palnloading: false,
      deltext: '确认删除吗'
    });
    return { ...toRefs(state), meta, tablePageOptions, loading };
  },
  mounted() {
    this.getList();
    this.getTemplate();
  },
  methods: {
    //新建
    newAdd() {
      this.visible = true;
      this.getTemplate()
    },
    // 重置
    resetSearch() {
      this.search.ad_name = "";
      this.search.advertiser_name = "";
      this.search.campaign_name = "";
      this.search.status = "";
      this.getList()
    },
    //删除摸版列表
    delModelItem(item: any) {
      console.log(item)
      delModelItem({id:item.id}).then(() => {
            message.info('删除摸版成功')
            this.getTemplate()
      })
    },

    //删除计划item
    delItem(item: any) {
      console.log(item)
      delPlanList({ log_id: item.id }).then(() => {
        message.info('删除计划成功');
        this.getList()
      })

    },
    //搜索列表
    async searchList() {
      this.palnloading = true
      let { data, code } = await getPlanList(this.search as any);
      code == 0 ? this.palnloading = false : this.palnloading = true
      this.list = data.list
    },
    // 获取计划列表 初始化
    async getList() {
      this.palnloading = true
      let { data, code } = await getPlanList({});
      code == 0 ? this.palnloading = false : this.palnloading = true
      this.list = data.list
    },
    async getTemplate() {
      let { data, code } = await getPlanTemplate({ page: 1 });
      code == 0 ? this.palnloading = false : this.palnloading = true
      this.templatelist = data.list
    },
    //搜索摸版列表
    onSearch(vaule: string) {
      getPlanTemplate({ name: vaule }).then((res: any) => {
        let { data, code } = res
        code == 0 ? this.palnloading = false : this.palnloading = true
        this.templatelist = data.list
      })
    },
    //使用按钮跳转到新新建计划
    useModel(item: any) {
      console.log(item)
      this.$router.push({ path: "/put/plan-create/account-select", params: item })
    },



    // 直接创建
    handleOk() {
      this.$router.push("/put/plan-create");
    },
    //编辑
    editItem(item: any) {
      console.log(item)
      //跳转到编辑页面
      this.$router.push("/put/edit-plan/plan-edit?"+`advertiser_id=${item.advertiser_id}`);
    },
    //
    editMatch(item: any) {
      this.$router.push( "/put/datas/ad-plan?"+item)
    }
  },
});

export default PlanManagement;
</script>
<style lang="scss" scoped>
@import "@/assets/common-style/frame.scss";
.plan-management {
  .search-box {
    display: block;
    height: auto;
    overflow: hidden;
    .ant-btn {
      margin: 0 20px 0 0;
    }
  }
}
</style>