<template>
  <el-dialog
    title="处理结果"
    v-model="resultDialog"
    width="60%"
    :close-on-click-modal="false"
    @closed="closedFn"
  >
    <div style="display: flex">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="checkAllChange"
      >
        {{ '全选' }}
      </el-checkbox>

      <el-button
        type="success"
        style="margin-left: 20px"
        @click="resultfilter(true)"
      >
        {{ '选择正常' }}
      </el-button>
      <el-button type="danger" @click="resultfilter(false)">
        {{ '选择异常' }}
      </el-button>
      <el-button type="success" @click="copyAllCode()">
        {{ '复制结果' }}
      </el-button>
    </div>
    <div style="height: 50vh; overflow: auto">
      <div style="margin: 15px 0"></div>
      <el-checkbox-group v-model="selectedList" @change="checkChange">
        <div style="display: block" v-for="(item, index) in list" :key="index">
          <el-checkbox :value="item">
            {{ '工厂订单号:' + item.factoryOrderNumber + ' ' + item.message }}
          </el-checkbox>
        </div>
      </el-checkbox-group>
    </div>
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <!-- <el-button @click="resultDialog = false"> 取 消 </el-button>
        <div style="width: 50px; display: inline-block"></div> -->
        <el-button type="primary" @click="confirm"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

import { copyText } from '@/utils/index'

interface IList {
  id: string | number
  shopNumber?: string
  factoryOrderNumber?: string
  message: string
  status: boolean
}
const props = withDefaults(
  defineProps<{
    list: IList[]
  }>(),
  {
    list: () => [],
  },
)
// 响应式数据
const resultDialog = ref(false)
const isIndeterminate = ref(false)
const checkAll = ref(false)
const selectedList = ref<IList[]>([])
let key = ''
// 显示弹窗
const showDialog = (type?: string) => {
  key = type || ''
  resultDialog.value = true
  selectedList.value = []
  checkAll.value = false
}

// 全选状态改变
const checkAllChange = (value: boolean) => {
  selectedList.value = value ? props.list : []
  isIndeterminate.value = false
}

// 单个选择改变
const checkChange = () => {
  const checkedCount = selectedList.value.length
  checkAll.value = checkedCount === props.list.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < props.list.length
}

// 确认选择
const confirm = () => {
  resultDialog.value = false
  // emits('confirm', selectedList.value)
}

// 结果过滤
const resultfilter = (bool: boolean) => {
  const arr = props.list.filter((item) => item.status === bool)

  selectedList.value = arr
  const checkedCount = arr.length
  console.log(112, checkedCount)
  console.log(113, props.list)
  checkAll.value = checkedCount === props.list.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < props.list.length
}

// 复制店铺单号
const copyAllCode = () => {
  if (!selectedList.value.length) {
    return ElMessage.warning('请先选择数据')
  }

  const str = selectedList.value
    .map(
      (el) =>
        '工厂订单号：' +
        el['factoryOrderNumber'] +
        '，' +
        '处理结果：' +
        el['message'],
    )
    .join('\n')
  console.log('复制店铺单号', str)

  copyText(str)
}

function closedFn() {
  if (key === 'stockOut') return
  emits('confirm', selectedList.value)
}

// 监听弹窗状态
watch(
  () => resultDialog.value,
  (v) => {
    console.log(v)
  },
)
watch(
  () => props.list,
  (v) => {
    if (v.length) {
      console.log(127, v)
      resultfilter(true)
    }
  },
)

defineExpose({
  showDialog,
})
const emits = defineEmits<{
  (e: 'confirm', data: IList[]): void
}>()
</script>

<style lang="scss" scoped></style>
