<template>
  <div class="container">
    <div class="content">
      <div class="left">
        <div class="title">
          物料类型
        </div>
        <div class="main">
          <my-tree
            :data="treeData"
            :formConfig="treeformConfig"
            :ruleValidate="treeRuleValidate"
            @handleEvent="treeHandle"
            @check="treeCheck"></my-tree>
        </div>
      </div>
      <div class="right">
        <div class="title">
          物料信息
        </div>
        <div class="main">
          <my-table
            :data="data"
            :columns="columns"
            :table-filter="tableFilter"
            :table-page="params"
            @event-handle="eventHandle"
            @on-change="changePage"></my-table>
          <my-modal-form ref="editForm" v-model="show" title="修改物料" :config="formConfig" :rule-validate="ruleValidate" :data="formData" :type="formType" @confirm="cfm"></my-modal-form>
          <setting-form v-model="settingShow"></setting-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetMaterialPageList,
  MaterialAdd,
  MaterialUpdate,
  GetMaterialCategoryZTree,
  AddMaterialCategory,
  UpdateMaterialCategory,
  DeleteMaterialCategory,
  GetTechnologyTypList
} 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'
import SettingForm from './setting-form'

export default {
  name: 'material_maintenance',
  components: {
    MyTree,
    MyTable,
    MyModalForm,
    SettingForm
  },
  data () {
    return {
      settingShow: false,
      show: false,
      // 树相关数据
      treeRuleValidate: {
        name: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ]
      },
      treeformConfig: [
        {
          type: 'input',
          label: '分类名称',
          key: 'name',
          placeholder: '请输入分类名称'
        },
        {
          type: 'input',
          label: '物料编码',
          key: 'code',
          placeholder: '请输入物料编码'
        }
        // {
        //   type: 'radio',
        //   label: '是否可选',
        //   key: 'isForChose',
        //   list: [
        //     { label: '是', value: 'true' },
        //     { label: '否', value: 'false' }
        //   ]
        // }
      ],
      // 物料相关数据
      categoryCode: '',
      ruleValidate: {
        name: [
          { required: true, message: '物料名称不能为空', trigger: 'blur' }
        ],
        checkRate: [
          { required: true, message: '抽检比率不能为空', trigger: 'blur' }
        ],
        safetyStock: [
          { required: true, message: '安全库存不能为空', trigger: 'blur' }
        ],
        safetyWarnDay: [
          { required: true, message: '采购周期不能为空', trigger: 'blur' }
        ]
      },
      formType: '',
      formData: {},
      formConfig: [
        {
          type: 'input',
          label: '物料名称',
          key: 'name',
          disabled: true,
          placeholder: '请输入物料名称'
        },
        {
          type: 'input',
          label: '规格',
          key: 'spec',
          disabled: true,
          placeholder: '请输入规格'
        },
        {
          type: 'input',
          comType: 'number',
          label: '克重',
          key: 'unitWeight',
          disabled: true,
          placeholder: '请输入克重',
          span: 12
        },
        {
          type: 'input',
          comType: 'number',
          label: '门幅',
          key: 'width',
          disabled: true,
          placeholder: '请输入门幅',
          span: 12
        },
        {
          type: 'input',
          label: '单位',
          key: 'stockUnitID',
          disabled: true,
          span: 12
        },
        {
          type: 'input',
          comType: 'number',
          label: '抽检比例',
          key: 'checkRate',
          placeholder: '抽检比例/%',
          span: 12
        },
        {
          type: 'input',
          comType: 'number',
          label: '安全库存',
          key: 'safetyStock',
          placeholder: '请输入安全库存',
          span: 12
        },
        {
          type: 'input',
          comType: 'number',
          label: '采购周期',
          key: 'safetyWarnDay',
          placeholder: '采购周期/天',
          span: 12
        },
        {
          type: 'select',
          key: 'technologyType',
          label: '物料属性',
          placeholder: '请选择物料属性',
          list: [
            {
              label: "直喷",
              value: "0"
            },{
              label: "热转",
              value: "1"
            },{
              label: "打纸",
              value: "2"
            },{
              label: "墨水",
              value: "3"
            },{
              label: "其他",
              value: "4"
            }
          ],
        },
        {
          type: 'treeSelect',
          key: 'materialClassifyId',
          label: '物料类型',
          placeholder: '请选择物料物料类型',
          list: []
        },
        {
          type: 'input',
          comType: 'textarea',
          label: '备注',
          key: 'remark',
          placeholder: '请输入仓库说明'
        }
      ],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'code',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'name',
          minWidth: 150
        },
        {
          title: '克重',
          key: 'unitWeight',
          minWidth: 100
        },
        {
          title: '物料属性',
          key: 'technologyType',
          minWidth: 100,
          render: (h, params) => {
            return h('span', this.technologyList[params.row.technologyType].label)
          }
        },
        {
          title: '门幅',
          key: 'width',
          minWidth: 100
        }, {
          title: '安全库存',
          key: 'safetyStock',
          minWidth: 100
        },
        {
          title: '采购周期',
          key: 'safetyWarnDay',
          minWidth: 100
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '100px',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Icon',
                {
                  props: {
                    custom: 'iconfont icon-edit',
                    size: '20',
                    color: '#087BE1'
                  },
                  style: {
                    // marginRight: '20px'
                  },
                  on: {
                    click: () => {
                      for (const key in params.row) {
                        this.formData[key] = params.row[key]
                      }
                      console.log(this.formData)
                      this.formType = 'edit'
                      this.show = true
                    }
                  }
                },
                '修改'
              )
              // h(
              //   'Icon',
              //   {
              //     props: {
              //       custom: 'iconfont icon-delete',
              //       size: '20',
              //       color: 'red'
              //     },
              //     on: {
              //       click: () => {
              //         this.$MyModal.show({ text: '是否删除？' }).$on('confirm', () => {
              //           MaterialDelete({
              //             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'
        // },
        {
          name: 'Button',
          type: 'primary',
          text: '设置',
          align: 'right',
          e: 'setting'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '价格维护',
          align: 'right',
          e: 'price'
        }
      ],
      params: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      technologyList:[
        {
          label: "直喷",
          value: "0"
        },{
          label: "热转",
          value: "1"
        },{
          label: "打纸",
          value: "2"
        },{
          label: "墨水",
          value: "3"
        },{
          label: "其他",
          value: "4"
        }
      ],
      data: [],
      treeData: []
    }
  },
  methods: {
    getTechnologyTypList () {
      GetTechnologyTypList().then(res => {
        if (res.code === 0) {
          let arr = res.result.map(item => {
            return {
              label: item.text,
              value: item.value
            }
          })
          this.formConfig[8].list = arr
        }
      })
    },
    cfm (type, data) {
      if (type === 'add') {
        MaterialAdd({
          ...data,
          categoryCode: this.categoryCode
        }).then(res => {
          if (res.code === 0) {
            this.show = false
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'edit') {
        this.$post('/api/storage-restructure/material/editFlowCreate',{
          ...data,
        }).then(res => {
          if (res.code === 200) {
            this.$Message.info(res.msg)
            this.getList()
            this.show = false
          }
        })
      }
    },
    treeInit(data){
      for (let i = 0; i < data.length; i++) {
        const element = data[i]; 
        element.title = element.name
        element.value = element.id
        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
        console.log(res)
        this.formConfig[9].list = JSON.parse(JSON.stringify(this.treeData))
      })
      // GetMaterialCategoryZTree().then(res => {
      //   if (res.code === 0) {
      //     this.treeData = res.result
      //     this.hiddenDelBtn(this.treeData)
          
      //   }
      // })
    },
    hiddenDelBtn (data = []) {
      data.forEach(item => {
        item.title = item.name
        item.isHiddenDelBtn = true
        if (item.children) {
          this.hiddenDelBtn(item.children)
        }
      })
    },
    getList () {
      const v = this
      v.$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
      //   }
      // })
    },
    changePage (pageNum) {
      this.params.pageNum = pageNum
      this.getList()
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageNum = 1
          this.params.key = option.key
          this.params.categoryCode = option.categoryCode
          this.getList()
          break
        case 'add':
          if (!this.categoryCode) {
            return this.$Message.error('请选择面料分类！')
          }
          this.formType = 'add'
          this.show = true
          break
        case 'setting':
          this.settingShow = true
          break
        case 'price':
          this.$router.push('provider_price_maintenance')
          break
      }
    },
    // 选择物料分类 显示物料列表
    treeCheck (data) {
      console.log(data)
      this.categoryCode = data.code
      this.params.categoryCode = data.code
      this.params.pageNum = 1
      this.params.total = 0
      this.getList()
    },
    // 提交树操作
    treeHandle (type, data, target) {
      if (type === 'add') {
        this.$post('/api/storage-restructure/materialClassify/add',{
          ...data,
          parentId:target.id || 0
        }).then(res => {
          if (res.code === 200) {
            this.$Message.info(res.msg)
            this.getTree()
          }
        })
        // AddMaterialCategory({
        //   ...data,
        //   parentCode: target.value || '01'
        // }).then(res => {
        //   if (res.code === 0) {
        //     this.$Message.info(res.msg)
        //     this.getTree()
        //   }
        // })
      } else if (type === 'edit') {
        console.log('data.data.id-----------')
        console.log(data)
        this.$post('/api/storage-restructure/materialClassify/edit',{
          ...data,
          id:data.id
        }).then(res => {
          if (res.code === 200) {
            this.$Message.info(res.msg)
            this.getTree()
          }
        })
        
      } else if (type === 'del') {

        DeleteMaterialCategory({ code: target.value }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getTree()
          }
        })
      }
    }
  },
  mounted () {
    this.getList()
    this.getTree()
    //this.getTechnologyTypList()
  }
}
</script>

<style lang="less" scoped>
  .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)";
        }
      }
      .left {
        margin-right: 15px;
        flex: 1;
        min-width: 320px;
      }
      .right {
        flex: 3;
        min-width: 500px;
      }
    }
  }
</style>
