<template>
  <div class="div-con">

    <el-dialog center width="800px" title="自定义列" :visible.sync="columnVisible">
      <div>
        <el-form label-position="left" size="mini" :model="form" label-width="80px">
          <el-form-item label="预设名称">
            <el-input disabled style="width: 300px" v-model="form.pageName"></el-input>
          </el-form-item>
        </el-form>
        <el-row :gutter="20">
          <el-col :span="10">
            <Kanban :key="1" :list="defaultItemCopy" :group="group" header-text="初始列"/>
          </el-col>
          <el-col :span="10">
            <Kanban :key="2" :list="tableItemCopy" :group="group" header-text="选中列"/>
          </el-col>
        </el-row>
        <br>
        <span slot="footer" style="padding-top: 20px" class="dialog-footer">
           <el-button type="primary" @click="saveColum">保 存</el-button>
           <el-button @click="columnVisible = false">关 闭</el-button>
        </span>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getInfo,
} from '@/api/printbill/preOut/preOut.js'
import Kanban from '@/components/Kanban'

export default {
  name: "columnEdit",
  components: {
    Kanban
  },
  data() {
    return {
      form: {
        pageName: ""
      },
      tableItemCopy: [],
      defaultItemCopy: [],
      defaultItem: [],
      tableItem: [],
      group: 'col',
      columnVisible: false,
    }
  },
  mounted() {
    const _that = this;
  },
  methods: {
    saveColum() {
      //保存
      const _that = this;
      if (!_that.form.pageName) {
        _that.$message.warning("预设名称不能为空");
        return
      }
      if (_that.tableItemCopy <= 0) {
        _that.tableItemCopy = [];
      }
      _that.$emit('saveColum', _that.tableItemCopy, _that.form.pageName)
    }
  },
  watch: {
    defaultItem() {
      this.defaultItemCopy = JSON.parse(JSON.stringify(this.defaultItem));
    },
    tableItem() {
      this.tableItemCopy = JSON.parse(JSON.stringify(this.tableItem));
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}

.filter-container {
  margin-bottom: 15px;
}
</style>
