<template>
  <p-modal :title="config.title"
           :visible="visible"
           :dialogStyle="{ top: '20px' }"
           :draggable="true"
           :width="'98%'"
           @ok="handleOk"
           @cancel="handleCancel">
    <div v-if="visible"
         class="box-p20-bg">
      <p-grid-form ref="form"
                   :label-col="{ span: 3 }"
                   :items="config.girdform" />
      <p-table ref="mainlist"
               :rowKey="config.mainlist.rowKey"
               :remote-url="config.mainlist.remoteUrl"
               :columns="config.mainlist.columns"
               :remoteParams="mainRemoteParams"
               :remoteBefore="config.mainlist.remoteBefore||null"
               :doneBefore="config.mainlist.doneBefore"
               :data-source.sync="data"
               size="small"
               :hasRowSelectCheck="true"
               :selectedRowKeys.sync="list"
               :has-row-count="true"
               :rowSelectType="1"
               :scroll="{ y: 200, x: true }">
        <!-- @selectChange="" :selectedRowKeys.sync="list"
           :hasRowSelectCheck="true" -->
        <div slot="operator"
             slot-scope="text, record">
          <a v-for="(item, index) in config.mainlist.operators"
             :key="index"
             @click.stop="item.click(record)">{{
            item.label
          }}</a>
        </div>
      </p-table>
      <p-table ref="Goods"
               :autoLoad="false"
               size="small"
               :rowKey="config.sublist.rowKey"
               :remote-url="config.sublist.GoodsremoteUrl"
               :remoteParams="remoteParams"
               :columns="config.sublist.columns"
               :data-source.sync="GoodsColumnsdata"
               :selectedRowKeys.sync="goodslist"
               :hasRowSelectCheck="true"
               :has-row-count="true"
               :pagination="false"
               :rowSelectType="2"
               :scroll="{ y: 200, x: true }"
               @clickRow="clickRow">
        <!--  -->
      </p-table>
    </div>
  </p-modal>
</template>

<script>
export default {
  name: 'InfoModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default: null
    }
  },
  model: {
    prop: 'visible',
    event: 'change'
  },
  data() {
    return {
      nConfig: null,
      data: [],
      GoodsColumnsdata: [],
      list: [],
      goodslist: [],
      mainRemoteParams: {},
      remoteParams: {},
    }
  },
  watch: {
    list(val) {
      if (val.length > 0) {
        let remoteParams = this.config.sublist.remoteBefore(val);
        this.remoteParams = remoteParams;
        this.goodslist = [];
      }
    }
  },
  created() {
    let config = this.config;
    this.mainRemoteParams = config.mainlist.remoteParams;
    if (Array.isArray(config.mainlist.operators) && config.mainlist.operators.length > 0 && config.mainlist.columns[config.mainlist.columns.length - 1].key != 'operator') {
      config.mainlist.columns.push({
        title: '操作',
        dataIndex: 'operator',
           fixed: 'right',
        key: 'operator',
        width: 140,
        scopedSlots: { customRender: 'operator' }
      })
    }
    if (config.girdform[config.girdform.length - 1].type != 'buttonGroup') {
      config.girdform.push({
        span: 6,
        type: 'buttonGroup',
        style: { textAlign: 'right' },
        options: [
          {
            value: '查询', icon: 'search', btnType: 'primary', style: 'margin-right:10px',
            on: {
              click: (event, form) => {
                this.mainRemoteParams = {
                  ...this.config.mainlist.remoteParams,
                  ...form.getFieldsValue()
                }
              }
            }
          },
          {
            value: '重置', icon: 'redo', on: {
              click: () => {
                this.mainRemoteParams = {
                  ...this.config.mainlist.remoteParams,
                }
              }
            }
          }
        ]
      });
    }
    this.nConfig = config;
  },

  methods: {

    getdata() {
      let rowKey = this.config.mainlist.rowKey;
      let rowKey2 = this.config.sublist.rowKey;
      if (this.list.length > 0 && this.goodslist.length > 0) {
        let mainlist = this.list.map(item => {
          return this.data.find(item1 => {
            if (item1[rowKey] === item) {
              return item1
            }
          })
        })

        let sublist = this.goodslist.map(item => {
          return this.GoodsColumnsdata.find(item1 => {
            if (item1[rowKey2] === item) {
              return item1
            }
          })
        })
        let data = {
          mainlist,
          sublist
        }
        return data
      }
    },

    clickRow(selectedRowKeys, key) {
      let n = 0;
      this.goodslist.forEach(t => {
        if (t == key) n++;
      });
      if (n > 1) {
        this.goodslist = this.goodslist.filter(t => t != key);
      }
    },

    handleOk(e) {
      if (this.goodslist.length == 0) {
        this.$message.warning('请选择上架商品');
        return;
      }
      let data = this.getdata()
      this.reset();
      this.$emit('change', false, data)
    },

    handleCancel(e) {
      this.reset();
      this.$emit('change', false);
    },

    reset() {
      this.data = [];
      this.GoodsColumnsdata = [];
      this.list = [];
      this.goodslist = [];
      this.remoteParams = {};
      // this.nConfig: null,
      // mainRemoteParams: { };
    },

  }
}
</script>

<style>
.box-p20-bg {
  margin-bottom: 20px;
  background: #fff;
}
</style>
