<!--
  @description: 选择物资
  @Modifier: hdk
  @date: 2020-11-23 09:47:31
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    title="物资信息"
    width="894px"
    custom-class="el-dialog__body-p0 el-dialog__body-p8 el-dialog_table"
    append-to-body
  >
    <div class="p0-16 pt16 clearfix">
      <div class="SearchContent_leftInput fl">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="130px"
          label-position="left"
          inline
        >
          <el-form-item label="物资名称" label-width="80px" prop="purchaseName">
            <el-input
              v-model.trim="searchForm.purchaseName"
              placeholder=""
              style="width: 200px"
              @keyup.enter.native="search"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="fr">
        <el-button
          type="primary"
          icon="iconfont icon-search"
          @click="search('searchForm')"
        >
          查询
        </el-button>
        <el-button plain type="info" size="small" @click="resetForm('searchForm')">
          重置
        </el-button>
      </div>
    </div>
    <div>
      <div>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :row-key="getRowKey"
          :data="list"
          highlight-current-row
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="currentChange"
        >
          <el-table-column
            :reserve-selection="true"
            header-align="center"
            type="selection"
            align="center"
            width="50"
          />
          <el-table-column
            header-align="center"
            type="index"
            label="序号"
            align="center"
            width="50"
          />
          <el-table-column
            header-align="center"
            prop="purchaseName"
            min-width="180"
            align="center"
            label="物资名称"
          />
          <el-table-column
            header-align="center"
            prop="purchaseCode"
            label="物资编码"
            min-width="130"
            align="center"
          />
          <el-table-column
            header-align="center"
            prop="smallName"
            align="center"
            min-width="110"
            label="小类名称"
          />
          <el-table-column
            header-align="center"
            prop="middleName"
            align="center"
            min-width="110"
            label="中类名称"
          />
          <el-table-column
            header-align="center"
            prop="largeName"
            align="center"
            min-width="110"
            label="大类名称"
          />
          <el-table-column
            header-align="center"
            prop="purchaseBrand"
            align="center"
            label="品牌"
          />
          <el-table-column prop="purchaseClassificationParent" width="150" label="一级专业分类" header-align="center" />
          <el-table-column
            header-align="center"
            prop="purchaseClassification"
            align="center"
            min-width="110"
            label="二级专业分类"
          />
          <el-table-column
            header-align="center"
            prop="purchaseSpecification"
            align="center"
            min-width="230"
            label="规格型号"
          />
        </el-table>
      </div>
      <pagination :pagination-data="paginationData" @change="loadData" />
    </div>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure">{{ language.Determine }}</el-button>
      <el-button @click="dialogData.dialog = false">{{ language.cancel }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { listTBMaterialStoreInfo } from '@/api/procurement/purchasplan' // 获取供应信息
/* 公用方法*/
import { filterObj, filterDictText } from '@/assets/js/utils' // 过滤空的key
/* 混合开发方法-参数字段*/
import { materielMixins } from '../mixins/materielMixins'
import { ListMixin } from '@/mixins/ListMixin' // 分页
/* 组件*/
import pagination from '@comp/common/pagination/pagination' // 分页
import { mapGetters } from 'vuex'
export default {
  name: 'MaterielChoiceDialog',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin, materielMixins],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      paginationData: {},
      // 搜索信息
      searchForm: {
        purchaseName: '' // 物资名称
      },
      list: [], // 列表数据
      currentData: [] // 当前选择的信息
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.dialog'(val) {
      if (val) {
        // 弹框已打开
        // 加载数据
        this.loadData()
        this.$nextTick(() => {
          // 清除
          this.$refs.multipleTable.clearSelection()
        })
      }
    }
  },
  methods: {
    filterDictText,
    // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.itemId
    },
    // 当前选择的信息
    currentChange(val) {
      // 单选
      if (this.dialogData.singleChoice) {
        if (val.length > 1) {
          // 清除
          this.$refs.multipleTable.clearSelection()
          // pop：最后一个
          this.$refs.multipleTable.toggleRowSelection(val.pop())
        } else {
          // multipleSelection：当前选择的数组
          this.currentData = val
        }
      } else {
        // 多选
        this.currentData = val
      }
    },
    // 加载数据
    loadData() {
      this.loading = true
      // 查询条件
      const params = this.getParams()
      listTBMaterialStoreInfo(params).then(response => {
        this.loading = false
        this.list = response.data.records
        this.paginationData.total = response.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    // 查询条件
    getParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      // 过滤空的key
      return filterObj(param)
    },
    // 选择信息-确定
    ensure() {
      if (this.currentData.length > 0) {
        const data = {
          keys: [], // id集合
          labels: [] // 名称集合
        }
        // 返回数据生成
        this.currentData.forEach(item => {
          data.keys.push(item.purchaseCode)
          data.labels.push(item.purchaseName)
        })
        data.keys = data.keys.join(',')
        data.labels = data.labels.join(',')
        this.$emit('categoryTreeInfo', data)
        // 用于多选表格,清空用户的选择
        this.$refs.multipleTable.clearSelection()
        this.dialogData.dialog = false
      }
    },
    // 搜索
    search() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData()
    },
    // 重置
    resetForm(formName) {
      // 清空
      this.$refs[formName].resetFields()
      // 获取列表信息
      this.loadData()
    }
  }
}
</script>

<style scoped lang="less">
</style>
