<!--
  @description: 标段（包）信息-已选物料弹框
  @Modifier:肖文龙
  @routerPath:
  @date:2019-12-24 13:19:05
-->
<template>
  <!--选择物料弹框-->
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    append-to-body
    title="标段（包）已选物料"
    width="840px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <div>
      <el-table
        :data="dialogData.materialList"
        size="mini"
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
          fixed="left"
        />
        <el-table-column

          header-align="center"
          label="物料编码"
          fixed="left"
          min-width="160"
          prop="productNo"
        />
        <el-table-column

          header-align="center"
          label="产品名称"
          min-width="300"
          prop="productName"
        />
        <el-table-column

          header-align="center"
          label="型号"
          min-width="160"
          prop="productModel"
        />
        <el-table-column
          header-align="center"
          label="数量"
          prop="quantity"
          min-width="60"
          align="right"
        />
        <el-table-column
          header-align="center"
          label="单位"
          prop="unit"
          align="center"
          min-width="160"
        />
        <el-table-column
          header-align="center"
          label="预算单价（元）"
          prop="unitBudget"
          width="150"
          align="right"
        >
          <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"
          width="150"
          align="right"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.totalBudget?moneyFormat(scope.row.totalBudget.toFixed(2)):scope.row.totalBudget }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="dialogData.isShowRemoveBtn === true"
          label="操作"
          align="center"
          width="70"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="deleteRow(scope.$index)"
            >
              [移除]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogData.dialog = false">
        关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/* 公用方法*/
import { moneyFormat } from '@assets/js/utils'// 常用方法
export default {
  name: 'MaterielListDialog',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false, // 弹框展示状态
          materialList: []// 物料列表
        }
      }
    }
  },

  data() {
    return {
      moneyFormat: moneyFormat// 千分位转换
    }
  },
  methods: {
    // 物料信息删除
    deleteRow(index) {
      this.$confirm('确认移除该标段（包）的物料，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        // 删除
        this.dialogData.materialList.splice(index, 1)
        this.$emit('materialSelect', this.dialogData.materialList, this.dialogData.packIndex, '02')
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
