<template>
  <el-descriptions title="" column="1">
    <el-descriptions-item label="姓名">
      <span v-show="isEditpersonName === 0">{{
        customerObj.customerName ?? ''
      }}</span>
      <el-icon
        v-show="isEditpersonName === 0"
        @click="handleEdit(customerObj, 'customerName')"
        ><Edit
      /></el-icon>
      <div style="display: inline-block">
        <el-input
          v-model="customerObj.customerName"
          placeholder=""
          v-show="isEditpersonName === 1"
          @blur="onsavePername(customerObj)"
        />
      </div>
    </el-descriptions-item>
    <el-descriptions-item label="电话">
      <span v-show="isEditpersonPhone === 0">{{
        customerObj.customerPhone ?? ''
      }}</span>
      <el-icon
        v-show="isEditpersonPhone === 0"
        @click="handleEdit(customerObj, 'customerPhone')"
        ><Edit
      /></el-icon>
      <div style="display: inline-block">
        <el-input
          v-model="customerObj.customerPhone"
          placeholder=""
          v-show="isEditpersonPhone === 1"
          @blur="onsavePername(customerObj)"
        />
      </div>
    </el-descriptions-item>
    <el-descriptions-item label="项目">
      <span v-show="isEditpersonProject === 0">{{
        customerObj.projectname ?? ''
      }}</span>
      <el-icon
        v-show="isEditpersonProject === 0"
        @click="handleEdit(customerObj, 'project')"
        ><Edit
      /></el-icon>
      <div style="display: inline-block">
        <el-select
          v-show="isEditpersonProject === 1"
          v-model="customerObj.project"
          @change="onsavePername(customerObj)"
          placeholder=""
        >
          <el-option
            v-for="item in projectData"
            :key="item.value"
            :label="item.title"
            :value="item.value"
            >{{ item.title }}</el-option
          >
        </el-select>
      </div>
    </el-descriptions-item>
    <el-descriptions-item label="公司">
      <span v-show="isEditpersonCompany === 0">{{
        customerObj.company ?? ''
      }}</span>
      <el-icon
        v-show="isEditpersonCompany === 0"
        @click="handleEdit(customerObj, 'company')"
        ><Edit
      /></el-icon>
      <div style="display: inline-block">
        <el-input
          v-model="customerObj.company"
          placeholder=""
          v-show="isEditpersonCompany === 1"
          @blur="onsavePername(customerObj)"
        />
      </div>
    </el-descriptions-item>
    <el-descriptions-item label="标签">
      <!-- getLableName -->
      <!-- <span v-show="isEditpersonLabel === 0">{{
        customerObj.label ?? '-'
      }}</span> -->
      <el-tag
        v-show="isEditpersonLabel === 0"
        style="margin-left: 1px"
        v-for="(item, index) in customerObj.labelName"
        v-bind:key="index"
      >
        {{ item ?? '' }}
      </el-tag>
      <el-icon
        v-show="isEditpersonLabel === 0"
        @click="handleEdit(customerObj, 'label')"
        ><Edit
      /></el-icon>
      <div style="display: inline-block">
        <el-select
          v-if="isEditpersonLabel === 1"
          v-model="customerObj.label"
          multiple
          multiple-limit="10"
          @change="onsavePername(customerObj)"
          placeholder=""
        >
          <el-option
            v-for="item in labelData"
            :key="item.value"
            :label="item.title"
            :value="item.value"
            >{{ item.title }}</el-option
          >
        </el-select>
      </div>
    </el-descriptions-item>
    <el-descriptions-item label="性别">
      <span v-show="isEditpersonSex === 0">{{
        customerObj.customerSex ?? ''
      }}</span>
      <el-icon
        v-show="isEditpersonSex === 0"
        @click="handleEdit(customerObj, 'customerSex')"
        ><Edit
      /></el-icon>
      <div style="display: inline-block">
        <el-select
          v-show="isEditpersonSex === 1"
          v-model="customerObj.customerSex"
          @change="onsavePername(customerObj)"
          placeholder=""
        >
          <el-option
            v-for="item in customerSexData"
            :key="item.value"
            :label="item.title"
            :value="item.value"
            >{{ item.title }}</el-option
          >
        </el-select>
      </div>
    </el-descriptions-item>
    <el-descriptions-item label="类型">
      <span v-show="isEditpersonType === 0">{{
        customerObj.type === 1
          ? '普通'
          : customerObj.type === 2
          ? '微信'
          : customerObj.type === 3
          ? '官网'
          : '-'
      }}</span>
      <el-icon
        v-show="isEditpersonType === 0"
        @click="handleEdit(customerObj, 'type')"
        ><Edit
      /></el-icon>
      <div style="display: inline-block">
        <el-select
          v-show="isEditpersonType === 1"
          v-model="customerObj.type"
          @change="onsavePername(customerObj)"
          placeholder=""
        >
          <el-option
            v-for="item in typeData"
            :key="item.value"
            :label="item.title"
            :value="item.value"
            >{{ item.title }}</el-option
          >
        </el-select>
      </div>
    </el-descriptions-item>

    <el-descriptions-item label="备注">
      <span v-show="isEditpersonRemarks === 0">{{
        customerObj.remarks ?? ''
      }}</span>
      <el-icon
        v-show="isEditpersonRemarks === 0"
        @click="handleEdit(customerObj, 'remarks')"
        ><Edit
      /></el-icon>
      <div style="display: inline-block">
        <el-input
          v-model="customerObj.remarks"
          placeholder=""
          v-show="isEditpersonRemarks === 1"
          @blur="onsavePername(customerObj)"
        />
      </div>
    </el-descriptions-item>
    <!-- <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item> -->
  </el-descriptions>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getPageListData, editPageData } from '@/api/main/system/system'
