<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" :disabled="btn" type="primary" @click="show=true">编辑</el-button>
    
    <el-dialog
      v-model.trim="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.trim="form.baseName" :disabled="type" style="width: 540px" />
        </el-form-item>
        <el-form-item label="单位类型" prop="type">
          <el-select
            v-model.trim="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.trim="form.contact" style="width: 540px" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model.trim="form.phone" style="width: 540px" />
        </el-form-item>
        <!--        <el-form-item label="所属省份" prop="belongProvinceId">-->
        <!--          <el-select-->
        <!--            v-model.trim="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.trim="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.trim="form.siteAddress" style="width: 540px" />-->
        <!--        </el-form-item>-->
        <el-form-item label="机构介绍" prop="introduce">
          <el-input
            v-model.trim="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" :disabled="btn" @click="submit">保存</el-button>
          <el-button @click="show=false">取 消</el-button>
        </div>
      </template>
    
    </el-dialog>
  </div>
</template>

<script setup>
import {
  getMyOwnMemberInfo,
  createMyMember,
  regionsList, checkMember
} 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(true)
const btn = ref(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 = []
  if (res.data.authenticationStatus) {
    if (res.data.authenticationStatus == 0) {
      btn.value = false
    } else if (res.data.authenticationStatus == 1) {
      btn.value = true
    } else {
      // btn.value = !result.value
      btn.value = !res.data.resultNoProvince
    }
  } else {
    btn.value = false
  }
  authenticationStatusa.value = res.data.authenticationStatus
  if (res.data.authenticationStatus && 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)
  
  
  await 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(',', '/')
  })
}

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) => {
    // await handelCheckMember()
    if (valid) {
      const res = await createMyMember({
        baseName: form.value.baseName,
        type: form.value.type,
        contact: form.value.contact,
        phone: form.value.phone,
        introduce: form.value.introduce,
        memId: form.value.memId,
        siteProvinceId: form.value.siteProvinceId,
        siteCityId: form.value.siteCityId,
        siteRegionId: form.value.siteRegionId
      })
      if ((res.code = 200)) {
        if (res.data.token) {
          setToken(res.data.token)
        }
        show.value = false
        await initData()
        proxy.$modal.msgSuccess('操作成功')
      } else {
        proxy.$modal.msgError('操作失败！')
      }
    } else {
      proxy.$modal.msgError('请完善信息！')
    }
  })
}

function close() {
  show.value = false
  initData()
}

function handelCheckMember() {
  return new Promise(async(resolve, reject) => {
    const res = await checkMember({
      baseName: form.value.baseName,
      type: form.value.type,
      contact: form.value.contact,
      phone: form.value.phone,
      introduce: form.value.introduce,
      memId: form.value.memId,
      siteProvinceId: form.value.siteProvinceId,
      siteCityId: form.value.siteCityId,
      siteRegionId: form.value.siteRegionId
    })
    if (res.data) {
      return resolve(res.data)
    } else {
      await proxy.$modal.confirm('机构名称在系统中存在，可用原账户登录，用户也可以继续注册，是否继续注册？').then(() => {
        return resolve(res.data)
      }).catch(e => {
        return reject(e)
      })
    }
  })
}

</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>