<template>
  <!-- 集货区策略 -->
  <p-card style="width: 100%">
    <div slot="title">集货区策略</div>
    <div slot="extra"><p-button type="primary" @click="save">保存</p-button></div>
    <!-- 搜索框 -->
    <p-grid-form
      :span="8"
      :ref="tablecolumns.gridform.ref"
      :label-col="{ span: 9 }"
      :items="tablecolumns.gridform.items"
      :get-item-props="handelCustomCell"
      @submit="hanlderSubmit"
    />
    <!--1 根据商品匹配规则 -->
    <p-card :bordered="false" style="width: 100%">
      <div slot="title">
        <div>
          <div class="round">1</div>
          <div class="content">{{ tablecolumns.goods.title }}</div>
        </div>
      </div>
      <div slot="extra"><p-button type="primary" @click="Edit(model.goods.items)">添加</p-button></div>
      <p-table
        style="border: 1px solid #e8e8e8;"
        :ref="tablecolumns.goods.ref"
        :row-key="tablecolumns.goods.rowkey"
        :columns="tablecolumns.goods.columns"
        :data-source="data"
        :rowSelectType="false"
      >
        <span slot="operation" slot-scope="text, record">
          <a @click="Edit(model.goods.items, text)">编辑</a>
          <a-divider type="vertical" />
          <a>删除</a>
        </span>
      </p-table>
    </p-card>
    <!--  2 根据规则查找货位 -->
    <p-card :bordered="false" style="width: 100%">
      <div slot="title">
        <div>
          <div class="round">2</div>
          <div class="content">{{ tablecolumns.goodsallocation.title }}</div>
        </div>
      </div>
      <div slot="extra"><p-button type="primary" @click="Edit(model.goodsallocation.items)">添加</p-button></div>
      <p-table
        style="border: 1px solid #e8e8e8;"
        :ref="tablecolumns.goodsallocation.ref"
        :row-key="tablecolumns.goodsallocation.rowkey"
        :columns="tablecolumns.goodsallocation.columns"
        :data-source="data"
        :rowSelectType="false"
      >
        <span slot="operation" slot-scope="text, record">
          <a @click="Edit(model.goodsallocation.items, text)">编辑</a>
          <a-divider type="vertical" />
          <a>删除</a>
        </span>
      </p-table>
    </p-card>
    <!--3 在货位中查找结果中选择合适的货位 -->
    <p-card :bordered="false" style="width: 100%">
      <div slot="title">
        <div>
          <div class="round">3</div>
          <div class="content">{{ tablecolumns.arithmetic.title }}</div>
        </div>
      </div>
      <div slot="extra">
        <p-button type="primary" @click="Edit(model.goods.items)">添加</p-button>
      </div>
      <p-table
        style="border: 1px solid #e8e8e8;"
        :ref="tablecolumns.arithmetic.ref"
        :row-key="tablecolumns.arithmetic.rowkey"
        :columns="tablecolumns.arithmetic.columns"
        :data-source="data"
        :rowSelectType="false"
      >
        <span slot="operation" slot-scope="text, record">
          <a @click.stop="Edit(model.goodsallocation.items, text)">编辑</a>
          <a-divider type="vertical" />
          <a @click.stop="delarithmetic(text)">删除</a>
        </span>
      </p-table>
    </p-card>

    <edit-model ref="model" :visible="visible" @hidemodel="hidemodel" :items="items"></edit-model>
  </p-card>
</template>

<script>
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser']
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
]
import model from './config/model'
import EditModel from './model.vue'
import tablecolumns from './config/edittableconfig'
export default {
  data() {
    return {
      model,
      data,
      items: [],
      visible: false,
      tablecolumns: tablecolumns(this),
      params: {}
    }
  },
  components: {
    EditModel
  },
  mounted() {},
  methods: {
    aaa() {
    },
    //上移
    uparithmetic(value) {
    },
    //下移
    downarithmetic(value) {
    },
    //上移
    delarithmetic(value) {
    },
    //保存
    save() {
    },
    handleMenuClick(e) {
    },
    Edit(item, value) {
      this.items = item
      this.visible = true
      let data = {
        aaa: 'true',
        bbb: 'bbb',
        ccc: 'ccc'
      }
      if (value) {
        this.$refs.model.setvalue(data)
      } else {
        this.$refs.model.reset()
      }
    },

    hidemodel() {
      this.visible = false
    },
    handelCustomCell(name, type, form) {
      if (name === 'field-search')
        return {
          props: {
            remoteParams: this.params
          }
        }
    },
    back() {
      this.$emit('back', true)
    },
    hanlderSubmit(event, form) {}
  }
}
</script>

<style scoped>
.round {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffb30b;
  font-size: 21px;
  color: #ffffff;
  text-align: center;
  /* line-height: 32px; */
  float: left;
}
.content {
  float: left;
  height: 32px;
  line-height: 32px;
  margin-left: 8px;
}
</style>
