<style>
  .customRightDialog .drawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #f0f5fb;
    padding: 5px 10px;
    align-items: center;
  }

  .customRightDialog .className {
    margin-left: 10px;
  }

  .customRightDialog .classFirst {
    color: #000000;
    font-weight: bold;
  }

  .customRightDialog .role_Line {
    width: 3px;
    height: 11px;
    margin-right: 10px;
    background-color: #3fc4ff;
    display: inline-block;
  }

  .info_Item {
    margin: 20px 0;
  }

  .customHeader {
    display: inline-block;
    width: 55px;
    height: 55px;
  }
</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeAuditCustomerForm">
    <q-card style="margin-top:61px;width:600px" class="no-border-radius customRightDialog">
      <div class="drawerTop">
        <div style="display: flex; align-items: center">
          <div class="className">
            <div class="classFirst">{{customerObj.Type==1?"客户审批":"客户详情"}}</div>
          </div>
        </div>
      </div>
      <div style="margin:20px">
        <div class="classFirst">
          <span class="role_Line"></span>基本信息
        </div>
        <div class="row info_Item">
          <div class="col-6">
            <span class="backInfo_Title">客户名称：</span>
            <span class="backOtherInfo" v-if="objOption.CustomerName">
              {{ objOption.CustomerName }}
            </span>
          </div>
          <div class="col-6">
            <span class="backInfo_Title">联系电话：</span>
            <span class="backOtherInfo">{{ objOption.ContactNumber }}</span>
          </div>
        </div>
        <!-- <div class="row info_Item">
          <div class="col-6">
            <span class="backInfo_Title">传真：</span>
            <span class="backOtherInfo" v-if="objOption.Fax">
              {{ objOption.Fax }}
            </span>
          </div>
          <div class="col-6">
            <span class="backInfo_Title">QQ：</span>
            <span class="backOtherInfo">{{ objOption.QQ }}</span>
          </div>
        </div> -->
        <div class="row info_Item">
          <!-- <div class="col-6">
            <span class="backInfo_Title">Email：</span>
            <span class="backOtherInfo" v-if="objOption.Email">
              {{ objOption.Email }}
            </span>
          </div> -->
          <div class="col-6">
            <span class="backInfo_Title">地址：</span>
            <span class="backOtherInfo">{{ objOption.Address }}</span>
          </div>
        </div>
        <div class="row info_Item">
          <div class="col-6">
            <span class="backInfo_Title">OpenId：</span>
            <span class="backOtherInfo" v-if="objOption.OpenId">
              {{ objOption.OpenId }}
            </span>
          </div>
          <div class="col-6">
            <span class="backInfo_Title">UnionId：</span>
            <span class="backOtherInfo">{{ objOption.UnionId }}</span>
          </div>
        </div>
        <div class="row info_Item">
          <div class="col-6">
            <span class="backInfo_Title">微信名：</span>
            <span class="backOtherInfo" v-if="objOption.WeChatName">
              {{ objOption.WeChatName }}
            </span>
          </div>
          <div class="col-6">
            <span class="backInfo_Title" style="vertical-align:top;">头像：</span>
            <span class="customHeader">
              <img style="width:100%;height:100%;" :src="objOption.WeChatPhoto" alt="" />
            </span>
          </div>
        </div>
        <!--审批-->
        <template v-if="customerObj.Type==1">
          <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px;">
            <div>审批意见</div>
            <div>
              <q-radio v-model="AuditMsg.ApproveState" :val="1" label="通过" />
              <q-radio v-model="AuditMsg.ApproveState" :val="2" label="驳回" />
            </div>
          </div>
          <q-input filled stack-label :dense="false" v-model="AuditMsg.ApproveContent" type="textarea" label="审批意见" />

        </template>
        <!--已审批-->
        <template v-else-if="objOption.ApproveState!=0">
          <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px;">
            <div>审批意见</div>
            <div>
              <q-chip color="teal" text-color="white" size="sm" v-if="objOption.ApproveState==1">
                {{objOption.ApproveStateStr}}
              </q-chip>
              <q-chip color="red" text-color="white" size="sm" v-else>
                {{objOption.ApproveStateStr}}
              </q-chip>
            </div>
          </div>
          <q-input filled stack-label :dense="false" :disable="true" v-model="AuditMsg.ApproveContent" type="textarea"
            label="审批意见" />
          <div class="row info_Item" v-if="customerObj.Type==2">
            <div class="col-6">
              <span class="backInfo_Title">审批人：</span>
              <span class="backOtherInfo" v-if="objOption.ApproveName">
                {{ objOption.ApproveName }}
              </span>
            </div>
            <div class="col-6">
              <span class="backInfo_Title">审批时间：</span>
              <span class="backOtherInfo">{{ objOption.ApproveTimeStr }}</span>
            </div>
          </div>
        </template>

      </div>
      <div style="margin:30px 10px 0 0;text-align:right;">
        <q-btn class="q-mr-md" label="关闭" @click="closeAuditCustomerForm()" />
        <q-btn color="accent" v-if="customerObj.Type==1" class="q-mr-md" label="保存" @click="SaveAuditCustomer()" />
      </div>
    </q-card>
    <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 {
    AuditCustomer,
    GetCustomer
  } from "../../api/sale/peemanagement";
  export default {
    components: {},
    props: {
      //customerObj.Type==1--审批
      //customerObj.Type==2--详情
      customerObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {},
        saveCourseLoading: false,
        AuditMsg: {
          CustomerId: 0,
          ApproveState: 1, //审批状态 1-审批通过，2-拒绝
          ApproveContent: ''
        }
      }
    },
    created() {},
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.customerObj && this.customerObj.CustomerId > 0) {
          this.AuditMsg.CustomerId = this.customerObj.CustomerId;
          GetCustomer({
            CustomerId: this.customerObj.CustomerId
          }).then(res => {
            var tempData = res.Data;
            this.objOption = tempData;
            this.AuditMsg.CustomerId = tempData.CustomerId;
            this.AuditMsg.ApproveState = tempData.ApproveState;
            this.AuditMsg.ApproveContent = tempData.ApproveContent;
          })
        }
      },
      //保存
      SaveAuditCustomer() {
        if (this.AuditMsg.ApproveState == 0) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择审批通过或者驳回`
          })
          return;
        }
        if (this.AuditMsg.ApproveState == 2 && this.AuditMsg.ApproveContent == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写审批意见`
          })
          return;
        }
        AuditCustomer(this.AuditMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "数据保存成功！",
              position: "top",
            });
            this.$emit("success");
            this.closeAuditCustomerForm()
          }
        })
      },
      //关闭弹窗
      closeAuditCustomerForm() {
        this.$emit('close');
        this.persistent = false;
      },
    },
  }
</script>