<template>
  <el-card>
    <el-form ref="costForm" :model="form" :rules="rules" label-suffix="：" label-width="150">
      <el-form-item label="会员费标准" prop="personMemberFee">
        <el-input v-model="form.personMemberFee" type="number" style="width: 250px">
          <template #append>元/人/年</template>
        </el-input>
      </el-form-item>
      <el-form-item label="一级团体会员费" prop="firstLevelMemberFee">
        <el-input v-model="form.firstLevelMemberFee" type="number" style="width: 250px">
          <template #append>元/年</template>
        </el-input>
      </el-form-item>
      <el-form-item label="二级团体会员费" prop="secondLevelMemberFee">
        <el-input v-model="form.secondLevelMemberFee" type="number" style="width: 250px">
          <template #append>元/年</template>
        </el-input>
      </el-form-item>
      <el-form-item label="三级团体会员费" prop="thirdLevelMemberFee">
        <el-input v-model="form.thirdLevelMemberFee" type="number" style="width: 250px">
          <template #append>元/年</template>
        </el-input>
      </el-form-item>
      <el-form-item label="俱乐部团体会员费" prop="clubMemberFee">
        <el-input v-model="form.clubMemberFee" type="number" style="width: 250px">
          <template #append>元/年</template>
        </el-input>
      </el-form-item>
      <el-form-item label="级位证书费用" prop="jiFee">
        <el-row>
          <el-col v-for="(jf,index) in form.jiFee" :key="jf.name">
            <el-input v-model="jf.value" type="number" style="width: 250px;margin-bottom: 8px;">
              <template #prepend>
                <el-select v-model="jf.name" style="width: 100px">
                  <el-option
                    v-for="ji in jiArr" :key="ji.value" :label="ji.name" :value="ji.value"
                    :disabled="checkJiOptionDis(index,ji.value)"
                  />
                </el-select>
              </template>
              <template #append>人/元</template>
            </el-input>
            <el-button
              v-show="form.jiFee.length>1" icon="Minus" circle style="margin-left: 10px"
              @click="removeJiFree(index)"
            />
            <el-button
              v-show="index==form.jiFee.length-1 && form.jiFee.length!=jiArr.length" icon="Plus" circle
              style="margin-left: 10px" @click="addJiFree"
            />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="段位证书费用" prop="duanFee">
        <el-row>
          <el-col v-for="(df,index) in form.duanFee" :key="df.name">
            <el-input v-model="df.value" type="number" style="width: 250px;margin-bottom: 8px;">
              <template #prepend>
                <el-select v-model="df.name" style="width: 100px">
                  <el-option
                    v-for="du in duanArr" :key="du.value" :label="du.name" :value="du.value"
                    :disabled="checkDuanOptionDis(index,du.value)"
                  />
                </el-select>
              </template>
              <template #append>人/元</template>
            </el-input>
            <el-button
              v-show="form.duanFee.length>1" icon="Minus" circle style="margin-left: 10px"
              @click="removeDuanFree(index)"
            />
            <el-button
              v-show="index==form.duanFee.length-1 && form.duanFee.length!=duanArr.length" icon="Plus" circle
              style="margin-left: 10px" @click="addDuanFree"
            />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" style="width: 180px" @click="submitForm">保 存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>

import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { onMounted, toRefs } from 'vue'
import { editZtxFeeConfig, getZtxFeeConfig } from '@/api/system/config'
import _ from 'lodash'

const { proxy } = getCurrentInstance()

const jiArr = [
  // { name: '全部', value: '0' },
  // { name: '十级', value: '10' },
  { name: '九级', value: '9' },
  { name: '八级', value: '8' },
  { name: '七级', value: '7' },
  { name: '六级', value: '6' },
  { name: '五级', value: '5' },
  { name: '四级', value: '4' },
  { name: '三级', value: '3' },
  { name: '二级', value: '2' },
  { name: '一级', value: '1' }
]

const duanArr = [
  // { name: '全部', value: '0' },
  { name: '一段', value: '1' },
  { name: '二段', value: '2' },
  { name: '三段', value: '3' },
  { name: '四段', value: '4' },
  { name: '五段', value: '5' },
  { name: '六段', value: '6' },
  { name: '七段', value: '7' },
  { name: '八段', value: '8' },
  { name: '九段', value: '9' }
]

const data = reactive({
  form: {
    personMemberFee: null,
    firstLevelMemberFee: null,
    secondLevelMemberFee: null,
    thirdLevelMemberFee: null,
    clubMemberFee: null,
    jiFee: [{}],
    duanFee: [{}]
  },
  rules: {
    personMemberFee: [
      { required: true, message: '必填', trigger: 'blur' }
    ],
    firstLevelMemberFee: [
      { required: true, message: '必填', trigger: 'blur' }
    ],
    secondLevelMemberFee: [
      { required: true, message: '必填', trigger: 'blur' }
    ],
    thirdLevelMemberFee: [
      { required: true, message: '必填', trigger: 'blur' }
    ],
    clubMemberFee: [
      { required: true, message: '必填', trigger: 'blur' }
    ],
    jiFee: {
      validator: (rule, value, callback) => {
        if (_.some(form.value.jiFee, (ji) => {
          if (!ji.name || !ji.value) {
            return true
          } else {
            return false
          }
        })) {
          callback('必填')
        } else {
          callback()
        }
      }, required: true, trigger: ['blur']
    },
    duanFee: {
      validator: (rule, value, callback) => {
        if (_.some(form.value.duanFee, (du) => {
          if (!du.name || !du.value) {
            return true
          } else {
            return false
          }
        })) {
          callback('必填')
        } else {
          callback()
        }
      }, required: true, trigger: ['blur']
    }
  }
})
const { form, rules } = toRefs(data)

onMounted(() => {
  getZtxFeeConfig().then((res) => {
    if (res.data) {
      form.value = res.data
    }
  })
})

function submitForm() {
  proxy.$refs['costForm'].validate(valid => {
    if (valid) {
      editZtxFeeConfig(form.value).then(() => {
        proxy.$modal.msgSuccess('修改成功')
      })
    }
  })
}

function addJiFree() {
  form.value.jiFee.push({})
}

function removeJiFree(index) {
  _.remove(form.value.jiFee, (ji, i) => {
    return i == index
  })
}

function checkJiOptionDis(index, value) {
  return _.some(form.value.jiFee, (ji, i) => {
    if (i != index) {
      return ji.name == value
    } else {
      return false
    }
  })
}


function addDuanFree() {
  form.value.duanFee.push({})
}

function removeDuanFree(index) {
  _.remove(form.value.duanFee, (du, i) => {
    return i == index
  })
}

function checkDuanOptionDis(index, value) {
  return _.some(form.value.duanFee, (du, i) => {
    if (i != index) {
      return du.name == value
    } else {
      return false
    }
  })
}

</script>

<style scoped>

</style>