<!--
  @description: 邀请函选择标段（包）弹框
  @Modifier: 肖文龙
  @routerPath:
  @date: 2020/1/4-17:20
-->
<template>
  <div class="package">
    <div>
      <div ref="content_selected" class="selected content_selected clearfix">
        <div ref="content_selected_show" :class="{ content_selected_show:!is_show }">
          <!--添加标段（包）按钮-->
          <div class="select_bao clearfix" @click="dialogVisible=true">
            <i class="iconfont icon-tianjia1" />
            <span>添加标段（包）</span>
          </div>
          <!--已选中的标包列表-->
          <el-tag
            v-for="(pack, index) in seletPackList"
            :key="index"
            closable
            size="medium"
            @close="deleteRow(index)"
          >
            【{{ pack.packNo }}】{{ pack.packName }}
          </el-tag>
        </div>
        <div v-if="is_show_btn" class="unfold">
          <p v-if="!is_show" @click="is_show=!is_show">
            展开更多
            <span>（{{ seletPackList.length }}）</span>
            <i class="el-icon-arrow-down" />
          </p>
          <p v-else @click="is_show=!is_show">
            收起更多
            <span>（{{ seletPackList.length }}）</span>
            <i class="el-icon-arrow-up" />
          </p>
        </div>
      </div>
    </div>
    <!--选择标包列表-->
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="选择标包"
      width="840px"
      append-to-body
      custom-class="el-dialog__body-p8 el-dialog_table"
    >
      <section class="pt16 clearfix">
        <el-form ref="searchForm" :model="searchForm" inline>
          <el-form-item label="标包编号">
            <el-input
              v-model="searchForm.packNo"
              placeholder="标包编号"
              style="width:220px"
            />
          </el-form-item>
          <el-form-item label="标包名称">
            <el-input
              v-model="searchForm.packName"
              placeholder="标包名称"
              style="width:220px"
            />
          </el-form-item>
          <el-form-item class="fr">
            <el-button
              type="primary"
              @click="inputChange"
            >
              搜索
            </el-button>
            <el-button
              plain
              type="info"
              @click="materialResetForm('searchForm')"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </section>
      <section>
        <el-button type="text" size="mini">
          温馨提示：只能选择【资格审查方式】相同类型的标段（包）。
        </el-button>
        <el-table
          ref="packTable"
          v-loading="loading"
          :data="!loading?noPackList:[]"
          size="mini"
          @select="packChange"
          @select-all="packChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="isDisabled"
          />
          <el-table-column label="序号" type="index" align="center" width="60" />
          <el-table-column label="标包编号" prop="packNo" header-align="center" />
          <el-table-column label="标包名称" prop="packName" header-align="center" />
          <el-table-column label="投标截止时间" prop="tenderDocumentReceiveEndTime" width="160px" align="center" />
          <el-table-column
            label="资格审查方式"
            width="110px"
            :formatter="formatPhaseType"
            prop="stageType"
            align="center"
          />
        </el-table>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="querensure">
          确 定
        </el-button>
        <el-button @click="dialogVisible = false">
          取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/* api*/
