<style lang="scss">
  .b2bcustomlist .q-table__bottom {
    min-height: 0;
  }

  .CustomerName {
    cursor: pointer;
    color: var(--q-color-primary);
  }
</style>
<template>
  <div class="b2bcustomlist">
    <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat selection="multiple"
      :selected.sync="selection" :class="sticky" separator="none" :data="dataList" :columns="columns"
      :visible-columns="visibleColumns" row-key="CustomerId">
      <template v-slot:top>
        <q-space />
        <div class="page-option" v-if="authObj.isShowEdit">
          <q-btn color="accent" size="sm" class="q-mr-md" icon="add" @click="EditCustom(null)" label="新增客户" />
          <q-btn color="accent" size="sm" label="转交" :disable="selection.length == 0" icon="swap_horiz"
            @click="isShowTrans = true">
            <q-popup-proxy :offset="[10, 10]">
              <q-banner v-if="isShowTrans">
                <q-select style="margin-top:20px;" filled v-model="TransferMsg.EmpId" @filter="filterEmployee" use-input
                  :options="myEmployeeList" option-label="EmployeeName" option-value="Id" emit-value map-options
                  :rules="[val => !!val || '请选择接收人']" ref="transfer" />
                <q-btn label="保存" style="float:right;margin-top:15px" color="accent q-mb-lg" size="sm"
                  @click="saveTransForm" />
              </q-banner>
            </q-popup-proxy>
          </q-btn>
        </div>
      </template>
      <template v-slot:body-cell-CustomerName="props">
        <q-td>
          <div class="CustomerName" @click="showDetail(props.row)">
            {{ props.row.CustomerName }}
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-StuNum="props">
        <q-td>
          <div class="CustomerName" @click="showDetail(props.row, 2)">
            {{ props.row.StuNum }}
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-OrderNum="props">
        <q-td>
          <div class="CustomerName" @click="showDetail(props.row, 3)">
            {{ props.row.OrderNum }}
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-CustomerType="props">
        <q-td>
          <div v-if="props.row.CustomerType === 1">企业</div>
          <div v-if="props.row.CustomerType === 2">学校</div>
        </q-td>
      </template>
      <template v-slot:body-cell-optioned="props">
        <q-td :props="props">
          <q-btn flat v-if="
              (props.row.ApproveState == 0 || props.row.ApproveState == 2) &&
                authObj.isShowAudit
            " size="xs" icon="edit" color="accent" style="font-weight:400" label="客户审批"
            @click="AuditCustomer(props.row, 1)" />
        </q-td>
      </template>
      <template v-slot:bottom>
        <div></div>
      </template>
    </q-table>
    <customerEdit-form v-if="isShowCustomForm" :customerObj="customerObj" @close="closeCustomForm"
      @success="refreshQuestion">
    </customerEdit-form>
    <customerReview-form v-if="isShowRightForm" :customerObj="customerObj" @close="closeCustomForm"
      @success="refreshQuestion"></customerReview-form>
    <customerInfo v-if="isShowDetailForm" :rowId="curRowId" :tabId="tabId" :empList="employeeList"
      @close="closeCustomForm" :auth="AuthorityObj" @success="refreshQuestion"></customerInfo>
  </div>
