<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="6">
            <a-form-item label="行业">
              <j-tree-select
                v-model="queryParam.industry"
                ref="treeSelect"
                placeholder="请选择行业"
                dict="sys_category,name,id"
                pidField="pid"
                pidValue="67d69117968be1eecb1e705b399b9d93">
              </j-tree-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-form-item label="广告主公司">
              <a-select
                showSearch
                v-model="queryParam.company"
                placeholder="请输入公司名称"
                :defaultActiveFirstOption="false"
                :showArrow="false"
                :filterOption="false"
                @search="handleCompanySearch"
                @change="handleCompanyChange"
                :notFoundContent="null"
              >
                <a-select-option v-for="d in companyData" :key="d.value">{{d.text}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-form-item label="推广产品">
              <a-select
                showSearch
                v-model="queryParam.product"
                placeholder="请输入产品名称"
                :defaultActiveFirstOption="false"
                :showArrow="false"
                :filterOption="false"
                @search="handleProductSearch"
                @change="handleProductChange"
                :notFoundContent="null"
              >
                <a-select-option v-for="d in productData" :key="d.value">{{d.text}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="6" :sm="6">
            <a-form-item label="快手ID">
              <a-input placeholder="请输入快手ID" v-model="queryParam.ksid"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-form-item label="快手昵称">
              <a-input placeholder="请输入快手昵称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-form-item label="完整度">
              <a-radio-group v-model="queryParam.dataProcess">
                <a-radio-button value="full">完整</a-radio-button>
                <a-radio-button value="industry">缺失行业</a-radio-button>
                <a-radio-button value="company">缺失企业</a-radio-button>
                <a-radio-button value="product">缺失产品</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="6" :sm="6">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
<!--    <div class="table-operator">-->
<!--      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
<!--    </div>-->

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <kuaishouAdAccount-modal ref="modalForm" @ok="modalFormOk"></kuaishouAdAccount-modal>
  </a-card>
</template>

<script>
  import KuaishouAdAccountModal from './modules/KuaishouAdAccountModal'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction} from '@/api/manage'
  import JTreeSelect from '@/components/jeecg/JTreeSelect'
  import ARow from "ant-design-vue/es/grid/Row";
  let timeout;
  let currentValue;
  function fetch(value, callback) {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
    currentValue = value;

    function fake() {
    }

    timeout = setTimeout(fake, 300);
  }
  export default {
    name: "KuaishouAdAccountList",
    mixins: [JeecgListMixin],
    components: {
      ARow,
      KuaishouAdAccountModal,
      JTreeSelect
    },
    data() {
      return {
        description: '快手广告主信息管理页面',
        // 表头
        columns: [
          {
            title: '快手ID',
            align: "center",
            dataIndex: 'ksid'
          },
          {
            title: '快手广告主ID',
            align: "center",
            dataIndex: 'kaid'
          },
          {
            title: '快手昵称',
            align: "center",
            dataIndex: 'name'
          },
          {
            title: '行业分类',
            align: "center",
            dataIndex: 'industryCategory'
          },
          {
            title: '一级行业',
            align: "center",
            dataIndex: 'firstIndustry'
          },
          {
            title: '二级行业',
            align: "center",
            dataIndex: 'secondIndustry'
          },
          {
            title: '广告主企业名称',
            align: "center",
            dataIndex: 'company'
          },
          {
            title: '推广产品',
            align: "center",
            dataIndex: 'product'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        url: {
          list: "/ctop/kuaishou/advertiser/list",
          delete: "/ctop/kuaishou/advertiser/delete",
          deleteBatch: "/ctop/kuaishou/advertiser/deleteBatch",
          exportXlsUrl: "/ctop/kuaishou/advertiser/exportXls",
          importExcelUrl: "/ctop/kuaishou/advertiser/importExcel",
          companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
          productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
        },
        queryParam:{
          dataProcess:'full'
        },
        companyData: [],
        productData: [],
        value: undefined,
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    methods: {
      handleProductSearch(value) {
        getAction(this.url.productSugestUrl, {product: value})
          .then((res) => {
            console.log(res)
            if (currentValue === value) {
              const result = res.result;
              const data = [];
              result.forEach((r) => {
                data.push({
                  value: r,
                  text: r,
                });
              });
              this.productData = data
            }
          });
        fetch(value);
      },
      handleProductChange(value) {
        this.value = value
        fetch(value, data => this.productData = data);
      },
      handleCompanySearch(value) {
        getAction(this.url.companySugestUrl, {company: value})
          .then((res) => {
            if (currentValue === value) {
              const result = res.result;
              const data = [];
              result.forEach((r) => {
                data.push({
                  value: r,
                  text: r,
                });
              });
              this.companyData = data
            }
          });
        fetch(value);
      },
      handleCompanyChange(value) {
        this.value = value
        fetch(value, data => this.companyData = data);
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>