<template>
  <div class="preview-service-wrap">
    <!-- 大套餐或其他等直接查看图片类型的 -->
    <el-dialog v-dialogDrag :visible.sync="showPreview" top="10vh" custom-class="self-dialog-c" :modal-append-to-body="false" @close="handleServiceClose" :show-close="false">
      <div style="height: 600px;margin-top:-20px">
        <el-carousel @change="handleSwipeChange" indicator-position="none" :autoplay="false">
          <el-carousel-item v-for="opt in list" :key="opt.ServiceTemplateId">
            <h2 style="text-align: center;margin-bottom:20px">{{opt.Title}}</h2>
            <div style="height: 550px; overflow-y: auto;padding-bottom:10px">
              <img class="img" style="width: 100%;display:block" :src="opt.Value" alt="" />
              <!-- <table id="table" ref="table" class="table-wrap" v-else>
                <thead>
                  <tr style="background: #f0f2f5">
                    <th class="table-item" v-for="item in opt.tableHeadData" :key="item.Value">{{ item.Value }}</th>
                  </tr>
                </thead>

                <tbody>
                  <tr v-for="(row, rindex) in opt.tableData" :key="rindex" >
                    <td class="table-item" v-for="(item) in row" :key="item">
                      <div>{{ item.Value }}</div>
                    </td>
                  </tr>
                </tbody>
              </table> -->
            </div>
          </el-carousel-item>
        </el-carousel>

        <div style="text-align: center; font-size: 16px; padding: 10px 0">{{ currentIndex }}/{{ list.length }}</div>
      </div>
      <div style="text-align: center; margin: 50px 0">
        <el-button type="primary" @click="handleServiceClose">知道了</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PreviewService",
  props: {
    showPreview: false,
    serviceCon: [],
  },
  watch: {
    serviceCon: {
      handler(nval, oval) {
        if (nval.length === 0) return;
        this.list = nval.map((item) => {
          let obj = {};
          if (item.HasDetail === "是") {
            let temarr = item.DetailList.map((rowItem) => {
              let rowArr = [];
              for (let key in rowItem) {
                if (key.substr(0, 3) === "Col" && rowItem[key] !== "") {
                  rowArr.push(JSON.parse(rowItem[key]));
                }
              }
              return rowArr;
            });
            obj.tableHeadData = temarr[0];
            obj.tableData = temarr.slice(1);
          }
          return { ...item, ...obj };
        });
      },
      immediate: true,
    },
  },
  data() {
    return {
      currentIndex: 1,
      list: [],
    };
  },
  methods: {
    handleSwipeChange(e) {
      this.currentIndex = e + 1;
    },

    handleServiceClose() {
      this.$emit("closePreviewService");
    },
  },
};
</script>

<style>
.self-dialog-c .el-dialog__header {
  background-color: #fff;
  padding: 0;
}
.self-dialog-c{
  width: auto;
  max-width: 60%;
}
.el-carousel {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.img{
  image-rendering: -moz-crisp-edges; 
  image-rendering: -o-crisp-edges; 
  image-rendering: -webkit-optimize-contrast; 
  image-rendering: crisp-edges; 
  -ms-interpolation-mode: nearest-neighbor;
}
.table-wrap {
  margin: 20px 0;
  position: relative;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  .row-dark {
    background-color: #deedff;
  }
  .table-item {
    padding: 12px 10px;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    min-width: 150px;
    position: relative;
  }
}
</style>
