<template>
  <div class="vant-table">
    <table cellspacing="0" class="table" :style="{ width: width }">
      <vuedraggable v-model="orginData" :options="{ draggable: this.vuedraggable }" @start="onStart" @end="onEnd">
        <tr slot="header">
          <th class="th" v-if="showCheck">
            <input
              type="checkbox"
              id="j_cbAll"
              :checked="isAllSelected"
              @change="selectAllRows"
              v-model="isAllSelected"
            />
          </th>
          <th class="th" v-for="(item, index) in option.column" :key="index" :style="{ width: item.width }">
            {{ item.label }}
          </th>
        </tr>
        <tr
          v-for="item in orginData"
          :key="item.rowNo"
          class="list-tr"
          @click="handleRowClick(item)"
          :class="{ 'selected-row': item.isClick }"
        >
          <td v-if="showCheck">
            <input type="checkbox" :checked="item.isSelected" v-model="item.isSelected" @change="selectRow(item)" />
          </td>
          <td
            v-for="(context, i) in option.column"
            :key="i"
            :style="[
              item[context.tableDataprop] === '已去' ? { color: 'green' } : {},
              item.type === 'new' ? { color: 'red' } : {},
              { textAlign: context.align },
              { width: context.width }
            ]"
          >
            <slot :name="context.tableDataprop" :item="item"> <span v-html="item[context.tableDataprop]"></span></slot>
            <!-- <slot :name="opreate" :item="item"></slot> -->
          </td>
        </tr>
      </vuedraggable>
    </table>
    <div style="margin: 15px 15px"></div>
  </div>
</template>
<script>
import vuedraggable from 'vuedraggable'
import _ from 'lodash'
export default {
  name: 'TableVant',
  components: { vuedraggable },
  props: {
    bgcolor: {
      type: Object
    },
    width: {
      type: String
    },
    tableData: {
      type: Array
    },
    filterTable: {
      type: Array
    },
    delTable: {
      type: Array
    },
    option: {
      type: Object
    },
    showCheck: {
      type: Boolean,
      default: false
    },
    vuedraggable: {
      type: String
    },
    rowClick: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    tableData: {
      handler: function () {
        this.orginData = _.cloneDeep(this.tableData) || []
      },
      deep: true,
      immediate: true
    },
    filterTable: {
      handler: function () {
        this.filterData = _.cloneDeep(this.filterTable) || []
        this.filterFlag = this.filterData.length > 0 ? true : false
      },
      deep: true,
      immediate: true
    },
    delTable: {
      handler: function () {
        this.delData = _.cloneDeep(this.delTable) || []
        this.deleteFlag = this.delData.length > 0 ? true : false
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      orginData: [],
      filterData: [],
      delData: [],
      filterFlag: false,
      deleteFlag: false,
      isAllSelected: false,
      selectedRows: []
    }
  },
  created() {},
  mounted() {},
  methods: {
    onStart() {
      this.drag = true
      console.log('1', this.orginData)
    },
    handleRowClick(data) {
      if (this.rowClick) {
        this.orginData = this.orginData.map(item => {
          item.isClick = false
          return item
        })
        this.$set(data, 'isClick', true)
        this.$bus.$emit('rowData', data)
      }
    },
    onEnd() {
      this.drag = false
      console.log('2', this.orginData)
      this.$bus.$emit('sortTableData', this.orginData)
    },
    selectAllRows() {
      if (this.isAllSelected) {
        this.selectedRows = [...this.orginData]
        this.orginData.forEach(item => {
          this.$set(item, 'isSelected', true)
        })
      } else {
        this.selectedRows = []
        this.orginData.forEach(item => {
          this.$set(item, 'isSelected', false)
        })
      }
      this.selectedRows = this.isAllSelected ? this.orginData : []
      this.$bus.$emit('selecte', this.selectedRows)
      console.log(this.selectedRows)
    },
    selectRow() {
      this.selectedRows = this.orginData.filter(row => row.isSelected)
      this.isAllSelected = this.selectedRows.length === this.orginData.length
      this.$bus.$emit('selecte', this.selectedRows)
      console.log(this.selectedRows)
    }
  }
}
</script>

<style scoped>
.selected-row {
  background-color: yellow;
}
.vant-table {
  margin-top: 20px;
}

table {
  border-radius: 0.185185rem;
  border-collapse: collapse;
  /* 合并边框，美化表格样式 */
  table-layout: fixed;
  table-layout: fixed;
  width: 100%;
}

.table {
  border-radius: 0.185185rem;
  border-collapse: collapse;
  /* 合并边框，美化表格样式 */
  table-layout: fixed;
  display: flex;
  table-layout: fixed;
  word-wrap: break-word;
  word-break: break-all;
}

th,
td {
  border: 1px solid black;
  /* 添加边框，美化表格样式 */
  padding: 1px;
  /* 添加内边距，使内容与边框有一定距离 */
}

.th {
  height: 1.074074rem;
  line-height: 1.074074rem;
  background-color: #328985;
  color: white;
  text-align: center;
  font-size: 24px;
}

td {
  white-space: pre-wrap;
}

table tr {
  margin-bottom: 10px;
  /* 调整间距大小 */
}

.filter-tr,
.list-tr {
  height: 1.074074rem;
  line-height: 1.074074rem;
  font-size: 24px;
}

.filter-tr:last-child {
  margin-bottom: 10px;
}

tr > td:nth-child(1) {
  text-align: center;
}

.del-text {
  font-size: 24px;
  font-weight: bold;
}
</style>