<!-- 物料选择组件 -->
<template>
  <Modal
    v-model="modal"
    width="80%"
    class-name="vertical-center-modal"
    >
      <div class="header-title" slot="header">
        添加物料
      </div>
    <div slot="footer" class="footer">
      <Button class="btn" type="primary" @click="cfm">确认</Button>
      <Button class="btn" @click="cancel">取消</Button>
    </div>
      <div class="container">
        <div class="content">
          <div class="left">
            <div class="title">
              物料类型
            </div>
            <div class="main">
              <Tree
                ref="tree"
                expand-node
                :show-checkbox="true"
                :check-strictly="false"
                :multiple="true"
                :data="treeData"
                :render="renderContent"
                @on-check-change="check"
                class="demo-tree-render">
              </Tree>
            </div>
          </div>
          <div class="right">
            <div class="title">
              物料信息
            </div>
            <div class="main">
              <my-table
                ref="table"
                :data="data"
                :columns="columns"
                :table-filter="tableFilter"
                :table-page="params"
                :selected-list="selectedList"
                :select-key="selectKey"
                :multiple="multiple"
                :show-flag="modal"
                @on-select="tableSelectChange"
                @on-select-cancel="tableSelectChange"
                @event-handle="eventHandle"
                @on-change="changePage"></my-table>
            </div>
          </div>
        </div>
      </div>
  </Modal>
</template>

<script>
import {
  GetMaterialPageList,
  GetMaterialCategoryZTree
} from '@/api/baseData'
import MyTable from '_c/my-table/my-table'

export default {
  name: 'material_maintenance',
  components: {
    MyTable
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
    },
    treeData: {
      handler (newVal, oldVal) {
        this.initData(this.treeData)
      },
      deep: true
    }
  },
  props: {
    // 已选数据
    selectedList: {
      type: Array,
      default () {
        return []
      }
    },
    /* 数据回填所根据的key */
    selectKey: {
      type: String,
      default: 'code'
    },
    /* 是否单选 */
    multiple: {
      type: Boolean,
      default: false
    },
    // 是否显示表单
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  data () {
    return {
      modal: false,
      categoryCode: '',
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'code',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'name',
          minWidth: 150
        },
        {
          title: '安全库存',
          key: 'safetyStock',
          minWidth: 100
        }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        }
      ],
      params: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      data: [],
      treeData: [],
      checkedList: []
    }
  },
  methods: {
    cfm () {
      this.$emit('getselectedList', [ ...this.checkedList ], this.multiple)
      this.$refs.table.clear()
      this.modal = false
    },
    cancel () {
      this.$refs.table.clear()
      this.modal = false
    },
    renderContent (h, { root, node, data }) {
      let that = this
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', {
          style: {
            cursor: 'pointer'
          },
          on: {
            click () {
              that.$set(data, 'checked', !data.checked)
              that.check(that.getCheckedNodes(), data)
            }
          }
        }, data.title)
      ])
    },
    // 点击树获取物料
    check (arr, obj) {
      arr.forEach(item => {
        item.checked = false
      })
      this.$set(obj, 'checked', true)
      this.params.categoryCode = obj.value
      this.getList()
    },
    // 获取选中的所有节点
    getCheckedNodes () {
      return this.$refs.tree.getCheckedNodes()
    },
    treeInit(data){
      for (let i = 0; i < data.length; i++) {
        const element = data[i]; 
        element.title = element.name
        element.value = element.code
        element.label = element.name
        if(element.children && element.children.length > 0) this.treeInit(element.children)
      }
    },
    getTree () {
      const v = this
      v.$post('/api/storage-restructure/materialClassify/tree').then(res=>{
        v.treeInit(res.data)
        this.treeData = res.data
      })
      // GetMaterialCategoryZTree().then(res => {
      //   if (res.code === 0) {
      //     this.treeData = res.result
      //   }
      // })
    },
    getList () {

      this.$post('/api/storage-restructure/material/page',this.params).then(res=>{
        
        this.data = res.data.records
        this.params.total = res.data.pages

        console.log(res)
      })
      // GetMaterialPageList(this.params).then(res => {
      //   if (res.code === 0) {
      //     this.data = res.result.list
      //     this.params.total = res.result.totalCount
      //   }
      // })
    },
    initData (array) {
      array.forEach(item => {
        item.title = item.name
        if (item.children) {
          this.initData(item.children)
        }
      })
    },
    // 获取表格选中数据
    tableSelectChange (selection, row) {
      if (this.multiple) {
        this.checkedList = [{ ...row }]
      } else {
        this.checkedList = [ ...selection ]
      }
    },
    changePage (pageNum) {
      this.params.pageNum = pageNum
      this.getList()
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.key = option.key
          this.getList()
          break
      }
    },
    // 选择物料分类 显示物料列表
    treeCheck (data) {
      this.categoryCode = data.value
      this.params.categoryCode = data.value
      this.getList()
    }
  },
  mounted () {
    this.getList()
    this.getTree()
  }
}
</script>

<style lang="less" scoped>
.header-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: bold;
}

.container {
  height: 100%;
  overflow: hidden;
  .content {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    height: 100%;
    .left, .right {
      height: 100%;
      overflow: auto;
      box-shadow: 3px 3px 5px rgb(127, 127, 127, .35);
      background-color: #FFFFFF;
      .title {
        padding: 5px 0;
        background-color: #539DFA;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        color: #FFFFFF;
      }
      .main {
        box-sizing: border-box;
        padding: 10px;
        height: ~"calc(100% - 48px)";
        overflow: auto;
      }
    }
    .left {
      margin-right: 15px;
      flex: 1;
      min-width: 320px;
      .main {
        overflow-x: hidden;
      }
    }
    .right {
      flex: 3;
      min-width: 500px;
    }
  }
}

/deep/ .vertical-center-modal{
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
/deep/ .ivu-modal-body {
  height: ~"calc(80vh - 126px)";
}
</style>
