<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="props">
        <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-btn flat  size="xs"
            icon="edit" color="accent" style="font-weight:400" label="编辑" @click="EditCustom(props.row)" /> -->
          <!-- <q-btn
            flat
            v-if="props.row.ApproveState == 0 && AuthorityObj.isShowEdit"
            size="xs"
            icon="delete"
            color="negative"
            style="font-weight:400"
            label="删除"
            @click="RemoveCustomer(props.row)"
          /> -->
          <!-- <q-btn
            flat
            v-if="AuthorityObj.isShowBankBook"
            size="xs"
            icon="edit"
            color="accent"
            style="font-weight:400"
            label="幸福存折"
            @click="gohappyPassbook(props.row)"
          />
          <q-btn
            flat
            v-if="AuthorityObj.isShowRebate"
            size="xs"
            icon="edit"
            color="accent"
            style="font-weight:400"
            label="返佣管理"
            @click="gohappyCommisson(props.row)"
          /> -->
        </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: "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>
