<template>
  <el-dialog
    title="设备或物资"
    :visible.sync="dialogVisible"
    width="width"
    :before-close="dialogBeforeClose"
  >
    <div class="materialInformation">
      <div class="common-page-shadow">
        <div class="common-search-container" ref="contentPanel">
          <el-form
            ref="form"
            label-position="right "
            :inline="true"
            type="flex"
            justify="left"
          >
            <el-form-item label="企业物料编号">
              <el-input
                size="small"
                v-model="querys[3].value"
                clearable
                placeholder="请输入企业物料编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="物料牌号">
              <el-input
                size="small"
                v-model="querys[0].value"
                clearable
                placeholder="请输入物料牌号"
              ></el-input>
            </el-form-item>
            <el-form-item label="规格型号">
              <el-input
                size="small"
                v-model="querys[1].value"
                clearable
                placeholder="请输入规格型号"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="container-btn">
            <el-button
              size="small"
              icon="el-icon-search"
              type="danger"
              class="btn btn-plus"
              @click="handleSearch"
            >
              搜索
            </el-button>
            <el-button
              size="small"
              icon="el-icon-refresh-right"
              class="btn btn-plus"
              @click="clearSearchForm"
            >
              重置
            </el-button>
          </div>
        </div>
        <el-row
          class="common-table-container flex searchPanel"
          :style="SearchPanel"
        >
          <el-col :span="24" class="common-table-wrapper">
            <!-- LJ：表格高度自适应需配合样式  btn-pagenation 有按钮有分页  btngroup只有按钮  pagenation只有分页 -->
            <div class="common-table-content btn-pagenation" ref="tableContent">
              <el-table
                :border="true"
                stripe
                fit
                size="mini"
                :max-height="tableHeight"
                v-loading="tableLoading"
                ref="multipleSelection"
                :data="tableData"
                @selection-change="handleSelectionChange"
                @row-dblclick="handleDetail"
              >
                <el-table-column
                  type="selection"
                  min-width="20%"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="matCode"
                  show-overflow-tooltip
                  min-width="10%"
                  align="center"
                  label="企业设备编号"
                  resizable
                >
                </el-table-column>
                <el-table-column
                  prop="matName"
                  show-overflow-tooltip
                  min-width="10%"
                  align="center"
                  label="设备名称"
                  resizable
                >
                </el-table-column>
                <el-table-column
                  prop="matSpec"
                  show-overflow-tooltip
                  min-width="10%"
                  align="center"
                  label="规格型号"
                  resizable
                >
                </el-table-column>
                <el-table-column
                  prop="matUnit"
                  show-overflow-tooltip
                  min-width="10%"
                  align="center"
                  label="计量单位"
                  resizable
                >
                </el-table-column>

                <el-table-column
                  prop="matBrand"
                  show-overflow-tooltip
                  min-width="10%"
                  align="center"
                  label="品牌/厂家"
                  resizable
                >
                </el-table-column>
                <el-table-column
                  prop="matBrand"
                  show-overflow-tooltip
                  min-width="10%"
                  align="center"
                  label="数量"
                  resizable
                >
                </el-table-column>
                <el-table-column
                  prop="matBaseExt"
                  show-overflow-tooltip
                  min-width="10%"
                  align="center"
                  label="单台估价(元)"
                  resizable
                >
                </el-table-column>
                <el-table-column
                  prop="matBaseExt"
                  show-overflow-tooltip
                  min-width="10%"
                  align="center"
                  label="总估价(元)"
                  resizable
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="common-pagenation">
              <el-pagination
                ref="paginationPanel"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.pageBean.page"
                :page-sizes="[50, 100, 200, 500,1000]"
                :page-size="queryParam.pageBean.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryParam.pageBean.total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>
  
  <script>
