<template>
  <div>
    <Modal v-model="opened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" width="1500">
      <div slot="header">
        <span class="title">{{ title }}</span>
        <span class="description">{{ description }}</span>
      </div>
      <Row :gutter="24">
        <Col span="14">
          <Card :bordered="false" dis-hover>
            <div slot="title">
              <Avatar icon="md-apps" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
              <span class="ivu-pl-8">{{ $t('Front_Label_Select_Source') }}</span>
            </div>
            <view-table
              ref="selectSourceTable"
              :view-code="sourceViewCode"
              :selectEnable="true"
              :checkCrossPage="true"
              :autoLoad="false"
              :filter="sourceFilter"
              :height="480"
              @on-select-change="selectedChange"
            ></view-table>
          </Card>
        </Col>
        <Col span="10">
          <Card :bordered="false" dis-hover>
            <div slot="title">
              <Avatar icon="md-checkmark" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
              <span class="ivu-pl-8">{{ $t('Front_Label_Select_Target') }}</span>
            </div>
            <view-table ref="selectTargetTable" :view-code="targetViewCode" :static="true" :height="480">
              <template slot-scope="{ index }" slot="command">
                <Button size="small" :title="$t('Front_Btn_Remove')" type="warning" custom-icon="fa fa-trash-alt" @click="selectedRemove(index)"></Button>
              </template>
            </view-table>
          </Card>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="primary" custom-icon="fa fa-save" @click="seve">{{ $t('Front_Btn_OK') }}</Button>
        <Button type="default" custom-icon="fa fa-times" @click="opened = false">{{ $t('Front_Btn_Close') }}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';

  /**
   * @displayName item-select 项目选择
   */
  export default {
    mixins: [mixinPage],
    data() {
      return {
        inited: false,
        opened: false, // 是否打开
        sourceFilter: {} // 来源筛选
      };
    },
    created() {},
    props: {
      /**
       * 来源视图代码
       */
      sourceViewCode: {
        type: String
      },
      /**
       * 目标视图代码
       */
      targetViewCode: {
        type: String
      },
      /**
       * 标题
       */
      title: {
        type: String,
        default: '明细选择'
      },
      /**
       * 描述
       */
      description: {
        type: String,
        default: 'Item Select'
      }
    },
    computed: {},
    methods: {
      /**
       * 初始化
       *
       * @param {string} sourceViewCode 来源视图代码
       * @param {string} targetViewCode 目标视图代码
       * @param {function} callback 完成后回调方法
       * @public
       */
      init(sourceViewCode, targetViewCode, callback) {
        this.$refs.selectSourceTable.init(sourceViewCode, () => {
          this.$refs.selectSourceTable.loadData();

          this.$refs.selectTargetTable.init(targetViewCode, () => {
            this.setSelected([]);

            this.inited = true;

            if (typeof callback === 'function') {
              callback();
            }
          });
        });
      },
      /**
       * 打开
       *
       * @public
       */
      open() {
        this.opened = true;
      },
      /**
       * 关闭
       *
       * @public
       */
      close() {
        this.opened = false;
      },
      /**
       * 获取已选项
       *
       * @public
       */
      getSelected() {
        return this.$refs.selectTargetTable.data;
      },
      /**
       * 设置已选项
       *
       * @param {object} data 已选项
       * @public
       */
      setSelected(data) {
        if (this.inited) {
          this.$refs.selectTargetTable.loadData(data);
          this.$refs.selectSourceTable.setSelected(data);
        }
      },
      /**
       * 刷新来源数据
       *
       * @param {object} filter 筛选项
       * @public
       */
      loadSource(filter) {
        for (let key in this.sourceFilter) {
          delete this.sourceFilter[key];
        }

        if (filter) {
          for (let key in filter) {
            this.sourceFilter[key] = filter[key];
          }
        }

        this.$refs.selectSourceTable.loadData();
      },
      selectedChange() {
        let selected = this.$refs.selectSourceTable.getSelected();

        this.$refs.selectTargetTable.loadData(selected);
      },
      selectedRemove(index) {
        let selectedSource = this.$refs.selectTargetTable.data;
        selectedSource.splice(index, 1);
        this.$refs.selectTargetTable.loadData(selectedSource);

        this.$refs.selectSourceTable.setSelected(selectedSource);
      },
      seve() {
        /**
         * 保存
         */
        this.$emit('save');
      }
    }
  };
</script>
