<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" style="justify-content:space-between;">
        <div class="text-h7">
          {{ detailData.CategoryName }}
        </div>
        <div>
          <q-btn
          color="accent"
          size="sm"
          v-if="isCanEdit"
          label="合并"
          icon="compare_arrows"
          @click="isShowTrans = true"
        >
          <q-popup-proxy :offset="[10, 10]">
            <q-banner v-if="isShowTrans">
              <q-select
                style="margin-top:20px;"
                filled
                v-model="mergeMsg.NewCategoryId"
                @filter="filterFn"
                use-input
                dense
                :options="customList"
                option-label="CategoryName"
                option-value="CategoryId"
                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="saveMerge"
              />
            </q-banner>
          </q-popup-proxy>
        </q-btn>
        </div>
      </div>
      <div class="info-content">
        <div class="detail-info">
          <baseInfo :Data="detailData" :isCanEdit="isCanEdit" @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,
    queryCustomerCategoryList,
    ReplaceCategory
  } 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
      },
      isCanEdit: {
        type: Boolean,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        detailData: {},
        //员工列表
        employeeList: [],
        myEmployeeList: [],
        isShowTrans: false,
        TransferMsg: {
          CustomerIds: "",
          EmpId: ""
        },
        customList:[],
        AllcustomList:[],
        mergeMsg:{
          CategoryId:0,
          NewCategoryId:''
        }
      };
    },
    mounted() {
      this.initObj();
      this.getCustomList();
      this.employeeList = this.empList;
      this.myEmployeeList = this.empList;
    },
    methods: {
      //筛选客户
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.customList = JSON.parse(JSON.stringify(this.AllcustomList))
          } else {
            const needle = val.toLowerCase();
            this.customList = this.AllcustomList.filter(v => v.CategoryName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      getCustomList(){
        let msg = {
          CategoryName:"",
          CatetoryType:0
        }
        queryCustomerCategoryList(msg).then(res => {
          if (res.Code == 1) {
            this.customList = res.Data;
            this.AllcustomList = res.Data;
          }
        })
      },
      //关闭弹窗
      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) {
              this.detailData = res.Data;
            }
          });
        } else {

        }
      },
      saveBaseInfo(obj) {
        this.detailData[obj.field] = obj.val;
        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()
              }
            });
          });
      },
      //保存合并
      saveMerge(){
        this.mergeMsg.CategoryId = this.CategoryId;
        ReplaceCategory(this.mergeMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "数据保存成功！",
              position: "top"
            });
            this.isShowTrans=false;
            this.$emit("success");
            this.$emit('close');
          }
        });
      }
    }
  };
</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>