<style lang="scss">
  .b2bcustomlist .q-table__bottom {
    min-height: 0;
  }
</style>
<template>
  <div class="b2bcustomlist">
    <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat
      class="sticky-column-table sticky-right-column-table " separator="none" :data="dataList" :columns="columns"
      row-key="name">
      <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="新增客户" />
        </div>
      </template>
      <template v-slot:body-cell-CustomerState="props">
        <q-td>
          <q-chip color="teal" text-color="white" size="sm" v-if="props.row.CustomerState==1">
            {{props.row.CustomerStateStr}}
          </q-chip>
          <q-chip color="red" text-color="white" size="sm" v-else>
            {{props.row.CustomerStateStr}}
          </q-chip>
        </q-td>
      </template>
      <template v-slot:body-cell-ApproveState="props">
        <q-td>
          <q-chip color="teal" text-color="white" size="sm" v-if="props.row.ApproveState==1">
            {{props.row.ApproveStateStr}}
          </q-chip>
          <q-chip color="red" text-color="white" size="sm" v-else>
            {{props.row.ApproveStateStr}}
          </q-chip>
        </q-td>
      </template>
      <template v-slot:body-cell-optioned="props">
        <q-td :props="props" style="width:200px;">
          <q-btn flat size="xs" icon="edit" v-if="AuthorityObj.isShowEdit" color="accent" style="font-weight:400"
            label="编辑" @click="EditCustom(props.row)" />
          <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="iconfont icon-View" color="accent" style="font-weight:400" label="查看"
            @click="AuditCustomer(props.row,2)" />
          <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>
  </div>
</template>
<script>
  import customerEditForm from '../sale/customerEdit-form';
  import customerReviewForm from '../sale/customerReview-form';
  export default {
    props: {
      dataList: {
        type: Array,
        default: null
      },
      authObj: {
        type: Object,
        default: null
      }
    },
    components: {
      customerEditForm,
      customerReviewForm
    },
    data() {
      return {
        columns: [
          {
            name: 'CustomerId',
            label: '客户编号',
            field: 'CustomerId',
            align: 'left'
          },
          {
            name: 'CustomerName',
            label: '姓名',
            field: 'CustomerName',
            align: 'left'
          },
          {
            name: 'ContactNumber',
            label: '联系电话',
            field: 'ContactNumber',
            align: 'left',
          },
          {
            name: 'Account',
            label: '账号',
            field: 'Account',
            align: 'left'
          },
          // {
          //   name: 'CustomerState',
          //   label: '账号状态',
          //   field: 'CustomerState',
          //   align: 'left'
          // },
          {
            name: 'ApproveState',
            label: '审核状态',
            field: 'ApproveState',
            align: 'left'
          },
          {
            name: 'CreateByName',
            label: '创建人',
            field: 'CreateByName',
            align: 'left'
          },
          {
            name: 'CreateTimeStr',
            label: '创建时间',
            field: 'CreateTimeStr',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'QuestionId'
          }
        ],
        pageMsg: {
          rowsPerPage: 12,
        },
        loading: false,
        isShowCustomForm: false,
        isShowRightForm: false,
        customerObj: null, //传入参数
        //权限设置
        AuthorityObj: {
          isShowEdit: false, //是否显示新增修改按钮
          isShowAudit: false, //是否显示审批
          isShowBankBook: false, //是否显示幸福存折
          isShowRebate: false, //是否显示返佣
        }
      }
    },
    created() {
      this.initAuth();
    },
    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
      },
      //删除客户
      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;
      },
      refreshQuestion() {
        this.$emit('success');
      },
      //跳转到幸福存折
      gohappyPassbook(item) {
        this.OpenNewUrl('/sale/happyPassbook', {
          CustomerId: item.CustomerId,
        });
      },
      //跳转到返佣管理
      gohappyCommisson(item) {
        this.OpenNewUrl('/sale/commsionManagement', {
          CustomerId: item.CustomerId,
        });
      },
    }
  }
</script>