
<!--
  @description: 代理机构驱动模板-头部
  @Modifier：haoFx/肖文龙
  @routerPath:
  @date：  2019/11/14-9:43
-->
<template>
  <!--驱动头部-->
  <div class="drive-content-header p0-16 clearfix">
    <div class="title-back fl pointer">
      <!--返回-->
      <i class="iconfont icon-fanhui" @click="back" />
      <!--项目名称-->
      <el-tooltip :content="driveData.tenderName" placement="top">
        <h1 class="titleH1">
          {{ driveData.tenderName }}
        </h1>
      </el-tooltip>
    </div>
    <!--标段(包）-->
    <div v-if="packageList.length>0" class="fl">
      标段（包）
      <el-select v-model="packId" filterable placeholder="请选择" @change="setPackage">
        <el-option
          v-for="(item) in packageList"
          :key="item.packId"
          :label="item.packName"
          :value="item.packId"
        />
      </el-select>
    </div>
    <!--项目当前阶段信息-->
    <div class="title-right fr">
      <!-- 刷新 -->
      <div class="fr">
        <span class="renewButton" @click="reloadDrive"><i class="el-icon-refresh" /></span>
      </div>
      <!-- 具名插槽 -->
      <div class="fr">
        <slot name="title-right" />
      </div>
    </div>
  </div>
</template>

<script>
/* 公共方法*/

export default {
  name: 'ProjectDrive',
  props: {
    // 返回
    back: {
      type: Function,
      default: function() {}
    },
    // 项目参数
    driveData: {
      type: Object,
      default: function() {
        return {
          tenderName: '' // 项目名称
        }
      }
    },
    /*
    * 切换标段
    *  itme 当前标段参数
    * */
    packageChange: {
      type: Function,
      default: function(item) {}
    }
  },
  data() {
    return {
      packId: '', // 标段索引
      packageList: [] // 标段(包)列表
    }
  },
  methods: {
    /*
    * 切换标段
    *  packId 当前标段参数
    * */
    setPackage(packId, packageList) {
      let packInfo = { packId } // 标段信息
      this.packageList = packageList || this.packageList
      this.packageList.forEach(item => {
        if (packId === item.packId) {
          this.packId = packId// 标段id
          packInfo = item
        }
      })
      this.packageChange(packInfo)
    },
    // 刷新驱动
    reloadDrive() {
      this.$parent.getProjectDriveTask()
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~@assets/style/common/public.less';
    .drive-content-header {
      height: 40px;
      background: #fff;
      overflow: hidden;
      border-bottom: 1px solid #edf0f5;
      box-sizing: border-box;
      line-height: 40px;
      line-height: 40px;
      .title-right {
        line-height: 40px;
      }
      //刷新按钮样式
      .renewButton {
        font-size: 16px;
        width: 26px;
        height: 26px;
        margin-left: 16px;
        color: @gray;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        text-align: center;
        display: inline-block;
        line-height: 26px;
        cursor: pointer;

        &:hover {
          color: @dark-font;
        }
      }
      .titleH1 {
        max-width: 360px;
      }
    }
</style>
