  <!--
  @description: 采购邀请函
  @author: qk/gmy
  @routerPath:
  @date: 2020-6-6 18:23:58
-->
<template>
  <div>
    <div v-if="flgsPrve" class="projectInfoAdd_main md16">
      <section>
        <div class="fl" style="margin-bottom:20px;">
          <span class="page-title">1.邀请供应商</span>
          <el-button type="primary" style="margin-left:10px;" @click="addClick">
            添加供应商
          </el-button>
        </div>
        <el-table
          :data="queryProcurementInvitatinDetailVoList"
          border
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          />
          <el-table-column
            header-align="center"
            align="left"
            label="供应商"
            prop="supplierName"
          />
          <el-table-column
            header-align="center"
            align="center"
            label="统一社会信用代码"
            prop="businesslicence"
          />
          <el-table-column
            header-align="center"
            align="center"
            label="联系人"
            prop="linkerName"
          />
          <el-table-column
            header-align="center"
            align="center"
            label="联系方式"
            prop="linkerTel"
          />
          <el-table-column
            header-align="center"
            label="操作"
            align="center"
            width="130"
          >
            <template slot-scope="scope">
              <el-link
                size="mini"
                plain
                type="primary"
                @click="deleteRow(scope.row)"
              >
                [移除]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="initSupplier" />
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          :label-position="labellocaltion"
          label-width="100px"
        >
          <el-row :gutter="40">
            <el-col :md="24" :lg="12">
              <p class="page-title">
                2.邀请函标题
              </p>
            </el-col>
          </el-row>
          <!--邀请函标题-->
          <table class="from_table">
            <tr>
              <td style="width:5%">
                <el-form-item ref="title" label="邀请函标题" prop="title">
                  <label slot="label">邀请函标题</label>
                </el-form-item>
              </td>
              <td>
                <el-input v-model="formData.title" />
              </td>
            </tr>
          </table>
          <el-row :gutter="40">
            <el-col :md="24" :lg="24" class="mt10 mb10">
              <span class="page-title ">3.报价须响应条件</span>
              <el-button class="m10" type="primary" @click="addRow">
                添加条件
              </el-button>
              <span style="font-size: 12px; color: #F42233">注：供应商报价时须对响应条件回复，否则无法完成报价</span>
            </el-col>
          </el-row>
          <el-table
            :data="formData.procurementInvitationConditionList"
            border
            class="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">
            <el-col :md="24" :lg="12">
              <div class="page-title">
                4.补充说明
              </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>
    <!-- 添加供应商弹框 -->
    <projectInfoDialog :dialog-data="dialogData" @consignContractInfo="consignContractInfo" />
    <temPlate v-if="!flgsPrve" :titles="titles" :text="text" :form-data="prevwDatas" @updates="updates" />
  </div>
</template>

<script>
/* 接口*/
import { queryProcurementInvitatinByTenderId, saveProcurementInvitatin, queryBaseProcurementProjectInfo, saveProcurementInvitatinDetailSupplierList, queryProcurementInvitatinDetailPage, removeProcurementInvitatinDetailSupplier, previewProcurementInvitatinTemplate, deleteCondition } from
  '@/api/procurement/procurementProject'// 暂存 ，获取
/* 公用方法*/
import pagination from '@comp/common/pagination/pagination'// 分页
import projectInfoDialog from './InvitationPurchase-dialog'
import { characters1_50 } from '@/assets/js/validate'// 校验输入内容
/* 常用方法*/
import { cloneObject } from '@assets/js/utils'// 常用方法
/* 混合开发*/
import { procurementProjectGroupMixin } from
  '@/views/procurement/procurementProject/mixins/procurementProjectGroupMixin'// 立项采购-字典
import { procurementProjectMixins } from
  '@/views/procurement/procurementProject/mixins/procurementProjectMixins'// 立项采购-公用方法参数
