<template>
  <div class="AppVillager" v-if="isAuthed">
    <!-- <u-tabs class="u-tabs1" :list="tabs" :is-scroll="false" :current="tabIndex0" @change="changeChange" bg-color="#197df0" style="width: 50%" active-color="#FFF;" inactive-color="#FFF"></u-tabs> -->
    <div class="topUtabs">
      <div class="utabs" :class="tabIndex0 == index ? 'active0' : ''" v-for="(itemTab, index) in tabs" :key="index"
           @click="changeChange(index)">
        <span class="itemTabs"> {{ itemTab.name }}</span>
        <span class="lineBot"></span>
      </div>
    </div>

    <div class="top">
      <div class="tabIndex012" v-if="tabIndex0 != 3">
        <div class="scrolls">
          <span class="tags" :class="tabIndex00 == indexs ? 'active' : 'noactive'"
                v-for="(e, indexs) in $dict.getDict('villagerCircleTopic')" :key="indexs"
                @click="changeTabIndex00(indexs)">{{ e.dictName }}</span>
        </div>
      </div>

      <u-tabs class="u-tabs2" :list="tabList" :is-scroll="false" :current="tabCurrent1" @change="changetabIndex"
              bg-color="#fff" active-color="#333;" inactive-color="#999" v-if="tabIndex0 == 3"></u-tabs>

      <div class="indexTab22" v-if="tabIndex0 == 3">
        <div class="tags" v-for="(e, i) in itemLists" :key="i" :class="indexTab2 == i ? 'active' : 'noactive'"
             @click="hander(i)">{{ e.dictName }}
        </div>
      </div>
    </div>

    <div class="middle">
      <div class="datas" v-if="data.length">
        <div class="card" v-for="(item, index) in data" :key="index" @click="toDetail(item)">
          <div class="cardTop">
            <span v-if="tabIndex0 != 3">
              <img :src="item.avatarUrl" alt="" v-if="item.avatarUrl" class="img"/>
              <img src="https://cdn.cunwuyun.cn/shandong10086/avatar.png" alt="" class="img" v-else/>
            </span>

            <span v-if="tabIndex0 == 3">
              <img :src="item.avatarUrl || user.avatarUrl" alt="" v-if="item.avatarUrl || user.avatarUrl" class="img"/>
            </span>

            <div class="rightTop">
              <div class="leftStaus">
                <span class="names">{{ item.createUserName || user.realName }}</span>

                <span class="titless">
                  <span v-if="item.topic" class="topics"> {{
                      $dict.getLabel('villagerCircleTopic', item.topic)
                    }} |</span>
                  <span> {{ item.createTime }}</span>
                </span>
              </div>

              <div class="statusDele">
                <div class="status" :class="item.status == 0 ? 'status2' : item.status == 1 ? 'status0' : 'status1'"
                     v-if="tabIndex0 == 3">
                  <span>{{ item.status == 0 ? '审核中' : item.status == 1 ? '已通过' : '未通过' }}</span>
                </div>

                <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/4.png" alt="" @click.stop="toShowMask(item, $event)"
                     class="dels" :class="tabIndex0 == 3 && item.status != 0 ? '' : 'opacityYes'"/>
              </div>
            </div>
          </div>

          <!--内容 图片 地区 分享 留言 点赞 -->
          <div class="tabCurrent0" v-if="tabCurrent1 != 1">
            <div class="cardConts">{{ item.content }}</div>

            <div class="cardImg" v-if="item.pictures">
              <img :src="items.url" alt="" v-for="(items, i) in item.pictures" :key="i" v-if="i < 3"/>
            </div>

            <!-- 地区 -->
            <div class="cardBot">
              <div class="icons">
                <u-icon name="map-fill"></u-icon>
                <span>{{ item.gpsDesc }}</span>
              </div>

              <!-- 分享 留言 点赞 -->
              <div class="icones" v-if="tabIndex0 != 3">
                <div class="img1"></div>

                <div class="rightFlex">
                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/2.png" alt="" class="img2"
                       @click.stop=";(poupShow = true), (ReplyId = item.id)"/>

                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/3.png" alt="" class="img3" @click.stop="like(item)"
                       v-if="item.upFlag == 0"/>
                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/33.png" alt="" class="img3"
                       @click.stop="like(item)" v-if="item.upFlag == 1"/>
                </div>
              </div>
            </div>
          </div>

          <!-- 回复的主题 -->
          <div class="tabCurrent11" v-if="tabIndex0 == 3 && tabCurrent1 == 1">
            <div class="cardsConts">{{ item.content }}</div>

            <div class="reply">
              <span class="toReply">回复的话题 ：</span>
              <span class="contens">{{ item.villagerCircleInfo.content }}</span>
            </div>
          </div>
        </div>
      </div>

      <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
    </div>

    <movable-area class="eareas">
      <movable-view direction="all" class="max" x="270" y="430">
        <img class="addBtns" src="https://cdn.cunwuyun.cn/dvcp/AppVillager/icon111.png" alt="" v-if="tabIndex0 != 3"
             @click.native="toAdd()"/>
      </movable-view>
    </movable-area>

    <u-modal v-model="delShow" content="确定删除该数据" :mask-close-able="true" :show-cancel-button="true"
             @confirm="confirmDel"></u-modal>

    <u-mask :show="delAndEdit" @click="closeMask">
      <div class="warp" :style="{ top: tops + 'px', left: rights + 'px' }">
        <div class="rect" @tap.stop="toMask()">删除</div>
      </div>
    </u-mask>

    <u-popup v-model="poupShow" height="auto" mode="bottom">
      <div class="comments-wrapper" :style="{ paddingBottom: heights + 'px' }">
        <div class="form-item form-item__textarea">
          <div class="form-item__wrapper">
            <div class="form-item__right">
              <textarea v-model="ReplyCont" class="textareas" :maxlength="140" placeholder="请输入内容..."
                        @keyboardheightchange="keyboard"></textarea>
            </div>
          </div>
        </div>

        <div class="words">{{ ReplyCont.length }}/140</div>

        <div class="bottombtn">
          <div class="emptys" @click="ReplyCont = ''">清空内容</div>

          <div class="publishs" @click="send">发送</div>
        </div>
      </div>
    </u-popup>
  </div>

  <AiEmpty :description="`请往'我的-个人身份认证'<br/>进行身份认证`" v-else/>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'AppVillager',
  appName: '村民圈',
  components: {},
  props: {},
  data() {
    return {
      tabs: [
        {
          name: '本村',
        },
        {
          name: '本镇',
        },
        {
          name: '本县',
        },
        {
          name: '我参与的',
        },
      ],
      tabIndex0: 0,
      tabList: [
        {
          name: '我的话题',
        },
        {
          name: '我的评论',
        },
      ],
      tabCurrent1: 0,
      data: [],
      itemLists: [
        {dictName: '全部', dictValue: '', dictColor: null},
        {dictName: '已通过', dictValue: '1', dictColor: null},
        {dictName: '未通过', dictValue: '2', dictColor: null},
        {dictName: '审核中', dictValue: '0', dictColor: null},
      ],
      indexTab2: 0,
      delShow: false,
      current: 1,
      TopicValue: '0',
      TopicName: '美丽庭院',
      flag: false,
      delAndEdit: false,
      editId: '',
      statDisabled: '',
      tabIndex00: '0',
      poupShow: false,
      Replyflag: false,
      ReplyId: '',
      ReplyCont: '',
      tops: '',
      rights: '',
      heights: '',
    }
  },
  computed: {
    ...mapState(['user']),
    isAuthed() {
      return this.user.status == 2
    },
  },
  watch: {},
  onLoad() {
    this.$dict.load('villagerCircleTopic', 'auditStatus').then(() => {
      this.init()
    })
  },
  onShow() {
    uni.$on('updateList', () => {
      this.inits()
    })
  },
  methods: {
    getList() {
      this.$instance
      .post(this.tabIndex0 == 3 ? '/app/appvillagercircleinfo/list-xcxme' : '/app/appvillagercircleinfo/list-xcx', null, {
        params: {
          size: 6,
          current: this.current,
          topic: this.tabIndex0 != 3 ? this.tabIndex00 : '',
          status: this.tabIndex0 == 3 && this.indexTab2 == 0 ? '' : this.tabIndex0 == 3 && this.indexTab2 == 1 ? 1 : this.tabIndex0 == 3 && this.indexTab2 == 2 ? 2 : this.tabIndex0 == 3 && this.indexTab2 == 3 ? 0 : '',
          areaId: this.tabIndex0 != 3 ? this.user.areaId : '',
          listType: this.tabIndex0 == 3 && this.tabCurrent1 == 0 ? '0' : this.tabIndex0 == 3 && this.tabCurrent1 == 1 ? '1' : this.tabIndex0 == 0 ? '0' : this.tabIndex0 == 1 ? '1' : this.tabIndex0 == 2 ? '2' : '',
        },
      })
      .then((res) => {
        if (res.code == 0) {
          this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
        }
      })
    },

    init() {
      this.data = []
      this.current = 1
      this.getList()
    },

    inits() {
      this.tabIndex0 = 0
      this.tabCurrent1 = 0
      this.indexTab2 = 0
      this.data = []
      this.current = 1
      this.getList()
    },

    changeChange(index) {
      if (index != 3) {
        this.tabCurrent1 = 0
        this.$nextTick(() => {
          this.tabIndex0 = index
          this.init()
        })
      }
      if (index == 3) {
        this.tabIndex0 = index
        this.init()
      }
    },

    changetabIndex(e) {
      this.tabCurrent1 = e
      this.$nextTick(() => {
        this.indexTab2 = 0
        this.init()
      })
    },

    hander(i) {
      this.indexTab2 = i
      this.$nextTick(() => {
        this.init()
      })
    },

    toDetail(item) {
      this.$linkTo(`./detail?id=${item.id}&avatarUrl=${item.avatarUrl ? item.avatarUrl : ''}&tabCurrent1=${this.tabCurrent1}&tabIndex0=${this.tabIndex0}&gpsDesc=${item.villagerCircleInfo ? item.villagerCircleInfo.gpsDesc : ''}&titleType=${this.tabIndex0 != 3 ? 0 : this.tabIndex0 == 3 && this.tabCurrent1 == 0 ? 1 : this.tabIndex0 == 3 && this.tabCurrent1 == 1 ? 2 : ''}`)
    },

    toAdd() {
      this.delAndEdit = false
      this.$linkTo(`./add`)
    },

    confirmDel() {
      this.$instance
      .post(this.tabIndex0 == 3 && this.tabCurrent1 == 1 ? '/app/appvillagercirclecomment/delete' : '/app/appvillagercircleinfo/delete', null, {
        params: {
          ids: this.deleId,
        },
      })
      .then((res) => {
        if (res.code == 0) {
          this.deleShow = false
          this.modalShow = false
          this.deleId = ''
          this.statDisabled = ''
          this.$u.toast('删除成功')
          this.init()
        }
      })
      .catch((e) => {
        this.$u.toast(e)
      })
    },

    conTopic(e) {
      this.TopicValue = e[0].value
      this.TopicName = e[0].label
      this.$nextTick(() => {
        this.init()
      })
    },

    toShowMask(item, data) {
      this.delAndEdit = true
      this.$nextTick(() => {
        if (data.touches[0].clientY * 1 < 100) {
          this.tops = data.touches[0].clientY * 1 + 10
        } else {
          this.tops = data.touches[0].clientY * 1 - 80
        }
        this.rights = (data.detail.x * 1) / 2 - 50
      })
      this.editId = item.id
      this.deleId = item.id
      this.statDisabled = item.status
    },

    closeMask() {
      this.delAndEdit = false
      this.statDisabled = ''
      setTimeout(() => {
        this.tops = ''
        this.rights = ''
      }, 301)
    },

    keyboard(e) {
      const info = wx.getSystemInfoSync()
      if (info.platform === 'android') {
        this.heights = e.detail.height - 20
      } else {
        this.heights = e.detail.height - 80
      }
    },

    toMask() {
      this.delAndEdit = false
      this.delShow = true
    },

    changeTabIndex00(e) {
      this.tabIndex00 = e
      this.$nextTick(() => {
        this.init()
      })
    },

    like(item) {
      if (this.flag) return

      this.flag = true
      this.$instance
      .post(`/app/appvillagercircleinfo/up?id=${item.id}`)
      .then((res) => {
        if (res.code === 0) {
          this.$u.toast(item.upFlag == 0 ? '点赞成功' : '取消点赞成功')
          this.getList()
          setTimeout(() => {
            this.flag = false
          }, 600)
        }
      })
      .catch((err) => {
        this.$u.toast(err)
        this.flag = false
      })
    },

    send() {
      if (this.Replyflag) return

      if (!this.ReplyCont) {
        return this.$u.toast('请输入内容')
      }

      this.Replyflag = true
      this.$instance
      .post(`/app/appvillagercirclecomment/addOrUpdate`, {
        content: this.ReplyCont,
        replyUserResidentId: this.user.id,
        replyUserName: this.user.realName,
        areaId: this.user.areaId,
        vcId: this.ReplyId,
      })
      .then((res) => {
        if (res.code == 0) {
          this.$u.toast('发送成功')
          this.ReplyId = ''
          this.ReplyCont = ''
          this.poupShow = false
          this.Replyflag = false
        }
      })
      .catch(() => {
        this.Replyflag = false
        this.$u.toast('发送失败')
      })
    },
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getList()
  },
}
</script>

