<!--
  @description: 标段（包）信息-挑选物料
  @Modifier:肖文龙
  @routerPath:
  @date:2019/12/22 16:06
-->
<template>
  <!--选择物料弹框-->
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.materielSelectVisible"
    :close-on-click-modal="false"
    title="挑选物料"
    append-to-body
    width="840px"
    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="productNo"
        >
          <el-input v-model="searchForm.productNo" placeholder="物料编码" />
        </el-form-item>
        <el-form-item
          label="物料名称"
          prop="productName"
        >
          <el-input v-model="searchForm.productName" placeholder="物料名称" />
        </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
        :data="materielList"
        size="mini"
        @selection-change="materialChange"
      >
        <el-table-column 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="productNo"
          min-width="160"
        />
        <!--产品名称-->
        <el-table-column

          label="产品名称"
          prop="productName"
          min-width="160"
        />
        <!--型号-->
        <el-table-column

          header-align="center"
          label="型号"
          prop="productModel"
          min-width="160"
        />
        <!--数量-->
        <el-table-column
          header-align="center"
          label="数量"
          prop="quantity"
          align="right"
          width="60"
        />
        <!--单位-->
        <el-table-column
          label="单位"
          prop="unit"
          align="center"
          min-width="120"
        />
        <!--预算单价-->
        <el-table-column
          header-align="center"
          label="预算单价(元）"
          prop="unitBudget"
          align="right"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.unitBudget?moneyFormat(scope.row.unitBudget.toFixed(2)):scope.row.unitBudget }}</span>
          </template>
        </el-table-column>
        <!--预算总额-->
        <el-table-column
          header-align="center"
          label="预算总额（元）"
          prop="totalBudget"
          align="right"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.totalBudget?moneyFormat(scope.row.totalBudget.toFixed(2)):scope.row.totalBudget }}</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="dialogData.materielSelectVisible = false">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/* api*/
import { listTenderMateriePages } from '@/api/bidding/biddingProject'
/* 公共方法*/
import { moneyFormat, filterObj, cloneObject } from '@/assets/js/utils'// 过滤空的key
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
/* 混合开发*/
import { ListMixin } from '@/mixins/ListMixin'
export default {
  name: 'MaterielListDialog',
  components: {
    pagination
  },
  mixins: [ListMixin],
  props: {
    // 接收步骤条父页面信息
    projectData: {
      type: Object,
      default: function() {
        return {
          id: ''
        }
      }
    },
    dialogData: {
      type: Object,
      default: function() {
        return {
          taskPlanSchemeId: [], // 招标计划id
          materialId: [], // 物料Id去重列表
          packIndex: '', // 标段索引
          materielSelectVisible: false// 弹框展示状态
        }
      }
    }
  },
  data() {
    return {
      moneyFormat: moneyFormat, // 千分位转换
      confirmLoading: false, // 按钮Loding
      materialSelectData: [], // 弹框勾选的商品列表
      searchForm: { //  弹框获取商品列表传值
        tenderId: '', // 项目Id
        packProductId: [], // 去重物料Id
        productName: '', // 物料名称
        productNo: '' // 物料编码
      },
      materielList: [] // 物料列表
    }
  },
  watch: {
    'dialogData.materielSelectVisible'(val) {
      if (val) {
        this.materielList = [] // 物料列表
        // 初始化-分页
        this.paginationData.pageNo = 1
        this.paginationData.pageSize = 10
        this.loadData()
      }
    }
  },
  methods: {
    // 获取数据
    loadData() {
      this.searchForm.packProductId = this.dialogData.materialId// 去重物料Id
      this.searchForm.tenderId = this.projectData.id// 项目Id
      const params = this.getQueryParams()// 查询条件
      listTenderMateriePages(params).then(response => {
        const { data } = response
        this.materielList = data.records
        this.paginationData.total = data.total
        // 初始化金额如果为空则设置为0
        this.materielList.forEach(item => {
          item.totalBudget = item.totalBudget || 0.00
        })
      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 选择物料
    materialChange(val) {
      this.materialSelectData = val
    },
    // 选择商品弹框 确认
    sureMaterial() {
      const data = cloneObject(this.materialSelectData)// 深层拷贝
      // 关闭弹窗
      this.dialogData.materielSelectVisible = false
      // 返回已选中物料
      this.$emit('materialSelect', data, this.dialogData.packIndex, '01')
    },
    // 重置
    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 lang="less">

</style>
