<template>
  <el-drawer title="请选择要删除的数据" size="50%" append-to-body :visible="visible" :before-close="onClose" class="task_delete_drawer">
    <!-- 任务列表 -->
    <div class="delete_drawertable_wrap">
      <el-table ref="delete_task_table" height="75vh" :data="dataSource" tooltip-effect="dark" @selection-change="onSelect">
        <el-table-column type="selection" width="55" />
        <!-- <el-table-column v-for="(c, $i) in columns" :key="$i" :label="c.label" :prop="c.prop" :type="c.dataType" :formatter="formatter" /> -->
        <el-table-column
          v-for="col in columns"
          :key="col.key"
          :prop="col.key"
          :sortable="true"
          :label="col.title"
          min-width="120"
          show-overflow-tooltip
          align="left"
        >
          <template v-slot="{row}">
            <DeeDataCell :row="row" :col="col" />
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 提交按钮 -->
    <div class="drawer-footer">
      <el-button @click="onClose">关 闭</el-button>
      <el-button type="primary" @click="openDialog">确 定</el-button>
    </div>
    <!-- 表头设置 -->
    <ColumnSettingPanel
      v-model="columns"
      :dialog-visible="columnSettingPanelVisible"
      :model-name="layoutConfig.modelName"
      :form-config-key="layoutConfig.key"
      @closeDialog="columnSettingPanelVisible = false"
    />
  </el-drawer>
</template>

<script>
import moment from 'moment'
import ColumnSettingPanel from '@/localComponents/filterColumns'
export default {
  name: 'DeleteTaskDrawer',
  components: {
    ColumnSettingPanel
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    plan: {
      type: Object,
      default: () => ({})
    },
    checkTaskId: {
      type: Array,
      default: () => []
    },
    gantt: {
      type: Object,
      default: () => null
    },
    layoutConfig: {
      type: Object,
      default: () => {
        return {
          key: 'batchDeleteTable',
          modelName: 'DxPlanActivity'
        }
      }
    }
  },
  data() {
    return {
      columns: [
        // { label: '任务名称', prop: 'name' },
        // { label: '编号', prop: 'no' },
        // { label: '计划开始', prop: 'startDate', dataType: 'Date' },
        // { label: '计划完成', prop: 'finishDate', dataType: 'Date' },
        // { label: '任务主管', prop: 'managedBy.userName' },
        // { label: '主管部门', prop: 'managedOrg.orgName' },
        // { label: '负责人', prop: 'ownedBy.userName' },
        // { label: '负责部门', prop: 'ownedOrg.orgName' }
      ],
      columnSettingPanelVisible: false,
      checkedTasks: [],
      dataSource: []
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(v) {
        v && this.loadData()
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    },
    openDialog() {
      if (this.checkedTasks.length === 0) {
        return this.$message.warning('请选择数据')
      }
      this.$emit('confirm', this.checkedTasks.map(m => m.id))
    },
    onSelect(items) {
      this.checkedTasks = items
    },
    loadData() {
      if (this.checkTaskId.length > 0) {
        this.dataSource = this.checkTaskId.map(each => this.gantt.getTask(each).pbo)
        // 默认全部选中
        this.$nextTick(() => {
          this.dataSource.forEach(r => {
            this.$refs.delete_task_table.toggleAllSelection()
          })
        })
      } else {
        this.dataSource = []
      }
    },
    formatter(row, col, cellValue, index) {
      // console.log(row, col, cellValue, index)
      if (col.type === 'Date') {
        return moment(row[col.property]).format('YYYY-MM-DD')
      } else if (col.property.indexOf('.') !== -1) {
        const names = col.property.split('.')
        let val = row
        try {
          names.forEach((n, i) => {
            val = row
          })
        } catch (e) {
          val = ''
        }
        // let val = row[names[0]]
        // for (let i = 1, len = names.length - 1; i <= len; i++) {
        //   val = val[names[i]]
        //   if ([null, undefined].includes(val) && i < len) {
        //     val = ''
        //     break
        //   }
        // }
        return val
      }
      return row[col.property]
    }
  }
}
</script>

<style lang="scss">
.task_delete_drawer{
  .delete_drawertable_wrap{
    width: 100%;
    height:calc(100% - 100px);
  }
  .drawer-footer {
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
 }
}

</style>