<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">
          <div>
            <div class="text-h7">
              {{ detailData.CategoryName }}
            </div>
          </div>
        </div>
        <q-space />
      </div>
      <div class="info-content">
        <div class="detail-info">
          <baseInfo :Data="detailData" @confirm="saveBaseInfo"></baseInfo>
        </div>
        <div class="detail-log">
          <right :Id="CategoryId"></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 {
    queryCustomerCategory,
    saveCustomerCategory
  } from "../../../api/users/user"
  import baseInfo from "./baseInfo.vue";
  import right from "./conRight.vue";
  export default {
    components: {
      baseInfo,
      right
    },
    props: {
      CategoryId: {
        type: Number,
        default: 0
      },
      auth: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        detailData: {},
        //员工列表
        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.CategoryId > 0) {
          let msg = {
            CategoryId: this.CategoryId
          };
          queryCustomerCategory(msg).then(res => {
            if (res.Code == 1) {
              console.log(res, '数据');
              this.detailData = res.Data;
            }
          });
        } else {

        }
      },
      saveBaseInfo(obj) {
        this.detailData[obj.field] = obj.val;
        console.log(this.detailData, 'this.detailData');

        let msg = {
          CategoryName: this.detailData.CategoryName,
          CatetoryType: this.detailData.CatetoryType,
          CategoryId: this.detailData.CategoryId,
          linkMan: '',
          linkTel: ''
        }
        saveCustomerCategory(msg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "数据保存成功！",
              position: "top"
            });
            this.$emit("success");
          }
        });
      },
      //删除客户
      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>