<!-- 任务表单 select组件 -->
<template>
  <view>
    <uv-form-item
      :labelWidth="120"
      :label="item?.taskFiledValue"
      :borderBottom="false"
      labelPosition="left"
      :required="item?.isMustfill == '1'"
      @click="showAction"
    >
      <uv-input
        :placeholder="`请选择${item?.taskFiledValue}`"
        input-align="right"
        v-model="propsMessage"
        disabled
        disabledColor="#ffffff"
        border="none"
      />
      <template v-slot:right>
        <uv-icon name="arrow-right"></uv-icon>
      </template>
    </uv-form-item>
    <uv-popup ref="treeSelectRef" mode="bottom" closeOnClickOverlay round="10">
      <view class="tree-select-content">
        <view class="head">
          <view class="close" @click="colsePoup">取消</view>
          <view>选择执行包与药品</view>
          <view class="confirm" @click="confirmPoup">确定</view>
        </view>
        <scroll-view scroll-y class="select-content">
          <view class="select-list">
            <view class="select-item" v-for="(item, index) in packageTree" :key="item.value">
              <view class="select-item-f">
                <view class="left-title" @click="switchShow(index)">
                  <uv-icon
                    :name="item.show ? 'arrow-down-fill' : 'play-right-fill'"
                    size="18"
                    iconSize="18"
                    color="#000"
                  />
                  <text class="text"> {{ item.label }}</text>
                </view>
                <checkbox-group @change="(name: any) => checkboxChange(name, index)">
                  <checkbox
                    activeColor="#6eb657"
                    :checked="item.checked"
                    iconSize="24"
                    size="24"
                    :disabled="item.disabled"
                  />
                </checkbox-group>
              </view>
              <view class="select-item-c" v-show="item.show">
                <uv-checkbox-group
                  v-model="item.checkboxValue"
                  placement="column"
                  labelSize="16"
                  iconPlacement="right"
                  @change="(name: any) => checkboxDrugChange(name, index)"
                  :disabled="item.disabled"
                >
                  <uv-checkbox
                    v-for="iten in item.drugTable"
                    :name="iten.drugId"
                    :label="iten.drugName"
                    :key="iten.drugId"
                    activeColor="#6eb657"
                    :customStyle="customStyle"
                  />
                </uv-checkbox-group>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup lang="ts">
import { computed, ref, unref } from 'vue'
import { getQuizPltTextResultGroupingApi } from '@/service/modules/quiz'

let props = defineProps({
  item: Object,
  index: Number,
  selectValue: String,
  selectTreeValue: String,
  dictList: Object,
  sendParams: Object
})

const emmits = defineEmits(['update:selectValue', 'treeConfirmFn'])

const packageTree = ref()
const showAction = async () => {
  if (props?.dictList?.package_tree) {
    const res = await getQuizPltTextResultGroupingApi()
    let pass = []
    if (res.code === 0) {
      pass = res.data?.passed
    }
    const arrA = unref(props?.dictList?.package_tree)
    const arrB = arrA.map((item: any) => {
      let valArr = []
      if (props?.selectTreeValue) {
        valArr = JSON.parse(props?.selectTreeValue)
      }
      item.checked = false
      item.show = true
      item.checkboxValue = []
      item.disabled = false
      const curr = valArr.find((iten: any) => iten.packageId === item.value)
      if (curr) {
        item.checked = true
        item.checkboxValue = curr.drugIds?.split(',')
      }
      const pkgQuizIds = item?.pkgQuizIds || []
      let flag = pkgQuizIds.every((iten: string) => {
        return pass?.includes(iten)
      })
      if (!flag) {
        item.disabled = true
        if (!item.label.includes('未答题')) {
          item.label = item.label + '(未答题)'
        }
      }
      return item
    })
    console.log('arrB', arrB)

    packageTree.value = arrB
    treeSelectRef.value.open()
  }
}

const customStyle = {
  paddingBottom: '12rpx',
  marginBottom: '16rpx'
}

const switchShow = (index: number) => {
  packageTree.value[index].show = !packageTree.value[index].show
}

const checkboxChange = (name: any, index: number) => {
  packageTree.value[index].checked = !packageTree.value[index].checked
  // 全选状态
  if (packageTree.value[index].checked) {
    const ids = packageTree.value[index].drugTable.map((item: any) => item.drugId)
    packageTree.value[index].checkboxValue = ids
  } else {
    packageTree.value[index].checkboxValue = []
  }
}

const checkboxDrugChange = (name: any, index: number) => {
  packageTree.value[index].checked = name.length
}

const treeSelectRef = ref()
const colsePoup = () => {
  treeSelectRef.value.close()
}
const confirmPoup = () => {
  const isChecked = packageTree.value?.some((item: any) => item.checked)
  if (!isChecked) {
    return uni.showToast({
      title: '请先选择关联执行包和关联药品',
      icon: 'none'
    })
  }
  let arr = packageTree.value?.filter((item: any) => item.checked)
  const packageName = arr.map((item: any) => item.label)?.join('，')
  const arrValue = arr.map((item: any) => {
    return {
      packageId: item.value,
      drugIds: item.checkboxValue?.join(',')
    }
  })

  console.log('arrValue', arrValue)

  const arrValueStr = JSON.stringify(arrValue)
  emmits('treeConfirmFn', props?.item?.taskFiledKey, packageName, arrValueStr)
  treeSelectRef.value.close()
}

const propsMessage = computed({
  get: () => {
    return props.selectValue
  },
  set: (val) => {
    emmits('update:selectValue', val)
  }
})
</script>

<style lang="scss" scoped>
.tree-select-content {
  height: 80vh;
  background-color: #fff;
  padding: 30rpx;

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    height: 100rpx;
    .close {
      color: #999;
    }
    .confirm {
      color: #6eb657;
    }
  }
  .select-content {
    height: 70vh;
    overflow: auto;

    .select-list {
      margin-bottom: 40rpx;
      .select-item {
        margin: 30rpx 0;
        border-bottom: 1px solid #ccc;
        min-height: 80rpx;
        .select-item-f {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left-title {
            display: flex;
            align-items: center;
            .text {
              margin-left: 24rpx;
              color: #000;
              font-size: 36rpx;
            }
          }
        }
        .select-item-c {
          padding-left: 50rpx;
          padding-right: 20rpx;
          margin-top: 20rpx;
        }
      }
    }
  }
}
</style>
