<template>
  <div class="app-container">
    <div>
      <el-tabs v-model="activeName" @tab-change="handleClick">
        <el-tab-pane v-if="deptType!=6" label="道馆" name="4" />
        <el-tab-pane v-if="deptType==1||deptType==2||deptType==4||deptType==3" name="3" label="三级协会" />
        <el-tab-pane v-if="deptType==1||deptType==2||deptType==3" label="二级协会" name="2" />
        <el-tab-pane v-if="deptType==1" label="一级协会" name="1" />
      </el-tabs>
      <div class="from-Card" style="padding: 20px 20px 0">
        <el-form
          ref="queryRef" size="small" :model="queryParams" :inline="true" label-width="auto"
          label-position="top"
        >
          <el-row style="width: 100%;">
            <el-col :span="5">
              <el-form-item label="团体会员名称" prop="name" label-width="">
                <el-input
                  v-model.trim="queryParams.name"
                  placeholder=""
                  clearable
                  style="width: 100%;"
                  @keyup.enter="selectFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="会员编号" prop="memCode" label-width="">
                <el-input
                  v-model.trim="queryParams.memCode"
                  placeholder=""
                  clearable
                  style="width: 100%;"
                  @keyup.enter="selectFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态" prop="valiStatus" label-width="">
                <el-select v-model="queryParams.valiStatus" placeholder="" style="width: 100%;" @change="selectFN">
                  <el-option label="全部" value="" />
                  <el-option label="正常" value="0" />
                  <el-option label="过期" value="1" />
                  <el-option label="即将过期" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :hidden="showCollect">
              <el-form-item label="省份" prop="provinceId" label-width="">
                <el-select v-model="queryParams.provinceId" placeholder="" style="width: 100%;" @change="selectFN">
                  <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="(activeName==3||activeName==4)" :span="5" :hidden="showCollect">
              <el-form-item label="所属协会" prop="">
                <el-cascader
                  v-model="queryParams.parentDeptId"
                  :options="list"
                  :props="props2"
                  clearable
                  style="width: 100%;"
                  @change="selectFN"
                />
              </el-form-item>
            </el-col> 
            <el-col v-if="activeName==4&&deptType==1" :span="5" :hidden="showCollect">
              <el-form-item label="官网是否显示" prop="isShow" label-width="">
                <el-select v-model="queryParams.isShow" placeholder="" style="width: 100%;" @change="selectFN">
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="activeName==4&&deptType==1" :span="5" :hidden="showCollect">
              <el-form-item label="是否为考点" prop="isPoints" label-width="">
                <el-select v-model="queryParams.isPoints" placeholder="" style="width: 100%;" @change="selectFN">
                  <el-option label="是 " value="0" />
                  <el-option label="否" value="1" />
                </el-select>
              </el-form-item> 
            </el-col>
            <el-col v-if="activeName==4&&deptType==1" :span="5" :hidden="showCollect">
              <el-form-item label="是否发牌匾" prop="isPlaque" label-width="">
                <el-select v-model="queryParams.isPlaque" placeholder="" style="width: 100%;" @change="selectFN">
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item>  
            </el-col>
            <el-col v-if="deptType==1" :span="5" :hidden="showCollect">
              <el-form-item label="是否黑名单" prop="isBlack" label-width="">
                <el-select v-model="queryParams.isBlack" placeholder="" style="width: 100%;" @change="selectFN">
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" :hidden="showCollect">
              <el-form-item label="过期时间" prop="memCode" label-width="">
                <el-date-picker
                  v-model="validityDateRange"
                  type="datetimerange"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%;"
                  @change="selectFN"
                />
              </el-form-item>
            </el-col>
            <div class="po-r-btns">
              <el-button size="small" type="primary" icon="Search" @click="selectFN">搜索</el-button>
              <el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
              <!--              <el-button size="small" type="warning" icon="Download" @click="educeFN">导出</el-button>-->
              <el-button size="small" type="warning" icon="Download" @click="mailingAddress">导出邮寄地址</el-button>
              <el-button
                v-if="activeName==1"
                size="small" type="warning"
                icon="Download" @click="makeOutAnInvoice"
              >导出开票信息</el-button>
              <el-button
                v-if="showCollect" size="small" type="primary" link icon="ArrowDown"
                @click="showCollect=!showCollect"
              >展开</el-button>
              <el-button
                v-else size="small" type="primary" link icon="ArrowUp"
                @click="showCollect=!showCollect"
              >收起</el-button>
            </div>

          </el-row>
        </el-form>
      </div>

      <div class="vipData">
        <div> 全部会员数：<span class="ml5">{{ forms?.total }}</span></div>
        <div> 有效会员数：<span class="ml5">{{ forms?.effective }}</span></div>
        <div> 过期会员数：<span class="ml5">{{ forms?.expired }}</span> </div>
        <div> 即将过期会员数：<span class="ml5">{{ forms?.soon }}</span></div>
      </div>
      <div class="table">
        <el-table v-loading="loading" :data="infoList" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center" width="40" :selectable="selectable" />
          <el-table-column type="index" label="序号" width="55" align="center" />

          <el-table-column label="会员编号" align="center" prop="memCode" min-width="135" />
          <el-table-column label="团体会员名称" align="center" prop="name" min-width="140px" :show-overflow-tooltip="true" />
          <el-table-column label="所属省份" align="center" prop="provinceStr" width="100px" :show-overflow-tooltip="true" />
          <el-table-column
            v-if="activeName==4||activeName==3||activeName==2" label="一级协会" align="center" prop="deptId" min-width="100px"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <div v-if="scope.row.ancestorsNameList">{{ scope.row.ancestorsNameList[0] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName==4||activeName==3" label="二级协会" align="center" prop="deptId" min-width="100px"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <div v-if="scope.row.ancestorsNameList">{{ scope.row.ancestorsNameList[1] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName==4" label="三级协会" align="center" prop="deptId" min-width="100px"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <div v-if="scope.row.ancestorsNameList">{{ scope.row.ancestorsNameList[2] }}</div>
            </template>
          </el-table-column>
          <el-table-column label="有效会员" align="center" prop="validityMemberCount" width="80px" />
          <el-table-column label="全部会员" align="center" prop="allMemberCount" width="80px" />
          <el-table-column label="过期日期" align="center" prop="" width="100px">
            <template #default="scope">
              <span>{{ parseTime(scope.row.validityDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column> 
          <el-table-column v-if="activeName==1" label="会员费" align="center" prop="personFee" width="100px">
            <template #default="scope">
              <div>
                <el-input v-model="scope.row.personFee" type="" size="small" @change="costFN(scope.row)" />
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column v-if="activeName==1" label="级位考试费" align="center" prop="status" width="90px" /> -->
          <!-- <el-table-column v-if="activeName==1" label="段位考试费" align="center" prop="status" width="90px" /> -->
          <el-table-column label="状态" align="center" prop="valiStr" width="90px" />
          <el-table-column label="续存年限" align="center" prop="years" width="80px" />
          <el-table-column v-if="deptType==1" label="黑名单" align="center" prop="isBlack" width="80px">
            <template #default="scope">
              <el-switch v-if="scope.row.isBlack==0" :model-value="scope.row.isBlack" active-value="1" inactive-value="0" @click="handleStatus(scope.row,'加入黑名单','3',false)" />
              <el-switch v-if="scope.row.isBlack==1" :model-value="scope.row.isBlack" active-value="1" inactive-value="0" @click="handleStatus(scope.row,'解除黑名单','3',true)" />
            </template>
          </el-table-column>
          <el-table-column v-if="deptType==1" label="发放牌匾" align="center" prop="isPlaque" width="80px">
            <template #default="scope">
              <el-switch v-if="scope.row.isPlaque==0" :model-value="scope.row.isPlaque" active-value="1" inactive-value="0" @click="handleStatus(scope.row,'发放牌匾','2',false)" />
              <el-switch v-if="scope.row.isPlaque==1" :model-value="scope.row.isPlaque" active-value="1" inactive-value="0" @click="handleStatus(scope.row,'取消发放','2',true)" />
            </template>
          </el-table-column>
          <el-table-column v-if="activeName==4&&deptType==1" label="设为考点" align="center" prop="isPoints" width="80px">
            <template #default="scope">
              <el-switch v-if="scope.row.isPoints==1" :model-value="scope.row.isPoints" active-value="0" inactive-value="1" @click="handleStatus(scope.row,'设为考点','1',true)" />
              <el-switch v-if="scope.row.isPoints==0" :model-value="scope.row.isPoints" active-value="0" inactive-value="1" @click="handleStatus(scope.row,'取消考点','1',false)" />
            </template>
          </el-table-column>
          <el-table-column v-if="deptType==1" label="官网显示" align="center" prop="isShow" width="80px">
            <template #default="scope">
              <el-switch v-if="scope.row.isShow==0" :model-value="scope.row.isShow" active-value="1" inactive-value="0" @click="handleStatus(scope.row,'在官网显示','0',false)" />
              <el-switch v-if="scope.row.isShow==1" :model-value="scope.row.isShow" active-value="1" inactive-value="0" @click="handleStatus(scope.row,'取消在官网显示','0',true)" />
            </template>
          </el-table-column>
          <el-table-column v-if="deptType==1" label="调动保护" align="center" prop="transferProtect " width="80px">
            <template #default="scope">
              <el-switch v-if="scope.row.transferProtect==0" :model-value="scope.row.transferProtect " active-value="1" inactive-value="0" @click="handleStatus(scope.row,'开启调动保护','4',false)" />
              <el-switch v-if="scope.row.transferProtect==1" :model-value="scope.row.transferProtect " active-value="1" inactive-value="0" @click="handleStatus(scope.row,'关闭调动保护','4',true)" />
            </template>
          </el-table-column>
          <el-table-column v-if="deptType==1&&activeName==1" label="级段" align="center" prop="isShow" width="80px">
            <template #default="scope">
              <el-button link type="primary" @click="detailFN(scope.row)">查看</el-button>
            </template>
          </el-table-column>

          <el-table-column
            label="操作" align="center" fixed="right"
            width="260"
          >
            <template #default="scope">
              <el-button color="#13B5B1" style="--el-color-black:#fff;" @click="handleDetail(scope.row)">机构会员</el-button>
              <el-button type="primary" @click="headerUser(scope.row)">机构资料</el-button>

              <el-dropdown v-if="deptType==1||deptType==2||deptType==3" class="poptdmore">
                <el-button type="primary" plain>更多
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button v-if="deptType==1||deptType==2||deptType==3" type="danger" @click="replacement(scope.row)">重置密码</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button type="warning" @click="recordFN(scope.row)">变更记录</el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button v-else type="warning" @click="recordFN(scope.row)">变更记录</el-button>
              <!-- <el-button type="warning" @click="handleDelete(scope.row)">清除所属</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div v-show="totalCost>0&&activeName==1" class="totalCost">费用合计：<span>{{ totalCost.toFixed(2) }}元</span></div>

        <pagination
          v-show="total>0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="getList"
        />
      </div>

      <!--      机构会员-->
      <info v-show="showInfo" ref="infoRef" />
      <!-- 机构资料 -->
      <institution v-show="showInstitution" ref="institutionRef" @backFn="getList" />
      <!-- 级段 -->
      <segment v-show="showSegment" ref="segmentRef" @close="getList" />
      <!--      重置密码-->
      <Administrator ref="AdministratorRef" />
      <!--      变更记录-->
      <record ref="recordRef" />
    </div>
  </div>
</template>

<script setup >

import { ref, getCurrentInstance, reactive, toRefs, computed } from 'vue'
import { changeStatus, selectPageList, getMemberCountInfo, editMemberShip } from '@/api/groupMember/index.js'
import { regionsList, certifiedDeptTree } from '@/api/system/userInfo.js'
import useUserStore from '@/store/modules/user'
import info from './info.vue'
import institution from './components/institution'
import segment from './components/segment'
import Administrator from '/@/views/groupMember/Administrator.vue'
import record from './components/record'

const deptType = computed(() => useUserStore().deptType)
// 部门类型 1:中跆协 2:省 3:直属 4:市 5:区 6: 团体
console.log(deptType.value)
const showInfo = ref(false)
// const showDetail = ref(false)
const showInstitution = ref(false)
const showSegment = ref(false)
const { proxy } = getCurrentInstance()
const validityDateRange = ref([])
const infoList = ref([])
const totalCost = ref(0)
const loading = ref(true)
const ids = ref([])
const multiple = ref(true)
const total = ref(0)
const list = ref([])
const showCollect = ref(true)
const props2 = {
  checkStrictly: true,
  children: 'children',
  value: 'id',
  emitPath: false
}
const options = ref([])
const activeName = ref('4')
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    dType: 4,
    fromList: 1,
    valiStatus: '0',
    status: 2
  },
  forms: {},
  userForm: {}
})

const { queryParams, forms, userForm } = toRefs(data)

function selectFN() {
  queryParams.value.pageNum = 1
  getList()
}

getList()
// /** 查询团体会员列表 */
function getList() {
  loading.value = true
  if (queryParams.value.valiStatus == 3) {
    queryParams.value.soonExpired = 1
  } else {
    queryParams.value.soonExpired = null
  }
  totalCost.value = 0
  if (validityDateRange.value.length > 1) queryParams.value.expiredTimeRange = validityDateRange.value.toString()
  selectPageList(queryParams.value).then(response => {
    infoList.value = response.rows
    total.value = response.total
    loading.value = false
    infoList.value.forEach(item => {
      totalCost.value += (item.personFee * 1)
    })
  }).finally(() => {
    loading.value = false
  })
}

// 省份
addressFn()
async function addressFn() {
  const res = await regionsList()
  options.value = res.data
}

// // 新建认证
// async function addAudit() {
//   const res = await certifiedRange({ rangeId: 0, memIds: ids.value.join(',') })
//   if (res.code == 200) {
//     if (res.data) {
//       proxy.$modal.msgSuccess('操作成功！')
//       router.push({
//         path: '/group/groupMemberPay/addGroupMemberPay',
//         query: { rangeId: res.data || 0 }
//       })
//     }
//   } else {
//     proxy.$modal.msgError('操作失败！')
//   }
// }

/** 查询部门下拉树结构 */
// getDeptTree()
// function getDeptTree() {
//   deptTreeSelect().then((response) => {
//     console.log(response)
//   })
// }
// 请求修改

// 协会
getClass()
async function getClass() {
  const res = await certifiedDeptTree({ selfDeptId: deptType.value != 1 ? 1 : -1 })
  list.value = res.data
  console.log(res)
}

// tab栏
function handleClick(e) {
  console.log(e)
  activeName.value = e
  // 部门类型 1:中跆协 2:省 3:直属 4:市 5:区 6: 团体
  const type = e
  validityDateRange.value = []
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    dType: type,
    fromList: 1,
    status: 2
  }
  getList()
  getGroupList()
}

getGroupList()
// 查询全体会员
async function getGroupList() {
  // debugger
  const res = await getMemberCountInfo({ dType: queryParams.value.dType, fromList: 1 })
  forms.value = res
}

// // 清除所属项
// function handleDelete(row) {
//   proxy.$modal.confirm('是否确认清除团体会员编号为"' + row.memCode + '"的数据项？').then(function() {
//     loading.value = true
//     return clearOwner(row.deptId)
//   }).then(() => {
//     loading.value = true
//     getList()
//     proxy.$modal.msgSuccess('操作成功')
//   }).catch(() => {
//   }).finally(() => {
//     loading.value = false
//   })
// }


/** 重置按钮操作 */
function resetQuery() {
  const type = queryParams.value.dType
  validityDateRange.value = []
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    dType: type,
    fromList: 1,
    status: 2
  }
  getList()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.memId)
  multiple.value = !selection.length
}

