<template>
  <q-dialog
    v-model="persistent"
    maximized
    full-height
    seamless
    position="right"
    @hide="closeAuditCustomerForm"
  >
    <div class="info-content-component">
      <div class="info-head flex  items-center">
        <div class="flex items-center">
          <q-img
            :src="detailData.WeChatPhoto"
            :ratio="1"
            width="60px"
            class="q-mr-md"
          />
          <div>
            <div class="text-weight-thin" style="font-size:10px">
              微信名
            </div>
            <div class="text-h6">
              {{ detailData.WeChatName }}
            </div>
          </div>
        </div>
        <q-space />
        <!-- && AuthorityObj.isShowEdit -->
        <q-btn
          size="sm"
          icon="delete"
          color="accent"
          label="删除"
          class="q-mr-md"
          v-if="detailData.ApproveState == 0"
          @click="RemoveCustomer"
        />
        <q-btn
          color="accent"
          size="sm"
          label="转交"
          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>
      <div class="info-content">
        <div class="detail-info">
          <baseInfo :Data="detailData" @confirm="saveBaseInfo"></baseInfo>
        </div>
        <div class="detail-log">
          <right :Id="rowId" :tabId="tabId"></right>
        </div>
      </div>
    </div>
    <div
      class="dialog-out-close"
      @click="closeAuditCustomerForm"
      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;"
    >
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>
<script>
import { GetCustomer, SetCustomer ,RemoveCustomer,setCustomerCareOf} from "../../../api/sale/peemanagement";
import baseInfo from "./baseInfo.vue";
import right from "./conRight.vue";
export default {
  components: {
    baseInfo,
    right
  },
  props: {
    rowId: {
      type: Number,
      default: 0
    },
    auth: {
      type: Object,
      default: null
    },
    empList: {
      type: Array,
      default: () => []
    },
    tabId: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      persistent: true,
      detailData: {
        CustomerId: 0,
        CustomerName: "",
        ContactNumber: "",
        ApproveState:0,
        Sex: 1,
        Fax: "",
        QQ: "",
        WeChatNo:"",
        Email: "",
        Address: "",
        Account: "",
        Remark: "",
        OpenId: "",
        UnionId: "",
        WeChatName: "",
        WeChatPhoto: "",
        CustomerType: 1,
        EnterpriseName: "",
        CategoryId:''
      },
      //员工列表
      employeeList: [],
      myEmployeeList: [],
      isShowTrans: false,
      TransferMsg: {
        CustomerIds: "",
        EmpId: ""
      }
    };
  },
  mounted() {
    this.initObj();
    this.employeeList = this.empList;
    this.myEmployeeList = this.empList;
  },
  methods: {
    //关闭弹窗
    closeAuditCustomerForm() {
      this.$emit("close");
      this.persistent = false;
    },
    //初始化表单
    initObj() {
      if (this.rowId > 0) {
        let msg = {
          CustomerId: this.rowId
        };
        GetCustomer(msg).then(res => {
          if (res.Code == 1) {
            let tempData = res.Data;
            this.detailData.CustomerId = tempData.CustomerId;
            this.detailData.ApproveState = tempData.ApproveState;
            this.detailData.CustomerName = tempData.CustomerName;
            this.detailData.ContactNumber = tempData.ContactNumber;
            this.detailData.Sex = tempData.Sex;
            this.detailData.Fax = tempData.Fax;
            this.detailData.QQ = tempData.QQ;
            this.detailData.WeChatNo = tempData.WeChatNo;
            this.detailData.Email = tempData.Email;
            this.detailData.Address = tempData.Address;
            this.detailData.Account = tempData.Account;
            this.detailData.Remark = tempData.Remark;
            this.detailData.OpenId = tempData.OpenId;
            this.detailData.UnionId = tempData.UnionId;
            this.detailData.WeChatName = tempData.WeChatName;
            this.detailData.WeChatPhoto = tempData.WeChatPhoto;
            this.detailData.CustomerType = tempData.CustomerType;
            this.detailData.EnterpriseName = tempData.EnterpriseName;
            this.detailData.CategoryId = tempData.CategoryId;
          }
        });
      } else {
        this.detailData.CustomerId = 0;
        this.detailData.ApproveState =0
        this.detailData.CustomerName = "";
        this.detailData.ContactNumber = "";
        this.detailData.Sex = 1;
        this.detailData.Fax = "";
        this.detailData.QQ = "";
        this.detailData.WeChatNo ="";
        this.detailData.Email = "";
        this.detailData.Address = "";
        this.detailData.Account = "";
        this.detailData.Remark = "";
        this.detailData.OpenId = "";
        this.detailData.UnionId = "";
        this.detailData.WeChatName = "";
        this.detailData.WeChatPhoto = "";
        this.detailData.CustomerType = 1;
        this.detailData.EnterpriseName = "";
        this.detailData.CategoryId = "";
      }
    },
    saveBaseInfo(obj) {
      this.detailData[obj.field] = obj.val;
      SetCustomer(this.detailData).then(res => {
        if (res.Code == 1) {
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            color: "accent",
            timeout: 2000,
            message: "数据保存成功！",
            position: "top"
          });
          this.$emit("success");
        }
      });
    },
    //同业转交
    saveTransForm() {
      this.$refs.transfer.validate();
      if (this.$refs.transfer.hasError) return;
      this.TransferMsg.CustomerIds = this.rowId;
      setCustomerCareOf(this.TransferMsg).then(res => {
        this.$q.notify({
          icon: "iconfont icon-chenggong",
          color: "accent",
          timeout: 2000,
          message: "转交成功",
          position: "top"
        });
        this.isShowTrans = false;
        this.$emit("success");
      });
    },
    //筛选员工
    filterEmployee(val, update, abort) {
      update(() => {
        this.myEmployeeList = this.employeeList.filter(
          v => v.EmployeeName.indexOf(val) > -1
        );
      });
    },
    //删除客户
    RemoveCustomer(obj) {
      let that = this;
      var message =
        "您正在进行删除【" +
        this.detailData.CustomerName +
        "】行为，一旦执行无法找回，是否确认执行？";
      this.$q
        .dialog({
          title: "删除客户",
          message: message,
          isShowEditClassRoomForm: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        })
        .onOk(() => {
          var delMsg = {
            CustomerId: this.detailData.CustomerId
          };
          RemoveCustomer(delMsg).then(res => {
            if (res.Code == 1) {
              that.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "操作成功",
                position: "top"
              });
               that.$emit("success");
               that.closeAuditCustomerForm()
            }
          });
        });
    },
  }
};
</script>
<style lang="scss" scoped>
.info-content-component {
  display: flex;
  flex-direction: column;
  width: 1010px;
  padding: 15px 17px;
  background-color: #f4f4f6;
  overflow: auto;
  box-sizing: border-box;

  .info-head {
    background-color: #fff;
    border-radius: 8px;
    padding: 22px;
  }

  .info-content {
    flex: 1;
    display: flex;
    margin-top: 17px;
    overflow: hidden;

    .detail-info {
      flex-shrink: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      width: 350px;
      height: 100%;
      margin-right: 13px;
      background-color: #fff;
      border-radius: 8px 8px 0 0;
    }

    .detail-log {
      width: 100%;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 8px 8px 0 0;
      overflow: hidden;
    }
  }
}
</style>
