<template>
  <div class="cart-container">
    <el-popover
    placement="top"
    width="500"
    trigger="click">
    <div class="cart-panel" :style="{'--current-color': theme}">
      <div class="image-area" v-show="!chooseTask">
        <div class="cart-title">图片购物车</div>
        <div class="image-list">
          <div v-for="(item, index) in list" :key="index" class="image-item" :class="{'image-item-active': item._check}" @click="imageClick(item)">
            <img :src="imageUrl(item)" alt="" class="image">
            <el-checkbox class="checkbox" v-model="item._check" @change="handleCheckChange"></el-checkbox>
            <div class="image-delete" @click.stop="deleteImage(index)">
              <i class="el-icon-delete"></i>
            </div>
          </div>
        </div>
        <div class="cart-tool">
          <div style="margin-right: 16px;">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选（{{list.filter(val => val._check).length}}）</el-checkbox>
          </div>
          <el-dropdown @command="handleImageCommand" v-loading="genImaging">
            <el-button type="primary" size="small" style="margin-right: 10px;" plain>图片合并<i class="el-icon-arrow-down"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="nineGrid">九宫格</el-dropdown-item>
              <el-dropdown-item command="fourGrid">四宫格</el-dropdown-item>
              <el-dropdown-item command="horizontalMerge">水平合并</el-dropdown-item>
              <el-dropdown-item command="verticalMerge">垂直合并</el-dropdown-item>
              <el-dropdown-item command="video">生成视频</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-button type="warning" size="small" plain @click="clear">清空购物车</el-button> -->
          <el-button type="info" size="small" v-loading="taskCreating" plain @click.stop="goCreateTask">创建任务</el-button>
          <el-button type="primary" size="small" plain @click.stop="addToTask">反馈到任务<i class="el-icon-right"></i></el-button>
          <el-dropdown @command="handleMoreCommand">
            <el-button type="warning" size="small" style="margin-left: 10px;" plain>更多<i class="el-icon-d-arrow-right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="share">共享</el-dropdown-item>
              <el-dropdown-item command="clear">清空购物车</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="image-area task-area" v-show="chooseTask">
        <div class="cart-title" @click="goBack"><i class="el-icon-back"></i>返回</div>
        <div class="task-list" v-loading="loadingTask">
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="taskList"
            border
            height="460"
          >
            <el-table-column
              align="center"
              label="任务名称"
              show-overflow-tooltip
              min-width="160"
              prop="taskTitle"
            />
            <el-table-column label="任务类型" align="center" prop="taskType" min-width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.task_type" :value="scope.row.taskType"/>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="任务内容"
              show-overflow-tooltip
              min-width="160"
              prop="taskContent"
            />
            <el-table-column
              align="center"
              label="发布单位"
              show-overflow-tooltip
              min-width="160"
              prop="branchName"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="发布部门"
              show-overflow-tooltip
              min-width="160"
              prop="deptName"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="发布人"
              show-overflow-tooltip
              min-width="160"
              prop="taskInitiator"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="任务期限"
              show-overflow-tooltip
              min-width="200"
              prop="startToEndDate"
            >
            </el-table-column>
            <el-table-column label="任务状态" align="center" prop="taskStatus" min-width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus"/>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="状态"
              show-overflow-tooltip
              min-width="90"
            >
              <template v-slot="{ row }">
                <template v-if="row.sdTaskOther && row.sdTaskOther.status === '2'">
                  <el-tag
                    type="success">已办结</el-tag>
                </template>
                <template v-else-if="row.sdTaskOtherFeedbackByCreate">
                  <el-tag v-if="row.sdTaskOtherFeedbackByCreate.status === '1'"
                  >已反馈</el-tag
                  >
                  <el-tag
                    v-else-if="row.sdTaskOtherFeedbackByCreate.status === '2'"
                    type="success"
                  >已通过</el-tag
                  >
                  <el-tag
                    v-else-if="row.sdTaskOtherFeedbackByCreate.status === '-1'"
                    type="danger"
                  >驳回</el-tag
                  >
                  <el-tag v-else type="info">未反馈</el-tag>
                </template>
                <el-tag v-else type="info">未反馈</el-tag>
              </template>
            </el-table-column>
            <el-table-column width="80px" align="center" label="操作" fixed="right">
              <template slot-scope="scope">
                <el-link
                  class="table-opretar"
                  type="primary"
                  @click="confirmAddToTask(scope.row)"
                >确定反馈</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div v-show="visible" slot="reference" class="cart-content" ref="cartContent" :class="{'playAnimation': isAnimation}">
      <el-badge :value="list.length" class="item">
        <div class="cart-btn">
          <i class="el-icon-shopping-cart-full"></i>
        </div>
      </el-badge>
    </div>
  </el-popover>
  <transition
    appear
    @before-enter="beforeEnter"
    @enter="afterEnter"
    @after-leave="animationEnd"
    >
    <div class="ball" v-show="showBall" :style="ballStyle">
      <i class="el-icon-shopping-cart-full"></i>
    </div>
  </transition>
  <AuditDialog ref="editDialog" ></AuditDialog>
  <ShareDialog ref="shareDialog"></ShareDialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { pageListByUser } from "@/api/task/branch";
