<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;
  }

  .custom_Close {
    width: 25px;
    height: 25px;
    background: red;
    color: #fff;
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    right: -10px;
    top: -10px;
  }
</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-select stack-label color="primary" filled label="类型" @input="getCustomList(objOption.CustomerType)"
              option-value="Id" option-label="Name" :options="typeOptions" class="q-pb-lg"
              v-model="objOption.CustomerType" emit-value map-options />
          </div>
        </div>
        <div class="row wrap">
          <q-input filled v-if="objOption.CustomerType==4" stack-label maxlength="20" :dense="false"
            v-model="objOption.EnterpriseName" lazy-rules ref="EnterpriseName" class="col-6 q-pr-lg q-pb-lg" />
          <q-select stack-label color="primary" v-else filled label="请选择客户" option-value="CategoryId"
            option-label="CategoryName" :options="customList" class="col-6 q-pr-lg q-pb-lg"
            v-model="objOption.CategoryId" use-input @filter="filterFn" clearable emit-value map-options />
          <template v-if="objOption.CustomerType!=4">
            <div class="col-6" v-if="!isShowEdit">
              <q-btn label="立即添加同行" @click="isShowEdit=true" size="sm" color="primary" />
            </div>
            <div class="col-6" v-if="isShowEdit" style="position:relative">
              <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.CategoryName" lazy-rules
                ref="CategoryName" class="col-6 q-pb-lg" label="名称" />
              <div class="custom_Close" @click="closeCageName()">
                <i style="position" class="iconfont icon-guanbi1"></i>
              </div>
            </div>
          </template>
        </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-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-12">
            <!-- <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-12 q-pb-lg"
              label="详细地址" />
          </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 {
    GetCatetoryTypeList,
    queryCustomerCategoryList
  } from "../../api/users/user";

  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: "", //企业名称
          CategoryId: '',
          CategoryName: ''
        },
        EnterpriseLabelName: "企业名称",
        saveCustomLoading: false,
        provinceList: [], //省
        cityList: [], //市  
        regionList: [], //区
        CustomerBrandList: [], //所属品牌下拉
        optionTitle: '',
        typeOptions: [],
        customList: [],
        AllcustomList: [],
        isShowEdit: false
      }
    },
    created() {
      this.getTypeList();
      this.getCustomList();
    },
    mounted() {
      this.initObj()
    },
    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);
          }
        })
      },
      closeCageName() {
        this.isShowEdit = false;
        this.objOption.CategoryName = '';
      },
      //初始化表单
      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();
        if (this.objOption.CustomerType != 4) {
          if (!this.objOption.CategoryId && this.objOption.CategoryName == '') {
            this.$q.notify({
              type: 'warning',
              message: "请选择客户或立即添加",
              timeout: 2000,
              position: "top",
            });
            return
          }
        }
        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) {
          if (this.objOption.CategoryId > 0) {
            this.objOption.CategoryName = '';
          }
          SetCustomer(this.objOption).then(res => {
            if (res.Code == 1) {
              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 = '学校名称'
        }
      },
      //获取同行类型列表
      getTypeList() {
        GetCatetoryTypeList({}).then(res => {
          if (res.Code == 1) {
            this.typeOptions = res.Data;
          }
        })
      },
      //获取同行列表
      getCustomList(Type) {
        let msg = {
          CatetoryType: Type
        }
        if(Type)
        {
        this.objOption.CategoryId = '';
        }
        this.isShowEdit = false;
        queryCustomerCategoryList(msg).then(res => {
          if (res.Code == 1) {
            this.customList = res.Data;
            this.AllcustomList = res.Data;
          }
        })
      }
    }
  }
</script>