<template>
  <div class="q-pa-md">
    <div class="text-h6">基础资料</div>
    <!-- 类型 -->
    <div class="q-my-sm" v-if="editField=='CustomerType'">
      <div class="flex justify-between items-center q-mb-sm">
        <span>类型</span>
        <div>
          <q-btn size="sm" text-color="primary" label="取消" @click="showEdit('')"></q-btn>
          <q-btn size="sm" color="primary" label="确定" class="q-ml-sm" @click="save('CustomerType',Data.CustomerType)"></q-btn>
        </div>
      </div>
      <q-select outlined dense stack-label label="类型" option-value="Id" option-label="Name"
        :rules="[val => !!val || '请选择类型']"  :options="options" v-model="Data.CatetoryType" emit-value map-options />
    </div>
    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('CustomerType')">
      <span>类型</span>
      <!-- <span>{{Data.CatetoryTypeName}}</span> -->
      <span v-if="Data.CatetoryType==1">企业</span>
      <span v-if="Data.CatetoryType==2">学校</span>
      <span v-if="Data.CatetoryType==3">个人</span>
      <span v-if="Data.CatetoryType==4">其他</span>
    </div>
    <!-- 名称 -->
    <div class="q-my-sm" v-if="editField=='CategoryName'">
      <div class="flex justify-between items-center q-mb-sm">
        <span>名称</span>
        <div>
          <q-btn size="sm" text-color="primary" label="取消" @click="showEdit('')"></q-btn>
          <q-btn size="sm" color="primary" label="确定" class="q-ml-sm" @click="save('CategoryName',Data.CategoryName)"></q-btn>
        </div>
      </div>
      <q-input outlined dense v-model="Data.CategoryName" :rules="[val => !!val || '请输入名称']"></q-input>
    </div>
    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('CategoryName')">
      <span>名称</span>
      <span>{{Data.CategoryName}}</span>
    </div>
  </div>
</template>
<script>
  import {
    GetCatetoryTypeList,
    queryCustomerCategoryList
  } from "../../../api/users/user";

  export default {
    components: {},
    props: {
      Data: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        editField: "",
        options: [],
        sexOptions: [{
          label: "男",
          value: 1,
        }, {
          label: "女",
          value: 2,
        }],
        customList:[]
      }
    },
    mounted(){
      this.getTypeList();
    },
    methods: {
      showEdit(field) {
        this.editField = field
      },
      save(field,val,Validate=false){
        if(Validate){
           this.$refs[field].validate();
           if(this.$refs[field].hasError) return
        }
        const obj={
          field,
          val
        }
        this.$emit("confirm",obj)
        this.editField =''
      },
      getTypeList() {
        GetCatetoryTypeList({}).then(res => {
          if (res.Code == 1) {
            this.options = res.Data;
          }
        })
      }
    }
  }

</script>
<style>
  .ellepsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>