/* 组件*/
import temPlate from '../projectTemPlate/projectTemPlate-add'
// vuex
import { mapGetters } from 'vuex'
export default {
  name: 'ProcurementProjectAdd',
  components: {
    pagination, // 分页
    projectInfoDialog,
    temPlate
  },
  mixins: [procurementProjectGroupMixin, procurementProjectMixins],
  props: {
    // 弹框展示状态bu
    statusc: {
      type: String,
      default: function() {

      }
    }
  },
  data() {
    return {
      text: '',
      titles: '', // 公告内容
      condition: '', // 区分采购公告与邀请函的公告的状态码 00代表公告 01 代表邀请函公告
      prevwDatas: {},
      supperForm: { // 查询供应商列表
        tenderId: this.$route.query.id
      },
      // 校验规则
      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' }] // 条件内容
      },
      supplerlist: { // 调用保存供应商接口
        list: [],
        tenderId: this.$route.query.id
      },
      flgsPrve: true, // 公告预览
      labellocaltion: 'left',
      formData: {
        departId: '', // 审核单位id
        bulletinType: '', // 状态
        contentText: '', // 邀请函内容文本
        mattersNeedingAttention: '', // 注意事项
        id: '', // 邀请函id
        makeWay: '01', // 制作方式 00:工具 01:手工上传
        remark: '', // 公告备注，可以写报名资质要求、附件要求等
        status: '', // 状态 00:保存 01:提交
        tenderId: this.$route.query.id,
        title: '', // 公告标题
        instructionsForQuotation: '', // 报价须知
        procurementInvitationConditionList: [] // 初始化响应条件数据
      },
      tenderMaterielInfoList: [],
      dialogData: {
        consignContractVisible: false, // 添加供应商
        departId: '', // 审核单位id
        excludeSupplierIds: '' // 已被邀请供应商所有id拼接的字符串
      },
      status: '',
      queryProcurementInvitatinDetailVoList: [], // 供应商列表
      prevwData: {
        tenderId: this.$route.query.id,
        mattersNeedingAttention: '', // 注意事项
        procurementConditionDtoList: '', // 公告备注，可以写报名资质要求、附件要求等
        title: '' // 公告标题
      }
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  watch: {
  },
  created() {
    const tennerId = this.$route.query.id// 采购项目信息Id
    if (tennerId) {
      // 编辑时
      // 查询邀请函信息
      if (this.statusc === '11' || this.statusc === '15' || this.statusc === '16' || this.statusc === '12' || this.statusc === '13') {
        this.initSupplier() // 调用查询邀请函详情
        this.initData(tennerId)
        this.initQueryProcure(tennerId)
      }
    }
  },
  methods: {
    updates() {
      this.flgsPrve = true
      this.estimateSave = false // 初始化保存变量的状态
    },
    // 根据状态判断 公告类型/ 邀请函
    initQueryProcure(tennerId) {
      queryBaseProcurementProjectInfo({ tennerId: tennerId }).then(res => {
        let text = 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}`
        this.text = res.data.tenderMethod
      })
    },
    // 查询邀请函详情
    initSupplier() {
      queryProcurementInvitatinDetailPage(this.supperForm).then(res => {
        this.queryProcurementInvitatinDetailVoList = res.data.records
        this.paginationData.total = res.data.total
      })
    },
    // 编辑获取采购项目信息
    initData(tennerId) {
      queryProcurementInvitatinByTenderId(tennerId).then((response) => {
        // 初始化响应数据
        if (response.data.procurementInvitationConditionList === null || response.data.procurementInvitationConditionList.length === 0) {
          this.formData = response.data
          this.formData.procurementInvitationConditionList = this.qouteData
        } else {
          this.formData = response.data
        }
        this.prevwDatas = this.assemblyData()
        this.dialogData.departId = response.data.departId // 审核单位id
        this.dialogData.excludeSupplierIds = response.data.excludeSupplierIds // 已被邀请供应商所有id拼接的字符串
        this.prevwData.title = response.data.title
        this.prevwData.mattersNeedingAttention = response.data.mattersNeedingAttention
        this.qouteData = response.data.procurementInvitationConditionList
      })
    },
    // 移除
    deleteRow(item) {
      removeProcurementInvitatinDetailSupplier(item.id, this.$route.query.id).then(res => {
        this.initSupplier()
        this.initData(this.$route.query.id)
        this.$message({
          message: '供应商移除成功',
          type: 'success'
        })
      })
    },
    // 添加供应商的数据
    consignContractInfo(val) {
      this.supplerlist.list = val
      saveProcurementInvitatinDetailSupplierList(this.supplerlist).then(res => {
        // 添加成功之后重新调用查询邀请函详情方法
        this.initSupplier()
        this.initData(this.$route.query.id)
        this.$message({
          message: '添加供应商成功',
          type: 'success'
        })
      })
    },
    // 打开弹框
    addClick() {
      this.dialogData.consignContractVisible = true
    },
    // 保存组装数据
    assemblyData() {
      const dataObj = {
        id: this.formData.id, // 邀请函id
        mattersNeedingAttention: this.formData.mattersNeedingAttention, // 注意事项
        tenderId: this.formData.tenderId, // 项目id
        title: this.formData.title, // 标题
        procurementConditionDtoList: this.formData.procurementInvitationConditionList // 响应条件
      }
      return dataObj
    },
    // 保存
    saveData(type, formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveNoticeData() // 调用保存数据方法
          this.initQueryProcure(this.$route.query.id)
          previewProcurementInvitatinTemplate(this.formData).then(res => {
            this.titles = res.data
          })
          if (type === 'save') {
            this.formData.status = '00'
            this.estimateSave = true
          }
          if (type === 'next') {
            this.formData.status = '01'
            this.flgsPrve = false
          }
        }
      })
    },
    // 公告预览
    prvew(type, formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.queryProcurementInvitatinDetailVoList.length > 0) { this.saveData(type, formName) } else {
            this.$message({ message: '邀请供应商不能为空', type: 'warning' })
          }
        } else {
          return false
        }
      })
    },
    // 上一步
    prevStep() {
    // route携带参数
      const pathData = {
        id: this.$route.query.id
      }
      this.$emit('stepPage', 'prev', pathData)// 步骤条切换方法 prev 上一步
    },
    // 添加
    addRow() {
      const datas = cloneObject(this.addData)// 深层拷贝
      this.formData.procurementInvitationConditionList.push(datas) // 添加数据
    },
    // 删除
    detailRow(row, ind) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        // id存在表示保存过的
        if (row.id) {
          this.DeleteCondition(row.id)
        } else { // 未保存的状态
          this.formData.procurementInvitationConditionList.splice(ind, 1)
        }
      }).catch(() => {
      })
    },
    // 保存公告数据方法
    saveNoticeData() {
      const data = this.assemblyData()// 组装数据
      saveProcurementInvitatin(data).then(res => {
        // 调用查询方法
        this.initData(this.$route.query.id)
      }).catch(() => {})
    },
    // 删除响应条件方法
    DeleteCondition(id) {
      deleteCondition(id).then(res => {
        // 调用查询方法
        this.initData(this.$route.query.id)
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="less" scoped>

  /deep/.show-word-limit-padding{
    .el-input__inner{
      padding-right: 70px;
    }
  }
  /deep/.el-textarea__inner{
    padding: 1px 15px;
    line-height: 0.9;
  }
</style>