import { addImageFeedback } from "@/api/task/feedback";
import { generateTasks } from "@/api/task/images";
import { imageToGroup } from "@/api/gallery/images";
import AuditDialog from "@/views/task-distribut/send/other-task/components/AuditDialog";
// import { downloadFileUrl } from '../../utils';
import download from '@/plugins/download.js'
import ShareDialog from '@/views/share-gallery/components/ShareDialog.vue';

 export default {
  name: 'PhotoCart',
  dicts: ['task_type','task_status'],
  components: {
    AuditDialog,
    ShareDialog
  },
  data () {
    return {
      list: [
        // {
        //   id: 1,
        //   url: '',
        //   _check: true
        // },
        // {
        //   id: 2,
        //   url: '',
        //   _check: true
        // },
        // {
        //   id: 3,
        //   url: '',
        //   _check: true
        // },
        // {
        //   id: 4,
        //   url: '',
        //   _check: true
        // },
        // {
        //   id: 5,
        //   url: '',
        //   _check: true
        // },
        // {
        //   id: 6,
        //   url: '',
        //   _check: true
        // },
        // {
        //   id: 7,
        //   url: '',
        //   _check: true
        // },
      ],
      isIndeterminate: false,
      checkAll: true,
      visible: false,
      chooseTask: false,
      loadingTask: false,
      taskList: [],
      ballStyle: {},
      isAnimation: false,
      addX: 0,
      addY: 0,
      showBall: false,
      taskCreating: false,
      genImaging: false,
    }
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
    }),
  },
  mounted() {
    this.$eventBus.$on('addImageToCart', this.addImageToCart);
  },
  beforeDestroy() {
    this.$eventBus.$off('addImageToCart', this.addImageToCart);
  },
  methods: {
    addImageToCart({ item, x, y }) {
      if (this.list.some(val => val.id === item.id)) {
        return;
      }
      this.addX = x;
      this.addY = y;

      this.list.push({
        ...item,
        _check: true
      });
      this.visible = true;
      this.ballStyle = {
        left: x - 20 + 'px',
        top: y - 20 + 'px'
      };
      this.showBall = true;
      
    },
    imageUrl(item) {
      let url = item.imagePath;
      if (item.file?.length > 0) {
        url = item.file[0].attachFileUrl || item.imagePath;
      }
      if (url.indexOf("http") === 0) {
          return url;
      }
      return process.env.VUE_APP_BASE_API + url;
    },
    handleCheckAllChange(val) {
      this.list.forEach(item => {
        item._check = val;
      });
      this.isIndeterminate = false;
    },
    handleCheckChange(val) {
      this.updateCheckAllState();
    },
    imageClick(item) {
      item._check = !item._check;
      this.updateCheckAllState();
    },
    updateCheckAllState() {
      this.checkAll = this.list.every(item => item._check);
      this.isIndeterminate = this.list.some(item => item._check) && !this.checkAll;
    },
    checkVisible() {
      if (this.list.length === 0) {
        setTimeout(() => {
          this.visible = false;
        }, 500);
      }
    },
    deleteImage(index) {
      this.list.splice(index, 1);
      this.checkVisible();
    },
    clear() {
      this.$confirm('确定清空图片购物车吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.list = [];
        this.checkAll = true;
        this.isIndeterminate = false;
        this.visible = false;
      }).catch(() => {});
    },
    goCreateTask() {
      if (this.list.some(val => val._check) === false) {
        this.$message.warning('请至少选择一张图片');
        return;
      }
      const images = this.list.filter(val => val._check);
      const ids = images.map(val => val.id);
      this.taskCreating = true;
      generateTasks({
        ids,
      }).then(res => {
        this.taskCreating = false;
        const list = this.list.filter(val => !val._check);
        this.list = list;
        this.$refs.editDialog.open(res.data || {}, images);
        this.checkVisible();
      }).catch(e => {
        this.taskCreating = false;
      });
    },
    addToTask() {
      if (this.list.some(val => val._check) === false) {
        this.$message.warning('请至少选择一张图片');
        return;
      }
      this.taskList = [];
      this.chooseTask = true;
      this.loadingTask = true;
      pageListByUser({
        isPublish: "1",
        taskStatus: 0,
        pageNum: 1,
        pageSize: 100,
      }).then(res => {
        this.loadingTask = false;
        this.taskList = res.rows || [];
      }).catch(err => {
        this.loadingTask = false;
      });
    },
    goBack() {
      this.chooseTask = false;
    },
    confirmAddToTask(task) {
      this.loadingTask = true;
      const ids = this.list.filter(val => val._check).map(val => val.id);
      addImageFeedback({
        imageIds: ids,
        taskId: task.id,
      }).then(res => {
        this.loadingTask = false;
        this.chooseTask = false;
        if (res.data && res.data.length > 0) {
          if (ids.length === res.data.length) {
            this.$message.error(`反馈失败，所选图片与任务标签不符合`);
          } else {
            this.$message.warning(`图片已反馈到任务中，其中${res.data.length}张图片标签不符合`);
          }
          
        } else {
          this.$message.success('图片已反馈到任务中');
        }
        
        const list = this.list.filter(val => {
          if (val._check) {
            if (res.data && res.data.length > 0) {
              return res.data.includes(val.id);
            }
            return false;
          }
          return true;
        });
        this.list = list;
        this.checkVisible();
      }).catch(err => {
        this.loadingTask = false;
      });
    },
    handleImageCommand(command) {
      this.genImaging = true;
      const ids = this.list.filter(val => val._check).map(val => val.id);
      imageToGroup({
        ids,
        imageType: command,
      }).then(res => {
        this.genImaging = false;
        if (res.data) {
          // const paths = res.data.split('.');
          // const piffix = paths[paths.length - 1];
          // const fileName = `${res.data.replace(`.${piffix}`, '')}.${piffix}`;
          // downloadFileUrl(process.env.VUE_APP_BASE_API + '/profile/' + res.data, res.data);
          download.profilePath(res.data);
        }
      }).catch(e => {
        this.genImaging = false;
      });
    },
    handleMoreCommand(command) {
      if (command === 'clear') {
        this.clear();
        return;
      }
      if (command === 'share') {
        const ids = this.list.filter(val => val._check).map(val => val.id);
        console.log('选中：', ids);
        this.$refs.shareDialog.open({
          cataIds: ids,
        });
        return;
      }
    },
    animationEnd() {
      this.isAnimation = true;
      setTimeout(() => {
        this.isAnimation = false;
      }, 500);
      console.log('动画结束了');
      
    },
    beforeEnter(el) {
      el.style.transform = `translate3d(${0}px,${0}px,0)`
      console.log('动画开始了', this.addX, this.addY);
    },
    afterEnter(el) {
      const rect = this.$refs.cartContent.getBoundingClientRect();
      console.log('afterEnter',rect);
      
      
      el.style.transform = `translate3d(${rect.left - this.addX + rect.width / 2}px,${rect.top - this.addY + rect.height / 2}px,0)`
      el.style.transition = 'transform .3s cubic-bezier(1,0,1,0)'
      // el.style.transition = 'transform .3s linear'

      this.showBall = false;
    }
    
  }
 }
