<template>
  <ai-list class="list">
    <template slot="title">
      <ai-title title="乡村相册" isShowBottomBorder :instance="instance" :disabledLevel="disabledLevel" isShowArea v-model="search.areaId" @change="changeArea"></ai-title>
    </template>
    <template slot="content">
      <ai-search-bar>
        <template #left>
          <ai-select
            v-model="search.type"
            @change="search.current = 1, getList()"
            placeholder="请选择相册主题"
            :selectList="dict.getDict('villagePictureAlbumType')">
          </ai-select>
          <el-date-picker
            v-model="search.timeTag"
            type="month"
            size="small"
            @change="search.current = 1, getList()"
            value-format="yyyy-MM"
            placeholder="请选择日期">
          </el-date-picker>
        </template>
      </ai-search-bar>
      <div v-loading="loading">
        <div class="form-list__list">
          <div class="list-item list-add" @click="toAdd('')">
            <span class="iconfont iconAdd"></span>
            <h2>添加相片</h2>
          </div>
          <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="list-item__img">
              <img :src="item.url" @click="prevImg(index)">
            </div>
            <div class="list-item__bottom">
              <div class="left">
                <span class="tag">{{ dict.getLabel('villagePictureAlbumType', item.type) }}</span>
                <span>{{ item.createUserName }}</span>
              </div>
              <i>{{ item.createTime }}</i>
            </div>
            <div class="list-item__operate">
              <el-button
                type="text"
                icon="iconfont iconExported"
                class="list-item__operate--item"
                @click="downloadImg(item.url, dict.getLabel('villagePictureAlbumType', item.type))">
                下载
              </el-button>
              <el-button
                @click="remove(item.id)"
                type="text"
                icon="iconfont iconDelete"
                class="list-item__operate--item">
                删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="images" v-viewer="{movable: true}" v-show="false">
        <img v-for="(item, index) in imgList" :src="item" :key="index" alt="">
      </div>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Viewer)

  export default {
    name: 'FormList',
    props: {
      instance: Function,
      dict: Object,
      areaId: String
    },

    data () {
      return {
        search: {
          current: 1,
          areaId: '',
          size: 1000000,
          type: '',
          timeTag: ''
        },
        isShowAdd: false,
        form: {
        },
        list: [],
        total: 0,
        loading: false,
        id: '',
        disabledLevel: 0
      }
    },

    computed: {
      ...mapState(['user']),

      imgList () {
        return this.list.map(v => v.url)
      }
    },

    created () {
      this.loading = true
      this.disabledLevel = this.user.info.areaList.length - 1
      this.search.areaId = this.user.info.areaId
      this.dict.load(['villagePictureAlbumType']).then(() => {
        this.getList()
      })
    },

    methods: {
      changeArea () {
        this.loading = true
        this.search.current = 1

        this.$nextTick(() => {
          this.getList()
        })
      },

      prevImg (index) {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.view(index)
      },

      getList () {
        this.instance.post(`/app/appvillagepicturealbum/list`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            this.list = res.data.records
            this.total = res.data.total
            this.loading = false
          } else {
            this.loading = false
          }
        }).catch(() => {
          this.loading = false
        })
      },

      remove (id) {
        this.$confirm('确定删除该相片？').then(() => {
          this.instance.post(`/app/appvillagepicturealbum/delete?ids=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      },

      downloadImg (url, name) {
        let image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function() {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          let url = canvas.toDataURL("image/png")
          let a = document.createElement("a")
          let event = new MouseEvent("click")
          a.download = name
          a.href = url
          a.dispatchEvent(event)
        }
        image.src = url
      },

      toStop (id) {
        this.$confirm('确定停止该表单？').then(() => {
          this.instance.post(`/app/appquestionnairetemplate/stopRelease?id=${id}`).then(res => {
            if (res.code === 0) {
              this.$message.success('停止成功!')
              this.getList()
            }
          })
        })
      },

      showShare (info, isPreview) {
        this.loading = true
        this.info = info

        this.instance.post(`/app/appquestionnairetemplate/queryQrCode?id=${info.id}`).then(res => {
          if (res.code == 0) {
            this.info.linkUrl = res.data.linkUrl
            this.info.qrCodeUrl = res.data.qrCodeUrl

            this.$nextTick(() => {
              if (isPreview) {
                this.isShowPreview = true
                this.info.linkUrl = `${res.data.linkUrl}&preview=true#form`
              } else {
                this.isShowSuccess = true
              }
            })
          }

          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },

      toAdd (id) {
        this.$emit('change', {
          type: 'add',
          params: {
            id
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .list {
    ::v-deep .ai-list__content {
      width: 100%;
      .ai-list__content--right {
        width: 100%!important;

        .ai-list__content--right-wrapper {
          padding: 0!important;
          background: transparent!important;
          box-shadow: none!important;
        }
      }
    }
    ::v-deep.el-pager {
      li.active + li {
        border-left: 1px solid #D0D4DC;
      }
    } 

    .newPagination {
      width: 100%;
      display: flex;
      align-items: center;
      height: 64px;
      padding: 0 40px!important;

      .el-pagination {
        width: 100%;
        padding: 0;
      }
      ::v-deep .el-pager li.active {
        background-color: #fff !important;
        color: #2266FF !important;
        border-color: #2266FF;
      }

      ::v-deep .el-pager li {
        background-color: #fff;
        border: solid 1px #d0d4dc;
        margin-left: 8px;
        border-radius: 4px !important;
        line-height: 26px !important;
      }

      .paginationPre {
        display: flex;
        height: 28px;
        line-height: 1;
        font-size: 14px;
        font-weight: normal;
        align-items: center;

        .pagination-btns {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #2266FF !important;

          ::v-deep span, ::v-deep div {
            font-size: 12px;
            cursor: pointer;
            color: #2266FF !important;

            &:hover {
              opacity: 0.8;
            }
          }
        }

        .paginationPre-total {
          font-size: 12px;
          color: #555;

          label {
            padding: 0 2px;
            font-weight: 700;
          }
        }

        & > * + * {
          margin-left: 24px;
        }

        ::v-deep .el-pagination button, .el-pagination span:not([class*=suffix]) {
          line-height: 1 !important;
        }

        ::v-deep.el-checkbox {
          padding-left: 14px;
          display: flex;
          align-items: center;

          .el-checkbox__input, .el-checkbox__inner {
            width: 14px;
            height: 14px;
            min-width: 0 !important;
            line-height: 1 !important;
          }

          .el-checkbox__label {
            font-size: 12px;
            color: #222222;
            height: auto !important;
            line-height: 1 !important;
            padding-left: 3px !important;
          }
        }
      }
    }

    .form-list__list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 8px;

      .list-item {
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 18px 16px 16px;

        .list-item__img {
          width: 100%;
          height: 140px;
          cursor: pointer;

          img {
            width: 100%;
            height: 140px;
            object-fit: none;
          }
        }

        &:hover {
          .list-item__operate {
            display: flex;
          }
        }

        .list-item__operate {
          display: none;
          align-items: center;
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 1;
          width: 100%;
          height: 52px;
          text-align: center;
          background: #F7F8FA;

          & > div {
            flex: 1;
          }

          ::v-deep .el-button {
            margin-left: 0;
            padding: 0;
            i {
              color: #8899BB;
              font-size: 14px;
              transition: all 0.3s;
            }

            .el-button + .el-button {
              margin-left: 0;
            }

            span {
              margin-left: 0;
              color: #555555;
              font-size: 12px;
              transition: all 0.3s;
            }

            &:hover {
              &.is-disabled {
                i {
                  color: #8899BB;
                }

                span {
                  color: #555555;
                }
              }
            }
          }

          .list-item__operate--item {
            flex: 1;

            &:hover {
              ::v-deep i, ::v-deep span {
                color: #2266FF;
              }
            }
          }
        }

        .list-item__bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #888888;
          font-size: 12px;

          i {
            font-style: normal;
          }

          .left {
            display: flex;
            align-items: center;

            .tag {
              height: 26px;
              line-height: 26px;
              margin-right: 8px;
              padding: 0 6px;
              border-radius: 4px;
              background: #42D784;
              color: #fff;
            }
          }
        }

        p {
          line-height: 22px;
          color: #333333;
          font-size: 14px;
          font-weight: 700;
        }

        .list-item__user {
          display: flex;
          align-items: center;
          margin-top: 12px;
          color: #888888;
          font-size: 12px;
          line-height: 20px;

          & > div:first-child {
            margin-right: 8px;
          }
        }

        .list-item__title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 14px;

          h2 {
            color: #2EA222;
            font-size: 12px;
          }

          span {
            width: 64px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
          }
        }
      }

      .list-add {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0;
        cursor: pointer;

        span {
          font-size: 32px;
          color: #8899bb;
        }

        h2 {
          color: #555555;
          font-size: 12px;
        }

        &:hover {
          opacity: 0.6;
        }
      }

      & > div {
        width: calc((100% - 60px) / 4);
        height: 216px;
        margin: 0 20px 20px 0;
        background: #FFFFFF;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius: 2px;

        &:nth-of-type(4n) {
          margin-right: 0;
        }
      }
    }
  }
</style>