import pagination from '@/components/pagination'
import {TableMixin} from '@/mixins/tableMixin'
import basicData from '@/api/basicData'
import utils from '@/utils.js'
export default {
  name: 'DemandEntry',
  components: {
    pagination,
  },
  mixins: [TableMixin],
  data() {
    return {
      tableHeight: 1000,
      options: [
        {
          value: '1',
          label: '已选择',
        },
        {
          value: '0',
          label: '未选择',
        },
      ],
      tableData: [],
      tableHeight: 1000,
      handleDeleteActive: true,
      handleDeleteId: [],
      multipleSelection:[],
      tableLoading: false,
      dialogVisible:false,
      queryParam: {
        pageBean: {
          page: 1,
          pageSize: 50,
          total: 0,
        },
      },
      querys: [
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'matMaterial',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'matSpec',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'matCategory',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'matCode',
          relation: 'AND',
          value: '',
        },
      ],
    }
  },
  mounted() {
    //页面缩放从新计算表格的高度
    window.addEventListener('resize', this.calcTableHeight)
  },
  created() {
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calcTableHeight)
  },
  methods: {
    //导出数据
    dataExport() {
      this.queryParam.querys = []
      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }
      if (this.querys[1].value) {
        this.queryParam.querys.push(this.querys[1])
      }
      if (this.querys[2].value) {
        this.queryParam.querys.push(this.querys[2])
      }
      basicData.bizMaterialExportExcelData(this.queryParam).then((res) => {
        console.log(res)
      })
    },
    // 动态计算表格的高度，自适应当前容器
    calcTableHeight() {
      this.tableHeight = this.$refs.tableContent.offsetHeight
    },
    getDictName(code, value) {
      return utils.getDictName(code, value)
    },
    //获取数据
    loadData() {
      this.tableLoading = true
      this.queryParam.querys = []
      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }
      if (this.querys[1].value) {
        this.queryParam.querys.push(this.querys[1])
      }
      if (this.querys[2].value) {
        this.queryParam.querys.push(this.querys[2])
      }
      if (this.querys[3].value) {
        this.queryParam.querys.push(this.querys[3])
      }
      basicData.bizMaterialQuery(this.queryParam).then((res) => {
        this.queryParam.pageBean.total = res.value.total
        this.tableLoading = false
        this.tableData = res.value.rows
      })
    },
    //重置
    clearSearchForm() {
      this.querys[0].value = ''
      this.querys[1].value = ''
      this.querys[2].value = ''
      this.querys[3].value = ''
      this.loadData()
    },
    // 详情
    handleDetail(rows) {
      this.$router.push({
        name: 'addEquipmentLibrary',
        query: {detailRows: rows, pageBean: this.queryParam},
      })
    },
    // 删除
    handleDelete() {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
      })
        .then(() => {
          basicData
            .bizMaterialRemove(this.handleDeleteId)
            .then((res) => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000,
                })
                this.loadData()
              }
            })
            .catch((res) => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80,
              })
            })
        })
        .catch(() => {})
    },
    open(){
        this.dialogVisible = true
        this.loadData()
    },
    // 顶部搜索
    handleSearch() {
      this.loadData()
    },
    handleSelectionChange(val) {
        this.multipleSelection = val
      if (val.length !== 0) {
        this.handleDeleteActive = false
        this.handleDeleteId = val.map((item) => {
          return item.id
        })
      } else {
        this.handleDeleteActive = true
      }
    },
    handleClose(){
        this.dialogVisible = false
    },
    save(){
    this.$emit('load',this.multipleSelection)
        this.handleClose()
    },
    handleCurrentChange(page) {
      this.queryParam.pageBean = {...this.queryParam.pageBean, page}
      this.loadData(this.queryParam)
    },
    handleSizeChange(pageSize) {
      this.queryParam.pageBean = {...this.queryParam.pageBean, pageSize}
      this.loadData(this.queryParam)
    },
  },
  computed: {
    SearchPanel() {
      return {
        '--searchPanel': this.searchPanel + 'px',
      }
    },
  },
}
</script>
  
  <style lang="scss" scoped>
.materialInformation {
  display: flex;
  width: 100%;
  height: 100%;
  .common-page-shadow {
    width: 100%;
    height: calc(100% - 80px);
    box-sizing: border-box;
    .common-search-container {
      height: 80px;
    }
  }
}

.cloumn-btn {
  border: 1px solid #2761ff;
  padding: 3px 10px;
  border-radius: 5px;
  &:nth-child(1) {
    margin-right: 5px;
  }
  &:nth-child(2) {
    margin-right: 5px;
  }
  &:nth-child(1):hover {
    background-color: #2761ff;
    color: #fff;
  }
  &:nth-child(2):hover {
    background-color: #2761ff;
    color: #fff;
  }
  // &:nth-child(2):hover {
  //   background-color: #f56c6c;
  //   color: #fff;
  //   border-color: #f56c6c;
  // }
  /deep/ i,
  span {
    font-size: 16px;
  }
}
/deep/.el-tree-node.is-current > .el-tree-node__content {
  background-color: #ebf3fa;
  color: #409eff;
  font-weight: bold;
}

/deep/ .el-tree-node__content {
  padding: 5px 0;
}

/deep/ .el-table thead tr th {
  background-color: #eee !important;
  border-right: 1px solid #dfe2e8 !important;
}
/deep/ .el-table {
  border-collapse: collapse !important;
}
</style>
  