<template>
  <div class="bgbox lr-bg">
    <el-form class="textBox" label-width="120px" label-position="right">
      <el-form-item label="单位名称">
        <span>{{ form.baseName }}</span>
      </el-form-item>
      <el-form-item label="单位类型">
        <span v-if="form.type==1">企业 </span>
        <span v-if="form.type==2">国家组织 </span>
        <span v-if="form.type==3">社会组织 </span>
        <span v-if="form.type==4">其他 </span>
      </el-form-item>
      <el-form-item label="联系人">
        <span>{{ form.contact }}</span>
      </el-form-item>
      <el-form-item label="联系电话">
        <span>{{ form.phone }}</span>
      </el-form-item>
      <el-form-item label="地址"> <span>{{ address }}</span> </el-form-item>
      <el-form-item label="详细地址"> <span>{{ form.siteAddress }}</span> </el-form-item>
      <el-form-item label="机构介绍"> <span>{{ form.introduce }}</span> </el-form-item>
    </el-form>

    <el-button class="saveBtn" type="primary" @click="show=true">编辑</el-button>

    <el-dialog
      v-model="show" center title="编辑团体信息" :close-on-click-modal="true"
      width="900"
      @close="close"
    >
      <!-- 团队信息 -->
      <el-form ref="rulesForm" :model="form" label-width="160px" :rules="rules">
        <el-form-item label="单位名称" prop="baseName">
          <el-input v-model="form.baseName" :disabled="type" style="width: 540px" />
        </el-form-item>
        <el-form-item label="单位类型" prop="type">
          <el-select
            v-model="form.type"
            :disabled="type"
            placeholder="请选择"
            style="width: 540px"
          >
            <el-option label="企业" value="1" />
            <el-option label="国家组织" value="2" />
            <el-option label="社会组织" value="3" />
            <el-option label="其他" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="form.contact" style="width: 540px" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" style="width: 540px" />
        </el-form-item>
        <el-form-item label="所属省份" prop="belongProvinceId">
          <el-select
            v-model="form.belongProvinceId"
            placeholder="请选择"
            style="width: 540px"
          >
            <el-option v-for=" item in options " :key="item.value" :label="item.text" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="coordinates1">
          <el-cascader
            ref="cascaderA"
            v-model="form.coordinates1"
            placeholder="请选择"
            :options="options"
            :props="defaultProps"
            filterable
            style="width: 540px"
            @change="changeAddress"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="siteAddress">
          <el-input v-model="form.siteAddress" style="width: 540px" />
        </el-form-item>
        <el-form-item label="机构介绍" prop="introduce">
          <el-input
            v-model="form.introduce"
            type="textarea"
            :rows="6"
            style="width: 540px"
          />
        </el-form-item>
        <!-- <br>
        <br>
        <el-form-item>
          <el-button size="large" style="margin-left: 200px;width: 180px" type="primary" @click="submit">保存</el-button>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button type="primary" @click="submit">保存</el-button>
          <el-button @click="show=false">取 消</el-button>
        </div>
      </template>

    </el-dialog>
  </div>
</template>

<script setup>
import {
  getMyOwnMemberInfo,
  createMyMember,
  regionsList
} from '@/api/system/userInfo.js'
import { setToken } from '@/utils/auth'
import { ref, reactive, toRefs, nextTick } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
const options = ref([])
const { proxy } = getCurrentInstance()
const show = ref(false)
const address = ref()
const authenticationStatusa = ref()
const type = ref()
const defaultProps = {
  children: 'children',
  label: 'text',
  checkStrictly: true
}

const data = reactive({
  form: {
    coordinates1: []
  },
  rules: {
    baseName: [{ required: true, trigger: 'blur', message: '请输入单位名称' }],
    type: [{ required: true, trigger: 'change', message: '请输入单位类型' }],
    phone: [
      {
        required: true,
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur'
      }
    ],
    contact: [{ required: true, trigger: 'change', message: '请输入联系人' }],
    siteAddress: [{ required: true, trigger: 'change', message: '请输入所在地' }],
    belongProvinceId: [{ required: true, trigger: 'change', message: '请选着所属省份' }],
    mailingAddress: [{ required: true, trigger: 'change', message: '请输入邮寄地址' }],
    introduce: [
      { required: true, trigger: 'change', message: '请输入机构简介' }
    ],
    coordinates1: [
      { required: true, trigger: 'change', message: '请输入详细地址' }
    ]
  }
})
const { form, rules } = toRefs(data)

initData()
async function initData() {
  const res1 = await regionsList()
  options.value = res1.data

  const res = await getMyOwnMemberInfo()
  const arr = []
  if (!res.data.memberInfo) res.data.memberInfo = {}
  form.value = res.data.memberInfo
  form.value.coordinates1 = []
  authenticationStatusa.value = res.data.authenticationStatus
  if (res.data.authenticationStatus != 0 && res.data.authenticationStatus != 3) {
    type.value = true
  } else {
    type.value = false
  }
  if (form.value.siteProvinceId)form.value.coordinates1.push(form.value.siteProvinceId)
  if (form.value.siteCityId) form.value.coordinates1.push(form.value.siteCityId)
  if (form.value.siteRegionId) form.value.coordinates1.push(form.value.siteRegionId)
  nextTick(() => {
    for (const item of options.value) {
      if (form.value.siteProvinceId == item.value) {
        arr.push(item.text)
        for (const val of item.children) {
          if (form.value.siteCityId == val.value) {
            arr.push(val.text)
            for (const inx of val.children) {
              if (form.value.siteRegionId == inx.value) {
                arr.push(inx.text)
              }
            }
          }
        }
      }
    }
    address.value = arr.join(',').replaceAll(',', '/')
  })
  // console.log(form.value)
}

function changeAddress(value) {
  form.value.siteProvinceId = value?.[0]?.toString()
  form.value.siteCityId = value?.[1]?.toString()
  form.value.siteRegionId = value?.[2]?.toString()
}

function submit() {
  proxy.$refs['rulesForm'].validate(async(valid) => {
    if (valid) {
      const res = await createMyMember({
        baseName: form.value.baseName,
        type: form.value.type,
        contact: form.value.contact,
        phone: form.value.phone,
        coordinates: [...form.value.coordinates1]?.join(),
        siteAddress: form.value.siteAddress,
        introduce: form.value.introduce,
        memId: form.value.memId,
        siteProvinceId: form.value.siteProvinceId,
        siteCityId: form.value.siteCityId,
        siteRegionId: form.value.siteRegionId,
        belongProvinceId: form.value.belongProvinceId
      })
      if ((res.code = 200)) {
        if (res.data.token) { setToken(res.data.token) }
        show.value = false
        initData()
        proxy.$modal.msgSuccess('操作成功')
      } else {
        proxy.$modal.msgError('操作失败！')
      }
    } else {
      proxy.$modal.msgError('请完善信息！')
    }
  })
}

function close() {
  show.value = false
  initData()
}
</script>

<style lang="scss" scoped>
  :deep(.el-form-item__label){color: #7B7F83}
  .pt60{padding-top: 60px;}
  .textBox{width: 70%;margin: auto;background: #fff;padding:30px 50px;
    max-width: 800px;
    span{
      color: #000;
    }
    h3{
      margin-bottom: 40px;
      font-size: 16px;
      div{
        text-align: right;
      }
    }
  }
  .bgbox{padding: 20px}
</style>