<template>
  <el-card>
    <el-button
      icon="Plus" circle
      style="margin-left: 10px" @click="addCollapseItem"
    />
    <el-collapse v-model="data.currActive" style="margin-top: 10px" accordion>
      <el-collapse-item v-for="b in data.business" :key="b.id" :name="b.id">
        <template #title>
          {{ b.year }} 年度 约定数量
        </template>
        
        <h3>
          <span>
            年度：<el-date-picker v-model="b.year" type="year" format="YYYY" value-format="YYYY" :clearable="false" />
          </span>
          <span style="margin-left: 50px">
            会员费: {{ b.free.personMemberFee }} 元/人/年
          </span>
          <span style="margin-left: 50px">
            单位费: {{ b.free.secondLevelMemberFee }} 元/年
          </span>
          <span style="margin-left: 50px">
            协会：<el-select v-model="b.activeTab" filterable>
              <el-option v-for="m in data.members_base" :key="m.deptId" :label="m.deptName" :value="m.deptId" />
            </el-select>
          </span>
        </h3>
        
        <el-tabs v-model="b.activeTab" type="border-card">
          <el-tab-pane v-for="m in b.members" :key="m.deptId" :label="m.deptName" :name="m.deptId">
            <el-descriptions border direction="vertical" :column="1">
              <el-descriptions-item label="个人会员约定数量">
                <el-form label-width="80" label-suffix="：" inline>
                  <el-form-item v-for="p in m.personNum" :key="p.month" :label="p.monthStr">
                    <el-input-number v-model="p.num" controls-position="right" />
                  </el-form-item>
                </el-form>
              </el-descriptions-item>
              <el-descriptions-item label="单位会员约定数量">
                <el-form-item label="年度：" label-width="80">
                  <el-input-number v-model="m.memberNum" controls-position="right" />
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
            
            <div style="display: flex;justify-content: center;margin-top: 10px">
              <el-button type="primary" @click="submitForm(b)">提 交</el-button>
              <el-button type="danger" @click="deleteForm(b)">删 除</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<script setup>

import {
  delBusinessConfig,
  editBusinessConfig,
  getBusinessConfig,
  getZtxFeeConfig
} from '@/api/system/config'
import _ from 'lodash'
import * as uuid from 'uuid'
import { listDept } from '@/api/system/dept'
import dayjs from 'dayjs'
import { onMounted, getCurrentInstance, reactive } from 'vue'

const { proxy } = getCurrentInstance()


const data = reactive({
  business: [],
  currActive: undefined,
  members_base: undefined
})

let free_base
const month_base = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

onMounted(() => {
  listDept({
    deptType: 2
  }).then((res) => {
    data.members_base = res.data
  })
  
  getBusinessConfig().then(res => {
    if (res.length == 0) {
      if (data.business.length == 0) {
        addCollapseItem()
      }
    } else {
      data.business = res
    }
  })
})

function init() {
  getZtxFeeConfig().then((res) => {
    free_base = {
      personMemberFee: res.data.personMemberFee,
      secondLevelMemberFee: res.data.secondLevelMemberFee
    }
    
    _.each(data.business, (b) => {
      if (!b.configId) {
        b.free = _.cloneDeep(free_base)
      }
    })
  })
}

function addCollapseItem() {
  const item = {
    id: uuid.v4(),
    year: `${dayjs().year()}`,
    free: _.cloneDeep(free_base),
    members: _.map(data.members_base, (mem) => {
      return {
        deptId: mem.deptId,
        deptName: mem.deptName,
        memberNum: undefined,
        personNum: _.map(month_base, (m, i) => {
          return {
            monthStr: m,
            month: i + 1,
            num: undefined
          }
        })
      }
    }),
    activeTab: data.members_base[0].deptId
  }
  
  data.business.push(item)
  data.currActive = item.id
}

function submitForm(bus) {
  if (_.some(bus.members, (item) => {
    if (_.some(item.personNum, (p) => {
      return !p.num && p.num !== 0
    })) {
      return true
    }
    
    if (!item.memberNum && item.memberNum !== 0) {
      return true
    }
    
    return false
  })) {
    proxy.$modal.msgError('请完善数据')
    return
  }
  
  if (_.some(data.business, (b) => {
    if (b.configId && b.configId !== bus.configId && b.year == bus.year) {
      return true
    }
    return false
  })) {
    proxy.$modal.msgError(`${bus.year} 的数据已存在，请确认`)
    return
  }
  
  proxy.$modal.confirm(`确定提交 ${bus.year} 的数据吗？`).then(() => {
    editBusinessConfig(bus).then((res) => {
      bus.configId = res.data
      proxy.$modal.msgSuccess('保存成功')
    })
  })
}

function deleteForm(bus) {
  proxy.$modal.confirm('确定删除吗？').then(() => {
    if (bus.configId) {
      delBusinessConfig(bus.configId).then(() => {
        _.remove(data.business, (item) => {
          return item.id == bus.id
        })
      })
    } else {
      _.remove(data.business, (item) => {
        return item.id == bus.id
      })
    }
  })
}

defineExpose({
  init
})

</script>

<style scoped>

</style>