</script>

<style lang="scss">
.playAnimation{
   animation: cartScale 0.5s ease-in-out;
}
//实现购物车弹簧动画
@keyframes cartScale {
    0%{
        transform: scale(1);
    }
    20%{
        transform: scale(1.2);
    }
    60%{
        transform: scale(0.8);
    }
    80%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

.cart-container {
  position: fixed;
  z-index: 1001;
  left: 32px;
  bottom: 40px;

  
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    margin-right: 10px;
    border-radius: 2px;
    border: 1px solid #409EFF;
  }

.ball {
  position: fixed;
  z-index: 1001;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  // background-color: var(--current-color);
  background-color: white;
  border: 1px solid #d3d4d6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #909399;
}

.cart-panel {
  width: 100%;
  height: 500px;

  .cart-title {
    font-size: 26px;
    font-weight: 500;
  }

  .image-area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .image-list {
      height: 0;
      flex: 1;
      overflow-y: auto;
      display: flex;
      padding-top: 10px;
      padding-left: 20px;
      flex-wrap: wrap;

      .image-item {
        margin-right: 10px;
        margin-bottom: 10px;
        width: 200px;
        height: 180px;
        position: relative;
        border-radius: 5px;
        border: 1px solid #eee;

        .image-delete {
          position: absolute;
          top: 0;
          right: 0;
          width: 30px;
          height: 30px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 2px;
          display: none;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          color: white;
        }

        .image {
          width: 100%;
          height: 100%;
        }

        .checkbox {
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      .image-item:hover {
        .image-delete {
          display: flex;
        }
      }

      .image-item-active {
        border: 1px solid var(--current-color);
      }
    }

    .cart-tool {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .task-area {

    .task-list {
      height: 0;
      flex: 1;
      overflow-y: auto;
    }

  }
}

.cart-content {
  width: 56px;
  height: 56px;

  .cart-btn {
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: white;
    box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.3);

    .el-icon-shopping-cart-full {
      color: var(--current-color);
      font-size: 28px;
    }
  }
}
</style>