<style scoped>
  .CLM-Form .el-input__inner {
    background: transparent;
    border: 0;
  }

  .CLM-Form .el-input-group__append {
    background: transparent;
    border: 0;
  }

  .common_Style {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
  }

  .classForm_monday {
    background-color: #ced9f8;
    color: #2961FE;
  }

  .classForm_tuesday {
    background-color: #d9f3ff;
    color: #3FC4FF;
  }

  .classForm_wednesday {
    background-color: #f6e2cb;
    color: #F28C1D;
  }

  .classForm_thursday {
    background-color: #ccf3eb;
    color: #02C499;
  }

  .classForm_friday {
    background-color: #f7cfd6;
    color: #F72E52;
  }

  .classForm_saturday {
    background-color: #fff5cc;
    color: #FFCC00;
  }

  .classForm_sunday {
    background-color: #e6e3fe;
    color: #8175FB;
  }

  .CLM-Form .Emp_Line {
    width: 3px;
    height: 10px;
    background-color: #3FC4FF;
    margin-right: 10px;
  }

  .CLM-Form .EmpLine_title {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 20px;
  }

  .planTimeLi2 tbody::before {
    content: '';
    display: table-row;
    height: 20px;
  }

  .customerPhoto {
    width: 55px;
    height: 55px;
  }

  .customerPhoto img {
    width: 100%;
    height: 100%;
  }

  /deep/ .q-field__before,
  /deep/ .q-field__prepend {
    padding-right: 0px !important;
  }

