<!--
  @description: 采购公告
  @author: qk
  @routerPath:
  @date: 2020-2-24 16:03:58
-->
<template>
  <div>
    <div v-if="flgsPrve" class="projectInfoAdd_main md16">
      <section style="width: 90%;margin-left: 3%;">
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          :label-position="labellocaltion"
          label-width="120px"
        >
          <el-row :gutter="40">
            <el-col :md="24" :lg="12">
              <div class="page-title">
                1.公告标题
              </div>
            </el-col>
          </el-row>
          <table class="from_table">
            <tr>
              <td style="width:3%">
                <el-form-item label="公告标题" prop="title">
                  <label slot="label" style="padding-left:20px;">公告标题</label>
                </el-form-item>
              </td>
              <td>
                <el-input v-model="formData.title" />
              </td>
            </tr>
          </table>
          <el-row :gutter="40" class="mt10 mb10">
            <el-col :md="24" :lg="24" style="margin-top: 10px">
              <span class="page-title">2.报价需响应的条件</span>
              <el-button style="margin: 0 10px" type="primary" @click="addRow">
                添加条件
              </el-button>
              <span style="font-size: 12px; color: #F42233">注：供应商报价时须对响应条件回复，否则无法完成报价</span>
            </el-col>
          </el-row>
          <!-- 报价响应条件-->
          <el-table
            :data="formData.procurementBulletinConditionList"
            border
            class="tableLimit mtp"
          >
            <el-table-column type="index" label="序号" width="60" align="center" fixed />
            <el-table-column header-align="center" align="center" width="110" fixed>
              <template slot="header" slot-scope="scope">
                <span>条件名称</span>
              </template>
              <template slot-scope="scope">
                <el-form v-if="scope.row.state" ref="ruleForm" :model="scope.row" :rules="rules">
                  <el-form-item prop="conditionName">
                    <el-input
                      v-model="scope.row.conditionName"
                      placeholder="条件名称"
                      maxlength="200"
                      size="mini"
                      clearable
                    />
                  </el-form-item>
                </el-form>
                <span v-else v-text="scope.row.conditionName" />
              </template>
            </el-table-column>
            <el-table-column header-align="center" fixed>
              <template slot="header" slot-scope="scope">
                <span>条件内容</span>
              </template>
              <template slot-scope="scope">
                <el-row v-if="scope.row.ipType ==='ipt'">
                  <el-form
                    ref="ruleForm"
                    :model="scope.row"
                    :rules="rules"
                    :inline-message="true"
                    class="demo-ruleForm"
                  >
                    <el-form-item prop="conditionContent">
                      <el-input
                        v-model="scope.row.conditionContent"
                        type="textarea"
                        maxlength="100"
                        show-word-limit
                        style="width: 96%"
                      />
                    </el-form-item>
                  </el-form>
                </el-row>
                <el-row v-else-if="scope.row.ipType ==='select'" type="flex">
                  <el-row
                    v-if="scope.row.extent==='time'"
                    style="width:100%; display:flex; align-items: center"
                  >
                    <el-select
                      v-model="scope.row.deliveryDateType"
                      clearable
                      placeholder="请选择"
                      style="width:30%"
                      class="mr10"
                    >
                      <el-option
                        v-for="item in deliveryTime"
                        :key="item.typecode"
                        :label="item.typename"
                        :value="item.typecode"
                      />
                    </el-select>
                    <el-form
                      v-if="scope.row.deliveryDateType==='00'"
                      ref="ruleForm"
                      :model="scope.row"
                      :rules="rules"
                      :inline-message="true"
                      style="width:50%"
                    >
                      <el-form-item prop="conditionContent">
                        <el-input
                          v-model="scope.row.conditionContent"
                          clearable
                          placeholder="请输入对供应商交货时间的要求"
                          style="width:50%"
                        />
                      </el-form-item>
                    </el-form>
                    <span v-if="scope.row.deliveryDateType==='01'">提示: 供应商报价时需要填写交货时间. 否则无法提交报价</span>
                    <span v-if="scope.row.deliveryDateType==='02'">提示: 不限制供应商的交货时间</span>
                  </el-row>
                  <el-row
                    v-if="scope.row.extent==='way'"
                    style="width:100%; display:flex; align-items: center"
                  >
                    <el-select
                      v-model="scope.row.payType"
                      clearable
                      placeholder="请选择"
                      style="width:30%"
                      class="mr10"
                    >
                      <el-option
                        v-for="item in payData"
                        :key="item.typecode"
                        :label="item.typename"
                        :value="item.typecode"
                      />
                    </el-select>
                    <el-form
                      v-if="scope.row.payType==='00'"
                      ref="ruleForm"
                      :model="scope.row"
                      :rules="rules"
                      :inline-message="true"
                      style="width:50%"
                    >
                      <el-form-item prop="conditionContent">
                        <el-input
                          v-model="scope.row.conditionContent"
                          clearable
                          placeholder="请输入对付款方式的要求"
                          style="width:50%"
                        />
                      </el-form-item>
                    </el-form>
                    <span v-if="scope.row.payType==='01'">提示: 供应商报价是需要填写收款方式. 否则无法提交报价</span>
                    <span v-if="scope.row.payType==='02'">提示: 确认成交人后可协商付款方式</span>
                  </el-row>
                </el-row>
                <el-row v-else>
                  <el-form ref="ruleForm" :model="scope.row" :rules="rules">
                    <el-form-item prop="conditionContent">
                      <el-input
                        v-model="scope.row.conditionContent"
                        clearable
                        placeholder="请输入条件内容"
                        style="width:50%"
                      />
                    </el-form-item>
                  </el-form>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" width="60" fixed>
              <template slot="header" slot-scope="scope">
                <span>操作</span>
              </template>
              <template slot-scope="scope">
                <el-link
                  :underline="false"
                  type="primary"
                  @click="detailRow(scope.row,scope.$index)"
                >
                  [删除]
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- 补充说明-->
          <el-row :gutter="40" class="mt10 mb10">
            <el-col :md="24" :lg="12">
              <div class="page-title">
                3.补充说明
              </div>
            </el-col>
          </el-row>
          <table class="from_table">
            <tr>
              <td style="width:3%">
                <el-form-item label="注意事项">
                  <label slot="label" style="padding-left:20px;">注意事项</label>
                </el-form-item>
              </td>
              <td>
                <el-input
                  v-model="formData.mattersNeedingAttention"
                  :autosize="{ minRows: 2, maxRows: 2 }"
                  type="textarea"
                  maxlength="300"
                  show-word-limit
                  placeholder="请输入内容"
                  style="width: 96%"
                />
              </td>
            </tr>
          </table>
        </el-form>
      </section>
    </div>

    <!--保存按钮-->
    <div v-if="flgsPrve" class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <!-- 上一步 -->
          <el-button @click="prevStep">
            上一步
          </el-button>
          <!-- 保存 -->
          <el-button @click="saveData('save','ruleForm')">
            {{ language.keep }}
          </el-button>
          <!-- 公告预览 -->
          <el-button type="primary" @click="prvew('next','ruleForm')">
            公告预览
          </el-button>
        </div>
      </div>
    </div>
    <temPlate
      v-if="!flgsPrve"
      :titles="titles"
      :text="text"
      :form-data="prevwDatas"
      @updates="updates"
    />
  </div>
