<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 class="sticky-column-table"
      separator="none" :data="dataList" :columns="columns" row-key="CustomerId">
      <template v-slot:top>
        <q-space />
        <div class="page-option">
          <q-btn color="accent" size="sm" class="q-mr-md" icon="add" @click="EditCustom(null)" label="新增客户" />
          <q-btn v-if="authObj&&authObj.isShowDownload" color="accent" class="q-mr-md" size="sm" icon="download"
            label="下载" @click="downLoadCustomer" />
        </div>
      </template>
      <template v-slot:body-cell-CategoryName="props">
        <q-td>
          <div class="CustomerName" @click="showDetail(props.row)">
            {{ props.row.CategoryName }}
            <template v-if="props.row.IsContract==1">
              <span style="color:green;">(已签约)</span>
            </template>
            <template v-if="props.row.IsContract==0">
              <span style="color:red;">(未签约)</span>
            </template>
          </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-optioned="props">
        <q-td :props="props">
          <template v-if="props.row.isCanEdit">
            <q-btn flat size="xs" icon="edit" color="accent" @click="EditCustom(props.row)" style="font-weight:400"
              label="修改" />
            <q-btn flat size="xs" icon="delete" @click="RemoveCustomer(props.row)" color="negative"
              style="font-weight:400" label="删除" />
          </template>
        </q-td>
      </template>
      <template v-slot:bottom>
        <div></div>
      </template>
    </q-table>
    <categoryEdit-form v-if="isShowCategoryForm" :customerObj="customerObj" @close="closeCustomForm"
      @success="refreshQuestion">
    </categoryEdit-form>
    <peerRight v-if="isShowDetailForm" :CategoryId="CategoryId" :isCanEdit="isCanEdit" @close="closeCustomForm"
      :auth="AuthorityObj" @success="refreshQuestion"></peerRight>
  </div>
</template>
<script>
  import {
    deleteCustomerCategory
  } from "../../api/users/user";
  import {
    EduDownLoad
  } from "../../api/common/common";
  import categoryEditForm from "../sale/categoryEdit-form";
  import peerRight from "../sale/peerInfo/peerRight";
  export default {
    props: {
      dataList: {
        type: Array,
        default: null
      },
      loading: {
        type: Boolean,
        default: false,
      },
      queryMsg: {
        type: Object,
        default: null,
      },
      authObj: {
        type: Object,
        default: null,
      }
    },
    components: {
      categoryEditForm,
      peerRight
    },
    data() {
      return {
        columns: [{
            name: "CategoryName",
            label: "同业名称",
            field: "CategoryName",
            align: "left"
          },
          {
            name: "CatetoryTypeName",
            label: "类型",
            field: "CatetoryTypeName",
            align: "left"
          },
          {
            name: "LinkManCount",
            label: "联系人数量",
            field: "LinkManCount",
            align: "left"
          },
          {
            name: "StudentCount",
            label: "客户数量",
            field: "StudentCount",
            align: "left"
          },
          {
            name: "OrderCount",
            label: "订单数量",
            field: "OrderCount",
            align: "left"
          },
          {
            name: "RebateRate",
            label: "返佣比例%",
            field: "RebateRate",
            align: "left"
          },
          {
            name: "RebateMoney",
            label: "返佣固定金额",
            field: "RebateMoney",
            align: "left"
          },
          {
            name: "CreateByName",
            label: "创建人",
            field: "CreateByName",
            align: "left"
          },
          {
            name: "CreateTime",
            label: "创建时间",
            field: "CreateTime",
            align: "left"
          },
          {
            name: "optioned",
            label: "操作",
          }
        ],
        pageMsg: {
          rowsPerPage: 12
        },
        isShowCategoryForm: false,
        customerObj: null, //传入参数
        tabId: 1,
        //权限设置
        AuthorityObj: {
          isShowEdit: false, //是否显示新增修改按钮
          isShowAudit: false, //是否显示审批
          isShowBankBook: false, //是否显示幸福存折
          isShowRebate: false //是否显示返佣
        },
        isShowDetailForm: false,
        CategoryId: 0,
        isCanEdit: false
      };
    },
    created() {

    },
    mounted() {},
    methods: {
      //下载同行
      downLoadCustomer() {
        var msg = JSON.parse(JSON.stringify(this.queryMsg));
        EduDownLoad(
          "/b2bcustomer/DownLoadCustomer",
          msg,
          "同行资料.xls"
        );
      },
      //新增或者修改客户
      EditCustom(obj) {
        if (obj) {
          this.customerObj = obj;
        } else {
          this.customerObj = null;
        }
        this.isShowCategoryForm = true;
      },
      //删除客户
      RemoveCustomer(obj) {
        let that = this;
        var message =
          "您正在进行删除【" +
          obj.CategoryName +
          "】行为，一旦执行无法找回，是否确认执行？";
        this.$q
          .dialog({
            title: "删除客户",
            message: message,
            isShowEditClassRoomForm: true,
            cancel: {
              label: "取消",
              flat: true
            },
            ok: {
              label: "确认",
              flat: true,
              focus: true
            }
          })
          .onOk(() => {
            var delMsg = {
              CategoryId: obj.CategoryId
            };
            deleteCustomerCategory(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.isShowCategoryForm = false;
        this.isShowDetailForm = false;
      },
      refreshQuestion() {
        this.$emit("success");
      },
      //客户详情
      showDetail(row) {
        this.CategoryId = row.CategoryId;
        let UserInfo = this.getLocalStorage();
        let isHavePer = false;
        if (UserInfo.ActionMenuList && UserInfo.ActionMenuList.length > 0) {
          UserInfo.ActionMenuList.forEach(x => {
            if (x.FunctionCode == "Is_EditPeer") {
              isHavePer = true;
            }
          });
        }
        //创建者为本人或者有权限 才能修改
        if (UserInfo.Id === row.CreateBy || isHavePer) {
          this.isCanEdit = true;
        } else {
          this.isCanEdit = false;
        }
        this.isShowDetailForm = true;
      }
    }
  };
</script>