<!--
  @description: 供应商-桌面-变更公告组件
  @Modifier：wxy ysg
  @routerPath:/procurement/procurementDesktopSupplier
  @date：  2020-09-01 14:27:18
-->
<template>
  <div class="contentFram">
    <div class="contentt p0-16">
      <p class="title fl">
        <i class="iconfonts iconfont icon-dayi" />变更公告
      </p>
      <p class="fr">
        <!-- <i class="iconfonts iconfont icon-shuaxin pointer" @click="refresh" /> -->
        <span class="pointer" @click="toNotice">更多</span>
      </p>
    </div>
    <div v-for="(item,index) in tableData" :key="index" class="contentb">
      <div class="contentbl">
        <p>
          <span>{{ item.tenderNo }}<span class="ml-sp">{{ item.title }}</span></span>
        </p>
        <p class="contentblb">
          <span>
            <!-- <i class="iconfontss iconfont icon-people" /> -->
            <i class="iconfontss el-icon-user" />
            {{ item.buyerExecutorName }}</span> <span><i class="iconfontss iconfont icon-time" /> 发布时间：{{ item.relDate }}</span>
        </p>
      </div>
      <span class="contentbr pointer" @click="alterLook(item)">
        <i class="iconfonts iconfont icon-search" />去查看
      </span>
    </div>
    <projectAlterDialog v-if="dialogData.dialog" :dialog-data="dialogData" />
  </div>
</template>

<script>
/* api接口*/
import { getChangeBulletinList } from '@/api/procurement/commonDesk'
// 组件
import projectAlterDialog from '@/views/procurement/procurementProject/procurementProjectAlter/procurementProjectAlterDetail-dialog.vue' // 查看详情弹框
export default {
  components: {
    projectAlterDialog
  },
  provide() {
    return {
      getTenderBase: this.getTenderBase // 项目信息
    }
  },
  data() {
    return {
      // 变更公告数据
      tableData: [],
      // 采购方式数据
      projectData: [
        {
          name: '询价',
          num: '3'
        }, {
          name: '单一来源',
          num: '4'
        }, {
          name: '竞争性谈判',
          num: '90'
        }
      ],
      paginationData: {
        pageNo: 1,
        pageSize: 2
      },
      procurementRole: this.$route.meta.procurementRole, // 11 项目经理 12供应商
      currentIndex: 0, // 当前下标
      getTenderBase: {
        id: ''
      },
      dialogData: {
        alterBizId: '',
        dialog: false
      }
    }
  },
  created() {
    this.getChangeBulletinList()
  },
  methods: {
    // 获取消息列表
    getChangeBulletinList() {
      getChangeBulletinList(this.paginationData).then(res => {
        if (res.header.ret === '0') {
          this.tableData = [...res.data.records]
          this.tableData.forEach(item => {
            item.relDate = this.$Moment(item.relDate).format(this.momentSaveFormat)
          })
        }
      })
    },
    // 查看变更公告
    alterLook(row) {
      this.dialogData.dialog = true
      this.dialogData.alterBizId = row.bizId
    },
    //
    closeDialog() {
      this.dialogData.dialog = false
    },
    // 切换下标添加高亮
    changtab(index) {
      this.currentIndex = index
    },
    // 刷新
    refresh() {
      this.$forceUpdate() // 数据强制刷新
    },
    // 跳转变更公告页面
    toNotice() {
      this.$router.push({
        path: '/procurement/procurementChangeNotice-list'
      })
    }
  }
}
</script>

<style lang='less' scoped>
@import '~@assets/style/common/public.less';
.contentFram{
  background: #fff;
  border-left: 1px solid @cut-off;
  border-right: 1px solid @cut-off;
  border-bottom: 1px solid @cut-off;
  padding-bottom: 10px;
  min-height: 189px;
}
div{
    width: 100%;

.contentt{
    border-top: 1px solid @hyacinthine;
    width: 100%;
    height: 40px;
    background: @french-grey;
    p{
        line-height: 40px;
        .iconfonts{
         color:@hyacinthine;
         margin-right:8px;
    }
    }
    .contentsp{
        span{
        display: inline-block;
        margin:5px 0;
        padding: 0;
        width: 120px;
        height: 36px;
        border: 1px solid @border-gray;
        text-align: center;
        line-height: 36px;
        &:nth-child(3){
            margin-right: 20px;
        }
        }
    }

}
.contentb{
    width: 97%;
    margin-left: 1.6%;
    display: flex;
    align-content: space-around;
    border-bottom: 1px solid @border-gray;
    padding: 10px 0px 9px 0px;
    .ml-sp{
      margin-left: 10px;
    }
        .iconfonts{
         color:@hyacinthine;
         margin-right:8px;
    }
         .iconfontss{
         color:@light-font;
         margin-right:4px;
    }
    .contentbl{
        line-height: 20px;
        display: inline-block;
        width: 92%;
        .contentblb{
            color: @light-font;
            span{
                margin-right: 60px;
            }
        }
    }
    .contentbr{
        color:@hyacinthine;
        display: inline-block;
        width: 8%;
        line-height: 40px;
    }
}
.col{
  color: @white;
  background:@hyacinthine;
}
}
/deep/.el-dialog_table_he{
  margin-top: 5vh !important;
  height: 87%;
}
/deep/.el-dialog_table_he .el-dialog__body{
  // min-height: 100px;
  height: 80%;
  overflow-y: scroll;
}
/deep/.el-dialog .liststyle{
  width: 100%;
  padding: 0 10px;
  height: 100%;
  overflow-y: scroll;
}
</style>
