<template>
  <el-dialog
    v-if="show"
    v-model="show"
    style="border-radius: 20px; padding: 20px"
    :title="title"
    width="600px"
    append-to-body
    @close="close"
  >
    <el-form ref="deptRef" :model="form" :rules="rules" label-width="150px">
      <el-form-item :label="label.code" prop="deptCode">
        <el-input v-model="form.deptCode" :disabled="form.deptId && deptCode" />
      </el-form-item>
      <el-form-item :label="label.name" prop="deptName">
        <el-input
          v-model="form.deptName"
          :placeholder="`请输入${label.name}`"
          maxlength="20"
          :disabled="form.genFlag==1||form.directUnderFlag==1"
        />
      </el-form-item>
      <el-form-item
        v-if="deptType == 3 || deptType == 2"
        label="会员费标准"
        prop="membership"
      >
        <el-input
          v-model="form.membership"
          type="number"
          placeholder="请输入会员费标准"
        >
          <template #append>元/人</template>
        </el-input>
      </el-form-item>
      <el-form-item label="所属协会" prop="parentId">
        <el-cascader
          v-model="form.parentId"
          :options="list"
          :props="props2"
          disabled
          clearable
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="所属省份" prop="belongProvinceId">
        <el-select
          v-model="form.belongProvinceId"
          :disabled="
            form.deptType != 1 &&
              form.deptType != 2 &&
              form.deptType != 3 &&
              belongProvinceId
          "
          style="width: 100%"
        >
          <el-option label="全国" :value="0" />
          <el-option
            v-for="item in optionsList"
            :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="optionsList"
          :props="defaultProps"
          filterable
          :disabled="form.genFlag==1||form.directUnderFlag==1"
          style="width: 100%"
          @change="changeAddress"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" :disabled="form.genFlag==1||form.directUnderFlag==1" style="width: 100%" />
      </el-form-item>
      <el-form-item v-show="form.deptType == '6'" label="官网是否显示">
        <el-radio-group v-model="form.isView" :disabled="form.genFlag==1||form.directUnderFlag==1">
          <el-radio label="0">是</el-radio>
          <el-radio label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="显示排序" prop="orderNum">
        <el-input
          v-model="form.orderNum"
          :disabled="form.genFlag==1||form.directUnderFlag==1"
          type="number"
          placeholder="请输入显示排序"
        />
      </el-form-item>
      <el-form-item label="有效时间" prop="validateTime">
        <el-date-picker
          v-model="form.validateTime"
          :disabled="form.genFlag==1||form.directUnderFlag==1"
          type="time"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始时间"
          style="width: 100%"
          :disabled-date="disablesDate"
        />
      </el-form-item>
      <el-form-item v-show="form.deptType == '6'" label="考点" prop="isExam">
        <el-radio-group v-model="form.isExam" :disabled="form.genFlag==1||form.directUnderFlag==1">
          <el-radio label="0">是</el-radio>
          <el-radio label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="(form.deptType == '6'||form.deptType == '5'||form.deptType == '4')&&form.genFlag!=1" label="直属" prop="directUnderFlag">
        <el-radio-group v-model="form.directUnderFlag">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align: center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { regionsList } from '@/api/system/userInfo.js'
import { getCurrentInstance, onMounted, ref, toRefs } from 'vue'
import { reactive } from '@vue/runtime-core'
import { addDept, getDept, updateDept, getShenProId } from '@/api/system/dept'
import { getZtxFeeConfig } from '@/api/system/config'
import { parseTime } from '@/utils/ruoyi'
import { deptTreeSelect } from '@/api/system/user'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submit'])
const submit = ref('')
const deptType = ref()
const show = ref(false)
const title = ref('')
const optionsList = ref([])
const list = ref([])
const belongProvinceId = ref()
const deptCode = ref()
const validateTime = ref()
const defaultProps = {
  children: 'children',
  label: 'text',
  checkStrictly: true
}
const props2 = {
  checkStrictly: true,
  children: 'children',
  value: 'id',
  emitPath: false
}

const data = reactive({
  form: {},
  label: {},
  rules: {
    deptName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    orderNum: [
      { required: true, message: '显示排序不能为空', trigger: 'blur' }
    ],
    membership: [
      { required: true, message: '显示排序不能为空', trigger: 'blur' }
    ],
    validateTime: [
      { required: true, message: '请选择有效期', trigger: 'blur' }
    ],
    deptCode: [{ required: true, message: '请输入编号', trigger: 'blur' }],
    belongProvinceId: [
      { required: true, message: '请选择省份', trigger: 'blur' }
    ],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    isExam: [{ required: true, message: '请选择是否为考点', trigger: 'blur' }],
    parentId: [{ required: true, message: '请选择所属协会', trigger: 'blur' }],
    directUnderFlag: [{ required: true, message: '请选择是否为直属', trigger: 'blur' }],
    coordinates1: [{ required: true, message: '请选择地址', trigger: 'blur' }]
  }
})

