<script>
import {createPromise, templateDetails} from "@/api/commitment";
import DescriptionText from "@/subPages/pages/commitment/commitmentDetail/components/DescriptionText.vue";
import InputComponents from "@/subPages/pages/commitment/commitmentDetail/components/InputComponents.vue";
import DividerComponents from "@/subPages/pages/commitment/commitmentDetail/components/DividerComponents.vue";
import IndicatorComponents from "@/subPages/pages/commitment/commitmentDetail/components/IndicatorComponents.vue";

export default {
  components: {IndicatorComponents, DividerComponents, InputComponents, DescriptionText},
  data() {
    return {
    };
  },
  computed: {
    templateJson: {
      get() {
        return this.$store.state.template.templateJson
      },
      set(value) {
        this.$store.commit('template/setTemplateComponents', value)
      }
    }
  },
  mounted() {
    this.$store.dispatch('template/getPromiseDetail', this.$route.query.uuid)
  },
  methods: {
    handleClose() {
      window.history.go(-1)
    },
    handleDownPdf() {
      this.$router.push({path: '/commitment'})
    }
  }
}
</script>

<template>
  <view class="h5-page">
    <view class="page-content">
      <view
          v-for="(item,index) in templateJson.components.slice(0,6)" :key="index"
      >
        <DescriptionText v-if="item.base.moduleName === 'InstructionsText'" :index="index"></DescriptionText>
        <InputComponents v-else-if="item.base.moduleName === 'Input'" :index="index"></InputComponents>
        <DividerComponents v-else-if="item.base.moduleName === 'divider'" :index="index"></DividerComponents>
      </view>
      <IndicatorComponents></IndicatorComponents>
    </view>
    <view class="page-bottom">
      <van-button plain type="primary" @click="handleClose">关闭</van-button>
      <van-button type="info" @click="handleDownPdf">下载PDF</van-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.h5-page {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 40px);
  overflow-y: auto; /* 确保垂直滚动 */
  display: flex;
  flex-direction: column;
  float: left;
  width: calc(100% - 40px);
}

.page-content {
  flex: 1;
}

.page-bottom {
  height: 48px;
}

.page-content-bottom {
  text-align: left;
  margin-top: 50px;
  background: #F6F6F6;
  border-radius: 4px;
  padding: 10px;

  view {
    margin-bottom: 10px;
  }
}

.page-bottom {
  display: flex;
  width: 100%;
}

/* 默认情况下，每个按钮平分空间 */
.page-bottom .van-button {
  flex: 1;
  margin-right: 10px;
}

/* 取消最后一个按钮的右侧间距 */
.page-bottom .van-button:last-child {
  margin-right: 0;
}

/* 当只有两个按钮时的样式 */
.page-bottom .van-button:first-child:nth-last-child(2) {
  flex: 1;  /* 第一个按钮占 1/3 */
}

.page-bottom .van-button:nth-child(2):last-child {
  flex: 3;  /* 第二个按钮占 2/3 */
}

/* 自定义滚动条的宽度和颜色 */
.h5-page::-webkit-scrollbar {
  width: 1px; /* 滚动条宽度 */
}

.h5-page::-webkit-scrollbar-track {
  background: transparent; /* 滚动条轨道颜色 */
}

.h5-page::-webkit-scrollbar-thumb {
  background: #faf4f4; /* 滚动条颜色 */
}



</style>