<script setup>
import { computed, getCurrentInstance, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showFailToast, showLoadingToast, showSuccessToast } from 'vant';

const base_url = '/sgsafe/TaskManifestReceipt';
const { proxy } = getCurrentInstance();

/* 返回上一级页面 */
const router = useRouter();
const route = useRoute();

const reportingForm = ref({
  taskManifestId: '',
  completionReporting: '',
  completionCount: '1',
  completionTime: ''
});

/**
 * 获取日期
 */
const timeVisible = ref(false);
const timeArr = ref([]);
const formattedTime = computed(() => {
  if (timeArr.value.length === 0) {
    return '';
  }
  const date = timeArr.value;
  if (!date) return '';
  const d = new Date(date);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
});
const onConfirmTime = () => {
  timeVisible.value = false;
  reportingForm.value.completionTime = formattedTime.value;
};


const lowerReceiptForm = ref({
  associateMasterId: ''
})
const dataList = ref([])
const queryLowerReporting = () => {
  const url = '/sgsafe/TaskManifestReceipt/queryByManifestId'
  const param = {
    json: JSON.stringify(lowerReceiptForm.value)
  }
  proxy.$axios.post(url, param).then(res => {
    if (res.data.code === 0) {
      dataList.value = res.data.data;
    } else {
      showFailToast('查询下级部门汇报失败')
    }
  })
}

const onSubmit = async (values) => {
  const loadingToast = showLoadingToast({
    duration: 0,
    message: '加载中',
    forbidClick: true
  });
  const url = base_url + '/save';
  const params = {
    json: JSON.stringify(reportingForm.value)
  };
  proxy.$axios.post(url, params).then(res => {
    if (res.data.code === 0) {
      loadingToast.close();
      showSuccessToast('保存成功');
      router.go(-1)
    } else {
      loadingToast.close();
      showFailToast('操作失败!' + res.data.msg);
    }
  });
};

const manifest = ref({});
const isQuantified = ref(false);
onMounted(() => {
  manifest.value = JSON.parse(route.query.manifest);
  console.log('manifest', manifest.value);
  if (!manifest.value.id) {
    showFailToast('数据错误，请联系管理员');
    router.go(-1)
  }
  lowerReceiptForm.value.associateMasterId = manifest.value.id
  reportingForm.value.taskManifestId = manifest.value.id;
  isQuantified.value = manifest.value.isQuantified;
  queryLowerReporting();
});

</script>

<template>
  <div class="page-container">
    <van-sticky>
      <van-nav-bar title="计划任务汇报">
      </van-nav-bar>
    </van-sticky>

    <div
      v-for="(report, index) in dataList"
      :key="index"
      class="mobile-report-card"
    >
      <div class="card-header">
        <h4>汇报部门: {{ report.reportingDeptName }}</h4>
      </div>
      <p><strong>汇报内容:</strong> {{ report.completionReporting }}</p>
      <p><strong>完成次数:</strong> {{ report.completionCount }}</p>
      <p><strong>完成时间:</strong> {{ report.completionTime }}</p>
    </div>

    <van-form @submit="onSubmit">
      <van-field
        v-model="reportingForm.completionReporting"
        label="汇报内容"
        type="textarea"
        name="completionReporting"
        required
        placeholder="请输入汇报内容"
        :rules="[{required: true, message: '请输入汇报内容'}]"
      />

      <van-field
        v-if="isQuantified"
        v-model="reportingForm.completionCount"
        type="number"
        label="完成次数"
        name="completionCount"
        required
        :rules="[{required: true, message: '请输入完成次数'},
           { pattern: /^[1-9]\d*$/, message: '必须为正整数' }]"
      />

      <van-field
        readonly
        v-model="formattedTime"
        label="完成时间"
        name="formattedTime"
        placeholder="请选择完成时间"
        required
        :rules="[{required: true, message: '请选择完成时间'}]"
        @click="timeVisible = true"
      />

      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>

    <van-popup
      :close-on-click-overlay="false"
      v-model:show="timeVisible"
      position="bottom"
      :teleport="false"
    >
      <van-date-picker
        v-model="timeArr"
        type="date"
        @confirm="onConfirmTime"
        @cancel="timeVisible = false"
      />
    </van-popup>
  </div>
</template>

<style scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.mobile-report-card {
  background-color: #ffffff; /* 白色背景 */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  overflow: hidden;
  box-sizing: border-box;
}

/* 卡片头部 */
.card-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.card-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a73e8; /* 蓝色主色，突出部门名 */
  word-break: break-word;
}

/* 段落样式 */
.mobile-report-card p {
  margin: 8px 0;
  display: flex;
  flex-wrap: wrap;
}

.mobile-report-card p strong {
  min-width: 72px; /* 固定标签宽度，对齐更整齐 */
  color: #555;
  font-weight: 500;
}

.mobile-report-card p span {
  color: #333;
  flex: 1;
}

/* 响应式：适配小屏 */
@media (max-width: 375px) {
  .mobile-report-card {
    padding: 14px;
    margin-bottom: 14px;
  }

  .card-header h4 {
    font-size: 15px;
  }

  .mobile-report-card p strong {
    min-width: 64px;
    font-size: 13px;
  }
}

</style>
