<!--
  @description: 招标计划-物料组弹框
  @Modifier: sunxinman/haofengxian
  @routerPath:
  @date: 2020-1-7 15:39:19
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="visibleMaterieDialog"
      :close-on-click-modal="false"
      :lock-scroll="false"
      title="添加物料组"
      width="980px"
      custom-class="el-dialog__body-p0"
    >
      <div class="p8">
        <el-form ref="form" :model="formData" :rules="rules" :inline-message="true">
          <table class="from_table">
            <tr>
              <td>
                <el-form-item ref="biddingMaterialGroupId" label="物料组编码" prop="biddingMaterialGroupId" />
              </td>
              <td>
                <el-input v-model="formData.biddingMaterialGroupId" placeholder="物料组编码" disabled class="encowidth" />
                <template>
                  <el-button type="primary" @click="selectMaterial">
                    选择
                  </el-button>
                  <el-button @click="categoryTreeInfo('clear')">
                    清空
                  </el-button>
                </template>
              </td>
              <td>
                <el-form-item label="物料组名称" prop="biddingMaterialGroupName" />
              </td>
              <td>
                <el-input v-model="formData.biddingMaterialGroupName" disabled />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="型号" />
              </td>
              <td colspan="3">
                <el-input v-model="formData.biddingSectionEquipmentSpecs" placeholder="型号" style="width: 96%" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="数量" prop="biddingAmount" />
              </td>
              <td>
                <el-input
                  v-model="formData.biddingAmount"
                  placeholder="数量"
                  type="number"
                  oninput="value=value.replace(/[^\d]/g,'');if(value.length>15)value=value.slice(0,15)"
                />
              </td>
              <td>
                <el-form-item label="单位" prop="biddingMeterageUnit" />
              </td>
              <td>
                <el-input v-model="formData.biddingMeterageUnit" placeholder="单位" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="预算单价（元）" prop="schemeBudgetUnit" />
              </td>
              <td>
                <money :money-value="formData" name="schemeBudgetUnit" width="282.59px" />
              </td>
              <td>
                <el-form-item label="预算总价（元）" />
              </td>
              <td>
                <el-input v-model="formData.schemeBudgetSum" placeholder="预算总价（元）" disabled />
              </td>
            </tr>
          </table>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ensure('form')">确 定</el-button>
        <el-button @click="visibleMaterieDialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 品目树弹框-->
    <category-tree-dialog :dialog-data="dialogData" @categoryTreeInfo="categoryTreeInfo" />
  </div>
</template>

<script>
/* 接口*/
import { savePretenderingPurchasesPlan } from '@/api/purchasePlan/pretcloudPurchasescheme'
import { checkMoney, checkRate } from '@/assets/js/validate'
/* 公用方法*/
import { cloneObject } from '@assets/js/utils'// 常用方法
/* 组件*/
import categoryTreeDialog from '@/views/common/tools/categoryTree-dialog'// 产品分类品目树
import money from '@comp/common/money/money'// 金额
export default {
  name: 'MaterielDialog',
  components: {
    money, // 金额
    'category-tree-dialog': categoryTreeDialog
  },
  props: {
    // 接收步骤条父页面信息
    tenderPlanData: {
      type: Object,
      default: function() {
        return {
          id: ''
        }
      }
    }
  },
  data() {
    return {
      visibleMaterieDialog: false, // 弹框是否打开
      // 弹窗-展示/隐藏状态 true 展示/false 隐藏
      dialogData: {
        title: '选择物料', // 弹框标题
        dialog: false, // 供货范围
        onlyOneSelected: true, // 是否只能选最后一级且是单选
        selectCodes: [] // 当前选中的供货范围Code
      },
      formData: {
        biddingMaterialGroupId: '', // 物料组编码
        biddingMaterialGroupName: '', // 物料组名称
        biddingSectionEquipmentSpecs: '', // 型号
        biddingMeterageUnit: '', // 单位
        biddingAmount: '', // 数量
        schemeBudgetUnit: '', // 预算单价
        schemeBudgetSum: ''// 预算总价
      },
      rules: {
        biddingAmount: [{ required: true, message: '不能为空', trigger: 'blur' }, { validator: checkRate, trigger: 'blur' }], // 数量
        schemeBudgetUnit: [{ required: true, message: '不能为空', trigger: 'blur' }, { validator: checkMoney, trigger: 'blur' }], // 单价
        biddingMeterageUnit: [{ required: true, message: '不能为空', trigger: 'blur' }], // 单位
        biddingMaterialGroupId: [{ required: true, message: '不能为空', trigger: 'blur' }], // 物料组编码
        biddingMaterialGroupName: [{ required: true, message: '不能为空', trigger: 'blur' }]// 物料组名称
      }
    }
  },
  watch: {
    'formData.biddingAmount'(n) { // 监听数量
      if (n) {
        if (this.formData.schemeBudgetUnit) {
          this.formData.schemeBudgetSum = n * this.formData.schemeBudgetUnit
        }
      }
    },
    'formData.schemeBudgetUnit'(n) { // 监听预算单价
      if (n) {
        if (this.formData.biddingAmount) {
          this.formData.schemeBudgetSum = n * this.formData.biddingAmount
        }
      }
    }
  },
  methods: {
    // 打开弹框新增/编辑
    openMaterielDialog(tableData, row) {
      // row 为当前编辑行内容 为真表示编辑否则是新增
      if (row) {
        this.formData = cloneObject(row)// 深层拷贝物料信息编辑回显
      } else {
        Object.keys(this.formData).forEach(val => {
          this.formData[val] = ''
        })
      }
      this.visibleMaterieDialog = true
    },
    // 确定添加-- 单个物料保存
    ensure(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid) => {
        if (valid) { // 校验通过
          const params = {
            ...this.formData,
            schemeId: this.tenderPlanData.id // 招标计划id
          }
          savePretenderingPurchasesPlan(params).then(() => {
            this.visibleMaterieDialog = false
            this.$emit('getPurchasesPlan') // 保存成功重新获取列表数据
          }).catch(() => {
          })
        }
      })
    },
    /* ===========================添加物料租=======================*/
    // 选择物料组
    selectMaterial() {
      // 已选中的品目
      this.dialogData.selectCodes = this.formData.biddingMaterialGroupId && this.formData.biddingMaterialGroupId.split(',') || []
      this.dialogData.dialog = true
    },
    // 选择品目/清空品目树
    categoryTreeInfo(data) {
      if (data === 'clear') { // 清空
        this.formData.biddingMaterialGroupId = '' // 物料组编码
        this.formData.biddingMaterialGroupName = '' // 物料组名称
      } else { // 选择
        this.formData.biddingMaterialGroupId = data.keys // 物料组编码
        this.formData.biddingMaterialGroupName = data.labels // 物料组名称
      }
    }
  }
}
</script>

<style scoped lang="less">
  .encowidth{
    width: calc(100% - 150px)!important;
  }
  .from_table tr td:nth-child(odd){
    width: 20%!important;
  }
</style>
