<!--
  @description: 所有选择标段（包）弹框
  @Modifier: 肖文龙
  @routerPath:
  @date: 2020/1/4-17:20
-->
<template>
  <div class="package">
    <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">
          <span class="iconfont icon-tianjia1">添加标段（包）</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>
    <!--选择标包列表-->
    <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="标包编号" prop="packNo">
            <el-input
              v-model.trim="searchForm.packNo"
              style="width:220px"
              placeholder="标包编号"
            />
          </el-form-item>
          <el-form-item label="标包名称" prop="packName">
            <el-input
              v-model.trim="searchForm.packName"
              style="width:220px"
              placeholder="标包名称"
            />
          </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-table
          ref="packTable"
          :data="noPackList"
          size="mini"
          @select="packChange"
          @select-all="packChange"
        >
          <el-table-column type="selection" width="55" />
          <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>
      </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 { listUnmarkedBulletinPackage } from '@/api/bidding/bidBulletin'// 标段（包）列表-公共
/* 公用方法*/
import { cloneObject } from '@assets/js/utils'// 常用方法
export default {
  props: {
    // 招标类型 01 招标公告
    bulletinType: {
      type: String,
      default: ''
    },
    seletPackList: { // 当前公告已选标段（包）
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false, // 标包弹框
      tenderId: this.$route.query.id, // 项目Id
      bulletinId: this.$route.query.bulletinId, // 公告Id
      searchForm: {
        // 搜索内容
        packNo: '', // 编码
        packName: '' // 名称
      },
      selectData: [], // 当前勾选标段
      noPackList: [], // 未选标段列表
      ele: {}, // 标包元素
      is_show: false, // 判断是否显示所有标包
      is_show_btn: false// 判断是否显示按钮边框
    }
  },
  watch: {
    // 监听当前公告已选标段（包）
    seletPackList(val) {
      // 获取到标包元素
      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()// 监听标段（包）的长度判断是否显示边框线和展开按钮
  },
  methods: {
    // 获取要移除的标段id集合
    getPackIds() {
      const packIds = []
      this.seletPackList.map(item => {
        packIds.push(item.packId)
      })
      return packIds
    },
    // 初始化未选标段
    initPackList() {
      const data = {
        bulletinId: this.bulletinId, // 公告Id
        packIds: [...this.getPackIds()], // 要移除的标段id集合
        tenderId: this.tenderId, // 项目Id
        bulletinType: this.bulletinType, // 招标类型
        ...this.searchForm
      }
      listUnmarkedBulletinPackage(data).then(res => {
        this.noPackList = res.data
      })
    },
    // 校验标段不能少于一个 false 校验未通过
    isCheck() {
      if (this.seletPackList.length < 1) {
        this.$message({
          message: '请选择标段（包）',
          type: 'warning'
        })
        return false
      } else {
        return true
      }
    },
    // 勾选标包
    packChange(val) {
      this.selectData = val
    },
    //  删除
    deleteRow(index) {
      // 校验是否选择标段（包）
      if (!this.isCheck()) {
        return
      }
      this.seletPackList.splice(index, 1)
      this.$emit('seletPackInfo', this.seletPackList)
    },
    //  确认按钮
    querensure() {
      const data = cloneObject(this.selectData)// 深拷贝-当前勾选标段（包）
      this.seletPackList.push(...data)// 增加到当前公告已选标段（包）
      this.dialogVisible = false// 关闭弹窗
      this.$emit('seletPackInfo', this.seletPackList)
    },

    // 搜索
    inputChange() {
      this.initPackList()
    },
    // 重置
    materialResetForm(formName) {
      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>
