<!--
  @description: 变更公告新增
  @Modifier: haoFx
  @routerPath: /bidding/projectDrive/changeBulletin/changeBulletinAdd
  @date: 2020/3/12-9:59
-->
<template>
  <div class="main">
    <el-form
      ref="fromData"
      :rules="rules"
      :model="formData"
      :inline-message="true"
    >
      <table class="from_table">
        <tr>
          <td>
            <el-form-item label="标段（包）" prop="isChangeTime" />
          </td>
          <td colspan="3">
            <changeBulletinPackComponent
              ref="packComp"
              :select-pack-list="formData.packInfo"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="公告标题" prop="title" />
          </td>
          <td colspan="3">
            <gx-input
              v-model.trim="formData.title"
              type="text"
              gx-maxlength="varchar200"
              placeholder="公告标题"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="是否变更时间" prop="isChangeTime" />
          </td>
          <td colspan="3">
            <el-radio-group v-model="formData.isChangeTime" @change="handleIsChangeTime">
              <el-radio label="01">
                变更
              </el-radio>
              <el-radio label="00">
                不变更
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr :class="{isshow:formData.isChangeTime === '00'}">
          <td>
            <el-form-item label="澄清截止时间" prop="newAcceptAnsweringQuestionsEndTime" />
          </td>
          <td>
            <el-date-picker
              v-model="formData.newAcceptAnsweringQuestionsEndTime"
              :format="elValueFormat"
              :default-time="defaultTimeDateTime"
              :value-format="elValueSaveFormat"
              type="datetime"
              placeholder="选择日期时间"
              @change="changeBulletinTime('clarificationEndTIme')"
            />
          </td>
          <td>
            <el-form-item label="投标截止时间及开标时间" prop="newOpenBidStartTime" />
          </td>
          <td>
            <el-date-picker
              v-model="formData.newOpenBidStartTime"
              :format="elValueFormat"
              :default-time="defaultTimeDateTime"
              :value-format="elValueSaveFormat"
              type="datetime"
              placeholder="选择日期时间"
              @change="changeBulletinTime('openBidStartTime')"
            />
          </td>
        </tr>
        <tr v-show="formData.isChangeTime === '01'">
          <td>
            <el-form-item label="标书获取时间" prop="tenderDocumentReceiveTime" />
          </td>
          <td colspan="3">
            <el-date-picker
              v-model="formData.tenderDocumentReceiveTime[0]"
              :clearable="false"
              :picker-options="disabledPickerOptions"
              :format="elValueFormat"
              :value-format="elValueSaveFormat"
              :default-time="defaultTimeDateTime"
              style="width:210px"
              type="datetime"
              placeholder="开始日期"
              @change="changeBulletinTime('startTime')"
            />
            至
            <el-date-picker
              v-model="formData.tenderDocumentReceiveTime[1]"
              :clearable="false"
              :picker-options="disabledPickerOptions"
              :format="elValueFormat"
              :default-time="defaultTimeDateTime"
              :value-format="elValueSaveFormat"
              style="width:210px"
              type="datetime"
              placeholder="结束日期"
              @change="changeBulletinTime('endTime')"
            />
            <span style="padding-left: 10px;">共
              <span v-if="tenderDocumentReceiveDays===''" style="padding-left: 16px" />
              <span style="padding: 0 4px">{{ tenderDocumentReceiveDays }}</span>天
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="变更公告内容" />
          </td>
          <td colspan="3">
            <gx-input
              v-model="formData.remarks"
              :autosize="{ minRows: 6, maxRows: 6}"
              type="textarea"
              placeholder="请输入内容"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <el-button :loading="confirmLoading" type="primary" @click="saveNextStep()">
          保存，进入下一步
        </el-button>
        <!--驱动进入变更公告显示返回  01 工作流进入驳回编辑则不显示返回-->
        <el-button v-if="!flowStatus" @click="back">
          返 回
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* 接口*/
import { addChangeBulletin, selectStageTimeRuleInfoByStageId } from '@/api/bidding/changeBulletin'
import { validateInput, characters1_50 } from '@/assets/js/validate'// 校验输入内容
/* 选择标包组件*/
import changeBulletinPackComponent from './changeBulletinPackComponent'
/* 混入公共方法 */
import { tenderStageTimeRule } from '@/views/bidding/bulletin/mixins/tenderStageTimeRule.js' // 招标公共
import { changeBulletinCommon } from './mixins/changeBulletinCommon'
export default {
  name: 'ChangeBulletinAdd',
  components: {
    changeBulletinPackComponent
  },
  mixins: [tenderStageTimeRule, changeBulletinCommon],
  data() {
    return {
      tenderBase: this.$store.getters.tenderBase, // 项目信息
      stageType: '', // 资格审查方式 00 资审 01 后审  （使用招标公告规则时需要）
      tenderDocumentReceiveDays: '', // 标书获取开始时间-标书获取截止时间时间差 天数
      formData: {
        isChangeTime: '00' // 是否变更时间 00:否 01:是
      },
      isSubmit: '00', // 是否提交 00否 01是
      // 校验
      rules: {
        title: [{ required: true, validator: characters1_50, trigger: 'blur' }, { validator: validateInput, trigger: 'blur' }], // 标题
        isChangeTime: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  watch: {
    // 标书获取时间
    'formData.tenderDocumentReceiveTime'(val) {
      if (val[0] && val[1]) {
        this.tenderDocumentReceiveDays = this.momentDiff('days', val[0], val[1])// 时间差
      } else {
        this.tenderDocumentReceiveDays = ''
      }
    },
    // 已选择的标段（包）
    'formData.packInfo': {
      handler: function(val) {
        // 设置 资格审查方式 （使用招标公告规则时需要）
        this.stageType = val[0] && val[0].stageType
      },
      deep: true
    }
  },
  methods: {
    /*
     * 选择时间change事件-时间规则校验
     * type: clarificationEndTIme 澄清截止时间
     *       openBidStartTime 投标时间及开标时间
     *       startTime 标书获取开始时间
     *       endTime 标书获取截止时间
     *       next 保存，进行下一步时
    */
    changeBulletinTime(type) {
      // 标书获取开始时间
      this.formData.newTenderDocumentReceiveStartTime = this.formData.tenderDocumentReceiveTime[0]
      // 标书获取截止时间
      this.formData.newTenderDocumentReceiveEndTime = this.formData.tenderDocumentReceiveTime[1]
      const data = {
        tenderDocumentReceiveStartTime: this.formData.newTenderDocumentReceiveStartTime, // 标书获取开始时间
        tenderDocumentReceiveEndTime: this.formData.newTenderDocumentReceiveEndTime, // 标书获取结束时间
        acceptAnsweringQuestionsEndTime: this.formData.newAcceptAnsweringQuestionsEndTime, // 澄清截止时间
        submitEndTime: this.formData.newOpenBidStartTime// 投标截止时间及开标时间
      }
      if (type === 'clarificationEndTIme') {
        // 澄清截止时间-时间规则校验
        this.acceptAnsweringQuestionsEndTimeRule(data)
      } else if (type === 'openBidStartTime') {
        // 投标时间及开标时间-时间规则校验
        this.submitEndTimeRule(data)
      } else if (type === 'startTime') {
        // 标书获取开始时间-时间规则校验
        this.tenderDocumentReceiveStartTimeRule(data)
      } else if (type === 'endTime') {
        // 标书获取截止时间-时间规则校验
        this.tenderDocumentReceiveEndTimeRule(data)
      } else if (type === 'next') {
        // 判断招标公告校验时间、非招标公告不需要校验
        if (this.tenderBase.tenderMethod === '00' || this.tenderBase.tenderMethod === '01') {
          // 点击下一步，保存
          return this.tenderStageTimeRule(data)
        } else {
          return new Promise((resolve, reject) => {
            resolve()
          })
        }
        // 保存，进行下一步
        // return this.tenderStageTimeRule(data)
      }
    },
    // 获取已选标段阶段id集合
    getPackIds() {
      const stageId = []// 阶段id集合
      this.formData.packInfo.map(item => {
        stageId.push(item.stageId)// 阶段id集合
      })
      return stageId
    },
    // 选择是否变更时间
    handleIsChangeTime(val) {
      // 未选择标包时不可变更
      if (this.formData.packInfo.length < 1 && val === '01') {
        this.formData.isChangeTime = '00'
        if (!this.$refs.packComp.isCheck()) {
          return // 校验是否选择标段（包）
        }
      } else {
        // 选择变更
        if (val === '01') {
          this.selectStageTimeRuleInfo()
        } else {
          // 不变更清空
          this.formData.newTenderDocumentReceiveEndTime = ''
          this.formData.newAcceptAnsweringQuestionsEndTime = ''
          this.formData.newOpenBidStartTime = ''
        }
      }
    },
    // 根据阶段id集合查询时间规则信息
    selectStageTimeRuleInfo() {
      const data = {
        stageId: this.getPackIds()
      }
      selectStageTimeRuleInfoByStageId(data).then(res => {
        const data = res.data && res.data[0]
        // 原始标书获取开始时间
        this.formData.newTenderDocumentReceiveStartTime = this.formData.newTenderDocumentReceiveStartTime || data.tenderDocumentReceiveStartTime // 开始时间
        this.formData.newTenderDocumentReceiveEndTime = this.formData.newTenderDocumentReceiveEndTime || data.tenderDocumentReceiveEndTime // 结束时间
        this.formData.tenderDocumentReceiveTime = [
          this.formData.newTenderDocumentReceiveStartTime, // 开始时间
          this.formData.newTenderDocumentReceiveEndTime// 结束时间
        ]
        // 原始接收答疑开始时间
        this.formData.newAcceptAnsweringQuestionsEndTime = this.formData.newAcceptAnsweringQuestionsEndTime || data.acceptAnsweringQuestionsEndTime
        // 原始开标时间
        this.formData.newOpenBidStartTime = this.formData.newOpenBidStartTime || data.openBidStartTime
      }).catch(() => {

      })
    },
    // 保存接口
    saveData() {
      // 校验输入内容
      this.$refs.fromData.validate((valid, field) => {
        if (valid) { // 校验通过
          const data = this.assemblyData()// 保存组装数据
          delete data.content
          this.confirmLoading = true
          addChangeBulletin(data).then(response => {
            const pathData = {
              ...this.$route.query,
              changeBulletinId: response.data.changeBulletinId // 变更公告id
            }
            // 是否使用工具制作 systemSourceType // 01 工具制作模式 00 平台制作模式
            if (this.systemSourceType === '01') {
              // 使用工具
              this.$router.push({
                path: this.changeBulletinPath.toolMakeChangeBulletinPath, // 工具制作路由
                query: {
                  ...this.$route.query,
                  ...pathData
                }
              })
            } else {
            // 不使用工具
              this.$router.push({
                path: this.changeBulletinPath.makeChangeBulletinPath, // 路径动态变更（工作流和驱动两种路由）
                query: {
                  ...pathData
                }
              })
            }
            this.confirmLoading = false// btnLoding
          }).catch(() => {
            this.confirmLoading = false// btnLoding
          })
        }
      })
    },
    // 保存下一步
    saveNextStep() {
      if (!this.$refs.packComp.isCheck()) {
        return // 校验是否选择标段（包）
      }
      if (this.formData.isChangeTime === '01') {
        // 变更时间校验时间范围
        this.changeBulletinTime('next').then(() => {
          this.saveData()
        })
      } else {
        // 不变更时间
        this.saveData()
      }
    },
    // 返回
    back() {
      this.$router.push({
        path: '/bidding/projectDrive/changeBulletin/changeBulletinList',
        query: {
          ...this.$route.query
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .isshow{
    visibility: collapse;
  }
  /deep/.reset-date-picker{
    input:first-of-type{
      text-align: left;
    }
  }
</style>