</template>
<script>
  import {
    queryEmployee
  } from "../../api/users/user";
  import {
    setCustomerCareOf
  } from "../../api/sale/peemanagement";
  import customerEditForm from "../sale/customerEdit-form";
  import customerReviewForm from "../sale/customerReview-form";
  import customerInfo from "./b2bcustomerinfo/b2bCustomerInfo.vue";
  export default {
    props: {
      dataList: {
        type: Array,
        default: null
      },
      authObj: {
        type: Object,
        default: null
      },
      empList: {
        type: Array,
        default: () => []
      },
      visibleColumns: {
        type: Array,
        default: () => []
      },
      sticky: {
        type: String,
        default: ""
      }
    },
    components: {
      customerEditForm,
      customerReviewForm,
      customerInfo
    },
    data() {
      return {
        columns: [{
            name: "CustomerName",
            label: "同业名称",
            field: "CustomerName",
            align: "left"
          },
          {
            name: "CustomerType",
            label: "类型",
            field: "CustomerType",
            align: "left"
          },
          {
            name: "EnterpriseName",
            label: "企业/学校名称",
            field: "EnterpriseName",
            align: "left"
          },
          {
            name: "ContactNumber",
            label: "电话",
            field: "ContactNumber",
            align: "left"
          },
          {
            name: "QQ",
            label: "QQ号",
            field: "QQ",
            align: "left"
          },
          {
            name: "WeChatNo",
            label: "微信号",
            field: "WeChatNo",
            align: "left"
          },
          {
            name: "StuNum",
            label: "客户数量",
            field: "StuNum",
            align: "left"
          },
          {
            name: "OrderNum",
            label: "订单数量",
            field: "OrderNum",
            align: "left"
          },
          {
            name: "OrderSales",
            label: "交易额",
            field: "OrderSales",
            align: "left"
          },
          {
            name: "ApproveStateStr",
            label: "审核状态",
            field: "ApproveStateStr",
            align: "left"
          },

          {
            name: "CreateTimeStr",
            label: "加入时间",
            field: "CreateTimeStr",
            align: "left"
          },
          {
            name: "CreateByName",
            label: "负责人",
            field: "CreateByName",
            align: "left"
          },
          {
            name: "optioned",
            label: "操作",
            field: "QuestionId"
          }
        ],
        pageMsg: {
          rowsPerPage: 12
        },
        loading: false,
        isShowCustomForm: false,
        isShowRightForm: false,
        customerObj: null, //传入参数
        isShowDetailForm: false,
        curRowId: 0,
        //权限设置
        AuthorityObj: {
          isShowEdit: false, //是否显示新增修改按钮
          isShowAudit: false, //是否显示审批
          isShowBankBook: false, //是否显示幸福存折
          isShowRebate: false //是否显示返佣
        },
        selection: [],
        tabId: 1,
        TransferMsg: {
          CustomerIds: "",
          EmpId: ""
        },
        //员工列表
        employeeList: [],
        myEmployeeList: [],
        isShowTrans: false
      };
    },
    created() {
      this.initAuth();
      this.getEmployeeList();
    },
    mounted() {},
    methods: {
      //初始化权限
      initAuth() {
        if (this.authObj) {
          if (this.authObj.isShowEdit != null && this.authObj.isShowEdit) {
            this.AuthorityObj.isShowEdit = this.authObj.isShowEdit;
          }
          if (this.authObj.isShowAudit != null && this.authObj.isShowAudit) {
            this.AuthorityObj.isShowAudit = this.authObj.isShowAudit;
          }
          if (
            this.authObj.isShowBankBook != null &&
            this.authObj.isShowBankBook
          ) {
            this.AuthorityObj.isShowBankBook = this.authObj.isShowBankBook;
          }
          if (this.authObj.isShowRebate != null && this.authObj.isShowRebate) {
            this.AuthorityObj.isShowRebate = this.authObj.isShowRebate;
          }
        }
      },
      //新增或者修改客户
      EditCustom(obj) {
        if (obj) {
          this.customerObj = obj;
        } else {
          this.customerObj = null;
        }
        this.isShowCustomForm = true;
      },

      //客户审核
      AuditCustomer(obj, Type) {
        if (obj) {
          this.customerObj = obj;
          this.customerObj.Type = Type;
        } else {
          this.customerObj = null;
        }
        this.isShowRightForm = true;
      },
      //客户详情
      showDetail(row, tabId = 1) {
        this.curRowId = row.CustomerId;
        this.tabId = tabId;
        this.isShowDetailForm = true;
      },
      //删除客户
      RemoveCustomer(obj) {
        let that = this;
        var message =
          "您正在进行删除【" +
          obj.CustomerName +
          "】行为，一旦执行无法找回，是否确认执行？";
        this.$q
          .dialog({
            title: "删除客户",
            message: message,
            isShowEditClassRoomForm: true,
            cancel: {
              label: "取消",
              flat: true
            },
            ok: {
              label: "确认",
              flat: true,
              focus: true
            }
          })
          .onOk(() => {
            var delMsg = {
              CustomerId: obj.CustomerId
            };
            RemoveCustomer(delMsg).then(res => {
              if (res.Code == 1) {
                that.$q.notify({
                  icon: "iconfont icon-chenggong",
                  color: "accent",
                  timeout: 2000,
                  message: "操作成功",
                  position: "top"
                });
                that.refreshQuestion();
              }
            });
          });
      },
      //关闭弹窗
      closeCustomForm() {
        this.isShowCustomForm = false;
        this.isShowRightForm = false;
        this.isShowDetailForm = false;
      },
      refreshQuestion() {
        this.$emit("success");
      },
      //跳转到幸福存折
      gohappyPassbook(item) {
        this.OpenNewUrl("/sale/happyPassbook", {
          CustomerId: item.CustomerId
        });
      },
      //跳转到返佣管理
      gohappyCommisson(item) {
        this.OpenNewUrl("/sale/commsionManagement", {
          CustomerId: item.CustomerId
        });
      },
      //同业转交
      saveTransForm() {
        this.$refs.transfer.validate();
        if (this.$refs.transfer.hasError) return;
        this.TransferMsg.CustomerIds = this.selection
          .map(e => e.CustomerId)
          .toString();
        setCustomerCareOf(this.TransferMsg).then(res => {
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            color: "accent",
            timeout: 2000,
            message: "转交成功",
            position: "top"
          });
          this.isShowTrans = false;
          this.selection = [];
        });
      },
      //获取员工列表
      getEmployeeList() {
        queryEmployee({
          IsLeave: 1
        }).then(res => {
          this.employeeList = res.Data;
          this.myEmployeeList = res.Data;
        });
      },
      //筛选员工
      filterEmployee(val, update, abort) {
        update(() => {
          this.myEmployeeList = this.employeeList.filter(
            v => v.EmployeeName.indexOf(val) > -1
          );
        });
      }
    }
  };
</script>