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

  .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: 400px;max-width:400px;" 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="row wrap">
          <div class="col-12">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.CategoryName"
              ref="CategoryName" class="col-12 q-pb-lg" label="名称" :rules="[val => !!val || '请填写客户名称']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-12">
            <q-select stack-label color="primary" filled label="类型" option-value="Id" option-label="Name"
              ref="CatetoryType" :options="typeList" class="q-pb-lg" v-model="objOption.CatetoryType" :rules="[val => !!val || '请选择类型']" emit-value map-options />
          </div>
        </div>
        <template v-if="isShowTel">
          <div class="row wrap">
            <div class="col-12">
              <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.linkMan" ref="linkMan"
                class="col-12 q-pb-lg" label="联系人" :rules="[val => !!val || '请填写联系人']" />
            </div>
          </div>
          <div class="row wrap">
            <div class="col-12">
              <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.linkTel" ref="linkTel"
                class="col-12 q-pb-lg" label="联系电话" />
            </div>
          </div>
        </template>
      </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 {
    saveCustomerCategory,
    queryCustomerCategory,
    GetCatetoryTypeList
  } from "../../api/users/user";
  export default {
    components: {},
    props: {
      customerObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          CategoryName: "",
          CatetoryType: '',
          CategoryId: 0,
          linkMan: "",
          linkTel: ""
        },
        typeList: [], //类型
        saveCustomLoading: false,
        optionTitle: '',
        isShowTel: true
      }
    },
    created() {},
    mounted() {
      this.initObj()
      this.getTypeList();
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.customerObj && this.customerObj.CategoryId > 0) {
          this.isShowTel = false;
          let msg = {
            CategoryId: this.customerObj.CategoryId
          }
          queryCustomerCategory(msg).then(res => {
            if (res.Code == 1) {
              let tempData = res.Data;
              this.objOption.CategoryName = tempData.CategoryName;
              this.objOption.CatetoryType = tempData.CatetoryType;
              this.objOption.CategoryId = tempData.CategoryId;
            }
          })
          this.optionTitle = "修改客户信息"
        } else {
          this.objOption.CategoryName = '';
          this.objOption.CatetoryType = '';
          this.objOption.CategoryId = 0;
          this.objOption.linkMan = '';
          this.objOption.linkTel = '';
          this.optionTitle = "新增客户信息"
          this.isShowTel = true;
        }
      },
      //保存
      saveCourse() {
        this.$refs.CategoryName.validate();
        this.$refs.CatetoryType.validate();
        if (!this.$refs.CategoryName.hasError&&!this.$refs.CatetoryType.hasError) {
          this.saveCustomLoading = true;
          saveCustomerCategory(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()
            }
          })
        }
      },
      getTypeList() {
        GetCatetoryTypeList({}).then(res => {
          if (res.Code == 1) {
            this.typeList = res.Data;
          }
        })
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close');
        this.persistent = false;
      }
    },
  }

</script>