</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
    <q-card style="width: 800px;max-width:900px;" class="CLM-Form">
      <q-card-section>
        <div class="text-h6">{{optionTitle}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="EmpLine_title">
          <div class="Emp_Line"></div>
          <div>基本信息</div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.CustomerName"
              ref="CustomerName" class="col-6 q-pb-lg q-pr-lg" label="客户名称" :rules="[val => !!val || '请输入客户名称']" />
          </div>
          <div class="col-6">
            <q-radio v-model="objOption.Sex" :val="1" label="男" />
            <q-radio v-model="objOption.Sex" :val="2" label="女" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.ContactNumber" lazy-rules
              ref="ContactNumber" class="col-6 q-pr-lg q-pb-lg" label="联系电话" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="40" v-model="objOption.EnterpriseName" :label="EnterpriseLabelName">
              <template v-slot:before>
                <q-select stack-label color="primary" filled label="类型" option-value="Id" option-label="TypeName"
                  :options="typeOptions" v-model="objOption.CustomerType" emit-value map-options
                  style="border-right:1px solid #999;min-width:90px;" @input='CustomerTypeChange' />
              </template>
            </q-input>
            <!-- <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.Fax" ref="Fax"
              class="col-6 q-pb-lg" label="传真" /> -->
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model:number="objOption.QQ" ref="QQ"
              type="number" :min="0" class="col-6 q-pr-lg q-pb-lg" label="QQ" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.WeChatNo" ref="wechat"
              class="col-6 q-pr-lg q-pb-lg" label="微信" />
          </div>
          <!-- <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.Email" ref="Email"
              class="col-6 q-pb-lg" label="Email" />
          </div> -->
        </div>
        <div class="row wrap">
          <div class="col-6">
            <!-- <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.Account" ref="Account"
              class="col-6 q-pr-lg q-pb-lg" label="账号" /> -->
            <q-input filled stack-label :dense="false" v-model="objOption.Address" ref="Address"
              class="col-6 q-pr-lg q-pb-lg" label="详细地址" />
          </div>
          <div class="col-6">

          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" disable :dense="false" v-model="objOption.OpenId" ref="OpenId"
              class="col-6 q-pr-lg q-pb-lg" label="OpenId" />
          </div>
          <div class="col-6">
            <q-input filled stack-label :dense="false" disable v-model="objOption.UnionId" ref="UnionId"
              class="col-6 q-pb-lg" label="UnionId" />
          </div>
        </div>
        <!-- <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" disable :dense="false" v-model="objOption.WeChatName"
              ref="WeChatName" class="col-6 q-pr-lg q-pb-lg" label="微信名" />
          </div>
          <div class="col-6">
            <div class="customerPhoto">
              <img :src="objOption.WeChatPhoto" alt="" />
            </div>
          </div>
        </div> -->
        <div class="row wrap">
          <div class="col-12">
            <q-input filled type="textarea" stack-label :dense="false" v-model="objOption.Remark" ref="Remark"
              class="col-6 q-pb-lg" label="备注" />
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" :loading="saveCustomLoading"
          @click="saveCourse">
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    SetCustomer,
    GetCustomer
  } from "../../api/sale/peemanagement";
  import {
    validateTel
  } from '../../utils/validate'
  export default {
    components: {},
    props: {
      customerObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        validateTel,
        persistent: true,
        objOption: {
          CustomerId: 0, //客户编号
          CustomerName: '', //客户名称
          ContactNumber: '', //联系电话
          Sex: 1, //性别(1-男，2-女)
          Fax: "", //传真
          QQ: "",
          WeChatNo: "", //微信
          Email: "", //邮箱
          Address: '', //详细地址
          Images: "", //营业照片
          CustomerSourceType: '', //客户来源
          CustomerSource: '', //客户来源信息
          CountryId: '', //国家编号
          ProvinceId: '', //省份编号
          CityId: '', //城市编号
          DistrictId: '', //区域编号
          LngLat: "", //经纬度
          Account: "", //账号
          Remark: "", //备注
          OpenId: '',
          UnionId: '',
          WeChatName: '',
          WeChatPhoto: '',
          CustomerType: 1, //同业类型  1企业   2学校
          EnterpriseName: "", //企业名称
        },
        EnterpriseLabelName: "企业名称",
        saveCustomLoading: false,
        provinceList: [], //省
        cityList: [], //市  
        regionList: [], //区
        CustomerBrandList: [], //所属品牌下拉
        optionTitle: '',
        typeOptions: [{
          Id: 1,
          TypeName: "企业",
        }, {
          Id: 2,
          TypeName: "学校",
        }]
      }
    },
    created() {},
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.customerObj && this.customerObj.CustomerId > 0) {
          let msg = {
            CustomerId: this.customerObj.CustomerId
          }
          GetCustomer(msg).then(res => {
            if (res.Code == 1) {
              let tempData = res.Data;
              this.objOption.CustomerId = tempData.CustomerId;
              this.objOption.CustomerName = tempData.CustomerName;
              this.objOption.ContactNumber = tempData.ContactNumber;
              this.objOption.Sex = tempData.Sex;
              this.objOption.Fax = tempData.Fax;
              this.objOption.QQ = tempData.QQ;
              this.objOption.WeChatNo = tempData.WeChatNo
              this.objOption.Email = tempData.Email;
              this.objOption.Address = tempData.Address;
              this.objOption.Account = tempData.Account;
              this.objOption.Remark = tempData.Remark;
              this.objOption.OpenId = tempData.OpenId;
              this.objOption.UnionId = tempData.UnionId;
              this.objOption.WeChatName = tempData.WeChatName;
              this.objOption.WeChatPhoto = tempData.WeChatPhoto;
              this.objOption.CustomerType = tempData.CustomerType;
              this.objOption.EnterpriseName = tempData.EnterpriseName;
            }
          })
          this.optionTitle = "修改客户信息"
        } else {
          this.objOption.CustomerId = 0;
          this.objOption.CustomerName = '';
          this.objOption.ContactNumber = '';
          this.objOption.Sex = 1;
          this.objOption.Fax = '';
          this.objOption.QQ = '';
          this.objOption.WeChatNo = '';
          this.objOption.Email = '';
          this.objOption.Address = '';
          this.objOption.Account = '';
          this.objOption.Remark = '';
          this.objOption.OpenId = '';
          this.objOption.UnionId = '';
          this.objOption.WeChatName = '';
          this.objOption.WeChatPhoto = '';
          this.optionTitle = "新增客户信息";
          this.objOption.CustomerType = 1;
          this.objOption.EnterpriseName = '';
        }
      },
      //保存
      saveCourse() {
        this.$refs.CustomerName.validate();
        // this.$refs.ContactNumber.validate();
        this.$refs.Address.validate();
        if (!this.objOption.ContactNumber && !this.objOption.QQ && !this.objOption.WeChatNo) {
          this.$q.notify({
            type:'warning',
            message: "电话，qq，微信至少填写一个",
            timeout:2000,
            position: "top",
          });
          return
        }
        if(this.objOption.ContactNumber&& !validateTel(this.objOption.ContactNumber)){
          this.$q.notify({
            type:'warning',
            message: "请输入正确的11位号码",
            timeout:2000,
            position: "top",
          });
          return
        }
        if (!this.$refs.CustomerName.hasError && !this.$refs.Address.hasError) {
          this.saveCustomLoading = true;
          SetCustomer(this.objOption).then(res => {
            if (res.Code == 1) {
              this.saveCustomLoading = false;
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "数据保存成功！",
                position: "top",
              });
              this.$emit("success");
              this.closeCourseForm()
            }
          })
        }
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close');
        this.persistent = false;
      },
      CustomerTypeChange(val) {
        if (val === 1) {
          this.EnterpriseLabelName = "企业名称"
        } else {
          this.EnterpriseLabelName = '学校名称'
        }
      }
    },
  }

</script>
