main

<style lang="stylus" scoped>
  @import "../css/base/variables.styl"
  .is-empty
    padding-top 50px
    text-align center

  .header-wrap
    position fixed
    top 0
    width 100%
    text-align center
    .selected-counter
      span
        color $primary
        padding 0 2px

  .content
    padding-top 50px
    width 100%

  //    我加的样式
  .select-button
    position fixed
    right 10px
    top 0
    color #656d78
    outline none
    z-index 10
    background-color #f1f1f1
    border none
    color #cd0010
    padding-left 10px
    padding-right 10px
    height 50px
    line-height 50px

  .cancel-button
    position fixed
    left 10px
    top 0
    color #656d78
    outline none
    z-index 10
    background-color #f1f1f1
    border none
    color #cd0010
    padding-left 10px
    padding-right 10px
    height 50px
    line-height 50px
</style>

<template>
  <div>
    <spinner :loading="loading" />
    <big-photo v-if="bigPhotoVisible" :url="photoUrl" @on-click="bigPhotoVisible = false" />
    <v-header class="header-wrap" :params="params" :visible="!selectMode">
      <button slot="button" class="cancel-button" @click="cancelHandler" v-show="selectMode">取消</button>
      <span slot="selected-counter" v-show="selectMode"
            class="selected-counter">选中<span>{{selectList.length}}</span>项</span>
      <button v-if="selectMode" slot="button" class="select-button" @click="send">发送</button>
      <button v-else slot="button" class="select-button" @click="selectMode = true">选择</button>
    </v-header>
    <div class="content">
      <div class="px2 mt1 clearfix" v-if="list && list.length > 0">
        <template v-for="record in list">
          <gallery-row :model="record"
                       @show-big-photo="showBigPhoto"
                       :select-mode="selectMode"
                       v-model="selectList"
          />
        </template>
      </div>
      <div class="is-empty" v-if="list && list.length === 0">
        没有照片
      </div>
    </div>
  </div>
</template>

<script>
  import { getPhotoDetailList } from '../api'
  import { parse } from '../utils/report-json-parser'
  import VHeader from './v-header.vue'
  import GalleryRow from './gallery-row.vue'
  import BigPhoto from './big-photo.vue'
  import Spinner from './spinner.vue'
  import { openChat } from '../utils/native-interface'
  export default{
    name: 'gallery',
    data() {
      return {
        bigPhotoVisible: false,
        photoUrl: '',
        list: null,
        params: [],
        loading: false,
        // 需要与负责人id 做比较，如果登录人 = 门店负责人，则不能发起聊天
        empId: window.__context.params.empId,
//        我加的属性
        selectList: [],
        selectMode: true,
      }
    },
    components: {
      VHeader, GalleryRow, BigPhoto, Spinner
    },
    watch: {
      ['$route']() {
        if (this.$route.name === 'gallery') {
          this.fetchData()
        }
      }
    },
    created() {
      this.fetchData()
    },
    mounted() {
    },
    methods: {
      reset() {
        this.list = null
      },
      fetchData() {
        this.reset()
        this.loading = true
        const params = this.$route.query
        getPhotoDetailList(params, { transformResponse: parse }).then((result) => {
          this.list = result.data
          this.params = result.params
        }, (err) => {
          console.log(err)
        }).then(() => this.loading = false)
      },
      showBigPhoto(url) {
        this.photoUrl = url
        this.bigPhotoVisible = true
      },
      cancelHandler(){
        this.selectMode = false
        this.selectList = []
      },
      send() {
        const requestData = {
          "empId": this.params[6].name,
//          "icon": ,
          "userChatAccount": this.params[6].name,
          "empName": this.params[2].value,
          "storeId": this.params[7].name,
          "storeName": this.params[3].value,
          "data": this.selectList
        }

        console.log(requestData)

        openChat(requestData).then(() => {
          this.selectMode = false
        }, (err) => {
          console.log(err)
        })
        this.selectList = []
      }
        //        {
//          "empId": "负责人id",
//          "icon": "负责人头像地址",
        // 与 empId 一样...
//          "userChatAccount": "负责人聊天账号",
//          "empName": "负责人姓名",
//          "storeId": "门店id",
//          "storeName": "门店名称",
//          "data": [
        //          "图片地址1",
        //          "图片地址2"
        //        ]
//        }

    }
  }
</script>