<template>
  <div class="template-wrapper">
    <div class="form-list">
      <div
          class="form-list__item"
          @click="toAdd(index)"
          :style="{'background-image': `url(${$cdn}askform/${index + 1}.png)`}"
          v-for="(item, index) in itemList"
          :key="index">
        <h2>{{ item.name }}</h2>
        <div>立即创建</div>
      </div>
    </div>
    <div class="template" v-if="list.length">
      <h2>共享模板</h2>
      <div class="template-list">
        <div class="template-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover"
             @click="quote(item.id)">
          <image :src="`${$cdn}askform/6.png`"/>
          <h2>{{ item.title }}</h2>
          <u-icon name="arrow-right" color="#E1E2E3"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "query-string"

export default {
  name: 'addList',
  label: '新建项目',

  data() {
    return {
      itemList: [{
        name: '问卷调查'
      }, {
        name: '考试测评'
      }, {
        name: '报名登记'
      }, {
        name: '满意调查'
      }, {
        name: '投票评选'
      }],
      list: []
    }
  },

  created() {
    this.getList()
  },
  methods: {
    toAdd(type) {
      uni.navigateTo({url: `./AddForm?${qs.stringify({type})}`})
    },
    quote(id) {
      uni.navigateTo({url: `./AddForm?${qs.stringify({id, isQuote: 1})}`})
    },
    getList() {
      this.$http.post(`/app/appquestionnairetemplate/list`, null, {
        params: {
          current: 1,
          templateType: 1,
          size: 10000
        }
      }).then(res => {
        if (res?.code == 0) {
          this.list = res.data.records
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.template-wrapper {
  padding-bottom: 120px;

  .template {
    margin: 32px 32px 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;

    & > h2 {
      height: 88px;
      line-height: 88px;
      padding: 0 24px;
      color: #333333;
      font-size: 30px;
    }

    .template-item {
      display: flex;
      align-items: center;
      height: 104px;
      padding: 0 24px;
      border-bottom: 1px solid #D8DDE6;

      &:active {
        background-color: #eee;
      }

      &:last-child {
        border: none;
      }

      image {
        width: 36px;
        height: 42px;
      }

      i {
        font-size: 30px;
        color: #E1E2E3;
      }

      h2 {
        flex: 1;
        padding: 0 18px;
        color: #333333;
        font-size: 28px;
        font-weight: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .form-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 32px 0;

    div {
      box-sizing: border-box;
    }

    .form-list__item {
      width: calc(50% - 13px);
      height: 216px;
      margin: 32px 24px 0 0;
      padding: 40px 20px 52px;
      background-color: #FFFFFF;
      border-radius: 8px;
      background-size: 100% 100%;

      &:active {
        background-color: #eee;
      }

      &:nth-of-type(2n) {
        margin-right: 0;
      }

      div {
        width: 148px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        color: #fff;
        font-size: 28px;
        background: #6BA1F9;
        border-radius: 24px;
      }

      h2 {
        margin-bottom: 32px;
        padding-left: 10px;
        color: #333333;
        font-weight: 700;
        font-size: 32px;
      }
    }
  }
}
</style>