import { getTime } from '@api/common/tools.js' // 获取服务器时间
import { getClarificationPackInfo } from '@/api/bidding/bidClarification'// 澄清
import { selectStageTimeRuleInfoByStageId } from '@/api/bidding/changeBulletin'// 获取公时间
/* 公用方法*/
import { cloneObject, filterDictText } from '@assets/js/utils'// 常用方法
/* 混入 */
import { bidLawTimeRule } from '@/views/bidding/mixins/bidLawTimeRule'// 招标法-时间规则
export default {
  props: {
    seletPackList: { // 当前已选标段（包）
      type: Array,
      default: function() {
      }
    }
  },
  data() {
    return {
      /* 字典信息-start */
      phaseTypeList: [], // 资格审查方式
      /* 字典信息-end */
      timeDataRule: bidLawTimeRule, // 招标-时间规则
      loading: true,
      dialogVisible: false, // 标包弹框
      tenderId: this.$route.query.id, // 项目Id
      searchForm: {
        // 搜索内容
        packNo: '', // 编码
        packName: '' // 名称
      },
      selectData: [], // 当前勾选标段
      noPackList: [], // 未选标段列表
      ele: {}, // 标包元素
      is_show: false, // 判断是否显示所有标包
      is_show_btn: false// 判断是否显示按钮边框
    }
  },
  watch: {
    // 监听当前邀请函已选标段（包）
    seletPackList() {
      // 获取到标包元素
      setTimeout(() => {
        this.ele = this.$refs.content_selected_show.children
        this.elementPack()// 监听标段（包）的长度判断是否显示边框线和展开按钮
      }, 100)
    },
    // 监听弹框
    dialogVisible(val) {
      if (val) { // 弹框已打开
        this.searchForm.packNo = '' // 编码
        this.searchForm.packName = '' // 名称
        this.initPackList()// 初始化未选标段
      } else {
        this.$refs.packTable.clearSelection()// 取消勾选
      }
    }
  },
  mounted() {
    // 获取到标包元素
    this.ele = this.$refs.content_selected_show.children
    this.elementPack()// 监听标段（包）的长度判断是否显示边框线和展开按钮
  },
  created() {
    this.initGroup()// 获取字典方法
  },
  methods: {
    // 获取字典方法
    initGroup() {
      const data = [
        'phaseType'// 资格审查方式
      ]
      this.$store.dispatch('getGroupType', data).then(res => {
        Object.keys(res.bidTypeData).forEach((key) => {
          this[key] = res.bidTypeData[key]
        })
      })
    },
    // 表格字典值替换文本-资格审查方式
    formatPhaseType(row, column, cellValue) {
      return filterDictText(this.phaseTypeList, cellValue)
    },
    // 获取要移除的标段id集合
    getPackIds() {
      const packIds = []
      this.seletPackList.map(item => {
        packIds.push(item.packId)
      })
      return packIds
    },
    // 初始化未选标段
    initPackList() {
      this.loading = true
      const data = {
        packIdList: this.getPackIds(), // 要移除的标段id集合
        tenderId: this.tenderId, // 项目Id
        ...this.searchForm
      }
      getClarificationPackInfo(data).then(res => {
        this.noPackList = res.data
        this.selectStageTimeRuleInfo('noPackList')// 根据阶段id集合查询时间规则信息
      }).catch(() => {
        this.loading = false
      })
    },
    /* ======================校验规则部分 ====================== */
    // 校验标段不能少于一个 false 校验未通过
    isCheck() {
      if (this.seletPackList.length < 1) {
        this.$message({
          message: '请选择标段（包）',
          type: 'warning'
        })
        return false
      } else {
        return true
      }
    },
    // 复选框部分禁用
    isDisabled(row) {
      if (this.selectData.length) { // 判断是否已选择数据
        const data = { ...this.selectData[0] }
        // 只能选择【资格审查方式】相同类型的标段（包）
        return row.stageType === data.stageType
      } else {
        return true
      }
    },
    /*
     * 获取标段阶段id集合
     * @listKey noPackList 未选中的标段 seletPackList 已选中的标段
    */
    getStageIds(listKey) {
      const stageId = []// 阶段id集合
      this[listKey].map(item => {
        stageId.push(item.stageId)// 阶段id集合
      })
      return stageId
    },
    /*
     * 根据阶段id集合查询时间规则信息
     * @listKey noPackList 未选中的标段 seletPackList 已选中的标段
     * @promise 返回校验是否通过 promise.resolve()通过 promise.reject()不通过
    */
    async selectStageTimeRuleInfo(listKey, promise) {
      const data = {
        stageId: this.getStageIds(listKey)
      }
      if (data.stageId.length > 0) {
        if (!this[listKey].timeData) { // 第一次获取标段时间时才执行
          await selectStageTimeRuleInfoByStageId(data).then(res => {
            this.initPackTimeFn(res.data, listKey)// 初始化标段时间
          }).catch(() => {
          })
        }
        // 获取服务器当前时间
        await this.initTime(listKey, promise)
      } else {
        this.loading = false// 关闭loading
      }
    },
    /*
     * 初始化标段时间
     * @listKey noPackList 未选中的标段 seletPackList 已选中的标段
     * @packTimeList 获取的标段的时间规则信息
    */
    initPackTimeFn(packTimeList, listKey) {
      packTimeList.forEach((item, index) => {
        this[listKey][index].tenderDocumentReceiveEndTime = item.tenderDocumentReceiveEndTime// 投标截止时间
      })
    },
    /*
     * 根据阶段id集合查询时间规则信息
     * @listKey noPackList 未选中的标段 seletPackList 已选中的标段
     * @promise 返回校验是否通过 promise.resolve()通过 promise.reject()不通过
    */
    initTime(listKey, promise) {
      // 获取服务器当前时间
      getTime().then((res) => {
        if (listKey === 'seletPackList' && promise) {
          // 已选中的标段逻辑走向
          this.seletPackFn(res.data.time, listKey, promise)
        } else if (listKey === 'noPackList') {
          this.loading = false
          // 未选中的标段逻辑走向
        }
      })
    },
    /*
     * 已选中的标段逻辑走向
     * @promise 返回校验是否通过 promise.resolve()通过 promise.reject()不通过
     * @time 当前服务器时间
     * @listKey noPackList 未选中的标段 seletPackList 已选中的标段
    */
    seletPackFn(time, listKey, promise) {
      const packMessageList = []
      this[listKey].forEach((item, index) => {
        // 澄清公告发布规则，【当前时间】距离【资格预审获取截止时间】相差天数 是否小于{{bidLawTimeRule.TIMEDATE6 }} 天
        const days = this.momentDiff('days', time, item.tenderDocumentReceiveEndTime)
        // 当选择的标段（包）是 00 资格预审阶段，并且 相差天数小于{{bidLawTimeRule.TIMEDATE6 }} 天
        if (days < bidLawTimeRule.TIMEDATE6 && this[listKey][0].stageType === '00') {
          packMessageList.push('<br/>【' + item.packNo + '】' + item.packName)
        }
      })
      if (packMessageList.length > 0) {
        // 校验-不通过
        promise.reject('澄清公告(校验未通过)-【当前时间】距离【资格预审获取截止时间】相差天数 是否小于{{bidLawTimeRule.TIMEDATE6 }} 天')
        // 提示文案
        let message = ''
        if (packMessageList.length > 1) {
          message = '1.资格预审阶段时，只能选择【当前时间】距【资格预审文件获取截止时间】不少于' + bidLawTimeRule.TIMEDATE6 + '天的标段（包）。' +
          '<br/>2.以下标段则不符合此规则，请清除或切换其他标段（包）后再进行下一步!' + packMessageList.join(',')
        } else if (packMessageList.length === 1) {
          message = '1.资格预审阶段时，只能选择【当前时间】距【资格预审文件获取截止时间】不少于' + bidLawTimeRule.TIMEDATE6 + '天的标段（包）。' +
          '<br/>2.请切换其他标段（包）后再进行下一步!'
        }
        this.$alert(
          message,
          '提示', {
            type: 'warning',
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定'
          })
      } else {
        // 资格后审阶段时
        // 校验-通过
        promise.resolve()
      }
    },
    // 已选中的标段-进行规则校验
    packSelectRule() {
      return new Promise((resolve, reject) => {
        // 根据阶段id集合查询时间规则信息
        this.selectStageTimeRuleInfo('seletPackList', {
          resolve,
          reject
        })
      })
    },
    /* ======================校验规则部分 ====================== */
    // 勾选标包
    packChange(val) {
      this.selectData = val
    },
    //  删除
    deleteRow(index) {
      this.seletPackList.splice(index, 1)
    },
    //  确认按钮
    querensure() {
      const data = cloneObject(this.selectData)// 深拷贝-当前勾选标段（包）
      this.seletPackList.push(...data)// 增加到当前邀请函已选标段（包）
      this.dialogVisible = false// 关闭弹窗
    },

    // 搜索
    inputChange() {
      this.initPackList()
    },
    // 重置
    materialResetForm(formName) {
      this.searchForm.packNo = '' // 编码
      this.searchForm.packName = '' // 名称
      // this.$refs[formName].resetFields()
      this.initPackList()
    },
    // 监听标段（包）的长度判断是否显示边框线和展开按钮
    elementPack() {
      let width = 17// 初始值
      // 得到标包元素的总宽
      const len = this.ele.length
      for (let i = 0; i < len; i++) {
        width += (this.ele[i].offsetWidth + 16)// 16 margin的值
      }
      // 得到的宽度大于父元素的宽度的时候显示展开按钮和边框
      if (width > this.$refs.content_selected.offsetWidth) {
        this.$refs.content_selected.style.border = '1px solid #DCDFE6'
        this.is_show_btn = true
      } else {
        this.$refs.content_selected.style.border = 'none'
        this.is_show_btn = false
      }
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="less" scoped>
</style>
