<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 stack-label label="类型" @input="getCustomList(Data.CustomerType)" option-value="Id" option-label="Name"
        :rules="[val => !!val || '请选择类型']"  :options="options" v-model="Data.CustomerType" emit-value map-options />
    </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>
      <span v-if="Data.CustomerType==3">个人</span>
      <span v-if="Data.CustomerType==4">其他</span>
    </div>
    <!-- 客户 -->
    <template v-if="Data.CustomerType!=4">
      <div class="q-my-sm" v-if="editField=='CategoryId'">
        <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('CategoryId',Data.CategoryId)"></q-btn>
          </div>
        </div>
        <q-select outlined dense stack-label label="客户" option-value="CategoryId" option-label="CategoryName"
          :options="customList" use-input @filter="filterFn" v-model="Data.CategoryId" emit-value map-options />
      </div>
      <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('CategoryId')">
        <span>客户</span>
        <span>{{getName(Data.CategoryId)}}</span>
      </div>
    </template>
    <!-- 企业/学校名称 -->
    <template v-if="Data.CustomerType==4">
      <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>
    </template>
    <!-- 详细地址 -->
    <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>
  import {
    GetCatetoryTypeList,
    queryCustomerCategoryList
  } from "../../../api/users/user";

  export default {
    components: {},
    props: {
      Data: {
        type: Object,
        default: null
      },
      isCanEdit: {
        type: Boolean,
        default: null
      }
    },
    data() {
      return {
        editField: "",
        options: [],
        sexOptions: [{
          label: "男",
          value: 1,
        }, {
          label: "女",
          value: 2,
        }],
        customList:[],
        AllcustomList:[]
      }
    },
    mounted(){
      if(this.Data.CustomerType){
        this.getCustomList(this.Data.CustomerType);
      }
      this.getTypeList();
    },
    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);
          }
        })
      },
      showEdit(field) {
        if(this.isCanEdit){
          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;
          }
        })
      },
      getCustomList(Type){
        let msg = {
          CategoryName:"",
          CatetoryType:Type
        }
        this.Data.CategoryId='';
        this.Data.EnterpriseName='';
        queryCustomerCategoryList(msg).then(res => {
          if (res.Code == 1) {
            this.customList = res.Data;
            this.AllcustomList = res.Data;
          }
        })
      },
      getName(Id){
        let Name=''
        this.customList.forEach(x=>{
          if(x.CategoryId==Id){
            Name = x.CategoryName
          }
        })
        return Name;
      }
    }
  }

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

</style>
