gallery-row

<style lang="stylus" scoped>
  @import "../css/base/variables.styl"
  .photo-checkbox
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;

  .checkbox
    position absolute
    right 3px
    top 3px
    width 16px
    height 16px
    border-radius 50%
    border 1px solid #fff
    z-index 3
    color transparent
    background-color rgba(0, 0, 0, .2)
    text-align center
    &.active
      color red
      background-color #fff
      box-shadow 0 1px 1px rgba(0, 0, 0, .375)

  .mask
    width 100%
    height 100%
    position absolute
    left 0
    top 0
    background-color rgba(white .2)
    z-index -4

  .mask-show
    z-index 2
</style>

<template>
  <label v-if="url"
         class="pic"
         :style="picStyle"
         @click="onPicClick()"
  >
    <!--<img v-lazy="col('IMG_URL', 'value')" />-->
    <lazy-img :src="url" />
    <template v-if="selectMode">
      <input type="checkbox" class="photo-checkbox" v-model="checked">
      <!--<div class="photo-selected" v-if="selectModel" :class="{text:selectedShow}">√</div>-->
      <div class="checkbox" :class="{active:checked}">
        <icon name="check"></icon>
      </div>
      <div class="mask" :class="{'mask-show':checked}"></div>
    </template>
  </label>
</template>

<script>
  import colMixin from './mixins/col'
  import photoMixin from './mixins/photo'
  import bLazyMixin from './mixins/bLazy'
  import _ from 'lodash'
  export default{
    mixins: [colMixin, photoMixin, bLazyMixin],
    methods: {
      onPicClick(url) {
        if (this.selectMode) {
          return
        }
        this.$emit('show-big-photo', this.url)
      }
    },
    data(){
      return {
        url: this.col('IMG_URL', 'value'),
        checked: false
      }
    },
    watch: {
      checked (checked) {
//        当选中状态发生变化
//        从value数组中查找当前发生变化的图片路径
        const index = this.value.indexOf(this.url)
//        当数组中存在该路径
        const inSelectList = index !== -1
//        当为选中状态时
        if (checked) {
//          将选中的图片路径存进数组中
          this.value.push(this.url)
        } else if (inSelectList) {
//          当选中状态为false，但数组中存在该路径，则删除掉该路径
          this.value.splice(index, 1)
        }
      },
      value(val) {
        if (val.indexOf(this.url) !== -1) {
          this.checked = true
        } else {
          this.checked = false
        }
        this.$emit('input', val)
      }
    },
    props: {
      // 选中的数据
      value: Array,
      // 选择模式
      selectMode: {
        type: Boolean,
        default: false,
      }
    }
  }
</script>