<!--
  @description: 采购计划-采购计划编辑选择物资编码
  @author: lxl
  @date： 2020-10-30 09:52
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogSonData.dialogVisibleGoogs"
      :before-close="onClose"
      :close-on-click-modal="false"
      append-to-body
      :lock-scroll="false"
      custom-class="el-dialog__body-p8 el-dialog_table"
      title="产品分类"
      width="1000px"
    >
      <section :class="{ SearchContent_show: toggleSearchStatus }" class="clearfix SearchContent">
        <div class="SearchContent_leftInput fl">
          <el-form
            ref="searchForm"
            :model="searchForm"
            label-width="98px"
            label-position="left"
            inline
            @submit.native.prevent
          >
            <el-form-item
              ref="purchaseCode"
              label="物资编码"
              class="el-form-item--two"
              prop="purchaseCode"
            >
              <gx-input
                v-model.trim="searchForm.purchaseCode"
                style="width:20vw"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <el-form-item
              ref="purchaseName"
              label="物资名称"
              class="el-form-item--two"
              prop="purchaseName"
            >
              <gx-input
                v-model.trim="searchForm.purchaseName"
                style="width:20vw"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="fr">
          <el-button type="primary" @click="onSearch">
            搜 索
          </el-button>
          <el-button plain type="info" @click="resetForm">
            重 置
          </el-button>
        </div>
      </section>
      <section style="margin:10px 0px">
        <el-table
          ref="singleTable"
          v-loading="loading"
          class="pointer"
          :data="tableData"
          tooltip-effect="dark"
          highlight-current-row
          @row-click="singleElection"
          @current-change="currentChange"
        >
          <!-- 选择-->
          <el-table-column label="选择" align="center" width="60">
            <template slot-scope="scope">
              <el-radio v-model="materialRowId" :label="scope.$index">
                {{ '' }}
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            width="60px"
            align="center"
            label="序号"
          />
          <el-table-column
            min-width="100px"
            align="center"
            prop="purchaseCode"
            label="物资编码"
          />
          <el-table-column
            min-width="150px"
            align="left"
            header-align="center"
            prop="purchaseName"
            label="物料名称"
          />
          <el-table-column prop="purchaseClassificationParent" width="150" label="一级专业分类" header-align="center" />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="purchaseClassification"
            label="二级专业分类"
          />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="purchaseSpecification"
            label="物资规格说明"
          />
          <el-table-column
            min-width="120px"
            header-align="center"
            align="left"
            prop="purchaseBrand"
            label="品牌"
          />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="largeName"
            label="物资分类"
          />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="middleName"
            label="电力分类"
          />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="smallName"
            label="税收分类"
          />
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="conformLoading" @click="ensure">
          {{ language.Determine }}
        </el-button>
        <el-button @click="onClose">
          {{ language.cancel }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/* 接口*/
import {
  ListTBMaterialStoreInfo,
  getTBMaterialStoreInfoByItemId
} from '@/api/procurement/purchasplan'
/* 公用组件 */
import { ListMixin } from '@/mixins/ListMixin' // 分页
import pagination from '@comp/common/pagination/pagination' // 分页组件
import { filterObj, restoreInitialValue, filterDictText, cloneObject } from '@/assets/js/utils'
import { mapGetters } from 'vuex'
export default {
  name: 'SelGoogsDialog',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin],
  props: {
    dialogSonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: true, // loading
      conformLoading: false, // btnLoding
      currentData: {}, // 选择信息
      materialRowId: '', // 单选选择的物料id
      tableData: [], // 表格数据
      // 搜索条件参数
      searchForm: {
        purchaseCode: '', // 物资编码
        purchaseName: '' // 物资名称
      }
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  created() {
    // 初始化查询物料编码数据
    this.loadData()
  },
  methods: {
    filterDictText, // 数据字典查询
    // 初始化查询物料编码数据
    loadData() {
      const params = this.getQueryParams() // 查询条件
      ListTBMaterialStoreInfo(params)
        .then(response => {
          this.loading = false // laoding
          this.tableData = response.data.records
          this.paginationData.total = response.data.total
          this.materialRowId = ''
        })
        .catch(() => {
          this.loading = false // laoding
        })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      param.collectionType = this.dialogSonData.collectionType // 采购组织形式
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData() // 查询数据
    },
    // 当前选择的信息
    currentChange(val) {
      this.currentData = cloneObject(val)
    },
    // 点击行设置单选按钮选中
    singleElection(row) {
      this.materialRowId = this.tableData.indexOf(row)
    },
    // 确定
    ensure() {
      if (this.currentData && JSON.stringify(this.currentData) !== '{}') {
        this.conformLoading = true // btnLoding
        this.saveSelectMaterialCode() // 保存选择的物料编码方法
      } else {
        this.$message.warning('请选择物资分类')
      }
    },
    /*
    * 保存选择的物料编码方法
    * @params itemId 选择的物料id
    */
    saveSelectMaterialCode() {
      const params = {
        itemId: this.currentData.itemId
      }
      getTBMaterialStoreInfoByItemId(params).then((response) => {
        this.conformLoading = false // btnLoding
        this.$emit('onRes', response) // 成功回调
        this.onClose() // 关闭弹框清楚历史数据
      }).catch(() => {
        this.conformLoading = false // btnLoding
      })
    },
    // 重置
    resetForm() {
      // 清除数据
      restoreInitialValue(this.searchForm)
      this.onSearch()
    },
    // 清空历史选择的物料id
    clearmaterialId() {
      this.materialRowId = ''
      this.$refs.singleTable.setCurrentRow()
    },
    // 关闭
    onClose() {
      restoreInitialValue(this.searchForm) // 清除数据
      this.clearmaterialId()
      this.dialogSonData.dialogVisibleGoogs = false // 关闭弹框
    }
  }
}
</script>

