<!--
  @description: 计划物料列表
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-8-11-10:09
-->
<template>
  <!--选择物料弹框-->
  <el-dialog
    v-dialogDrag
    :visible.sync="schemeMaterielSelectVisible"
    :close-on-click-modal="false"
    title="招标计划物料列表"
    append-to-body
    width="1040px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <!--搜索-->
    <div class="pt clearfix mb10">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="工程项目名称" prop="projectName">
          <el-input v-model="searchForm.projectName" placeholder="工程项目名称" style="width: 160px" />
        </el-form-item>
        <el-form-item label="招标组织单位名称" prop="schemeDeptname">
          <el-input v-model="searchForm.schemeDeptname" placeholder="招标组织单位名称" style="width: 160px" />
        </el-form-item>
        <el-form-item label="招标计划名称" prop="schemeName">
          <el-input v-model="searchForm.schemeName" placeholder="招标计划名称" style="width: 160px" />
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary" @click="search('searchForm')">
            搜索
          </el-button>
          <el-button plain type="info" @click="resetForm('searchForm')">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--查询列表-->
    <div>
      <el-table
        ref="schemeMaterialTable"
        v-loading="loading"
        :data="schemeMaterialList"
        :row-key="getRowKeys"
        size="mini"
        @selection-change="materialChange"
      >
        <el-table-column
          :reserve-selection="true"
          fixed="left"
          type="selection"
          width="45"
        />
        <el-table-column
          label="序号"
          type="index"
          align="center"
          fixed="left"
          width="55"
        />
        <!--工程项目名称-->
        <el-table-column

          fixed="left"
          label="工程项目名称"
          prop="schemeName"
          min-width="160"
        />
        <!--招标组织单位名称-->
        <el-table-column

          fixed="left"
          label="招标组织单位名称"
          prop="schemeDeptname"
          min-width="160"
        />
        <!--招标汇总名称-->
        <el-table-column

          fixed="left"
          label="招标汇总名称"
          prop="schemeName"
          min-width="160"
        />
        <!--物料组编码-->
        <el-table-column

          label="物料组编码"
          prop="biddingMaterialGroupId"
          min-width="160"
        />
        <!--物料组名称-->
        <el-table-column

          label="物料组名称"
          prop="biddingMaterialGroupName"
          min-width="160"
        />
        <!--型号-->
        <el-table-column

          header-align="center"
          label="型号"
          prop="biddingSectionEquipmentSpecs"
          min-width="160"
        />
        <!--数量-->
        <el-table-column
          header-align="center"
          label="数量"
          prop="biddingAmount"
          align="right"
          width="60"
        />
        <!--单位-->
        <el-table-column
          label="单位"
          prop="biddingMeterageUnit"
          align="center"
          min-width="120"
        />
        <!--预算单价-->
        <el-table-column
          header-align="center"
          label="预算单价(元）"
          prop="schemeBudgetUnit"
          align="right"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.schemeBudgetUnit ? moneyFormat(scope.row.schemeBudgetUnit.toFixed(2)) : scope.row.schemeBudgetUnit }}</span>
          </template>
        </el-table-column>
        <!--预算总额-->
        <el-table-column
          header-align="center"
          label="预算总额（元）"
          prop="schemeBudgetSum"
          align="right"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.schemeBudgetSum ? moneyFormat(scope.row.schemeBudgetSum.toFixed(2)) : scope.row.schemeBudgetSum }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination :pagination-data="paginationData" @change="loadData" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="confirmLoading" type="primary" @click="sureMaterial">
        确 定
      </el-button>
      <el-button @click="schemeMaterielSelectVisible = false">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/* 接口*/
import { getUnrelatedSchemeMaterialPages } from '@/api/purchasePlan/pretcloudPurchasescheme'
/* 公共方法*/
import { moneyFormat, filterObj, cloneObject } from '@/assets/js/utils'// 过滤空的key
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
/* 混合开发*/
import { ListMixin } from '@/mixins/ListMixin'
export default {
  name: 'SchemeMaterialListDialog',
  components: {
    pagination
  },
  mixins: [ListMixin],
  data() {
    return {
      // 获取row的key值
      getRowKeys(row) {
        return row.id
      },
      loading: true,
      schemeMaterielSelectVisible: false, // 是否打开弹框
      schemeMaterialList: [], // 计划物料列表
      confirmLoading: false, // 按钮Loding
      materialSelectData: [], // 弹框勾选的商品列表
      searchForm: {
        matterIdList: [],
        schemeDeptname: '', // 招标组织单位名称
        projectName: '', // 工程项目名称
        schemeName: '', // 招标计划名称(招标汇总名称）
        schemeNo: '' // 招标计划编号(招标汇总号)
      }
    }
  },
  methods: {
    moneyFormat, // 千分位转换 引入公共方法
    // 父组件触发 打开弹框 获取物料列表
    openDialogGetLoadData(matterIdList) {
      this.searchForm.matterIdList = matterIdList // 物料id集合-前端传值,用于去重
      this.schemeMaterielSelectVisible = true // 打开弹框
      this.loadData()
    },
    // 分页获取所有未关联的招标计划与物料列表
    loadData() {
      const params = this.getQueryParams() // 查询条件
      getUnrelatedSchemeMaterialPages(params).then(response => {
        const { data } = response
        this.schemeMaterialList = data.records
        this.paginationData.total = data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 选择物料
    materialChange(val) {
      this.materialSelectData = val
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 选择商品弹框 确认
    sureMaterial() {
      if (this.materialSelectData.length > 0) {
        const data = cloneObject(this.materialSelectData)// 深层拷贝
        this.schemeMaterielSelectVisible = false// 关闭弹窗
        // 返回已选中物料
        this.$emit('schemeMaterialSelect', data)
        this.$refs.schemeMaterialTable.clearSelection()
      } else {
        this.$message.warning('请选择物料')
      }
    },
    // 重置
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.$refs[formName].resetFields()
      this.loadData()
    },
    // 搜索
    search() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData()
    }
  }
}
</script>

<style scoped></style>
