# 12.10 拖拽列表

<template>
  <div class="wrapper">
    <dof-minibar
      :title="title"
      backgroundColor="transparent"
      textColor="#000000"
      :middle-text-style="headerStyle"
      @dofMinibarLeftButtonClicked="minibarLeftButtonClick"
      @dofMinibarRightButtonClicked="minibarRightButtonClick"
    >
      <div slot="left">
        <image :src="leftButton" style="height: 55px;width: 55px;transform:translateX(-10px);"></image>
      </div>
      <div slot="right" class="right-img-wrapper">
        <image :src="rightButton" style="height: 32px;width: 32px;"></image>
      </div>
    </dof-minibar>
    <dof-button
      class="center margin-top-80"
      text="切换编辑状态"
      type="primary"
      size="big"
      @dofButtonClicked="siwtchEdit"
    ></dof-button>
    <drag-vertical-list-view
      class="seekbar"
      :data="listData"
      @onDeleteEvent="onDeleteEvent"
      @onDragEndEvent="onDragEndEvent"
      @onClickEvent="onClickEvent"
    >
    </drag-vertical-list-view>
  </div>
</template>

<script>
import { DofMinibar, DofButton } from 'dolphin-weex-ui'

/*
  onDeleteEvent 删除给删除的id, 排序后点击完成给list所有的数据  
  onDragEndEvent 排序后给list数据
  onClickEvent   给当前item数据
*/
export default {
  components: {
    DofMinibar,
    DofButton
  },
  data() {
    return {
      leftButton: './assets/image/header/back_black@2x.png',
      rightButton: './assets/image/header/refresh.png',
      headerStyle: {
        fontFamily: 'PingFangSC-Regular',
        fontWeight: '900',
        fontSize: '28px',
        letterSpacing: 0
      },
      //   editing: true,
      //   src: 'https://dsdcp.smartmidea.net/mcsp/prod/20230315/0f4fea7232b34be4a123b93e97a87278.pdf',
      title: '拖拽tableview',
      listData: {
        backgroundColor: '#F9F9F9', //组件背景色 默认为 #F9F9F9
        isEditing: false, //是否编辑
        rowHeight: 60, //行高 默认为52，建议大于等于52，参考UI
        rowSpace: 10, //行间距 默认为10
        itemTextColor: '#333333', //默认字体颜色#333333
        itemBgColor: '#FFFFFF', //行背景色 #FFFFFF
        itemFont: 16, //字体大小 默认为16
        itemCornerRadius: 16, //默认为16，参考UI(注意：android系统0-rowHeight/2才有效果)
        iconCornerRadius: 0, //默认为0
        iconHeight: 32, //图片高度，默认32， 图片宽度等于高度，参考UI
        deleteIconHeight: 32, //图片高度，默认32， 图片宽度等于高度，参考UI
        sortIconHeight: 32, //图片高度，默认32， 图片宽度等于高度，参考UI
        deleteIcon: '', //默认用切图 删除图片
        sortIcon: '', //默认用切图  排序图片
        list: [
          {
            itemId: '0',
            name: '全屋照明', //名称
            icon: 'https://pic.5tu.cn/uploads/allimg/1708/pic_5tu_big_201708111325384841.jpg' //icon,必传
          },
          {
            itemId: '1',
            name: '全屋用水',
            icon: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
          },
          {
            itemId: '2',
            name: '全屋空气',
            icon: ''
          },
          {
            itemId: '3',

            name: '全屋环境文字很长很长最多一行点点...',
            icon: ''
          },
          {
            itemId: '4',
            name: '洗衣机',
            icon: ''
          },
          {
            itemId: '5',
            name: '郑二',
            icon: ''
          },
          {
            itemId: '6',

            name: '张三',
            icon: ''
          },
          {
            itemId: '7',

            name: '王四',
            icon: ''
          },
          {
            itemId: '8',
            name: '蛋黄酱'
          },
          {
            itemId: '9',

            name: '番茄酱',
            icon: ''
          },
          {
            itemId: '10',

            name: '大冬瓜',
            icon: ''
          },
          {
            itemId: '11',
            name: '大狮子', //名称
            icon: 'https://pic.5tu.cn/uploads/allimg/1708/pic_5tu_big_201708111325384841.jpg' //icon,必传
          },
          {
            itemId: '12',
            name: '大象',
            icon: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
          },
          {
            itemId: '13',
            name: '水牛',
            icon: ''
          },
          {
            itemId: '14',
            name: '香蕉', //名称
            icon: 'https://pic.5tu.cn/uploads/allimg/1708/pic_5tu_big_201708111325384841.jpg' //icon,必传
          },
          {
            itemId: '15',
            name: '苹果',
            icon: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
          },
          {
            itemId: '16',
            name: '香梨',
            icon: ''
          }
        ]
      }
    }
  },
  computed: {},
  methods: {
    onDeleteEvent(event) {
      this.$alert(event)
    },
    onDragEndEvent(event) {
      this.$alert(event)
    },
    onClickEvent(event) {
      this.$alert(event)
    },
    minibarLeftButtonClick() {},
    minibarRightButtonClick() {
      this.$reload()
    },
    siwtchEdit() {
      this.listData.isEditing = !this.listData.isEditing
      this.$toast('啦啦啦')
      this.listData = {
        ...this.listData
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 750px;
  background-color: aliceblue;
}
.margin-top-80 {
  margin-top: 40px;
}
.seekbar {
  /* width: 600px; */
  margin-left: 40px;
  margin-right: 40px;
  height: 1000px;
  /* right: 200px; */
  margin-top: 20px;
}
</style>