<!--
  @description: 集约化评标明细-批量填写分组名称
  @author:肖文龙
  @date: 2020年3月11日15:15:13
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogData.dialog"
      :close-on-click-modal="false"
      title="批量分组名称"
      width="440px"
      custom-class="el-dialog__body-p0"
      top="calc((100vh - 301px) / 2)"
    >
      <section class="main" style="margin-bottom: 10px;">
        <el-form ref="formData" :model="formData" :rules="rules">
          <el-form-item ref="groupName" label="分组名称" label-width="110px" prop="groupName">
            <el-input v-model="formData.groupName" style="width: 280px" />
          </el-form-item>
        </el-form>
      </section>
      <!--底部操作按钮-->
      <span slot="footer" style="text-align: center" class="dialog-footer">
        <div style="text-align: center">
          <el-button type="primary" @click="confirm">确 定</el-button>
          <el-button @click="dialogData.dialog = false">取 消</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* 公共方法*/
import { cloneObject } from '@/assets/js/utils'// 常用方法
import { validateInput } from '@/assets/js/validate'// 校验
/* 混合开发*/
export default {
  name: 'FillInGroupNameAllDialog',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false // 弹窗状态
        }
      }
    }
  },
  data() {
    return {
      formData: {
        groupName: '', // 分组名称
        planIds: []// 评标计划id集合
      },
      // 必填校验
      rules: {
        groupName: [{ required: true, validator: validateInput, trigger: 'blur' }] // 分组名称
      }
    }
  },
  methods: {
    // 确定
    confirm() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.$emit('fillInGroupNameAllInfo', cloneObject(this.formData))// 深拷贝
          this.formData.groupName = ''// 分组名称
          this.dialogData.dialog = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
