<!--
  @description: 招标-招标公告-监督部门
  @Modifier: 肖文龙
  @routerPath:/bidding/projectDrive/bulletin/tabs/bulletinMonitorDepName-add
  @date: 2020/1/2-10:11
-->
<template>
  <div>
    <div>
      <div style="width: 90%;margin-left: 4%;">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="140px"
          @submit.native.prevent
        >
          <el-row>
            <el-col :span="20">
              <!--监督部门-->
              <el-form-item
                ref="tenderMonitorDepName"
                label="监督部门"
                prop="tenderMonitorDepName"
              >
                <gx-input
                  v-model.trim="formData.tenderMonitorDepName"
                  gx-maxlength="varchar200"
                  placeholder="无监督部门填写\"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-but">
        <el-button @click="prevStep">
          上一步
        </el-button>
        <el-button :loading="confirmLoading" type="primary" @click="nextStep('form')">
          暂存，进入下一步
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* 接口*/
import { queryBulletinMonitorDepName, saveBullecinMonitorDepName } from '@/api/bidding/bidBulletin'
/* 公用方法*/
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
/* 混合开发方法-参数字段*/
import { openInfoDecryptMethodConfig } from '../mixins/openInfoDecryptMethodConfig' // 监督部门配置
export default {
  name: 'BulletinMonitorDepNameAdd',
  mixins: [openInfoDecryptMethodConfig],
  data() {
    return {
      confirmLoading: false,
      formData: {
        bulletinId: this.$route.query.bulletinId, // 公告Id
        tenderMonitorDepName: ''// 监督部门
      },

      // 校验输入内容
      rules: {
        tenderMonitorDepName: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 监督部门
      }
    }
  },
  mounted() {
    this.initQueryBulletinMonitor()
  },
  methods: {
    // 获取公告监督部门
    initQueryBulletinMonitor() {
      if (!this.formData.bulletinId) return
      queryBulletinMonitorDepName(this.formData.bulletinId).then((response) => {
        this.formData = response.data
        if (!this.formData.tenderMonitorDepName) {
          // 获取监督部门配置
          this.getSystemConfigTenderMonitorDepName()
        }
      })
    },
    // 保存数据接口 暂存，下一步
    saveData(type) {
      this.confirmLoading = true// btnLoding
      // 保存公告监督部门
      saveBullecinMonitorDepName(this.formData).then(response => {
        // route携带参数
        const pathData = {
          ...this.$route.query
        }
        if (type === 'draft') return false// 判断是否-点击步骤条切换-如果是则不执行next下一步
        this.$emit('stepPage', 'next', pathData)// 步骤条切换方法 next 下一步
        this.confirmLoading = false// btnLoding
      }).catch(() => {
        this.confirmLoading = false// btnLoding
      })
    },
    // 上一步
    prevStep() {
      // router携带参数
      const pathData = {
        ...this.$route.query
      }
      this.$emit('stepPage', 'prev', pathData)// 步骤条切换方法 prev 上一步
    },
    // 下一步
    nextStep(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.saveData()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
