<template>
  <div class="edit-company">
    <div class="container">
      <div class="content">
        <div class="title">编辑公司信息</div>
        <el-form :model="state.form" label-width="90px" label-position="left">
          <el-form-item label="公司LOGO" class="flx-align-center">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="state.imageUrl"
                :src="state.imageUrl"
                class="avatar"
                width="56"
                height="56"
              />
              <el-icon v-else class="avatar-uploader-icon"><i-ep-Plus /></el-icon>
            </el-upload>
            <!-- <img src="@/assets/img/icon-chuang.png" width="54" height="54" /> -->
          </el-form-item>
          <el-form-item label="公司名称">
            <span>货拉拉科技</span>
          </el-form-item>
          <el-form-item label="公司类型">
            <div class="flx-direction-column">
              <div
                class="info-collapse flx-justify-between"
                @click="state.tradeAcive = !state.tradeAcive"
              >
                <div>{{ filterName(state.informationData?.Trade, state.form.a) }}</div>
                <el-icon v-show="state.tradeAcive"><i-ep-CaretTop /></el-icon>
                <el-icon v-show="!state.tradeAcive"><i-ep-CaretBottom /></el-icon>
              </div>
              <div v-show="state.tradeAcive" class="info-list">
                <span
                  v-for="item in state.informationData?.Trade"
                  :key="item.FNUMBER"
                  :style="{ color: state.form.a === item.FNUMBER ? '#177CFA' : '' }"
                  @click="handleChange('Trade', item.FNUMBER)"
                  >{{ item.FDATAVALUE }}</span
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item label="公司规模">
            <div class="flx-direction-column">
              <div
                class="info-collapse flx-justify-between"
                @click="state.memberAcive = !state.memberAcive"
              >
                <div>{{ filterName(state.informationData?.Member, state.form.b) }}</div>
                <el-icon v-show="state.memberAcive"><i-ep-CaretTop /></el-icon>
                <el-icon v-show="!state.memberAcive"><i-ep-CaretBottom /></el-icon>
              </div>
              <div v-show="state.memberAcive" class="info-list">
                <span
                  v-for="item in state.informationData?.Member"
                  :key="item.FNUMBER"
                  :style="{ color: state.form.b === item.FNUMBER ? '#177CFA' : '' }"
                  @click="handleChange('Member', item.FNUMBER)"
                  >{{ item.FDATAVALUE }}</span
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item label="融资情况">
            <div class="flx-direction-column">
              <div
                class="info-collapse flx-justify-between"
                @click="state.financingAcive = !state.financingAcive"
              >
                <div>{{ filterName(state.informationData?.Financing, state.form.c) }}</div>
                <el-icon v-show="state.financingAcive"><i-ep-CaretTop /></el-icon>
                <el-icon v-show="!state.financingAcive"><i-ep-CaretBottom /></el-icon>
              </div>
              <div v-show="state.financingAcive" class="info-list">
                <span
                  v-for="item in state.informationData?.Financing"
                  :key="item.FNUMBER"
                  :style="{ color: state.form.c === item.FNUMBER ? '#177CFA' : '' }"
                  @click="handleChange('Financing', item.FNUMBER)"
                  >{{ item.FDATAVALUE }}</span
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item label="公司地址">
            <!-- <span>深圳市南山区南山街道办1109号7-6楼</span> -->
            <el-input v-model="state.form.name" placeholder="请填写真实有效的公司地址" />
          </el-form-item>
          <el-form-item label="所在街道办">
            <div class="flx-direction-column">
              <div
                class="info-collapse flx-justify-between"
                @click="state.streetAcive = !state.streetAcive"
              >
                <div>{{ filterName(state.streetList, state.form.d) }}</div>
                <el-icon v-show="state.streetAcive"><i-ep-CaretTop /></el-icon>
                <el-icon v-show="!state.streetAcive"><i-ep-CaretBottom /></el-icon>
              </div>
              <div v-show="state.streetAcive" class="info-list">
                <span
                  v-for="item in state.streetList"
                  :key="item.FNUMBER"
                  :style="{ color: state.form.d === item.FNUMBER ? '#177CFA' : '' }"
                  @click="handleChange('Street', item.FNUMBER)"
                  >{{ item.FNAME }}</span
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item label="公司介绍">
            <el-input v-model="state.form.desc" type="textarea" :rows="4" />
          </el-form-item>
        </el-form>
      </div>
      <div class="confirm">
        <span>确定</span>
        <!-- <span>提交审核</span> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getInformation } from '@/services/api/common'
import { getStreet } from '@/services/api/streetOfficeSpecialTopic'

const route = useRoute()
const state = reactive({
  form: {
    a: '',
    b: '',
    c: '',
    d: ''
  } as any,
  informationData: {} as any,
  streetList: [] as any,
  tradeAcive: false,
  memberAcive: false,
  financingAcive: false,
  streetAcive: false,
  companyType: '',
  imageUrl: '',
  isAdd: false,
  companyName: ''
})

const handleAvatarSuccess = (response: any, uploadFile: any) => {
  // state.imageUrl = URL.createObjectURL(uploadFile.raw!)
}

const filterName = (list: any[] = [], FNUMBER: string) => {
  let row: any = list?.filter((item: any) => item.FNUMBER === FNUMBER)
  return row.length ? (row[0].FDATAVALUE ? row[0].FDATAVALUE : row[0].FNAME) : '请选择'
}

const handleChange = (type: string, FNUMBER: string) => {
  switch (type) {
    case 'Trade':
      state.form.a = FNUMBER
      break
    case 'Member':
      state.form.b = FNUMBER
      break
    case 'Financing':
      state.form.c = FNUMBER
      break
    default:
      state.form.d = FNUMBER
      break
  }
}

const init = async () => {
  const res: any = await getInformation({
    AuxiliaryS: ['EDUCATION', 'Financing', 'Member', 'Trade']
  })
  if (res.code === 200) {
    state.informationData = res.data
  }
  const street: any = await getStreet()
  if (street.code === 200) {
    state.streetList = street.data
    console.log(state.streetList)
  }
}

onMounted(() => {
  const { register, companyName }: any = route.query
  if (register) {
    state.isAdd = true
    state.companyName = companyName
  }
  init()
})
</script>

<style lang="scss" scoped>
@import url(./style/editCompany.scss);
</style>
