<template>
  <!-- 公众建议 -->
  <div class="SpongeCultureCLass">
    <van-list
      v-model:loading="loading"
      v-model:error="error"
      error-text="请求失败，点击重新加载"
      :finished="finished"
      finished-text="已经到底了~~"
      :offset="50"
      @load="getDataList"
    >
      <div class="ConstrucClass" v-for="(item, index) in tableData" :key="index">
        <div class="MainBox">
          <div class="AvatarAppearance">
            <!-- <div class="zp">
              <img src="../assets/images/tx.png" alt="" class="txclass" />
            </div> -->
            <div class="NameTime">
              <p class="Namea">{{ item.wechatName }}</p>
              <p class="Timea">{{ item.createTime }}</p>
            </div>
          </div>
          <div class="below">
            <p class="belowNr">
              {{ item.opinion }}
            </p>
            <div class="belowZp">
              <img
                v-for="(item1, index) in item.filelist"
                :key="index"
                :src="item1.url"
                style="width: 100px; height: 50px; margin-top: 5px; padding-left: 5px"
                @click="clickImg(item.filelist)"
              />
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <div class="rotundity" @click="sayClick">
      <p>我想说</p>
    </div>
  </div>
  <van-form @submit="onSubmitData">
    <van-popup v-model:show="allData.showCancel" position="center" closeable :style="{ width: '100%' }">
      <div class="popup_tittle">
        <div class="tittle">留言提交</div>
      </div>

      <van-cell-group>
        <van-field
          v-model="allData.formData.wechatName"
          label="姓名/昵称"
          placeholder="请输入姓名/昵称"
          show-word-limit
          required
          :rules="[{ required: true, message: '请输入姓名/昵称' }]"
          :key="fieldKey"
        />

        <van-field
          v-model="allData.formData.opinion"
          rows="1"
          label="留言描述"
          type="textarea"
          maxlength="100"
          placeholder="请输入留言描述"
          show-word-limit
          required
          :rules="[{ required: true, message: '请输入留言描述' }]"
          style="margin-top: 10px"
          :key="fieldKey"
        />
      </van-cell-group>

      <div class="mediumList">
        <span class="Title">现场图片(最多3张)</span>
        <div class="picBox">
          <UploadImg
            :maxCount="3"
            :saveFileArr="allData.formData.filelist"
            :acceptFormat="'image/*'"
            @update:saveFileArr="getImgList"
          />
        </div>
      </div>

      <div class="BottomView">
        <van-button @click="closeDaKa" class="BotBtn">返回</van-button>
        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
      </div>
    </van-popup>
  </van-form>
</template>

<script setup>
import { useStore } from '@/pinia/store.js';
import { peopleOpinionPage, peopleOpinionAdd } from '@/api/PublicAdvice.js';
import UploadImg from '@/views/components/uploadFile.vue';
import { showImagePreview } from 'vant';

const pinias = useStore();
const fieldKey = ref(0);

const allData = reactive({
  showCancel: false,
  currentPage: 0,
  formData: {
    opinion: '',
    wechatName: '',
    filelist: [], //获取的图片数组
  },
});
const loading = ref(false);
const tableData = ref([]);
const pageNum = ref(0);
const pageSize = ref(10);
const error = ref(false);
const finished = ref(false);

/** 获取查询数据列表 */
async function getDataList(bol) {
  pinias.showLoading();
  pageNum.value = pageNum.value + 1;
  loading.value = true;
  try {
    const params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    };
    const res = await peopleOpinionPage(params);
    loading.value = false;
    if (res?.code === 200) {
      const data = res.data || [];
      tableData.value = tableData.value.concat(data);
      pinias.hideLoading();
      const total = res.total;
      const pageTotal = Math.ceil(total / pageSize.value);
      if (pageNum.value >= pageTotal) {
        finished.value = true;
      }
    } else {
      error.value = true;
    }
  } catch (error) {
    console.log(error);
    loading.value = false;
    error.value = true;
  }
}

// 点击预览大图//照片弹框
function clickImg(url) {
  let params = [];
  url.forEach((item) => {
    params.push(item.url);
  });
  showImagePreview(params);
}
// 我想说点击事件
function sayClick() {
  allData.showCancel = true;
  allData.formData.opinion = '';
  allData.formData.wechatName = '';
  allData.formData.filelist = [];
}
// 获取上传的图片
function getImgList(e) {
  e.forEach((item) => {
    item.refField = 'commentPhotos';
  });
  allData.formData.filelist = e;
}
// 取消按钮
function closeDaKa() {
  allData.showCancel = false;
  allData.formData = {};
  fieldKey.value++;
}

// 提交上报
const onSubmitData = async () => {
  console.log('表单数据信息：', allData.formData);
  peopleOpinionAdd(allData.formData).then((response) => {
    allData.showCancel = false;
    pageNum.value = 0;
    finished.value = false;
    tableData.value = [];
    getDataList();
  });
};

onMounted(() => {
  getDataList();
});
</script>

<style lang="less">
.SpongeCultureCLass {
  height: calc(100% - 95px);
  overflow: auto;
  background: #f1f1f1;
  .ConstrucClass {
    margin: 15px 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    background: #ffffff;
    .MainBox {
      width: 100%;
      .AvatarAppearance {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #eaeaea;
        .zp {
          width: 20%;
          height: 120px;
          // background: red;
          .txclass {
            width: 80px;
            height: 80px;
            border-radius: 50px;
            position: relative;
            top: 18px;
            left: 25px;
          }
        }
        .NameTime {
          width: 95%;
          height: 60px;
          .Namea {
            width: 100%;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 28px;
            color: #121212;
            line-height: 26px;
          }
          .Timea {
            width: 100%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 22px;
            color: #7b7b7e;
          }
        }
      }
      .below {
        width: 100%;
        padding-bottom: 10px;
        .belowNr {
          width: 95%;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 26px;
          color: #121212;
          margin-left: 15px;
        }
        .belowZp {
          margin-left: 15px;
          display: inline-block;
        }
      }
    }
  }
  .rotundity {
    width: 120px;
    height: 120px;
    background: rgba(20, 91, 247, 1);
    border-radius: 100px;
    position: fixed;
    bottom: 180px;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 24px;
      color: #ffffff;
    }
  }
}
.popup_tittle {
  display: flex;
  align-items: center;
  justify-items: center;
  // justify-content: space-between;
  padding: 15px;
  height: 100px;
  // background: red;
  .tittle {
    font-size: 40px;
    font-weight: bold;
  }
}
.BottomView {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  .BotBtn {
    width: 45%;
    height: 65px;
    border-radius: 20px;
  }
}
.mediumList {
  width: 100%;
  height: auto;
  padding: 10px 30px;

  .Title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: inline-block;
  }

  .picBox {
    width: 100%;
    height: auto;
  }
}
</style>