<template>
  <section class="screen row wrap">
    <flat-list
      @fetch="fetch"
    >
      <template v-slot:item="{item,index}">
        <aside class="dress-up-item flex overflow">
          <div class="flex-1 center">
            <layout-avatar v-if="config.userAvatar" class="dress-up-avatar" :dress-play-src="item.play_image" :dress-src="item.base_image" :src="$store.state.user.user.head_pic"></layout-avatar>
            <svg-animate v-else-if="item.play_image" :hover="true" :default-src="item.base_image" class="screen" :src="item.play_image"></svg-animate>
            <v-image v-else class="dress-up-image" :mode="config.mode || 'aspectFit'" backgroundColor="transparent" :src="item.base_image"></v-image>
          </div>
          <footer class="dress-up-footer center" v-if="have===DressHaveType.all">
            <div class="dress-up-title line-1">{{item.title}}</div>
            <div class="dress-up-introduce line-1">限时活动奖励</div>
          </footer>
          <footer class="dress-up-footer center" v-else>
            <div class="dress-up-title line-1">{{item.title}}</div>
<!--            :class="{-->
<!--            'button-disabled':dress[type] && dress[type].udid === item.udid-->
<!--            }"-->
            <div @click="setUseDress(item)" class="dress-up-use-button center button"

            >{{ dress[type] && dress[type].udid === item.udid?'取消使用':'使用' }}</div>
          </footer>
        </aside>
      </template>

    </flat-list>
  </section>
</template>

<script>
import {
  FlatList,
  vImage,
  svgAnimate
} from '$components';
import layoutAvatar from '$layout/layout-avatar';
import props from '../props.ts';
import mixins from '../mixins';
import config from '../data/config';
import DressHaveType from "$popup/popup-personal/components/my-dress-up/const/have";
import popup from "$utils/tool/popup";
import {cache} from '$utils/request/cache';
export default {
  name: "dress-up-list",
  components:{
    FlatList,
    vImage,
    layoutAvatar,
    svgAnimate
  },

  data(){
    return {
      DressHaveType:DressHaveType,

    }
  },

  methods:{
    setUseDress(item){
      let itemResult = this.dress[this.type] || {};
      let result = itemResult.udid === item.udid;
      return popup.$confirm({
        title:result ? '是否取消使用'+item.title+'装扮' : '是否使用'+item.title+'装扮',
        confirm:()=>{
          this.$request({
            url: result ? 'user/cancel_user_decorate' : 'user/set_user_decorate',
            data:{
              udid: item.udid
            },
            token:true
          }).then((data)=>{
            if (data.isSuccess && this.config.cache) {
              // 执行删除cache
              cache.deleteCache(this.config.cache,true);
            }
          });

          if (result) {
            this.dress = {
              [this.type]:{}
            }
          } else {
            this.dress = {
              [this.type]:item
            }
          }

          if (this.config.user) {
            let resultUseData = {};
            for (let key in this.config.user) {
              if (this.config.user.hasOwnProperty(key)) {
                resultUseData[key] = !result ? item[this.config.user[key]] : '';
              }
            }
            this.user = resultUseData;
          }


        }
      });
    }
  },

  computed:{
    config(){
      return config[this.type] || {};
    }
  },

  props,
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
