<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>
      <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>
      <div class="page-content">
        <b2bcustomlist :dataList="dataList" :authObj="authObj" :loading="loading" @success="getList" :queryMsg="msg"
          :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" />
      </div>
    </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" :authObj="authObj" :queryMsg="categoryMsg"
        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>
</template>
<script>
  import {
    getAllCustomer
  } 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",
          "EnterpriseName",
          "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, //是否显示返佣,
          isShowDownload:true,//显示下载按钮
        },
        categoryMsg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          CategoryName: "", //客户名称
          CatetoryType: "", //类型
          pageCount: 0,
          IsQueryAll: 1
        }
      };
    },
    created() {

    },
    mounted() {
      this.getList();
    },
    methods: {
      //重新查询
      resetSearch() {
        this.msg.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) {
          this.msg.QCustomerState = this.tabCheck;
          getAllCustomer(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>
