<template>
  <div>
    <div class="content">
      <el-descriptions :column="column" :border="border">
        <el-descriptions-item
          v-for="(item, index) in listLabel"
          :key="index + 'label'"
          style="width: 90px"
          :label="item.label"
        >
          <div v-if="item.type == 'img'" style="display: flex">
            <template v-if="listData[item.value]">
              <div>
                <el-image
                  style="width: 80px; height: 80px; cursor: pointer"
                  :src="$methodsTools.splitImgHost(listData[item.value])"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(listData[item.value]),
                  ]"
                ></el-image>
              </div>
              <div class="down"  @click="downLoad(listData[item.value])" >下载</div>
            </template>
          </div>
          <div
            v-else-if="item.type == 'download'"
            @click="downLoad(listData[item.value])"
            style="cursor: pointer; color: #007aff"
          >
            下载
          </div>
          <div v-else-if="item.type == 'time'">
            {{
              listData[item.long] == 1
                ? "长期"
                : $methodsTools.timestampFormat(listData[item.value])
            }}
          </div>
          <div v-else-if="item.type == 'key'">
            {{ item.options[listData[item.value]] }}
          </div>
          <div v-else-if="item.type == 'type'">
            {{
              item.options.find((i) => i.value == listData[item.value]).label
            }}
          </div>
          <div v-else>
            {{
              listData[item.long] == 1
                ? item.longText
                : listData[item.value]
            }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    column: {
      type: Number,
      default: 2,
    },
    border: {
      type: Boolean,
      default: false,
    },
    listLabel: {
      type: Array,
      default: () => {
        return [];
      },
    },
    listData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },

  mounted() {
    console.log(this.listData);
  },

  methods: {
    downLoad(i) {
      this.$methodsTools.downloadImg(i)
    },
  },
};
</script>
  
<style lang="scss" scoped>
.content {
  /deep/ .el-descriptions-item__label.is-bordered-label {
    color: #333;
    font-weight: bold;
    width: 110px;
  }
  /deep/ .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
    width: 255px;
  }
}

.down {
  cursor: pointer;
  line-height: 90px;
  text-align: center;
  margin-left: 8px;
  color: #007aff;
  &:hover {
    text-decoration: underline;
  }
}
</style>
  