<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-row class="r1">
        <a-col :span="8">
          <div class="choose-site">
            <span class="t1">站点：</span>
            <select-site @set-site-info="changeSite" select-width="100%"/>
          </div>
        </a-col>
        <!--          <a-col span="8">-->
        <!--            <span class="t1">套餐：</span>-->
        <!--              <a-select-->
        <!--                placeholder="请选择套餐"-->
        <!--                @change="changeSeoPlans"-->
        <!--                v-model="queryParam.historyId">-->
        <!--                <a-select-option-->
        <!--                  v-for="(data,index) in planList"-->
        <!--                  :key="index"-->
        <!--                  :value="data.subscriptionId"-->
        <!--                >-->
        <!--                  {{ data.planName }}-->
        <!--                </a-select-option>-->
        <!--              </a-select>-->
        <!--          </a-col>-->
        <!--          <a-col span="8" v-if=" marketPlanInfo.domain !== null">-->
        <!--            <span class="t1">域名：</span>-->
        <!--              {{ marketPlanInfo.domain }}-->
        <!--          </a-col>-->
      </a-row>
    </div>
    <!-- 查询区域-END -->
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
        </a-button>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出
        </a-button>
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">
          导入
        </j-upload-button>
        <a-button type="primary" preIcon="ant-design:download-outlined" @click="downloadTemplate">
          下载导入模板
        </a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown>
        <!-- 高级查询 -->
        <!--        <super-query :config="superQueryConfig" @search="handleSuperQuery" />-->
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)"
                     :dropDownActions="getDropDownAction(record)" />
      </template>
      <!--字段回显插槽-->
      <template v-slot:bodyCell="{ column, record, index, text }">
        <a-radio-group v-if="column.key === 'keywordType'" button-style="solid"
                       @change="onchange($event,record.id)" :value="record.keywordType">
          <a-radio-button :value=1>
            指定词
          </a-radio-button>
          <a-radio-button :value=2>
            关键词
          </a-radio-button>
        </a-radio-group>
      </template>
      <template #positionUrl="{ text }">
        <a v-if="text !== null && text !== undefined" :href=text
           target="_blank">{{ text.replace("https://", "").replace("http://", "") }}</a>
        <a v-else>-</a>
      </template>

      <template #priority="{ text }">
        <a-tag color="#f50" v-if="text == 1">高</a-tag>
        <a-tag color="#108ee9" v-if="text == 2">中</a-tag>
        <a-tag color="#87d068" v-if="text == 3">低</a-tag>
      </template>

      <template #prioritySlot="{ record, text }">
        <a-radio-group button-style="solid" @change="onPriorityChange($event, record.id)"
                       :value="text">
          <a-radio-button :value="1">
            高
          </a-radio-button>
          <a-radio-button :value="2">
            中
          </a-radio-button>
          <a-radio-button :value="3">
            低
          </a-radio-button>
        </a-radio-group>
      </template>
      <template #createTime="{ text }">

      </template>
    </BasicTable>

    <!-- 表单区域 -->
    <SeoKeywordsModal @register="registerModal" @success="handleSuccess"></SeoKeywordsModal>
  </div>
</template>

<script lang="ts" name="serp-seoKeywords" setup>
import { ref, reactive, computed, unref } from "vue";
import { BasicTable, useTable, TableAction } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import SeoKeywordsModal from "./components/SeoKeywordsModal.vue";
import { columns, searchFormSchema, superQuerySchema } from "./SeoKeywords.data";
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from "./SeoKeywords.api";
import SelectSite from "@/components/Adweb/selectSite.vue";

const queryParam = reactive<any>({});
queryParam.siteCode = localStorage.getItem('siteCode')!;
//注册model
const [registerModal, { openModal }] = useModal();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    title: "关键词",
    api: list,
    columns,
    canResize: false,
    formConfig: {
      //labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
      showAdvancedButton: true,
      fieldMapToNumber: [],
      fieldMapToTime: []
    },
    actionColumn: {
      width: 120,
      fixed: "right"
    },
    beforeFetch: (params) => {
      return Object.assign(params, queryParam);
    }
  },
  exportConfig: {
    name: "关键词",
    url: getExportUrl,
    params: queryParam
  },
  importConfig: {
    url: getImportUrl,
    success: handleSuccess
  }
});

const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

/**
 * 新增事件
 */
function handleAdd() {
  openModal(true, {
    isUpdate: false,
    showFooter: true
  });
}

/**
 * 编辑事件
 */
function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: true
  });
}

/**
 * 详情
 */
function handleDetail(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: false
  });
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteOne({ id: record.id }, handleSuccess);
}

/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}

/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: "编辑",
      onClick: handleEdit.bind(null, record)
    }
  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record) {
  return [
    {
      label: "删除",
      popConfirm: {
        title: "是否确认删除",
        confirm: handleDelete.bind(null, record),
        placement: "topLeft"
      }
    }
  ];
}

function onPriorityChange($event, id) {
  // postAction('/serp/seoKeywords/changePriority' + '?id=' + id + '&value=' + $event.target.value).then(function(res) {
  //   if (res.code === 200) {
  //     $message.success('优先级更改成功！')
  //     loadData()
  //   } else {
  //     $message.error('优先级更改失败！')
  //     return
  //   }
  // })
}

//关键词指定
function onchange($event, id) {

  // let that = this
  // postAction(url.changeTypeUrl + '?id=' + id + '&type=' + $event.target.value).then(function(res) {
  //   if (res.code === 200) {
  //     $message.success('关键词类型更改成功！')
  //     loadData()
  //   } else {
  //     $message.error(res.message)
  //     return
  //   }
  // })
}

//切换站点
function changeSite(selectedSiteInfo: any) {
  queryParam.siteCode = selectedSiteInfo.code;
  handleSuccess()
}

//下载模板
function downloadTemplate() {
  return window.open("/adwebv21/uploadDemo/关键词导入模版表.xlsx", "_self");
}
</script>

<style scoped>
.r1 {
  margin-left: 20px;
  margin-top: 20px;
  .choose-site {
    display: flex;
  }

  .t1 {
    font-size: 18px;
  }

  .ant-calendar-picker {
    margin-right: 20px;
  }
}
</style>
