<template>
  <div class="app-container">
    <el-dialog
      v-if="show"
      v-model="show" class="dialog" title="查看详情" :close-on-click-modal="true" width="80%"
      draggable
    >
      <div>
        <el-form :inline="true" label-position="top" size="small">
          <el-row>
            <el-col :span="4">
              <el-form-item label="团队会员" prop="name" label-width="90px">
                <el-input
                  v-model.trim="queryParams.name"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="省份" prop="provinceId" label-width="60px">
                <el-select v-model="queryParams.provinceId" placeholder="" style="width: 100%;">
                  <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 :span="8" style="display: flex">
              <el-form-item style="width: 100%" label="过期时间" prop="validityDateRange" label-width="">
                <el-date-picker
                  v-model="validityDateRange[0]"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="开始时间"
                  style="width: 100%;"
                />
              </el-form-item>
              <el-form-item style="width: 100%" label="过期时间" prop="validityDateRange" label-width="">
                <el-date-picker
                  v-model="validityDateRange[1]"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="结束时间"
                  style="width: 100%;"
                  :default-time="defaultTime"
                />
              </el-form-item>
            </el-col>
            
            <el-col :span="8">
              <el-form-item label="过期时间" prop="memCode" label-width="90px">
                <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%;"
                />
              </el-form-item>
            </el-col>
          </el-row>
        
        </el-form>
        <el-row justify="space-between">
          <div>
            <el-button v-if="form.auditStatus==0" size="small" type="primary" @click="auditFn">审核</el-button>
          </div>
          <div>
            <el-button size="small" type="primary" @click="getList">查询</el-button>
            <el-button size="small" @click="rest">重置</el-button>
          </div>
        </el-row>
      </div>
      <br>
      <div>
        <el-table v-loading="loading" :data="list" max-height="300" border>
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column label="会员编号" align="center" prop="memCode" min-width="100" />
          <el-table-column label="单位名称" align="center" prop="name" min-width="140px" />
          <el-table-column label="所属省份" align="center" prop="provinceStr" />
          <el-table-column
            v-if="deptType==8||deptType==7" label="一级协会" align="center" prop="deptId"
            min-width="100px"
          >
            <template #default="scope">
              <div v-if="scope.row.ancestorsNameList">{{ scope.row.ancestorsNameList[0] }}</div>
            </template>
          </el-table-column>
          <el-table-column v-if="deptType==8" label="二级协会" align="center" prop="deptId" min-width="100px">
            <template #default="scope">
              <div v-if="scope.row.ancestorsNameList">{{ scope.row.ancestorsNameList[1] }}</div>
            </template>
          </el-table-column>
          <el-table-column label="有效会员/全部会员" align="center" prop="validityMemberCount" min-width="140px" />
          <el-table-column label="过期日期" align="center" prop="" min-width="100px">
            <template #default="scope">
              <span>{{ parseTime(scope.row.validityDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="valiStr" />
          <el-table-column label="续存年限" align="center" prop="years" />
        </el-table>
      </div>
      <pagination
        v-show="total>0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </el-dialog>
  
  </div>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, getCurrentInstance, ref } from 'vue'
import { selectPageList } from '@/api/groupMember/index.js'
import { regionsList, certifiedDeptTree } from '@/api/system/userInfo.js'
import { dateEnd } from '/@/utils/ruoyi'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['approval'])
const data = reactive({
  show: false,
  form: {},
  list: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  getAuditList: [],
  forms: {},
  options: []
})
const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))
const optionList = ref([])
const { show, form, list, queryParams, options } = toRefs(data)
const total = ref(0)
const deptType = ref()
const pType = ref()
const exam = null
const validityDateRange = ref([null, null])
const loading = ref(false)

function open(params, num, type) {
  show.value = true
  if (params) form.value = params
  queryParams.value.parentDeptId = form.value.deptId
  deptType.value = num
  pType.value = type
  getList()
  // getGroupList()
}

// /** 查询单位会员列表 */
function getList() {
  if (validityDateRange.value[0] && validityDateRange.value[1] == null) return proxy.$modal.msgError('请选择过期时间范围')
  if (validityDateRange.value[0] == null && validityDateRange.value[1]) return proxy.$modal.msgError('请选择过期时间范围')
  if (validityDateRange.value[1]) validityDateRange.value[1] = dateEnd(validityDateRange.value[1])
  queryParams.value.validityDateRange = validityDateRange.value.length > 1 && validityDateRange.value[0] != null ? validityDateRange.value.toString() : null
  
  loading.value = true
  // if (validityDateRange.value.length > 1) queryParams.value.expiredTimeRange = validityDateRange.value.toString()
  selectPageList(queryParams.value).then(response => {
    list.value = response.rows
    total.value = response.total
  })
  loading.value = false
}

// 省份
addressFn()

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

// 协会
getClass()

async function getClass() {
  const res = await certifiedDeptTree()
  optionList.value = res.data
}

// // 查询全体会员
// async function getGroupList() {
//   const res = await getMemberCountInfo(queryParams.value.deptType)
//   forms.value = res
// }

// 重置
function rest() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  }
  validityDateRange.value = [null, null]
  getList()
}

function auditFn() {
  const fromData = JSON.parse(JSON.stringify(form.value))
  fromData.content = JSON.stringify(fromData.content)
  proxy.$refs['DoAudit'].open(JSON.stringify([fromData]))
}

function close() {
  emit('approval', exam)
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  }
  show.value = false
}

defineExpose({
  open,
  close
})

</script>

<style lang="scss" scoped>
.center {
  text-align: center;
}

.flex {
  display: flex;
  justify-content: center;
  font-size: 16px;
  
  div {
    margin-left: 40px;
    margin-right: 40px;
  }
}

.x-flex {
  display: flex;
  font-size: 16px;
  
  div {
    margin-right: 40px;
    
    span {
      color: #920f20;
      font-size: 20px;
    }
  }
}

.el-button {
  margin-bottom: 18px;
}

.table {
  display: flex;
}

.text-center {
  display: flex;
  margin-top: 10px;
  margin-bottom: 40px;
}

.text-center > div {
  margin-left: 20px;
}

.text-center span {
  color: #920f20;
  font-size: 20px;
  font-weight: 600;
}


:deep(.el-form-item) {
  margin-bottom: 5px;
}
</style>