<style scoped lang="scss">
.AppVillager {
  background-color: #fff;
  height: 100%;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;

  .active {
    color: #4181ff !important;
    border: 1px solid #4181ff !important;
  }

  .noactive {
    color: #666;
    border: 1px solid #ddd;
  }

  .topUtabs {
    display: flex;
    background: #4181ff;
    padding: 52px 0 74px 0;

    .utabs {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 40px;
      font-weight: 500;
      color: #ffffff;
      transition-duration: 0.5s;
      margin-left: 32px;

      .itemTabs {
        padding-bottom: 10px;
      }
    }

    .active0 {
      transition-duration: 0.5s;

      .itemTabs {
        font-size: 44px;
      }

      .lineBot {
        transition-duration: 0.5s;
        display: inline-block;
        text-align: center;
        width: 48px;
        height: 6px;
        background: #fff;
        border-radius: 4px;
      }
    }
  }

  ::v-deep .u-tabs1 {
    .u-tabs {
      padding: 32px 0 60px 0;
      width: 100%;
      background: #197df0;
      box-sizing: border-box;
    }
  }

  .top {
    padding: 0 16px 32px 16px;
    background: #fff;
    border-radius: 32px 32px 0 0;
    margin-top: -30px;
    overflow: hidden;

    .tabIndex012 {
      padding-top: 32px;

      .scrolls {
        display: flex;
        white-space: nowrap;
        overflow-x: scroll;
        width: 100%;

        .tags {
          padding: 8px 32px;
          background: #ffffff;
          border-radius: 32px;
          margin-left: 16px;
          border: 1px solid #ddd;
          color: #666;
        }

        .tags:first-child {
          margin-left: 0;
        }
      }
    }

    .indexTab22 {
      padding-top: 32px;
      display: flex;

      .tags {
        padding: 8px 32px;
        background: #ffffff;
        border-radius: 32px;
        margin-left: 16px;
        border: 1px solid #ddd;
      }
    }

    ::v-deep .u-tabs2 {
      .u-tabs {
        padding: 0 !important;
      }
    }
  }

  .middle {
    padding: 0 32px;
    background: #fff;

    .datas {
      .card {
        padding: 32px 0 48px 0;
        box-shadow: inset 0px -1px 0px 0px #dddddd;

        .cardTop {
          display: flex;

          .img {
            width: 96px;
            height: 96px;
            border-radius: 50%;
          }

          .rightTop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: calc(100% - 96px);

            .leftStaus {
              display: flex;
              flex-direction: column;
              margin-left: 16px;

              .names {
                font-size: 32px;
                font-weight: 500;
              }

              .titless {
                font-size: 26px;
                color: #6e727a;
                margin-top: 6px;

                .topics {
                  margin-right: 8px;
                }
              }
            }

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

              .status {
                font-size: 28px;
              }

              .status0 {
                color: #42d784;
              }

              .status1 {
                color: #ff4466;
              }

              .status2 {
                color: #ff883c;
              }

              .dels {
                position: relative;
                margin-left: 20px;
                width: 50px;
                height: 50px;
              }

              .opacityYes {
                visibility: hidden;
              }
            }
          }
        }

        .tabCurrent0 {
          .cardConts {
            margin-top: 24px;
            font-size: 32px;
            line-height: 48px;
          }

          .cardImg {
            margin-top: 24px;

            img {
              width: 226px;
              height: 226px;
              margin-right: 4px;
            }

            img:nth-child(3n + 0) {
              margin-right: 0;
            }
          }

          .cardBot {
            margin-top: 24px;

            .icons {
              display: inline-block;
              padding: 8px 32px 8px 16px;
              background: #eff1f3;
              border-radius: 28px;
            }

            .icones {
              display: flex;
              justify-content: space-between;
              margin-top: 24px;

              .rightFlex {
                display: flex;

                .img2,
                .img3 {
                  width: 48px;
                  height: 48px;
                }

                .img3 {
                  margin-left: 48px;
                }
              }
            }
          }
        }

        .tabCurrent11 {
          .cardsConts {
            margin-top: 24px;
            font-size: 32px;
          }

          .reply {
            display: flex;
            padding: 24px;
            background: #f3f6f9;
            border-radius: 16px;
            margin-top: 24px;

            .toReply {
              display: inline-block;
              width: 170px;
              font-size: 26px;
              color: #999999;
            }

            .contens {
              display: inline-block;
              width: calc(100% - 170px);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #333;
              word-break: break-all;
              line-height: 1.5;
            }
          }
        }
      }
    }
  }

  ::v-deep .u-mask {
    .warp {
      position: absolute;
      // top: 47%;
      // right: 50%;
      transform: translateX(150px);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 300px;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      border-radius: 5%;

      .rect {
        width: 100%;
        text-align: center;
        line-height: 4;
        background: #fff;
      }
    }
  }

  .comments-wrapper {
    padding: 16px 0;
    background: #f7f7f7;

    .form-item {
      background: #fff;
      margin: 0 16px;
      border-radius: 16px 16px 0 0;
      padding: 10px !important;

      .form-item__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 128px;
        padding-right: 28px;

        input {
          flex: 1;
          height: 100%;
          text-align: right;
          padding-right: 10px;
        }

        .form-item__right {
          display: flex;
          align-items: center;
          font-size: 32px;

          span {
            max-width: 400px;
            margin-right: 8px;
            color: #333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          i {
            margin-right: 8px;
            color: #999999;
          }
        }
      }

      &:last-child {
        .form-item__wrapper {
          border-bottom: none;
        }
      }

      &.form-item__imgs,
      &.form-item__textarea {
        .form-item__wrapper {
          display: block;
          height: auto;
          padding-bottom: 32px;
        }

        textarea {
          width: 100%;
          height: 160px;
        }

        .form-item__right {
          padding-left: 18px;

          .textareas {
            color: #303133;
          }
        }
      }
    }

    .words {
      background: #fff;
      border-radius: 0 0 16px 16px;
      margin: 0 16px;
      padding: 10px;
      text-align: right;
      font-size: 26px;
      color: #999999;
    }

    .bottombtn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 30px;
      padding: 20px 0 0;

      .emptys {
        font-size: 26px;
        color: #666666;
      }

      .publishs {
        width: 144px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: #1365dd;
        border-radius: 32px;
        color: #fff;
      }
    }
  }

  .eareas {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;

    .max {
      pointer-events: auto;
      width: auto;
      height: auto;

      .texts {
        width: 200px;
        height: 200px;
        background: red;
      }

      .addBtns {
        width: 168px;
        height: 168px;
        border-radius: 50%;
      }
    }
  }
}
</style>
