<!--
  @description:招标-邀请函-投标人资格要求
  @Modifier: 肖文龙/haoFx
  @routerPath:/bidding/projectDrive/invitation/tabs/tenderQualification-add
  @date: 2019/12/31-16:13
-->
<template>
  <div>
    <div class="projectDrive_main clearfix">
      <!--
      标段（包）切换tabs
      tenderBase.isPack===01 分包
      -->
      <tenderQualificationtabs v-show="tenderBase.isPack==='01'" @packChange="packChange" />
      <!--资格要求列表-->
      <div :class="{'tenderQualificationtab_right':tenderBase.isPack==='01','tenderQualificationtab_center':tenderBase.isPack==='00'}">
        <div class="mb16 clearfix">
          <div class="fl">
            <el-button type="primary" @click="addRow">
              新增
            </el-button>
            <el-button type="primary" @click="dialogData.bidQualificationVisible=true ">
              引用
            </el-button>
            <el-button type="primary" @click="dialogData.bidPackagesVisible=true">
              复制资格要求到其他标段
            </el-button>
          </div>
          <el-button
            size="mini"
            style="color: red;margin-left: 19px"
            type="text"
          >
            注：引用可以从库中选择资格要求；多标段操作可用复制资格要求到其他标段
          </el-button>
        </div>
        <el-form ref="forms" :model="formData" :rules="formData.rules">
          <div>
            <el-table :data="formData.qualificationList">
              <el-table-column type="index" label="序号" width="60" align="center" />
              <!--资格要求-->
              <el-table-column
                header-align="center"
                label="资格要求"
                prop="qualificationRequirement"
              >
                <template slot-scope="scope">
                  <el-form-item
                    v-if="scope.row.state"
                    :prop="'qualificationList.' + scope.$index + '.qualificationRequirement'"
                    :rules="formData.rules.qualificationRequirement"
                  >
                    <el-input
                      v-if="scope.row.state"
                      v-model="scope.row.qualificationRequirement"
                      maxlength="500"
                      placeholder="最多允许输入500个字符"
                      type="textarea"
                      size="mini"
                    />
                  </el-form-item>
                  <span v-else>{{ scope.row.qualificationRequirement }}</span>
                </template>
              </el-table-column>
              <!--资质类型-->
              <el-table-column
                align="center"
                label="资质类型"
                width="140px"
                prop="qualificationType"
              >
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.state"
                    v-model="scope.row.qualificationType"
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item,index) in qualificationTypeList"
                      :key="index"
                      :label="item.typename"
                      :value="item.typecode"
                    />
                  </el-select>
                  <div v-else>
                    <span
                      v-for="(item,index) in qualificationTypeList"
                      v-if="scope.row.qualificationType===item.typecode"
                      :key="index"
                    >{{ item.typename }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column header-align="center" label="操作" prop="quantity" width="110px" align="center">
                <template slot-scope="scope">
                  <el-link
                    v-if="!scope.row.state"
                    type="primary"
                    @click="editRow(scope.row,scope.$index)"
                  >
                    [修改]
                  </el-link>
                  <el-link
                    v-if="scope.row.state"
                    type="primary"
                    @click="saveRow(scope.row,scope.$index)"
                  >
                    [保存]
                  </el-link>
                  <el-link
                    type="primary"
                    @click="deleteProject(scope.row,scope.$index)"
                  >
                    [删除]
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
      </div>
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <el-button @click="prevStep">
          上一步
        </el-button>
        <el-button :loading="confirmLoading" type="primary" @click="nextStep">
          暂存，进入下一步
        </el-button>
      </div>
      <!-- 选择资格要求 -->
      <tenderQualificationDialog :dialog-data="dialogData" @tenderQualificationInfo="tenderQualificationInfo" />
      <!-- 要复制到的标段（包）列表 -->
      <tenderQualificationCopyPackDialog :pack-info="packInfo" :dialog-data="dialogData" />
    </div>
  </div>
</template>

<script>
/* api*/
import { listBidderQualification, saveBidderQualificationInfo, saveSingleBidderQualificationInfo,
  removeBidderQualificationByQualificationId } from '@/api/bidding/bidInvitation'
/* 公用方法*/
import { cloneObject } from '@assets/js/utils'// 常用方法
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
/* 混合开发方法-参数字段*/
import { tenderInvitationInitGroupMixin } from './../mixins/tenderInvitationInitGroupMixin'// 字典信息
/* 组件*/
import tenderQualificationtabs from './tenderQualificationtabs.vue'// 标段（包）tabs切换
import tenderQualificationDialog from '@views/bidding/bulletin/tenderQualification/tenderQualification-dialog'// 选择资格要求弹框
import tenderQualificationCopyPackDialog from './tenderQualificationCopyPack-dialog'// 标段（包）列表弹框
export default {
  name: 'TenderQualificationAdd',
  components: {
    tenderQualificationtabs, // 标段（包）tabs切换
    tenderQualificationDialog, // 选择资格要求弹框
    tenderQualificationCopyPackDialog// 标段（包）列表弹框
  },
  mixins: [tenderInvitationInitGroupMixin],
  data() {
    return {
      confirmLoading: false, // 暂存、下一步Loding
      tenderBase: this.$store.getters.tenderBase, // 项目信息
      tenderId: this.$route.query.id, // 项目Id
      invitationId: this.$route.query.invitationId, // 邀请函Id

      // 弹窗-展示/隐藏状态 true 展示/false 隐藏
      dialogData: {
        bidQualificationVisible: false, // 选择资格要求
        bidPackagesVisible: false// 标段（包）列表
      },
      packInfo: {}, // 当前选中的标段(包）信息
      // 新增资格要求
      addData: {
        id: '', // 项目物料id （修改时赋值）
        qualificationRequirement: '', // 资格要求
        qualificationType: '01', // 资质类型 00 通用资格条件  01专用资格条件
        state: true // 设置表格为可编辑状态
      },
      formData: {
        rules: {
          // 校验投标人资格要求不能为空，不能输入特殊字符
          qualificationRequirement: [{ required: true, validator: characters1_auto, trigger: 'blur' }]
        },
        qualificationList: []// 资格要求列表
      }
    }
  },
  created() {
    this.getTenderQualificationInitInfo()// 字典信息
  },
  methods: {
    // 标段 索引
    packChange(item) {
      this.packInfo = item
      this.initQualificationList()// 资格要求列表
    },
    // 资格要求列表
    initQualificationList() {
      const data = {
        tenderId: this.tenderId, // 项目Id
        stageId: this.packInfo.stageId, // 阶段Id
        packId: this.packInfo.packId, // 标段（包）Id
        invitationId: this.invitationId// 邀请函Id
      }
      listBidderQualification(data).then(res => {
        this.formData.qualificationList = res.data
      })
    },
    // 添加一行
    addRow() {
      const data = cloneObject(this.addData)// 深层拷贝
      this.formData.qualificationList.push(data)
    },
    // 引用资格库 type 00引用全部范本 01引用部分范本
    tenderQualificationInfo(list, type) {
      if (type === '00') {
        this.formData.qualificationList = []
      }
      this.formData.qualificationList.push(...list)
    },
    // 资格条件行内修改
    editRow(row, index) {
      const stateDate = this.formData.qualificationList[index]
      stateDate.state = !stateDate.state
      this.formData.qualificationList.splice(index, 1, stateDate)
    },
    // 单条保存投标人资格要求信息
    saveRow(row, index) {
      const data = {
        ...row,
        sortNo: index, // 排序
        packId: this.packInfo.packId, // 标段Id
        stageId: this.packInfo.stageId, // 阶段Id
        tenderId: this.tenderId // 项目Id
      }
      // 删除不需要的参数
      delete data.state
      // 某一行资格要求保存进行校验
      this.$refs['forms'].validateField(['qualificationList.' + index + '.qualificationRequirement'], (errorMessage) => {
        if (!errorMessage) { // 校验通过
          saveSingleBidderQualificationInfo(data).then(res => {
            data.state = false
            data.id = res.data.id// 资格要求Id
            this.formData.qualificationList.splice(index, 1, data)
          })
        } else {
          // 校验未通过
          data.state = true
        }
      })
    },
    // 资格条件删除
    deleteProject(row, index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        // 删除-判断是否有id如果有则走接口
        if (row.id) {
          removeBidderQualificationByQualificationId(row.id).then(res => {
            this.formData.qualificationList.splice(index, 1)
            this.$message.success('删除成功')
          })
        } else {
          this.formData.qualificationList.splice(index, 1)
          this.$message.success('删除成功')
        }
      }).catch(() => {
      })
    },
    // 保存数据接口 暂存，下一步
    saveData(type) {
      this.confirmLoading = true// btnLoding
      // 向资格要求添加标段（包）Id 阶段Id
      this.formData.qualificationList.map((item, index) => {
        item.packId = this.packInfo.packId// 标段Id
        item.stageId = this.packInfo.stageId// 阶段Id
        item.tenderId = this.packInfo.tenderId// 项目Id
        item.sortNo = index + 1 // 排序
        // 删除不需要的参数
        delete item.state
      })
      saveBidderQualificationInfo(this.formData.qualificationList).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() {
      this.$refs['forms'].validate((valid, field) => {
        if (valid) {
          this.saveData()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

  /*分标段样式*/
  .tenderQualificationtab_right{
    float: right;
    width:calc(100% - 210px);
  }
  /*不分标段样式*/
  .tenderQualificationtab_center{
  width:100%;
    margin: 0 auto;
  }
</style>