// 详情
function handleDetail(row) {
  console.log(row)
  showInfo.value = true
  proxy.$refs['infoRef'].open(row.deptId)
}

// 变更记录
function recordFN(row) {
  console.log(JSON.parse(row.modLog))
  proxy.$refs['recordRef'].open(JSON.parse(row.modLog))
}
// 重置密码
function replacement(row) {
  proxy.$refs['AdministratorRef'].open(row.deptId)
}
/** 操作 */
function handleStatus(row, title, property, status) {
  proxy.$modal.confirm('是否确认' + title + ',团体会员编号为"' + row.memCode + '"的数据项？').then(function() {
    loading.value = true
    return changeStatus({
      memId: row.memId + '',
      status,
      property
    })
  }).then(() => {
    loading.value = true
    getList()
    proxy.$modal.msgSuccess('操作成功')
  }).catch(() => {
  }).finally(() => {
    loading.value = false
  })
}

function detailFN(row) {
  showSegment.value = true
  proxy.$refs['segmentRef'].open(row)
}

function headerUser(row) {
  userForm.value = {}
  userForm.value = row
  userForm.value.adress = userForm.value.certAddress
  userForm.value.businessLicense = userForm.value.certBusinessLicense
  userForm.value.cityId = userForm.value.certCityId
  userForm.value.legal = userForm.value.certLegal
  userForm.value.legalIdcPhoto = userForm.value.certLegalIdcPhoto
  userForm.value.pictures = userForm.value.certPictures
  userForm.value.provinceId = userForm.value.certProvinceId
  userForm.value.regionId = userForm.value.certRegionId
  userForm.value.siteTel = userForm.value.certSiteTel
  userForm.value.contact = userForm.value.siteContact
  userForm.value.siteContact = userForm.value.certSiteContact
  row.isPoints == 1 ? userForm.value.applyPoints = '0' : userForm.value.applyPoints = '1'
  if (row.materials) {
    try {
      userForm.value.materials = JSON.parse(row.materials)
      userForm.value.applicationForMembership = JSON.parse(row.applicationForMembership)
    } catch (error) {
      
    }
  }
  showInstitution.value = true
  proxy.$refs['institutionRef'].open(userForm.value, deptType.value)
}

// 费用修改
async function costFN(row) {
  const res = await editMemberShip({ memId: row.memId, personFee: row.personFee })
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功！')
    getList()
  }
}

function educeFN() {
  proxy.download(
    `/member/info/exportPageList`, { ...queryParams.value }, '协会信息.xlsx'
  )
}

// 导出开票信息
function makeOutAnInvoice() {
  proxy.download(
    `/member/info/exportInvoiceInfo`, { ...queryParams.value }, '开票信息.xlsx'
  )
}

// 导出邮寄地址
function mailingAddress() {
  proxy.download(
    `/member/info/exportMemberMailingAddress`, { ...queryParams.value }, '邮寄地址.xlsx'
  )
}
</script>

<style lang="scss" scoped>
.nav{
  display: flex;
}
.nva-btn {
  margin:0 10px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.btn{
  color: #014A9F;
  border-bottom: 2px solid #014A9F;
}

.end{
  width: 300px;
  margin-left: auto;
}

.select{
  display: flex;
}

.flex{
  display: flex;
}
.table{
  padding: 20px !important;
}
</style>