const { label, form, rules } = toRefs(data)

const defaultAmount = ref()
onMounted(() => {
  getZtxFeeConfig().then((res) => {
    defaultAmount.value = res.data
  })
})

async function addressFn() {
  const res = await regionsList()
  optionsList.value = res.data
}

async function getTree() {
  const res1 = await deptTreeSelect()
  list.value = res1.data
}

// 地址
function changeAddress(value) {
  form.value.provinceId = value?.[0]?.toString()
  form.value.cityId = value?.[1]?.toString()
  form.value.regionId = value?.[2]?.toString()
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs['deptRef'].validate((valid) => {
    if (valid) {
      console.log(form.value)
      if (form.value.deptId != undefined) {
        updateDept(form.value).then((response) => {
          proxy.$modal.msgSuccess('修改成功')
          show.value = false
          emit('submit')
        })
      } else {
        addDept(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功')
          show.value = false
          emit('submit')
        })
      }
    }
  })
}


function open(params) {
  getShenProIdFN(params.parentId)
  proxy.resetForm('deptRef')
  deptType.value = params.deptType
  let str = ''
  switch (params.deptType) {
    case '1': // 中跆协
      str = '中跆协'
      break
    case '2': // 省
      str = '省级协会'
      break
    case '3': // 直属
      str = '一级直属协会'
      break
    case '4': // 市
      if (params.sType == '2') {
        str = '市级协会'
      } else {
        str = '二级直属协会'
      }
      break
    case '5': // 区
      if (params.sType == '2') {
        str = '区级协会'
      } else {
        str = '三级直属协会'
      }
      break
    case '6': // 团体
      str = '道馆/团体会员'
      break
  }
  title.value = `${params.deptId ? '修改' : '新建'}${str}`
  label.value = {
    code: `${str}编号`,
    name: `${str}名称`
  }

  if (params.deptId) {
    getDept(params.deptId).then((response) => {
      form.value = response.data
      show.value = true
      form.value.validateTime = parseTime(
        form.value.validateTime,
        '{y}-{m}-{d} {h}:{i}:{s}'
      )
      validateTime.value = form.value.validateTime
      console.log(typeof (validateTime.value) == 'string')
      form.value.parentId = form.value.parentId.toString()
      form.value.coordinates1 = []
      if (form.value.provinceId) {
        form.value.coordinates1.push(form.value.provinceId)
      }
      if (form.value.cityId) form.value.coordinates1.push(form.value.cityId) // 省份/市/区/州 选择框中的选择
      if (form.value.regionId) {
        form.value.coordinates1.push(form.value.regionId)
      }
      belongProvinceId.value = form.value.belongProvinceId
      deptCode.value = form.value.deptCode

      console.log(form.value)
    })
  } else {
    form.value = {
      parentId: params.parentId,
      deptType: params.deptType,
      isView: '0',
      isExam: '0',
      directUnderFlag: '0',
      membership: null
    }
    switch (params.deptType) {
      case '2': // 省
        form.value.membership = defaultAmount.value.firstLevelMemberFee * 1
        break
      case '3': // 直属
        form.value.membership = defaultAmount.value.firstLevelMemberFee * 1

        break
      case '4': // 市
        form.value.membership = defaultAmount.value.secondLevelMemberFee * 1

        break
      case '5': // 区
        form.value.membership = defaultAmount.value.thirdLevelMemberFee * 1

        break
      case '6': // 团体
        form.value.membership = defaultAmount.value.clubMemberFee * 1

        break
    }
    if (form.value.deptType == 3) {
      form.value.belongProvinceId = 0
      belongProvinceId.value = 0
    }
    show.value = true
  }
  addressFn()
  getTree()
  console.log(form.value)
}

async function getShenProIdFN(parentId) {
  if (parentId) {
    const res = await getShenProId({ parentId })
    if (res.data != 0 && res.data != -1) {
      form.value.belongProvinceId = res.data
      belongProvinceId.value = res.data
    }
  }
}

function disablesDate(time) {
  if (validateTime.value && validateTime.value.length > 0) {
    return time < new Date(validateTime.value.replace(/\-/g, '/')).getTime()
  }
}

function close() {
  show.value = false
  validateTime.value = null
  form.value = {}
}
defineExpose({
  open,
  submit
})
</script>

<style scoped>
</style>