<template>
  <div class="app-container" ref="appContainer">
    <PropTable :loading="loading" @selection-change="selectionChange" :columns="column" :data="list" @reset="reset"
      @onSubmit="onSubmit">
      <template v-slot:btn>
        <div style="display: flex; justify-content: flex-end">
          <!-- <el-button type="primary" @click="add"
          ><el-icon><plus /></el-icon> 添加</el-button> -->
          <el-button type="danger" @click="batchDelete"><el-icon>
              <delete />
            </el-icon>批量删除</el-button>
        </div>
      </template>
      <template v-slot:codeType="scope">{{getStateLabel(scope.row.codeType)}}</template>
      <template v-slot:giftItems="scope">{{getItemsLabel(scope.row.giftItems) }}</template>
      <template v-slot:operation="scope">
        <!-- <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
          编辑
        </el-button> -->
        <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
          删除
        </el-button>
        <el-button @click="groupDelete(scope.row)" type="danger" size="small" icon="Delete">
          分组删除
        </el-button>
      </template>
    </PropTable>
  </div>
</template>
<script lang="ts" setup name="comprehensive">
import { ref, reactive, onMounted, nextTick, onBeforeMount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import PropTable from '@/components/Table/PropTable/index.vue'
import giftCodeApi from '@/api/giftCode'

const loading = ref(true)
const appContainer = ref(null)

const data = ref([])
let currPageNum = 1;
const pageSize = 1000;
onBeforeMount(() => {
  loadGiftCodeInfo()
})

const loadGiftCodeInfo = () => {
  let queryParams = reactive({
    pageNum: currPageNum,
    pageSize: pageSize,
    condition: {"codeType": 1}
  })
  giftCodeApi.query(queryParams).then(res => {
    data.value = res.data.result;
    console.log(data)
  })
}

const column = [
  { type: 'selection', width: 60, fixed: 'left' },
  { name: 'code', label: '礼包码', inSearch: true, valueType: 'input', width: 80 },
  {
    name: 'codeType',
    label: '礼包类型',
    slot: true,
    inSearch: true,
    options: [
      {
        value: 0,
        label: '一次性',
      },
      {
        value: 1,
        label: '通用',
      },
    ],
    valueType: 'select',
  },
  { name: 'codeGroup', label: '礼包分组', inSearch: true, valueType: 'input'},
  { name: 'giftItems', slot: true, label: '礼包道具'},
  { name: 'validTime', label: '礼包生效时间'},
  { name: 'invalidTime', label: '礼包失效时间'},
  { name: 'usePlayer', label: '使用的玩家'},
  { name: 'operation', slot: true, fixed: 'right', width: 200, label: '操作' },
]

const getStateLabel = (val) => {
  if (val == 0) {
    return '一次性'
  } else if (val == 1) {
    return '通用'
  }
}

const getItemsLabel = (val) => {
  console.log("val:", val)
  if (val != null) {
    let label = ""
    val.forEach((v, i) => {
      label += v["itId"] + '-' + v["itCnt"]
      if (i < val.length - 1) {
        label += ","
      }
    });
    return label;
  }
}

const list = ref(data)

const del = (row) => {
  console.log('row==', row)
  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  })
    .then(() => {
      let deleteParams = reactive({
        code: row.code
      })
      giftCodeApi.delete(deleteParams).then(res => {
        // loadGiftCodeInfo()
        list.value = list.value.filter((item) => item.id !== row.id)
        ElMessage.success('删除成功')
      })
      loading.value = true
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
    .catch(() => { })
}

const selectObj = ref([])

const selectionChange = (val) => {
  selectObj.value = val
}

const batchDelete = () => {
  if (!selectObj.value.length) {
    return ElMessage.error('未选中任何行')
  }
  ElMessageBox.confirm('你确定要删除选中项吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  })
    .then(() => {
      let giftCodeIds = reactive([])
      for (let value of selectObj.value) {
        giftCodeIds.push(value.code)
      }
      let deleteParams = reactive({
        codes: giftCodeIds
      })
      giftCodeApi.deleteBatch(deleteParams).then(res => {
        // loadGiftCodeInfo()
        list.value = list.value.filter((item) => giftCodeIds.includes(item.id))
        ElMessage.success('批量删除成功')
      })

      list.value = list.value.concat([])
    })
    .catch(() => { })
}

const groupDelete = (row) => {
  ElMessageBox.confirm('你确定要删除整个分组的礼包码吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  })
  .then(() => {
      let deleteParams = reactive({
        codeGroup: row.codeGroup
      })
      giftCodeApi.deleteGroup(deleteParams).then(res => {
        loadGiftCodeInfo()
        ElMessage.success('分组删除成功')
      })
      loading.value = true
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
    .catch(() => { })
}

const reset = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
  ElMessage.success('触发重置方法')
}

const onSubmit = (val) => {
  if ((val.code == null || val.code == "") && val.codeType == null && (val.codeGroup == null || val.codeGroup == "")) {
    ElMessage.warning('请输入查询条件')
    return
  }
  let queryParams = reactive({
    pageNum: 1,
    pageSize: pageSize,
    condition: val
  })
  giftCodeApi.query(queryParams).then(res => {
    data.value = res.data.result;
    console.log(data.value)
  })
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

onMounted(() => {
  nextTick(() => {
    // let data = appContainer.value.
  })
  setTimeout(() => {
    loading.value = false
  }, 500)
})
</script>

<style scoped>

.app-container {
  flex: 1;
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

</style>
