<template>
  <div class="yjsj_box">
    <TopNav navTitle="意见收集" rightIcon="add-o" showRight="true" @clickRight="onClickRight" />
    <div class="info_box">
      <div class="info-item item_box" v-for="(item, index) in dataList" :key="index">
        <div class="item-top">
          <div class="icon">
            <img class="iconImg" src="../../../assets/images/time@2x.png" alt="" />
          </div>
          <div class="time">{{ item.xt_cjsj }}</div>
        </div>
        <div class="item" @click="handleEdit(item)">
          <div class="title">
            <span class="title-name">意见名称：</span>
            <span>{{ item.fklxmc }}-{{ item.fkxtmc }}</span>
          </div>
          <div class="info">
            <span class="title-name">意见描述：</span>
            <span>{{ item.fknr }}</span>
          </div>
          <div class="photo">
            <div class="list" v-for="(v, i) in item.imgArr" :key="i">
              <van-image width="80px" height="80px" :src="v" @click.stop="onClickImg(v)"></van-image>
              <!-- <img class="img" :src="v" alt="" /> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-loading type="spinner" style="padding-top: 50vw; text-align: center" v-if="loading" />
    <van-empty description="无列表数据" image="default" v-if="dataList.length <= 0 && showEmpty" />
  </div>
</template>

<script>
import TopNav from "../../../components/topNav.vue";
import { getYyzxApi, downLoadImg } from "../../../api/yyzxApi.js";
import { baseUrl2 } from "../../../utils/request.js";
import { ImagePreview, Toast } from "vant";
export default {
  components: {
    TopNav,
  },
  data() {
    return {
      loading: true,
      showEmpty: false,
      Page: 1,
      total: 0,
      dataList: [],
      radioList: [
        {
          zdmc: "系统问题",
          zddm: 1,
        },
        {
          zdmc: "功能改进",
          zddm: 2,
        },
        {
          zdmc: "新需求",
          zddm: 3,
        },
      ],
      XTFK_LIST: [
        {
          zdmc: "智慧云览",
          zddm: "01",
        },
        {
          zdmc: "智慧云踪",
          zddm: "02",
        },
        {
          zdmc: "智慧云搜",
          zddm: "03",
        },
        {
          zdmc: "智慧云基",
          zddm: "04",
        },
        {
          zdmc: "智慧云侦",
          zddm: "05",
        },
        {
          zdmc: "智慧云法",
          zddm: "06",
        },
        {
          zdmc: "智慧云指",
          zddm: "07",
        },
        {
          zdmc: "智慧云眸",
          zddm: "08",
        },
        {
          zdmc: "智慧云控",
          zddm: "09",
        },
        {
          zdmc: "智慧云防",
          zddm: "10",
        },
        {
          zdmc: "智慧云管",
          zddm: "11",
        },
        {
          zdmc: "智慧云舆",
          zddm: "12",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //预览图片
    onClickImg(url) {
      ImagePreview([url]);
    },
    //添加意见
    onClickRight() {
      this.$router.push("/tjyj");
    },
    // 获取列表
    getList() {
      let parsms = {
        pageNum: this.Page,
        pageSize: 20,
      };
      getYyzxApi("/mosty-rzzx/yjsj/lbcx", parsms)
        .then((res) => {
          if (res.records && res.records.length > 0) {
            this.loading = false;
            this.dataList = res.records;
            this.dataList.forEach((item) => {
              item.fklxmc = "";
              item.fkxtmc = "";
              let arr = item.fkfj ? item.fkfj.split(",") : [];
              let brr = [];
              arr.forEach((item) => {
                let url =
                  baseUrl2 +
                  "/mosty-api/mosty-base/minio/image/download/" +
                  item;
                brr.push(url);
              });
              item.imgArr = brr;
              this.radioList.forEach((v) => {
                if (item.fklx == v.zddm) {
                  item.fklxmc = v.zdmc;
                }
              });
              this.XTFK_LIST.forEach((v) => {
                if (item.fkxt == v.zddm) {
                  item.fkxtmc = v.zdmc;
                }
              });
              // item.imgArr = arr
            });
            this.total = res.total;
          } else {
            this.loading = false;
            this.showEmpty = true;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.showEmpty = true;
        });
    },

    // 处理意见
    handleEdit(item) {
      this.$router.push({
        path: "/tjyj",
        query: { info: JSON.stringify(item) },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.yjsj_box {
  /* padding: 4vw 3vw; */
  padding-top: 13vw;
}

.info_box {
  overflow: hidden;
  overflow-y: auto;
  padding: 4vw 3vw;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
}

.info-item {
  margin-bottom: 4vw;
  padding: 3vw;
  border-radius: 5px;
}

.info-item:nth-child(1) {
  margin-top: 0;
}

.icon {
  float: left;
  margin-right: 2vw;
}

.iconImg {
  width: 2.93334vw;
  height: 2.93334vw;
  margin-right: 1vw;
  vertical-align: middle;
}

.item {
  margin-top: 2vw;
}

.info {
  /* span-indent: 2em; */
  line-height: 6vw;
}

.title {
  line-height: 8vw;
}

.photo {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.list {
  width: 20vw;
  height: 20vw;
  //   border: 1px solid #0c6bcc;
  margin-right: 2vw;
  margin-top: 2vw;
}

.img {
  width: 20vw;
  height: 20vw;
}

.button {
  position: fixed;
  bottom: 0vw;
  width: 60vw;
  height: 10vw;
  background: #0c6bcc;
  color: #fff;
  line-height: 10vw;
  border-radius: 4vw;
  left: 50%;
  transform: translateX(-50%);
}
</style>
