<style>
  .page-content p {
    margin: 0 !important;
  }

  .quetion_Title {
    background: transparent !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 400px;
  }
</style>
<template>
  <div class="page-body">
    <div class="page-content">
      <div>
        <q-tabs style="margin-bottom:20px;" v-model="tabCheck" @input="resetSearch()" narrow-indicator dense
          align="left" class="text-primary">
          <q-tab :ripple="false" :name="1" label="联系人" />
          <q-tab :ripple="false" :name="2" label="同行管理" />
        </q-tabs>
      </div>
      <template v-if="tabCheck==1">
        <div class="page-search row items-center">
          <div class="col row wrap q-mr-lg q-col-gutter-md">
            <div class="col-3">
              <q-input @input="resetSearch" dense filled clearable v-model="msg.CustomerName" label="联系人" maxlength="20" />
            </div>
            <div class="col-3">
              <q-input @input="resetSearch" dense filled clearable v-model="msg.CategoryName" label="同行名称" maxlength="20" />
            </div>
            <div class="col-3">
              <q-input @input="resetSearch" dense filled clearable v-model="msg.ContactNumber" label="电话" maxlength="20" />
            </div>
            <div class="col-3">
              <q-select @input="resetSearch" dense clearable filled v-model="msg.ApproveState" :options="ApproveStateList"
                emit-value map-options label="审核状态" />
            </div>
          </div>
        </div>
        <b2bcustomlist :dataList="dataList" :authObj="authObj" :loading="loading" @success="getList"
          :visibleColumns="visibleColumns" sticky="sticky-tow-column-table sticky-right-column-table"></b2bcustomlist>
        <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
          :input="true" @input="changePage" />
      </template>
      <template v-if="tabCheck==2">
         <div class="page-search row items-center">
          <div class="col row wrap q-mr-lg q-col-gutter-md">
            <div class="col-3">
              <q-input @input="resetSearch" dense filled clearable v-model="categoryMsg.CategoryName" label="同业名称" maxlength="20" />
            </div>
          </div>
        </div>
        <customcategorylist :dataList="dataList" :loading="loading" @success="getList"
          sticky="sticky-tow-column-table sticky-right-column-table">
        </customcategorylist>
        <q-pagination class="full-width justify-end" v-model="categoryMsg.pageIndex" color="primary"
          :max="categoryMsg.pageCount" :input="true" @input="changeCategoryPage" />
      </template>
    </div>
  </div>
</template>
<script>
  import {
    GetCustomerPage_v2,
    RemoveCustomer
  } from "../../api/sale/peemanagement";
  import {
    queryCustomerCategoryPage
  } from "../../api/users/user";
  import b2bcustomlist from "../../components/sale/b2bcustomlist";
  import customcategorylist from "../../components/sale/customcategorylist"
  export default {
    meta: {
      title: "同行管理"
    },
    components: {
      b2bcustomlist,
      customcategorylist
    },
    data() {
      return {
        pageCount: 0,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          CustomerName: "", //客户名称
          ContactNumber: "", //联系电话
          ApproveState: "", //审核状态
          QCustomerState: "", //账号状态
          CategoryName:"",//同业名称
        },
        loading: false,
        visibleColumns: [
          "CustomerName",
          "CustomerTypeName",
          "CategoryName",
          "ContactNumber",
          "StuNum",
          "OrderNum",
          "OrderSales",
          "ApproveStateStr",
          "CreateByName",
          "CreateTimeStr",
          "QQ",
          "WeChatNo",
        ],
        tabCheck: 1,
        //审核状态列表
        ApproveStateList: [{
            label: "通过",
            value: "1"
          },
          {
            label: "拒绝",
            value: "2"
          }
        ],
        dataList: [],
        //判断显示
        authObj: {
          isShowEdit: true, //显示新增、修改、删除
          isShowBankBook: true, //显示幸福存折
          isShowRebate: true //是否显示返佣
        },
        categoryMsg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          CategoryName: "", //客户名称
          CatetoryType: "", //类型
          pageCount: 0,
          IsQueryAll: 0
        },
      };
    },
    created() {},
    mounted() {
      this.getList();
    },
    methods: {
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.categoryMsg.pageIndex = 1;
        this.getList();
      },
      //联系人翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //同行翻页
      changeCategoryPage(val) {
        this.categoryMsg.pageIndex = val;
        this.getList();
      },
      //获取分页数据
      getList() {
        this.loading = true;
        this.dataList = [];
        if (this.tabCheck == 1) {
          GetCustomerPage_v2(this.msg)
            .then(res => {
              this.dataList = res.Data.PageData;
              this.loading = false;
              this.pageCount = res.Data.PageCount;
            })
            .catch(() => {
              this.loading = false;
            });
        } else if (this.tabCheck == 2) {
          queryCustomerCategoryPage(this.categoryMsg).then(res => {
            this.dataList = res.Data.PageData;
            this.loading = false;
            this.categoryMsg.pageCount = res.Data.PageCount;
          });
        }
      }
    }
  };
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>