<!--计量物料配置管理-->
<template>
  <div class="systemBase">
    <div>
      <div style="margin-top: 10px; border-bottom: 1px solid #d5d5d5">
        <!-- <div class="common-operation-button-div"> -->
        <el-form
          :inline="true"
          :model="search"
          ref="searchForm"
          @submit.native.prevent
          style="padding-left: 15px"
        >
          <el-form-item>
            <div style="font-size: 16px; padding: 0px 0px">
              计量物料配置管理
            </div>
          </el-form-item>
          <el-form-item prop="matterName" label="物料名称">
            <el-input
              v-model="search.matterName"
              clearable
              size="small"
              style="width: 150px"
              placeholder="请输入"
              @keyup.enter.native="searchDatas"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="20px">
            <el-button
              icon="el-icon-search"
              type="primary"
              size="mini"
              @click="searchDatas"
              v-loading.fullscreen.lock="operateLoading"
              v-privilege="activeMenu + 'SEARCH'"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="common-table-div">
        <el-table
          v-loading="dataLoading"
          ref="dataTable"
          border
          :height="tableHeight"
          :data="table.list"
          highlight-current-row
          :exchangeFilterMap="{
            validFlag: { '0': '无效', '1': '有效' },
            allowedAddWeight: { '0': '否', '1': '是' },
            allowedTareWeight: { '0': '否', '1': '是' },
          }"
          :icore-filter-flag="icoreFilterFlag"
        >
          <el-table-column
            type="index"
            label="序号"
            fixed="left"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="matterNo"
            label="物料编号"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="matterName"
            label="物料名称"
            align="left"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="settlementPrice"
            label="单价"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="specName"
            label="规格"
            align="left"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="120px"
            prop="matterNatureName"
            label="物料属性名称"
            align="left"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="80px"
            prop="validFlag"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.validFlag == 1">有效</span>
              <span v-else-if="scope.row.validFlag == 0">无效</span>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="80px"
            prop="createManName"
            label="创建人"
            align="left"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="160px"
            prop="createTime"
            label="创建时间"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="80px"
            prop="updateManName"
            label="修改人"
            align="left"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="160px"
            prop="updateTime"
            label="修改时间"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            label="操作"
            fixed="right"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="showPriceDialog(scope.row)"
                >设置单价</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="common-foot-style">
        <el-pagination
          v-loading="dataLoading"
          @size-change="pageSizeChange"
          @current-change="pageCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[100, 500, 1000, 5000]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalPage"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      @close="closeDialog"
      :visible.sync="showFlag"
      customClass="mat-price-wrap"
      title="设置单价"
      width="700px"
      :close-on-click-modal="false"
    >
      <el-form ref="formObj" label-width="70px" :inline="true" :model="formObj">
        <el-form-item prop="matterName" label="物资名称">
          <el-input
            v-model="formObj.matterName"
            size="small"
            type="text"
            style="width: 160px"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label-width="85px" prop="settlementPrice" label="单价(元/吨)">
          <el-input
            v-model="formObj.settlementPrice"
            size="small"
            type="text"
            style="width: 160px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button
          type="primary"
          size="mini"
          @click="setPrice"
          v-loading="operateLoading"
          >确定</el-button
        >
        <el-button size="mini" type="default" @click="closeDialog"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  meterbasematterinfos,
  combaseinfos
} from '../../../utils/api.js';
import {
  discard,
  Recovery,
  add,
  modify
} from '../../../utils/httpRequest.js';
import pinyinUtils from '../../../utils/pinyin/pinyinUtils.js'
export default {
  data () {
    return {
      dataLoading: false,
      operateLoading: false,
      icoreFilterFlag: true,
      matterNatureIndex: 0,
      meterNatureIndex: 0,
      matterNatureType: [],
      meteringType: [],
      allowedTareWeightType: [
        { id: '0', allowedTareWeight: '否' },
        { id: '1', allowedTareWeight: '是' }
      ],
      allowedAddWeightType: [
        { id: '0', allowedAddWeight: '否' },
        { id: '1', allowedAddWeight: '是' }
      ],
      table: {
        list: []
      },
      multipleSelection: [],
      tableHeight: 0,
      page: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      ruleValidate: {
        matterName: [{
          required: true,
          message: '物料名称不能为空',
          trigger: 'change'
        }],
        meterNatureNo: [{
          required: true,
          message: '该项不能为空',
          trigger: 'change'
        }],
        matterNatureNo: [{
          required: true,
          message: '该项不能为空',
          trigger: 'change'
        }],
      },
      search: {
        matterName: '',
        meterCode: '',
        validFlag: '1',
        allowedTareWeight: '',
        allowedAddWeight: '',
        scaleValidPeriod: ''
      },
      baseData: {
        matterName: '',
        mnemonicCode: '',
        matterNatureNo: '',
        matterNatureName: '',
        meterNatureNo: '',
        meterNatureName: '',
        meterCode: '',
        indexCode: '',
        allowedAddWeight: '0',
        allowedTareWeight: '0',
        scaleValidPeriod: '5',
        specName: '',
        reportCode: ''
      },
      activeMenu: '',
      validFlagList: ['0', '1', ''],
      allowedTareWeightList: ['0', '1', ''],
      allowedAddWeightList: ['0', '1', ''],
      matTypeList: [],
      showFlag: false,
      formObj: {
        matterName: '',
        settlementPrice: '',
        settlementUnit: ''
      },
      formObjCache: {
        matterName: '',
        settlementPrice: '',
        settlementUnit: ''
      },
      reg: /^(-?\d+)(\.\d+)?$/,
      operateLoading: false
    }
  },
  async created () {
    this.tableHeight = 480;
    this.activeMenu = window.top.localStorage.getItem('activeMenu')
    // 获取物料类型数据
    const { data: res } = await this.axios.get('pass/systemBase/v1/combaseinfos/?pageNum=1&pageSize=500&pBaseCode=001035');
    this.matTypeList = [...res.list]
    console.log(res, '物料类型数据');
  },
  mounted () {
    this.searchDatas();
  },
  methods: {
    // 弹出设置单价的页面
    showPriceDialog (row) {
      this.showFlag = true
      this.formObj = { ...row }
    },
    resetData () {
      this.$refs['searchForm'].resetFields && this.$refs['searchForm'].resetFields();
    },
    searchDatas () {
      this.page.pageNum = 1
      this.searchData()
    },
    // 查询
    searchData () {
      console.log(this.search)
      this.$refs.dataTable.bodyWrapper.scrollTop = 0;
      let obj = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        matterName: this.search.matterName,
        validFlag: '1'
      }
      this.axios.post('pass/systemBase/v1/meterbasematterinfos/listLike', obj, { individualType: 'json' })
        .then(res => {
          this.table.list = res.data.list;
          this.page.totalPage = res.data.total
        })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.searchData()
    },
    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.searchData()
    },
    // 设置物料单价
    setPrice () {
      if (!this.reg.test(this.formObj.settlementPrice) || this.formObj.settlementPrice - 0 === 0) return this.$message.error('单价需要为大于0的数值')
      let _this = this;
      _this.operateLoading = true;
      modify(meterbasematterinfos + _this.formObj.matterNo + '/', _this.formObj, (e) => {
        _this.searchDatas();
        _this.operateLoading = false
        this.closeDialog()
        console.log(e)
      })
      let id = setTimeout(() => {
        clearTimeout(id)
        this.operateLoading = false
      }, 1000)
    },
    // 弹窗关闭
    closeDialog () {
      this.showFlag = false
      this.formObj = { ...this.formObjCache }
    },
    myBlur () {
      if (this.baseData.matterName) {
        this.baseData.mnemonicCode = pinyinUtils.initial(this.baseData.matterName);
      }
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
</style>

<style>
.mat-price-wrap.el-dialog .el-dialog__header {
  background-color: #409eff;
  border-radius: 4px 4px 0 0;
  color: #fff;
  padding: 14px;
}
</style>