<!--
  @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="物资编码"
              prop="purchaseCode"
            >
              <gx-input
                v-model.trim="searchForm.purchaseCode"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <el-form-item
              ref="purchaseName"
              label="物资名称"
              prop="purchaseName"
            >
              <gx-input
                v-model.trim="searchForm.purchaseName"
                @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('searchForm')">
            重 置
          </el-button>
        </div>
      </section>
      <section style="margin:10px 0px">
        <el-table
          v-loading="loading"
          class="pointer"
          :row-key="getRowKey"
          :data="tableData"
          highlight-current-row
          @row-click="rowClick"
        >
          <el-table-column
            fixed="left"
            type="index"
            width="60px"
            align="center"
            label="序号"
          />
          <el-table-column label="" width="65" fixed="left" align="center">
            <template slot-scope="scope">
              <el-radio v-model="templateSelection" :label="scope.$index">
&nbsp;
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column
            fixed="left"
            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">
          确 定
        </el-button>
        <el-button @click="onClose">
          取 消
        </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 } from '@/assets/js/utils'
export default {
  name: 'LineltemlnfoGoogsDialog',
  components: {
    pagination
  },
  mixins: [ListMixin],
  props: {
    dialogSonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      templateSelection: '',
      selMap: new Map(),
      loading: true,
      itemId: '', // 表格rowId
      tableData: [], // 表格数据
      conformLoading: false,
      searchForm: {
        purchaseCode: '', // 搜索条件参数
        purchaseName: ''
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 数据请求方法
    loadData() {
      this.setSelTion()
      const params = this.getQueryParams() // 查询条件
      ListTBMaterialStoreInfo(params)
        .then(response => {
          this.loading = false
          this.tableData = Object.freeze(response.data.records)
          this.paginationData.total = response.data.total
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 点击一行获取下标
    rowClick(row) {
      this.itemId = row.itemId
      this.selMap.set('pageNo', this.paginationData.pageNo)
      this.selMap.set('selIndex', this.tableData.indexOf(row))
      this.setSelTion()
    },
    // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
    // 设置选中按钮
    setSelTion() {
      if (this.selMap.has('pageNo') && this.selMap.has('selIndex')) {
        const pageNo = this.selMap.get('pageNo')
        const index = this.selMap.get('selIndex')
        if (pageNo === this.paginationData.pageNo) {
          this.templateSelection = index
        } else {
          this.templateSelection = ''
        }
      }
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData() // 查询数据
    },
    // 确定
    ensure() {
      if (!this.itemId) {
        this.$message.warning('请选择物资分类')
        return false
      }
      this.conformLoading = true
      const params = {
        itemId: this.itemId
      }
      getTBMaterialStoreInfoByItemId(params).then((response) => {
        this.conformLoading = false
        this.$emit('onRes', response)
        this.onClose()
      }).catch(() => {
        this.conformLoading = false
      })
    },
    // 重置
    resetForm() {
      // 清除数据
      restoreInitialValue(this.searchForm)
      this.onSearch()
    },
    // 清空itemId
    clearItem() {
      this.itemId = ''
      this.templateSelection = ''
    },
    // 关闭
    onClose() {
      this.resetForm()
      this.templateSelection = ''
      this.dialogSonData.dialogVisibleGoogs = false
    }
  }
}
</script>
<style scoped lang="less">
  /deep/.el-radio__label {
    display: none;
  }
</style>