</template>

<script>
/* 接口
  查询采购项目基本信息
  采购公告 - 删除响应条件
* */
import {
  queryBaseProcurementProjectInfo,
  deleteCondition
} from '@/api/procurement/procurementProject'
/* 接口
  查询公告
  保存公告
  预览公告模板
* */
import {
  queryBaseProcurementBulletinInfo,
  saveBaseProcurementBulletinInfo,
  previewProcurementBulletinTemplate
} from '@/api/procurement/procurementBulletin'
/* 公用方法*/
import { characters1_50 } from '@/assets/js/validate' // 校验输入内容
/* 组件*/
import temPlate from '../projectTemPlate/projectTemPlate-add'
// vuex
import { mapGetters } from 'vuex'
/* 常用方法*/
import { cloneObject } from '@assets/js/utils' // 常用方法
/** 引入字典**/
import { procurementProjectMixins } from '../mixins/procurementProjectMixins.js'
import { procurementProjectGroupMixin } from '../mixins/procurementProjectGroupMixin'
export default {
  name: 'ProcurementProjectAdd',
  components: {
    temPlate
  },
  mixins: [procurementProjectMixins, procurementProjectGroupMixin],
  props: {
    // 弹框展示状态bu
    statusc: {
      type: String,
      default: function() {}
    }
  },
  data() {
    return {
      tenderMethod: '',
      documentMethodList: [], // 采购方式
      prevwDatas: {},
      titles: '',
      flgsPrve: true, // 公告预览
      labellocaltion: 'left',
      estimateSave: false, // 判断是否保存
      formData: {
        id: '', // 公告id
        mattersNeedingAttention: '', // 注意事项
        bulletinType: '', // 公告类型
        content: '', // 公告内容
        contentText: '', // 公告内容文本
        makeWay: '01', // 制作方式00: 工具 01 系统生成
        instructionsForQuotation: '', // 公告备注，可以写报名资质要求、附件要求等
        status: '', // 状态 00:保存 01:提交
        tenderId: this.$route.query.id,
        title: '', // 公告标题
        procurementBulletinConditionList: [] // 报价响应数据
      },
      // 校验规则
      rules: {
        title: [{ required: true, validator: characters1_50, trigger: 'blur' }], // 公告标题
        conditionName: [
          { required: true, validator: characters1_50, trigger: 'blur' }
        ], // 条件名称
        conditionContent: [
          { required: true, validator: characters1_50, trigger: 'blur' }
        ] // 条件内容
      },
      prevwData: {
        tenderId: this.$route.query.id,
        mattersNeedingAttention: '', // 注意事项
        instructionsForQuotation: '', // 公告备注，可以写报名资质要求、附件要求等
        title: '' // 公告标题
      },
      text: '' // 采购标题文本
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  watch: {},
  created() {
    // 调用采购立项的公用字典
    this.inCodes().then(res => {
      this.documentMethodList = res.data.protprojectPurchaseMode.typeList // 获取采购方式
    })
    const tenterId = this.$route.query.id // 采购项目信息Id
    if (tenterId) {
      // 编辑时
      // 查询采购项目信息
      if (this.statusc === '10' || this.statusc === '14') {
        this.formData.tenderId = this.$route.query.id // 项目id
        this.initData(tenterId)
        this.initQueryBase(tenterId)
      }
    }
  },
  methods: {
    // 页面初始化数据
    initQueryBase(tenterId) {
      queryBaseProcurementProjectInfo({ tenterId: tenterId }).then(res => {
        let text = res.data.tenderMethod
        this.formData.bulletinType = res.data.tenderMethod
        this.text = res.data.tenderMethod
        this.tenderMethod = res.data.tenderMethod
        // 根据状态判断 公告类型/ 邀请函
        if (text === '10') {
          text = '采购公告'
        }
        if (text === '11' || text === '15') {
          text = '邀请函'
        }
        if (text === '12') {
          text = '竞谈公告'
        }
        if (text === '13') {
          text = '磋商公告'
        }
        if (text === '14') {
          text = '竞价公告'
        }
        if (text === '16') {
          text = '单一来源邀请函'
        }
        this.formData.title = `【${res.data.tenderName}】${text}`
      })
    },
    updates() {
      this.flgsPrve = true
      this.estimateSave = false // 初始化保存变量的状态
    },
    // 编辑获取采购公告
    initData(tenterId) {
      queryBaseProcurementBulletinInfo(tenterId).then(response => {
        if (this.tenderMethod !== this.$route.query.inittenderMethod) {
          response.data.procurementBulletinConditionList = null
        }
        // 初始化响应数据
        if (
          response.data.procurementBulletinConditionList === null ||
          response.data.procurementBulletinConditionList.length === 0
        ) {
          this.formData = response.data
          this.formData.procurementBulletinConditionList = this.noticeDatas
        } else {
          this.formData = response.data
        }
        this.prevwDatas = this.assemblyData()
        this.prevwData.title = response.data.title
        this.prevwData.mattersNeedingAttention =
          response.data.mattersNeedingAttention
        this.prevwData.instructionsForQuotation =
          response.data.instructionsForQuotation
      })
    },
    // 公告预览
    prvew(type, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveData(type, formName)
        } else {
          return false
        }
      })
    },
    // 保存组装数据
    assemblyData() {
      const data = {
        id: this.formData.id, // id
        packId: this.formData.packId,
        bulletinTemplateId: this.formData.bulletinTemplateId,
        mattersNeedingAttention: this.formData.mattersNeedingAttention, // 补充说明
        tenderId: this.formData.tenderId, // 项目id
        title: this.formData.title, // 标题
        procurementConditionDtoList: this.formData
          .procurementBulletinConditionList // 响应条件
      }
      return data
    },
    // 保存数据
    saveData(type, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveNoticeData() // 调用保存数据方法
          this.initQueryBase(this.$route.query.id) // 调用加载数据方法
          // 获取公告文本
          previewProcurementBulletinTemplate(this.formData).then(res => {
            this.titles = res.data
          })
          if (type === 'save') {
            this.formData.status = '00'
            this.initData(this.$route.query.id) // 获取公告信息
          } else if (type === 'next') {
            this.flgsPrve = false
          }
        } else {
          return false
        }
      })
    },
    // 上一步
    prevStep() {
      // route携带参数
      const pathData = {
        id: this.$route.query.id
      }
      this.$emit('stepPage', 'prev', pathData) // 步骤条切换方法 prev 上一步
    },
    // 添加
    addRow() {
      const data = cloneObject(this.addData) // 深层拷贝
      this.formData.procurementBulletinConditionList.push(data)
    },
    // 删除
    detailRow(row, ind) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      })
        .then(() => {
          // id存在表示保存过的
          if (row.id) {
            this.DeleteCondition(row.id) // 调用删除方法
            this.initData(this.$route.query.id)
          } else {
            // 未保存的状态
            this.formData.procurementBulletinConditionList.splice(ind, 1)
          }
        })
        .catch(() => {})
    },
    // 保存公告数据方法
    async saveNoticeData() {
      const data = this.assemblyData() // 组装数据
      const res = await saveBaseProcurementBulletinInfo(data)
      this.formData.tenderId = res.data // 项目Id ??
      this.initData(this.$route.query.id) // 调用编辑数据方法
    },
    // 删除响应条件方法
    DeleteCondition(id) {
      deleteCondition(id)
        .then(res => {})
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.show-word-limit-padding {
  .el-input__inner {
    padding-right: 70px;
  }
}
/deep/.el-form {
  height: 32px;
}
/deep/.el-input--small .el-input__inner {
  height: 30px;
}
</style>
