<template>
  <view class="container">
    <uni-section class="mb-10" title="基本信息" type="line"></uni-section>
    <uni-list :border="true">
      <uni-list-item title="创建日期" :rightText="detail.customer?.created_at" />
      <uni-list-item title="客户编号" :rightText="detail.customer?.id" />
      <uni-list-item title="客户名称" :rightText="detail.customer?.name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.name" placeholder="客户名称"
              :old-value="detail.customer?.name" :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT"
              @modify="modifyCustomerInfo" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="所属地区" :rightText="detail.customer?.region_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.region_id" placeholder="所属地区"
              :options="regionTreeData" :old-value="detail.customer?.region_id"
              :components-type="ComponentsType.CASCADER" @modify="modifyCustomerInfo" :showAuxiliaryLine="true"
              :selectParent="true" :not-allow-null="true" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="所属行业" :rightText="detail.customer?.industry_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.industry_id" placeholder="所属行业"
              :options="industryList" :old-value="detail.customer?.industry_id" :components-type="ComponentsType.SELECT"
              @modify="modifyCustomerInfo" :not-allow-null="true" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="客户级别" :rightText="detail.customer?.level_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.level_id" placeholder="客户级别"
              :options="customerLevelList" :old-value="detail.customer?.level_id"
              :components-type="ComponentsType.SELECT" @modify="modifyCustomerInfo" 
             :not-allow-null="true" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="市场负责人" :rightText="detail.customer?.bizman_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.bizman_id" placeholder="市场负责人"
              :options="accountList" :old-value="detail.customer?.bizman_id" :components-type="ComponentsType.SELECT"
              @modify="modifyCustomerInfo" :not-allow-null="true" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="客户联系人" :rightText="detail.customer?.link_man">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.link_man" placeholder="客户联系人"
              :old-value="detail.customer?.link_man" :not-allow-null="true"
              :components-type="ComponentsType.STRINGINPUT" @modify="modifyCustomerInfo" field="name" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="联系人电话" :rightText="detail.customer?.link_phone">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.link_phone" placeholder="联系人电话"
              :old-value="detail.customer?.link_phone" :not-allow-null="true"
              :components-type="ComponentsType.STRINGINPUT" @modify="modifyCustomerInfo" field="name" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="经营地址" :rightText="detail.customer?.address">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.address" placeholder="经营地址"
              :old-value="detail.customer?.name" :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT"
              @modify="modifyCustomerInfo" field="name" />
          </view>
        </template>
      </uni-list-item>

      <uni-list-item title="备注信息">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.memo" placeholder="备注信息"
              :old-value="detail.customer?.name" :components-type="ComponentsType.TEXTAREA"
              @modify="modifyCustomerInfo" />
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <uni-section class="mb-10" title="开票资料" type="line"></uni-section>
    <uni-list :border="true">
      <uni-list-item title="发票抬头" :rightText="detail.customer?.invoice_title">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.invoice_title" placeholder="发票抬头"
              :old-value="detail.customer?.name" :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT"
              @modify="modifyCustomerInfo" field="name" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="客户税号" :rightText="detail.customer?.tax_no">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.tax_no" placeholder="客户税号"
              :old-value="detail.customer?.tax_no" :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT"
              @modify="modifyCustomerInfo" field="name" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="客户开户行" :rightText="detail.customer?.bank_name">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.bank_name" placeholder="客户开户行"
              :old-value="detail.customer?.bank_name" :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT"
              @modify="modifyCustomerInfo" field="name" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="开户行账号" :rightText="detail.customer?.bank_account">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.bank_account" placeholder="开户行账号"
              :old-value="detail.customer?.bank_account" :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT"
              @modify="modifyCustomerInfo" field="name" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="开户行地址" :rightText="detail.customer?.invoice_addr">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.invoice_addr" placeholder="开户行地址"
              :old-value="detail.customer?.invoice_addr" :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT"
              @modify="modifyCustomerInfo" field="name" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="开户行电话" :rightText="detail.customer?.invoice_phone">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.invoice_phone" placeholder="开户行电话"
              :old-value="detail.customer?.invoice_phone" :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT"
              @modify="modifyCustomerInfo" field="name" />
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>
<script setup lang="ts">
import { getCustomerDetail, modifyCustomer } from '@/api/biz/customer';
import { useEmitt } from '@/logics/mitt/useEmitt';
import { CustomerDetailResParams, ModifyCustomerReqParams } from '@/types/customer';
import EditorListItem from '@/components/editor-list-item/editor-list-item.vue'
import { ComponentsType } from '@/enums/api'
import { getStaffList } from '@/api/biz/staff';
import { getRegionTree } from '@/api/base/region';
import { DomainTree } from '@/types/domain';
import { getCustomerLevelList, getIndustryTypeList } from '@/api/base/base';


