<!-- 物料分类 -->
<template>
  <div class="main-container order-mc-bg">
    <div class="sale-container">
      <!-- 顶部按钮组 -->
      <toolBtn @actionhandel="actionhandel" :btnType="btnType"></toolBtn>
      <!-- 列表 -->
      <div class="sale-page-body">
        <!-- 表头 -->
        <div class="sale-page-table-header" ref="getSaleTableHeader">
          <el-form :inline="true">
            <el-row class="form-row1">
              <el-col :span="20">
                <el-row :gutter="20">
                  <el-col :span="4">
                    <el-form-item class="Iisshow" label="父级分类">
                      <el-input v-model.trim="search.product" placeholder="请输入分类编码/名称" class="f-12" style="width:280px">
                      </el-input>
                      <div :data-clipboard-text="search.product" @click="saleOrderCopy" class="copyBtn">
                        <i class="el-icon-document-copy" />
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" style="margin-left: 162px;">
                    <el-form-item class="Iisshow" label="分类">
                      <el-input v-model.trim="search.childProduct" placeholder="请输入分类编码/名称" class="f-12"
                        style="width:280px"></el-input>
                      <div :data-clipboard-text="search.childProduct" @click="saleOrderCopy" class="copyBtn">
                        <i class="el-icon-document-copy" />
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4" class="form-row-lastcol">
                <el-row :gutter="2">
                  <el-col :span="24">
                    <el-form-item class="form-group1">
                      <el-button type="primary" size="small" @click="searchData">搜索</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 列表 -->
        <div class="sale-page-table-body">
          <el-table class="table-box" :data="tableData" border ref="tableInfoRef" v-loading="isLoading"
            element-loading-text="加载中，请稍后..." element-loading-spinner="el-icon-loading"
            style="width: 100%;font-size:12px" :max-height="heightNum" :header-cell-class-name="headerRigthMethod"
            :header-cell-style="headerBg" @selection-change="handleSelectionChange" @row-dblclick="openDetailsDB">
            <el-table-column type="selection" align="center" width="40" fixed />
            <el-table-column prop="chindNumber" label="分类编码" align="left">
              <template #default="scope">
                <span style="color: #4178D5" @click="jump(scope.row)">{{ scope.row.chindNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="chindName" label="分类名称" align="left" />
            <!-- <el-table-column prop="seq" label="序号" align="left" width="80" /> -->
            <el-table-column prop="number" label="父级分类编码" align="left" />
            <el-table-column prop="name" label="父级分类名称" align="left" />
          </el-table>
        </div>
      </div>
      <!-- 底部分页 -->
      <div class="sale-page-footer">
        <div class="footer-right">
          <el-pagination :page-sizes="[50, 100, 150]" :page-size="search.pageSize"
            layout="slot,sizes, total,prev,pager, next,jumper" :total="orderTotal" popper-class="每页显示"
            :currentPage="search.pageNo" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            <span class="total-select-item">
              共选中
              <text style="text-align:center;color:#4178D5;padding:0 1px;">{{ multipleSelection &&
                multipleSelection.length > 0 ? multipleSelection.length : 0
              }}</text>行
            </span>
          </el-pagination>
        </div>
        <div class="footer-pagination-total-page">
          <span>共{{ Math.ceil(orderTotal / search.pageSize) }}页</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { exporthandel } from '@/utils/pubulic.js'
import { orderCopy } from '@/utils/takeMethods.js'
export default {
  name: 'Materialclassification',
  data () {
    return {
      btnType: ['save', 'copy', 'audit', 's-p-t-g2', 'de-approval', 's-p-t-g4'], // 不需要显示的顶部按钮类型
      // 搜索条件
      search: {
        pageNo: 1, // 页码
        pageSize: 50, // 页数
        orgId: '', // 组织Id(所有列表页都需要 全局
        product: '', // 父级分类编码或者名称
        childProduct: '' // 子级分类编码或者名称
      },
      orderTotal: null, // 页面总数
      multipleSelection: [], //选中
      tableData: [],
      selectItem: 0,
      rowShow: false,
      heightNum: 0,
      windowHeight: 0,
      isDown: true
    }
  },
  computed: {
    ...mapState({
      orgId: state => (state && state.org && state.org.orgId ? state.org.orgId : null),
      orgIdArr: state => (state ? state.user.orgIdArr : null)
    })
  },
  created () {
    this.customerSel1 = 1
    this.windowHeight = document.documentElement.clientHeight
    this.heightNum = this.windowHeight - (40 + 30 + 54 + 34 + 34 + 34 + 16 + 16)
    this.search.orgId = this.orgId
    this.Init()
  },
  activated () {
    // 键盘监听事件
    document.addEventListener('keyup', this.keyupFn, false)
  },
  deactivated () {
    document.removeEventListener('keyup', this.keyupFn, false)
  },
  watch: {
    orgId (val) {
      if (val) {
        this.search = {
          pageNo: 1, // 页码
          pageSize: 50, // 页数
          orgId: val,
          product: '',
          childProduct: ''
        }
        this.Init()
      }
    }
  },
  methods: {
    keyupFn (e) {
      if (e.keyCode === 13) {
        // enter见搜索
        this.getFileDownManagerQuery()
      }
    },
    // 初始化
    Init () {
      this.getMaterialClasslist()
    },
    // 双击计入
    openDetailsDB (row, column) {
      this.$router.push({ path: '/material/mateBom/classificationSet', query: { type: 'edit', productId: row.chindId } })
    },
    // 订单号 复制按钮
    saleOrderCopy () {
      orderCopy()
    },

    // 搜索切换高度
    openRow () {
      this.isDown = !this.isDown
      this.rowShow = !this.rowShow
      if (this.rowShow) {
        this.heightNum = this.heightNum - 80
      } else {
        this.heightNum = this.heightNum + 80
      }
    },
    // 点击父类编辑
    jump (item) {
      this.$router.push({ path: '/material/mateBom/classificationSet', query: { type: 'edit', productId: item.chindId } })
    },
    // 获取物料分类
    getMaterialClasslist () {
      this.isLoading = true
      this.$http.post('MaterialGroup/MaterialGroupQuery', this.search).then(res => {
        if (res.status === 200) {
          this.isLoading = false
          this.tableData = res.data.list
          this.orderTotal = res.data.total
        }
      })
    },
    // 顶部公共按钮操作
    actionhandel (type) {
      //点击新增
      // if (type === 'add') {
      //   this.$router.push({ path: '/material/mateBom/classificationSet', query: { type: 'add', id: '' } })
      // }
      if (type === 'add') {
        this.$router.push({ name: 'AddClassificationSet', query: { type: 'add', id: '', sjtag: Math.random() * 36 } })
      }
      //点击删除 --根据明细id去删除的
      if (type === 'delet') {
        let idarry = []
        if (this.multipleSelection.length > 0) {
          this.multipleSelection.forEach(it => {
            idarry.push(it.chindId)
          })
          if (idarry.length > 0) {
            this.$http.post('MaterialGroup/Delete', { ids: idarry }).then(res => {
              if (res.status === 200) {
                if (res.data.length > 0) {
                  let errorstr = ''
                  res.data.forEach(it => {
                    errorstr = errorstr + '分类' + it.orderNo + it.msg
                  })
                  this.$message.error({ message: errorstr, showClose: true })
                } else {
                  this.$message.success({ message: '删除成功', showClose: true })
                }
                this.getMaterialClasslist()
              }
            })
          }
        } else {
          this.$message.error({ message: '请勾选', showClose: true })
        }
      }
      if (type === 'list-export') {
        exporthandel('MaterialGroup/Export', this.search)
      }
      // 点击刷新
      if (type === 'refresh') {
        this.search = {
          pageNo: 1, // 页码
          pageSize: 50, // 页数
          orgId: this.orgId, // 组织Id(所有列表页都需要 全局
          product: '', // 父级分类编码或者名称
          childProduct: '' // 子级分类编码或者名称
        }
        this.getMaterialClasslist()
      }
    },
    // 搜索事件
    searchData () {
      this.search.pageNo = 1
      this.getMaterialClasslist()
    },
    //控制表头颜色
    headerBg ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 17 || columnIndex === 18) {
        return `text-align:right!important;`
      }
    },
    headerRigthMethod ({ row, column, rowIndex, columnIndex }) {
      return 'headerRight'
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.search.pageNo = 1
      this.search.pageSize = val
      this.Init()
    },
    handleCurrentChange (val) {
      this.search.pageNo = val
      this.Init()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
@import '@/assets/style/saleOrder/common.scss';
</style>