<template>
  <div class="q-pa-md">
    <div class="text-h6">基础资料</div>
    <!-- 同业名称 -->
    <div class="q-my-sm" v-if="editField=='CustomerName'">
      <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('CustomerName',Data.CustomerName,true)"></q-btn>
        </div>
      </div>
      <q-input outlined dense v-model="Data.CustomerName" ref="CustomerName" :rules="[val => !!val || '请输入同业名称']"></q-input>
    </div>
    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('CustomerName')">
      <span>同业名称</span>
      <span>{{Data.CustomerName}}</span>
    </div>
    <!-- 性别 -->
    <div class="q-my-sm" v-if="editField=='Sex'">
      <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('Sex',Data.Sex)"></q-btn>
        </div>
      </div>
      <q-select outlined dense v-model="Data.Sex" map-options emit-value :options="sexOptions" />
    </div>
    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('Sex')">
      <span>性别</span>
      <span v-if="Data.Sex==1">男</span>
      <span v-if="Data.Sex==2">女</span>
    </div>
    <!-- 电话 -->
    <div class="q-my-sm" v-if="editField=='ContactNumber'">
      <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('ContactNumber',Data.ContactNumber,true)"></q-btn>
        </div>
      </div>
      <q-input outlined dense v-model="Data.ContactNumber" ref="ContactNumber" :rules="[val => !!val || '请输入电话']"></q-input>
    </div>
    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('ContactNumber')">
      <span>电话</span>
      <span>{{Data.ContactNumber}}</span>
    </div>
    <!-- QQ -->
    <div class="q-my-sm" v-if="editField=='QQ'">
      <div class="flex justify-between items-center q-mb-sm">
        <span>QQ</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('QQ',Data.QQ,)"></q-btn>
        </div>
      </div>
      <q-input outlined dense v-model="Data.QQ" ref="QQ"></q-input>
    </div>
    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('QQ')">
      <span>QQ</span>
      <span>{{Data.QQ}}</span>
    </div>
    <!-- 微信 -->
    <div class="q-my-sm" v-if="editField=='WeChatNo'">
      <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('WeChatNo',Data.WeChatNo,)"></q-btn>
        </div>
      </div>
      <q-input outlined dense v-model="Data.WeChatNo" ref="WeChatNo"></q-input>
    </div>
    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('WeChatNo')">
      <span>微信</span>
      <span>{{Data.WeChatNo}}</span>
    </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 v-model="Data.CustomerType" map-options emit-value :options="options"
        :rules="[val => !!val || '请选择类型']" />
    </div>
    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('CustomerType')">
      <span>类型</span>
      <span v-if="Data.CustomerType==1">企业</span>
      <span v-if="Data.CustomerType==2">学校</span>
    </div>
    <!-- 企业/学校名称 -->
    <div class="q-my-sm" v-if="editField=='EnterpriseName'">
      <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('EnterpriseName',Data.EnterpriseName)"></q-btn>
        </div>
      </div>
      <q-input outlined dense v-model="Data.EnterpriseName" :rules="[val => !!val || '请输入名称']"></q-input>
    </div>
    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('EnterpriseName')">
      <span>企业/学校名称</span>
      <span>{{Data.EnterpriseName}}</span>
    </div>
    <!-- 详细地址 -->
    <div class="q-my-sm" v-if="editField=='Address'">
      <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('Address',Data.Address)"></q-btn>
        </div>
      </div>
      <q-input outlined dense v-model="Data.Address" ></q-input>
    </div>
    <div class="flex no-wrap justify-between items-center q-my-lg" v-else @click="showEdit('Address')">
      <span style="white-space:nowrap">详细地址</span>
      <span style="max-width:60%" class="ellepsis">{{Data.Address}}</span>
    </div>
     <!-- 市场专员 -->
    <div class="flex justify-between items-center q-my-lg">
      <span>市场专员</span>
      <span class="text-grey-6">{{Data.CreateByName}}</span>
    </div>
    <!-- OpenId -->
    <div class="flex justify-between items-center q-my-lg">
      <span>OpenId</span>
      <span class="text-grey-6">{{Data.OpenId}}</span>
    </div>
    <!-- UnionId -->
    <div class="flex justify-between items-center q-my-lg">
      <span> UnionId</span>
      <span class="text-grey-6">{{Data.UnionId}}</span>
    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    props: {
      Data: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        editField: "",
        options: [{
          label: "企业",
          value: 1,
        }, {
          label: "学校",
          value: 2,
        }],
        sexOptions: [{
          label: "男",
          value: 1,
        }, {
          label: "女",
          value: 2,
        }]
      }
    },
    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 =''
      },
    },
  }

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

</style>
