<template>
  <div class="pic-list-container">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="pic-list-content"
      :style="picContainerStyle(index)"
    >
      <div @click.stop="onClickImg(item, isSelect(item))">
        <WlPic
          fit="cover"
          :src="imgKey ? item[imgKey] : item"
          class="pic-list"
          :needCos="needCos"
          :cosSuffix="cosSuffix"
        ></WlPic>
      </div>
      <div class="pic-list-icon" @click.prevent="onClickIcon(item, isSelect(item))">
        <MultipleRadio
          v-if="isMultiple"
          v-bind="$attrs"
          :isSelect="isSelect(item) !== -1"
          :selectText="
            multipleSelectTextKey ? item[multipleSelectTextKey] : isSelect(item) + 1 + ''
          "
          @onClick="onClickIcon(item, isSelect(item))"
        />
        <SingleRadio
          v-bind="$attrs"
          v-else
          :isSelect="isSelect(item)"
          @onClick="onClickIcon(item, isSelect(item))"
        />
      </div>
    </div>
  </div>
</template>

<script>
/*
 * @Author: yangxin
 * @Date: 2021-09-18 15:13:18
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-07-09 14:50:40
 */
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
import MultipleRadio from "./component/MultipleRadio/index.vue";
import SingleRadio from "./component/SingleRadio/index.vue";
export default {
  name: "MtPicList",
  components: { SingleRadio, MultipleRadio, WlPic },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    value: {
      type: [Array, String, Object],
      default: () => {
        return [];
      },
    },
    column: {
      type: Number,
      default: 3,
    },
    isMultiple: {
      type: Boolean,
      default: false,
    },
    valueKey: {
      type: String,
      default: "",
    },
    imgKey: {
      type: String,
      default: "",
    },
    multipleSelectTextKey: {
      type: String,
      default: "",
    },
    needCos: {
      type: Boolean,
      default: true,
    },
    cosSuffix: {
      type: String,
      default: "imageView2/1/w/100/h/100/q/85",
    },
    styleExtra: {
      type: Object,
      default: () => {
        return {};
      },
    },
    space: {
      type: String,
      default: "2px",
    },
    picStyleExtra: {
      type: Object,
      default: () => {
        return {};
      },
    },
    picClickSelect: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    isSelect() {
      return function(data) {
        if (this.isMultiple) {
          return this.value.findIndex((ele) =>
            this.valueKey ? ele === data[this.valueKey] : ele === data
          );
        } else {
          return this.valueKey
            ? this.value[this.valueKey] === data[this.valueKey]
            : this.value === data;
        }
      };
    },
    picContainerStyle() {
      return function(index) {
        let allRow = Math.ceil(this.list.length / this.column);
        let row = Math.ceil((index + 1) / this.column);
        //获取间距的单位
        let companyArr = this.space.split(parseInt(this.space));
        let company = "px";
        if (companyArr.length !== 1) {
          company = companyArr[companyArr.length - 1];
        }
        // 计算出图片的宽度
        let width = `(100% - ${(this.column - 1) *
          (this.space ? parseFloat(this.space) : 0)}${company})/${this.column}`;
        return {
          width: `calc(${width})`,
          marginBottom: row === allRow ? "" : this.space,
          marginRight: (index + 1) % this.column ? this.space : 0,
          ...this.picStyleExtra,
        };
      };
    },
  },
  methods: {
    onClickIcon(data, index) {
      let selectArr = this.value;
      if (this.isMultiple) {
        if (index === -1) {
          selectArr.push(this.valueKey ? data[this.valueKey] : data);
        } else {
          selectArr.splice(index, 1);
        }
      } else {
        selectArr = data;
      }
      console.log(selectArr);
      this.$emit("input", selectArr);
      this.$emit("onChange", selectArr);
    },
    onClickImg(data, index) {
      if (this.picClickSelect) {
        this.onClickIcon(data, index);
      }
      this.$emit("onClickImg", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.pic-list-container {
  display: flex;
  margin-bottom: j(1);
  flex-wrap: wrap;
  .pic-list-content {
    position: relative;
    height: j(125);
  }
  .pic-list {
    position: relative;
    overflow: hidden;
    &-pic {
      flex: 1;
      padding: 0 j(1);
      width: 100%;
      height: 100%;
    }
    &-pic-edge {
      border-left: none;
      border-right: none;
    }
    &-icon {
      position: absolute;
      top: j(6);
      right: j(6);
    }
  }
}
</style>
