<!-- 分区管理 -->
<template>
  <div class="container">
    <div class="nav">
      <a class="back" @click="$router.go(-1)">&lt;&lt; 返回</a>
      <span class="right">仓库名称：{{ stockHousename }}</span>
    </div>
    <div class="content">
      <my-table :data="data" :columns="columns" :table-filter="tableFilter" :table-page="params" @event-handle="eventHandle" @on-change="changePage"></my-table>
    </div>
    <my-modal-form v-model="show" title="添加仓库" :config="formConfig" :data="formData" :type="formType" @confirm="cfm"></my-modal-form>
  </div>
</template>

<script>
import { GetStockHouseAreaPageList, StockHouseAreaAdd, StockHouseAreaUpdate, StockHouseAreaDelete } from '@/api/baseData'
import MyTable from '_c/my-table/my-table'
import MyTree from '_c/my-tree/my-tree'
import MyModalForm from '_c/my-modal-form/my-modal-form'
export default {
  name: 'subarea_manage',
  components: {
    MyTree,
    MyTable,
    MyModalForm
  },
  data () {
    return {
      show: false,
      data: [],
      deleteId: '',
      formType: '',
      formData: {},
      formConfig: [
        {
          type: 'input',
          label: '分区名称',
          key: 'name',
          placeholder: '请输入分区名称'
        },
        {
          type: 'input',
          comType: 'textarea',
          label: '分区描述',
          key: 'remark',
          placeholder: '请输入分区描述'
        },
        {
          type: 'materialBtn',
          label: '绑定物料',
          key: 'name'
        }
      ],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '分区名称',
          key: 'name',
          minWidth: 150
        },
        {
          title: '绑定物料',
          key: 'materialNames',
          minWidth: 250
        },
        {
          title: '分区描述',
          key: 'remark',
          minWidth: 100
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '200px',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '.5vw'
                  },
                  on: {
                    click: () => {
                      this.formData = { ...params.row }
                      this.formData.materialNames = this.formData.materialNames.split(',')
                      this.formType = 'edit'
                      this.show = true
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                  },
                  on: {
                    click: () => {
                      this.$MyModal.show({ text: '是否确认关闭？' }).$on('confirm', () => {
                        StockHouseAreaDelete({
                          id: params.row.id
                        }).then(res => {
                          if (res.code === 0) {
                            this.$Message.info(res.msg)
                            this.getList()
                          }
                        })
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '添加',
          align: 'right',
          e: 'add'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      stockHousename: ''
    }
  },
  methods: {
    cfm (type, formData) {
      if (!formData.name) {
        return this.$Message.error('请输入分区名称')
      } else if (!(formData.materialCodeList && formData.materialCodeList[0])) {
        return this.$Message.error('请选择物料')
      }
      if (type === 'add') {
        StockHouseAreaAdd({
          ...formData,
          stockHouseId: this.params.stockHouseId
        }).then(res => {
          if (res.code === 0) {
            this.show = false
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'edit') {
        StockHouseAreaUpdate({
          ...formData,
          stockHouseId: this.params.stockHouseId
        }).then(res => {
          if (res.code === 0) {
            this.show = false
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      }
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.key = option.key
          this.getList()
          break
        case 'add':
          this.formType = 'add'
          this.show = true
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetStockHouseAreaPageList(this.params).then(res => {
        if (res.code === 0) {
          this.data = res.result.list
          this.params.total = res.result.totalCount
        }
      })
    }
  },
  mounted () {
    this.params.stockHouseId = this.$route.query.stockHouseId
    this.stockHousename = this.$route.query.name
    this.getList()
  }
}
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  .nav {
    padding-bottom: 10px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .content {
    height: ~"calc(100% - 40px)";
  }
}
</style>