import { chatUserDetail } from '@/api/wxchat/chat'

import useSelectStore from '@/store/commonSelect/common'
const { proxy } = getCurrentInstance()

const customerObj = ref({})
const isEditpersonName = ref(0)
const isEditpersonPhone = ref(0)
const isEditpersonProject = ref(0)
const projectData = ref([])
const labelData = ref([])
const formData = ref({})
const customerSexData = ref([
  {
    value: '男',
    title: '男'
  },
  {
    value: '女',
    title: '女'
  }
])
const typeData = ref([
  {
    value: 1,
    title: '普通'
  },
  {
    value: 2,
    title: '微信'
  },
  {
    value: 3,
    title: '官网'
  }
])
const isEditpersonCompany = ref(0)
const isEditpersonLabel = ref(0)
const isEditpersonSex = ref(0)
const isEditpersonType = ref(0)
const isEditpersonRemarks = ref(0)
const wxcCustomerPhone = ref('')
const kefuFlag = ref(false)
const props = defineProps({
  inCommingData: {
    type: Object,
    default: () => ({})
  },
  customerPhone: {
    type: String,
    default: ''
  }
})
watch(props, (nweProps) => {
  if (nweProps.customerPhone) {
    wxcCustomerPhone.value = nweProps.customerPhone
    customerObj.value.customerPhone = nweProps.customerPhone
    formData.value.customerNo = nweProps.customerPhone
    getCustomeData(nweProps.customerPhone)
  }
  console.log(nweProps)
  if (nweProps.inCommingData.Number) {
    customerObj.value.customerPhone = nweProps.inCommingData.Number
    formData.value.customerNo = nweProps.inCommingData.Number
    getCustomeData(customerObj.value.customerPhone)
  }
})
onMounted(() => {
  projectData.value = useSelectStore().dictProjectList
  labelData.value = useSelectStore().customerLabelList
  console.log(props)
  if (props.inCommingData.Number) {
    formData.value.customerNo = props.inCommingData.Number
    getCustomeData(props.inCommingData.Number)
  }
})
function handleEdit(item, filed) {
  if (filed === 'customerName') {
    if (wxcCustomerPhone.value) {
      kefuFlag.value = true
    }
    isEditpersonName.value = 1
  } else if (filed === 'customerPhone') {
    isEditpersonPhone.value = 1
  } else if (filed === 'project') {
    isEditpersonProject.value = 1
  } else if (filed === 'company') {
    isEditpersonCompany.value = 1
  } else if (filed === 'label') {
    isEditpersonLabel.value = 1
  } else if (filed === 'customerSex') {
    isEditpersonSex.value = 1
  } else if (filed === 'type') {
    if (wxcCustomerPhone.value) {
      kefuFlag.value = true
    }
    isEditpersonType.value = 1
  } else if (filed === 'remarks') {
    isEditpersonRemarks.value = 1
  }
  console.log(item)
}
function onsavePername(item) {
  isEditpersonName.value = 0
  isEditpersonPhone.value = 0
  isEditpersonProject.value = 0
  isEditpersonCompany.value = 0
  isEditpersonLabel.value = 0
  isEditpersonSex.value = 0
  isEditpersonType.value = 0
  isEditpersonRemarks.value = 0
  formData.value.company = item.company
  formData.value.customerId = item.customerId
  formData.value.customerName = item.customerName
  formData.value.customerPhone = item.customerPhone
  formData.value.customerSex = item.customerSex
  if (Array.isArray(item.label)) {
    item.label && (formData.value.label = item.label.join(','))
  }
  formData.value.project = item.project
  formData.value.remarks = item.remarks
  formData.value.type = item.type
  editPageData('/system/customer', formData.value).then((data) => {
    proxy.$modal.msgSuccess('编辑成功！')
    if (wxcCustomerPhone.value) {
      getCustomeData(formData.value.customerNo)
    } else {
      getCustomeData(item.customerPhone)
    }
  })
}
function getLableNameList(data, type) {
  const newLabelNameData = []
  const labels = useSelectStore().customerLabelList
  let dataNew = []
  if (Array.isArray(data) && data.length > 0) {
    dataNew = data
  } else if (data) {
    dataNew = data.split(',')
  }
  if (dataNew.length > 0) {
    dataNew.forEach((element) => {
      const info = labels?.find((o) => {
        if (type == 'name') {
          return o.title.toString() == element
        } else if (type == 'id') {
          return o.value.toString() == element
        }
      })
      if (type == 'name') {
        newLabelNameData.push(info?.value)
      } else if (type == 'id') {
        newLabelNameData.push(info?.title)
      }
    })
  }
  return newLabelNameData
}
function getCustomeData(customerPhone) {
  getPageListData('/system/customer/CodeInfo/' + customerPhone).then(
    ({ data }) => {
      customerObj.value = data
      if (data.label) {
        const newData = []
        data.label.split(',').forEach((ele) => {
          newData.push(Number(ele))
        })
        customerObj.value.label = newData
      }
      customerObj.value.labelName = getLableNameList(
        customerObj.value.label,
        'id'
      )
      if (kefuFlag.value) {
        emit('updateCustom', customerObj.value)
      }
    }
  )
}
const emit = defineEmits(['updateCustom'])
</script>
<style lang="scss" scoped></style>
