<template>
  <div class="form">
    <AiTopFixed>
      <u-search placeholder="请输入标题" :show-action="false" search-icon-color="#ccc" v-model="search.title"
                @search="isMore = false, search.current = 1, getList()"/>
    </AiTopFixed>
    <scroll-view show-scrollbar scroll-y @scrolltolower="getList" class="form-list">
      <div class="form-item" v-for="(item, index) in list" :key="index"
           @click="showPopup(item)">
        <div class="form-item__top">
          <div class="form-item__left">
            <h2>{{ item.title }}</h2>
            <div class="form-item__left--info">
              <!--              <AiOpenData v-if="item.createUnitName" type="departmentName" :openid="item.createUnitName"/>-->
              <AiOpenData v-if="item.createUserName" type="userName" :openid="item.createUserName"/>
              <span>{{ item.createTime.substr(0, item.createTime.length - 3) }}</span>
              <span>{{ $dict.getLabel('questionnaireType', item.type) }}</span>
            </div>
          </div>
          <div class="form-item__right">
            <h2>{{ item.dataCount }}</h2>
            <span>答卷数量</span>
          </div>
        </div>
        <div class="form-item__bottom form-item__bottom--active">
          <i :style="{background: $dict.getColor('questionnaireStatus', item.status)}"></i>
          <span>{{ $dict.getLabel('questionnaireStatus', item.status) }}</span>
        </div>
      </div>
      <u-gap/>
      <AiEmpty v-if="!list.length && isMore"></AiEmpty>
    </scroll-view>
    <u-popup v-model="isShow" :closeable="false" mode="bottom" :z-index="11">
      <div class="popup">
        <h2>{{ info.title }}</h2>
        <div class="operate-list">
          <div class="operate-item" @click="toEdit">
            <div>
              <image :src="`${$cdn}askform/bj.png`"/>
            </div>
            <h3>编辑</h3>
          </div>
          <div class="operate-item" @click="linkTo('./AppForm?preview=1&id=' + id)">
            <div>
              <image :src="`${$cdn}askform/yl.png`"/>
            </div>
            <h3>预览</h3>
          </div>
          <div class="operate-item" @click="publish" v-if="info.status !== '1'">
            <div>
              <image :src="`${$cdn}askform/fb.png`"/>
            </div>
            <h3>发布</h3>
          </div>
          <div class="operate-item" @click="isShowModal = true" v-if="info.status === '1'">
            <div>
              <image :src="`${$cdn}askform/stop.png`"/>
            </div>
            <h3>停止</h3>
          </div>
          <div class="operate-item" @click="showShare">
            <div>
              <image :src="`${$cdn}askform/fx.png`"/>
            </div>
            <h3>分享</h3>
          </div>
          <div class="operate-item" @click="share(id)">
            <div>
              <image :src="`${$cdn}askform/mb.png`"/>
            </div>
            <h3>共享为模板</h3>
          </div>
          <div class="operate-item" @click="remove(id)">
            <div>
              <image :src="`${$cdn}askform/sc.png`"/>
            </div>
            <h3>删除</h3>
          </div>
        </div>
        <div class="popup-btn" @click="isShow = false">关闭</div>
      </div>
    </u-popup>
    <u-modal v-model="isShowModal" show-cancel-button content="确定停止该表单?" @confirm="toStop"></u-modal>
  </div>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  name: 'formList',
  label: '表单列表',
  data() {
    return {
      search: {
        current: 1,
        templateType: 0,
        title: ''
      },
      isShowModal: false,
      value: '',
      id: '',
      info: {},
      isMore: false,
      list: [],
      isShow: false
    }
  },
  created() {
    this.$loading()
    this.$dict.load(['questionnaireStatus', 'questionnaireType', 'questionnaireFieldType']).then(() => {
      this.getList()
    })
  },

  methods: {
    ...mapActions(['wxInvoke']),
    linkTo(url) {
      this.isShow = false

      uni.navigateTo({
        url
      })
    },

    showPopup(item) {
      if (item.status === '2') {
        this.$confirm('表单已停止发布，请在后台管理系统中查看调查结果', '', {
          showCancel: false
        })

        return false
      }

      this.info = item
      this.id = item.id
      this.isShow = true
    },

    toStop() {
      this.$http.post(`/app/appquestionnairetemplate/stopRelease?id=${this.info.id}`).then(res => {
        if (res.code === 0) {
          this.$u.toast('停止成功')
          this.search.current = 1
          this.isShow = false
          this.isMore = false
          this.getList()
        }
      })
    },

    showShare() {
      if (this.info.status !== '1') {
        this.isShow = false
        return this.$u.toast(`该表单${this.info.status === '0' ? '未发布' : '已截止'}，无法分享！`)
      }

      uni.showActionSheet({
        itemList: ['分享', '微信分享', '获取链接'],
        success: data => {
          this.$http.post(`/app/appquestionnairetemplate/queryQrCode?id=${this.info.id}`).then(res => {
            if (res.code == 0) {
              if (data.tapIndex === 2) {
                this.copy(res.data.linkUrl)
                this.isShow = false
              }
              if (data.tapIndex === 0 || data.tapIndex === 1) {
                if (data.tapIndex === 0) {
                  this.wxInvoke(['shareAppMessage', {
                    title: this.info.title,
                    desc: this.info.tableExplain,
                    link: res.data.linkUrl,
                    imgUrl: this.info.headPicture
                  }, () => {
                    this.isShow = false
                  }])
                } else {
                  this.wxInvoke(['shareWechatMessage', {
                    title: this.info.title,
                    desc: this.info.tableExplain,
                    link: res.data.linkUrl,
                    imgUrl: this.info.headPicture
                  }, () => {
                    this.isShow = false
                  }])
                }
              }
            }
          })
        }
      })
    },

    copy(link) {
      let oInput = document.createElement('input')
      oInput.value = link
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$u.toast('已复制')
      oInput.remove()
    },

    publish() {
      if (this.info.status === '1') {
        return this.$u.toast('该表单已发布')
      }
      this.linkTo(`./FormSetting?id=${this.info.id}&type=edit`)
      this.isShow = false
    },
    toEdit() {
      if (this.info.dataCount !== 0) {
        return this.$u.toast('该表单已有数据，无法编辑!')
      } else {
        let {id} = this
        this.isShow = false
        uni.navigateTo({url: `./AddForm?id=${id}`})
      }
    },

    share(id) {
      this.$http.post(`/app/appquestionnairetemplate/share?id=${id}`).then(res => {
        if (res.code === 0) {
          this.$confirm('调查表单共享成功，其他成员可在新建项目时直接使用！', '', {
            showCancel: false
          })
          this.isShow = false
        }
      })
    },

    remove(id) {
      if (this.info.dataCount !== 0) {
        return this.$u.toast('该表单已有数据，无法删除!')
      }

      this.$confirm('确定删除该数据？').then(() => {
        this.$http.post(`/app/appquestionnairetemplate/delete?id=${id}`).then(res => {
          if (res.code == 0) {
            this.$u.toast('删除成功')
            this.isShow = false
            this.search.current = 1
            this.isMore = false

            this.getList()
          }
        })
      }).catch(() => {
      })
    },

    reload() {
      this.isMore = false
      this.search.current = 1

      this.getList()
    },

    getList() {
      if (this.isMore) return
      this.$http.post(`/app/appquestionnairetemplate/list`, null, {
        params: {
          ...this.search,
          size: 10
        }
      }).then(res => {
        if (res.code == 0) {
          if (this.search.current > 1) {
            this.list = [...this.list, ...res.data.records]
          } else {
            this.list = res.data.records
          }

          uni.hideLoading()

          if (res.data.records.length < 10) {
            this.isMore = true

            return false
          }

          this.search.current = this.search.current + 1
        } else {
          uni.hideLoading()
        }
      }).catch(() => {
        uni.hideLoading()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  height: 100vh;
  overflow: hidden;

  u-radio + u-radio {
    margin-left: 20px;
  }

  ::v-deep .u-search {
    margin-bottom: 0 !important;

    .u-search__content__input {
      height: 100%;
    }
  }

  .form-list {
    height: calc(100vh - 98px - 100px);
    background: #f5f5f5;
    overflow: hidden;
  }

  .popup {
    background: #F7F7F7;

    & > h2 {
      height: 72px;
      line-height: 72px;
      padding: 0 20px;
      color: #999999;
      font-size: 22px;
      text-align: center;
      border-bottom: 2px solid #D7D8DA;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .popup-btn {
      height: 96px;
      line-height: 96px;
      text-align: center;
      color: #333333;
      font-size: 30px;
      background: #fff;

      &:active {
        background: #eee;
      }
    }

    .operate-list {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      padding-bottom: 26px;

      .operate-item {
        width: 25%;
        font-size: 0;
        margin-top: 28px;

        &:active {
          opacity: 0.7;
        }

        h3 {
          margin-top: 20px;
          color: #666666;
          font-size: 26px;
          font-weight: normal;
        }
      }

      image {
        width: 100px;
        height: 100px;
        border-radius: 16px;
        background: #fff;
      }
    }
  }

  div {
    box-sizing: border-box;
  }

  .form-item {
    margin: 24px 25px 0;
    padding: 32px;
    background: #FFFFFF;
    border-radius: 16px;

    .form-item__bottom {
      display: flex;
      align-items: center;
      margin-top: 28px;
      color: #999999;

      i {
        width: 12px;
        height: 12px;
        margin-right: 6px;
        border-radius: 50%;
        background: #999999;
      }

      span {
        font-size: 26px;
      }

      &.form-item__bottom--active i {
        background: #3CB300;
      }
    }

    .form-item__top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .form-item__right {
        text-align: center;

        h2 {
          line-height: 40px;
          margin-bottom: 16px;
          font-size: 32px;
          font-weight: 600;
          color: #1EA0FA;
        }

        span {
          color: #999999;
          font-size: 22px;
        }
      }

      .form-item__left {
        flex: 1;
        max-width: 80%;
        position: relative;

        &::after {
          position: absolute;
          right: -15px;
          top: 50%;
          width: 2px;
          height: 96px;
          background: #F5F5F5;
          content: '';
          transform: translateY(-50%);
        }

        h2 {
          line-height: 44px;
          margin-bottom: 16px;
          color: #333;
          font-size: 32px;
          font-weight: 700;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .form-item__left--info {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          color: #999;
          font-size: 20px;

          span, div {
            position: relative;
            margin-right: 24px;

            &::after {
              position: absolute;
              right: -12px;
              top: 50%;
              width: 2px;
              height: 20px;
              background: #D1D2D5;
              content: '';
              transform: translateY(-50%);
            }

            &:last-child {
              margin-right: 0;

              &::after {
                display: none;
              }
            }
          }
        }
      }
    }
  }

  .type-0 {
    background: #2266FF !important;
  }

  .type-1 {
    background: rgba(34, 170, 153, 1) !important;
  }

  .type-2 {
    background: rgba(248, 180, 37, 1) !important;
  }

  .type-3 {
    background: rgba(102, 119, 187, 1) !important;
  }

  .type-4 {
    background: rgba(236, 68, 97, 1) !important;
  }
}
</style>
