<template>
  <el-dialog :visible.sync="show" :title="title" :width="width" @close="close" :close-on-click-modal="false"
             :close-on-press-escape="false">
    <div class="main">
      <div :class="single ? 'source' : 'source-item'">
        <zy-page ref="sourcePage" :sel-mode="!single" :request="request" :searchable="searchable"
                 :search-filters="items" height="400px" :filterable="filterable" :required-params="['sourceCode']"
                 :request-params="params">
        </zy-page>
      </div>
      <div class="action-item" v-if="!single">
        <div>
          <el-button type="primary" @click="add">添加</el-button>
        </div>
        <div>
          <el-button type="primary" @click="remove">移除</el-button>
        </div>
      </div>
      <div class="target-item" v-if="!single">
        <zy-page ref="targetPage" :table-columns="columns" :table-data="datas" height="400px" :searchable="false"
                 :pagination="false">
          <template #header>
            已选数据
          </template>
        </zy-page>
      </div>
    </div>
    <span slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
  </el-dialog>
</template>
<script>
  import {WebpageDataService, WebpageQueryService} from "../../../assets/webpage";

  export default {
    name: 'Selection',
    components: {},
    props: {},
    data() {
      return {
        show: false,
        title: '选择',
        width: '800px',
        single: false,
        request: WebpageDataService.webpage_data_selection_table,
        items: [],
        selected: [],
        source: '',
        params: {sourceCode: ''},
        columns: [{
          key: 'name', label: '姓名'
        }],
        datas: [],
        searchable: false,
        filterable: false,
      }
    },
    created() {
    },
    mounted() {
      if (this.source) {
        this.params = {sourceCode: this.source};
        this.init();
      }
    },
    watch: {},
    computed: {},
    methods: {
      init() {
        this.datas = this.selected;
        WebpageQueryService.webpage_query_page_selection({
          sourceCode: this.source
        }, res => {
          this.title = res.content.title;
          this.searchable = res.content.searchable;
          this.filterable = res.content.filterable;
          this.searchable && (this.items = res.content.forms.search.filters);
        })
      },
      add() {
        let sourceSelection = this.$refs['sourcePage'].selection;
        console.log(sourceSelection)
        this.datas = _.unionBy(this.datas, sourceSelection, 'id');
        console.log(this.datas)
        this.$refs['targetPage'].loadData();
      },
      remove() {
        let targetSelection = this.$refs['targetPage'].selection;
        _.pullAllBy(this.datas, targetSelection, 'id');
        this.$refs['targetPage'].loadData();
      },
      close() {
        this.show = false;
      },
      submit() {
        if (this.single && this.$refs['sourcePage'].selection.length !== 1) {
          return this.$message.warning("请选择一条数据")
        }
        if (!this.single && this.datas.length === 0) {
          return this.$message.warning("至少选择一条数据")
        }
        this.callback(this.single ? this.$refs['sourcePage'].selection : this.datas, this.close);
        this.close();
      },
    }
  }
</script>
<style scoped lang="scss">

  .main {
    display: flex;
    height: 100%;
    .source {
      width: 100%;
    }
    .source-item {
      width: calc(70% - 30px);
    }
    .target-item {
      width: calc(30% - 30px);
    }
    .action-item {
      width: 60px;
      text-align: center;
      align-items: center;
      display: grid;
      height: 100px;
      margin: auto;
    }
  }
</style>
