<script setup lang="ts" name="EmployeeMealDetail">
import { ref, onMounted, reactive, watchEffect, nextTick } from 'vue'
import useUserStore from '@/store/modules/user'
// import { useRouter, useRoute } from 'vue-router'
import { tAmEmployeeReportPlanMobiletail, insertTAmEmployeeReportPlan } from '@/api/resturant/employeeMeal.ts'
// import { showSuccessToast } from 'vant'

const userStore = useUserStore()
// const router = useRouter()

// const route = useRoute()
const form:any = ref({})
const allChecked:any = ref([])
const loading = ref(false)

onMounted(() => {
  tAmEmployeeReportPlanMobiletail({
    id: route.query.planId,
    menuType: userStore.employessInfo.EAT_TYPE || '1'
  }).then(res => {
    console.log(userStore.userInfo.userId)
    form.value = res.data
    form.value.menuType = userStore.employessInfo.EAT_TYPE || '1'
    // 没有填报过  &&  在截止日期内   默认全选按钮勾中
    if (route.query.isReport === '0' && route.query.readonly === '0') {
      console.log('123')
      for (let i = 0;i < form.value.detailList.length;i++) {
        if (form.value.detailList[i].staffList.length > 1) {
          allChecked.value.push(false)
        }
        if (form.value.detailList[i].staffList.length === 1) {
          allChecked.value.push(true)
        }


        for (let j = 0;j < form.value.detailList[i].staffList.length; j++) {
          if (userStore.userInfo.userId === form.value.detailList[i].staffList[j].userId) {
            form.value.detailList[i].staffList[j].reportBreakfast = '1'
            form.value.detailList[i].staffList[j].reportLunch = '1'
            form.value.detailList[i].staffList[j].reportDinner = '1'
          }

        }
      }
    }
    if (route.query.readonly === '0' && route.query.isReport === '1') {
      for (let i = 0;i < form.value.detailList.length;i++) {

        if (form.value.detailList[i].staffList.find(item => item.reportBreakfast !== '1' || item.reportLunch !== '1' || item.reportLunch !== '1')) {
          allChecked.value[i] = false
        } else {
          allChecked.value[i] = true
        }
        // for (let j = 0;j < form.value.detailList[i].staffList.length; j++) {
        //   if (form.value.detailList[i].staffList[j].reportBreakfast === '1' && form.value.detailList[i].staffList[j].reportLunch === '1' && form.value.detailList[i].staffList[j].reportLunch === '1') {
        //     allChecked.value[i] = true
        //   }


        // }

      }
    }
  })
})
/**
 * 全选切换
 * @param index
 * @param val
 */
function allCheckMeal(index:number, val:boolean):void {
  if (val === true) {
    for (let i = 0;i < form.value.detailList[index].staffList.length; i++) {
      form.value.detailList[index].staffList[i].reportBreakfast = '1'
      form.value.detailList[index].staffList[i].reportLunch = '1'
      form.value.detailList[index].staffList[i].reportDinner = '1'
    }
  }
  if (val === false) {
    for (let i = 0;i < form.value.detailList[index].staffList.length; i++) {
      form.value.detailList[index].staffList[i].reportBreakfast = '0'
      form.value.detailList[index].staffList[i].reportLunch = '0'
      form.value.detailList[index].staffList[i].reportDinner = '0'
    }
  }
}

function onClickSubmit():void {
  loading.value = true
  insertTAmEmployeeReportPlan(form.value).then(res => {
    console.log(res)
    showSuccessToast('提交成功')
    setTimeout(() => {
      router.back()
    }, 1200)
  })
}

function changeBreakfast(index:number, childindex:number, reportBreakfast:any) {
  console.log(form.value.detailList[index].staffList[childindex].reportBreakfast)
  console.log(form.value.detailList[index].staffList[childindex].reportLunch)
  console.log(form.value.detailList[index].staffList[childindex].reportDinner)

  if (form.value.detailList[index].staffList[childindex].reportBreakfast === '1' && form.value.detailList[index].staffList[childindex].reportLunch === '1' && form.value.detailList[index].staffList[childindex].reportDinner === '1') {
    allChecked[index] = true
  }

}


</script>

<template>
  <div class="container full float-bottom">
    <div class="container__body">
      <div class="container__card">
        <van-cell-group>
          <van-cell title="报餐食谱名称" :value="form.menuName" />
          <van-cell title="食谱开始时间" :value="form.reportStarttime" />
          <van-cell title="食谱结束时间" :value="form.reportEndtime" />
          <van-cell title="报餐截止时间" :value="form.reportStoptime" />
        </van-cell-group>
        <van-form
          ref="formRef"
          label-align="top">
          <van-cell-group v-for="(item,index) in form.detailList" :key="index" style="margin-top: 3rem;">
            <van-cell :title="`${item.reportWeek}（${item.reportTime}）`" >
              <template #right-icon>
                <div class="flex-center-container">
                  <van-switch
                    v-model="allChecked[index]"
                    :size="14"
                    :disabled="route.query.readonly === '1'"
                    @change="(event) => allCheckMeal(index,event)"/>
                  <span class="check-text">全选</span>
                </div>

              </template>
            </van-cell>
            <template v-for="(childItem,childindex) in item.menuList" :key="childindex">
              <van-cell class="short-title" :title="'早餐'" :value="childItem.menuBreakfast" />
              <van-cell class="short-title" :title="'午餐'" :value="childItem.menuLunch" />
              <van-cell class="short-title" :title="'晚餐'" :value="childItem.menuDinner" />
            </template>
            <template v-for="(childItem,childindex) in item.staffList" :key="childindex">
              <van-cell class="switch-cell" :title="childItem.staffName" >
                <template #right-icon>
                  <div class="flex-center-container">
                    <van-row type="flex" align="center">
                      <van-col class="check-container">
                        <span class="check-text">早</span>
                        <van-switch
                          v-model="childItem.reportBreakfast"
                          :size="14"
                          active-value="1"
                          inactive-value="0"
                          :disabled="route.query.readonly === '1'"
                          @change="changeBreakfast(index,childindex,childItem.reportBreakfast)"/>
                      </van-col>
                      <van-col class="check-container">
                        <span class="check-text">中</span>
                        <van-switch
                          v-model="childItem.reportLunch"
                          :size="14"
                          active-value="1"
                          inactive-value="0"
                          :disabled="route.query.readonly === '1'"/>
                      </van-col>
                      <van-col class="check-container">
                        <span class="check-text">晚</span>
                        <van-switch
                          v-model="childItem.reportDinner"
                          :size="14"
                          active-value="1"
                          inactive-value="0"
                          :disabled="route.query.readonly === '1'"/>
                      </van-col>
                    </van-row>
                  </div>
                </template>
              </van-cell>
            </template>
          </van-cell-group>
        </van-form>
      </div>
    </div>
    <van-button
      v-if="route.query.readonly !== '1'"
      class="button-submit float-bottom"
      type="primary"
      :loading="loading"
      @click="onClickSubmit">{{ route.query.isReport === '0' ? '提交' : '重新提交' }}</van-button>
  </div>
</template>

<style lang="less" scoped>
  .flex-center-container{
    display: flex;
    align-items: center;
  }
  .check-text {
    margin-left: 0.5rem;
  }
  .switch-cell {
    .flex-center-container {
      width: 18rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .van-row{
        flex: 1;
      }
      .check-container {
        margin-right: 1rem;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .check-text{
          margin-left: 0.5rem;
        }

      }
    }
  }
  .short-title {
   :deep(.van-cell__title){
      flex:none;
      width: 6rem;
    }
  }

</style>