const customerLevelList = ref<{ id: string, name: string }[]>([])
const accountList = ref<{ id: string, name: string }[]>([])
const regionTreeData = ref<DomainTree[]>([]) // 区域树
const customer_id = ref()
const detail = reactive<{ customer?: CustomerDetailResParams }>({
  customer: undefined
}) // 客户详情

const industryList = ref<{ id: string; name: string }[]>([])
const modifyParams = ref<Omit<ModifyCustomerReqParams, 'id'>>({
})


/**
 * 获取客户详情
 * @param customerId
 */
const getDetail = async () => {
  const customerDetail = await getCustomerDetail(customer_id.value)
  nextTick(() => {
    detail.customer = customerDetail
    uni.setNavigationBarTitle({ title: `详情-${customerDetail.name}` })
    modifyParams.value.name = customerDetail.name
    modifyParams.value.region_id = customerDetail.region_id
    modifyParams.value.level_id = customerDetail.level_id
    modifyParams.value.industry_id = customerDetail.industry_id
    modifyParams.value.link_man = customerDetail.link_man
    modifyParams.value.link_phone = customerDetail.link_phone
    modifyParams.value.address = customerDetail.address
    modifyParams.value.memo = customerDetail.memo
    modifyParams.value.tax_no = customerDetail.tax_no
    modifyParams.value.bank_name = customerDetail.bank_name
    modifyParams.value.bank_account = customerDetail.bank_account
    modifyParams.value.invoice_addr = customerDetail.invoice_addr
    modifyParams.value.invoice_phone = customerDetail.invoice_phone
    modifyParams.value.invoice_title = customerDetail.invoice_title
    modifyParams.value.bizman_id = customerDetail.bizman_id
  })
}


// { id: customer_id.value, name: modifyParams.value.name }
const modifyCustomerInfo = async () => {
  try {
    const params: ModifyCustomerReqParams = {
      id: customer_id.value,
      ...toRaw(modifyParams.value)
    }
    await modifyCustomer(params)
    uni.showToast(({
      icon: 'success',
      title: '修改成功'
    }))
  } catch (e) {
    getDetail()
  }
}

/**
 * 获取区域树
 */
const getTree = async () => {
  const { tree } = await getRegionTree()
  regionTreeData.value = tree
}

/**
* 获取用户列表
*/
const getAccountList = async () => {
  try {
    const { list } = await getStaffList({ page_no: 1, page_size: 9999 })
    accountList.value = list
  } catch (e) {
    console.error(e)
  }
}



const getIndustryType = async () => {
  const { list } = await getIndustryTypeList()
  industryList.value = list
}

const getLevels = async () => {
  const { list } = await getCustomerLevelList()
  customerLevelList.value = list
}



onLoad((option) => {
  customer_id.value = option?.id
});


onMounted(() => {
  getAccountList()
  getTree()
  getIndustryType()
  getLevels()
  getDetail()
})

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
  name: 'get_customer_detail',
  callback: () => {
    getDetail()
  }
})

const redirectModifyCustomerPage = (id?: string) => {
  uni.navigateTo({ url: `/pages/customer/components/edit-customer?id=${id}` })
}

</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'apply-shared', //解除样式隔离
  }

}
</script>
<style scoped>
.container {
  padding: 0 5px 40px 5px;
}

:deep(.uni-list-item__content-note) {
  overflow-wrap: break-word;
}

:deep(.uni-list-item__content) {
  flex-direction: row;
  align-items: center;
  flex: 0 0 80px;
}

:deep(.uni-list-item__content-title) {
  font-size: 13px;
  color: #3b4144a8;
}

:deep(.uni-list-item__extra) {
  flex: 1 1 auto;
}

:deep(.uni-list-item__extra-text) {
  color: #5d5959;
  font-size: 13px;
  width: 200px;
  text-overflow: ellipsis;
  text-align: right;
  text-wrap: wrap;
  overflow-wrap: anywhere;
  white-space-collapse: collapse;
}

.slot-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  width: 45px;
  background-color: rgb(201, 205, 212);
  border-radius: 4px;
  margin-right: 10px;
  height: 45px;
}


.slot-content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  height: 45px;
}

.slot-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.slot-title {
  display: flex;
  font-size: 14px;
  color: #3b4144;
}

.slot-subtitle {
  display: flex;
  font-size: 12px;
  color: #999
}

.slot-desc {
  font-size: 12px;
  color: #999;
  max-width: 200px;
  max-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

}

:deep(.uni-section) {
  margin-top: 5px;
}
</style>