<!--
  @description: 立项-招标项目类型-代理机构/招标人公用
  @Modifier: 肖文龙
  @routerPath:/bidding/bidProjectStep/bidProjectClassification
  @date: 2019-12-17 14:59:29
-->
<template>
  <div class="projecType">
    <el-row :gutter="48">
      <el-col v-for="(item,index) in industryList" :key="index" :span="12">
        <div class="projecType_item mt0 clearfix">
          <!-- 主类型 -->
          <div class="projecType_item_title">
            <div class="projecType_item_title_block">
              <i :class="item.iconName" class="iconfont" />
              <span>{{ item.typename }}</span>
            </div>
          </div>
          <!-- 主类型下的资类型 -->
          <div class="projecType_item_content">
            <ul>
              <li
                v-for="(child,childIndex) in item.child"
                :key="childIndex"
                :class="{'active':activeName.projectIndustryCode===child.typecode}"
                @click="rowClcik(child,item.typecode)"
              >
                {{ child.typename }}
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="but_footer">
      <div class="but_footer-but">
        <el-button type="primary" @click="next">
          下一步
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* 接口*/
import { queryTenderProjectClassification } from '@/api/bidding/biddingProject'// 招标项目类型字典
export default {
  name: 'BidProjectClassification',
  props: {
    // 接收步骤条父页面信息
    projectData: {
      type: Object,
      default: function() {
        return {
          id: ''
        }
      }
    }
  },
  data: function() {
    return {
      // 当前已选中项目类型
      activeName: {
        industryName: '', // 行业类型
        projectIndustryCode: '', // 招标项目行业分类编码
        projectIndustryName: ''// 招标项目行业分类
      },
      // 类型
      industryList: [],
      projecTypIconfont: ['icon-huowu1', 'icon-gongcheng', 'icon-fuwu']
    }
  },
  created() {
    // 字典信息
    this.initWebTypeGroup()// 招标类型
    //  判断是否已存储过招标项目类型-cookie
    if (sessionStorage.getItem('projectTypeData')) {
      // 从cookie取出已选择招标项目类型
      this.activeName = JSON.parse(sessionStorage.getItem('projectTypeData'))
    } else if (this.projectData.id && this.projectData.isTool) {
      // 解决工具端编辑状态下进入页面后默认跳转到第一个页面问题
      // route 携带参数
      const pathData = {
        id: this.projectData.id// 项目Id
      }
      this.$emit('stepPage', 'next', pathData) // 步骤条切换方法 next 下一步
    }
  },
  methods: {
    // 字典信息
    initWebTypeGroup() {
      queryTenderProjectClassification().then(res => {
        this.industryList = res.data[0].typeList
        this.industryList.forEach((item, index) => {
          item.iconName = this.projecTypIconfont[index]
        })
      })
    },
    // 点击的时候-选择项目类型
    rowClcik(item, industry) {
      // 当前选择类型
      this.activeName = {
        industryName: industry, // 行业类型
        projectIndustryCode: item.typecode, // 招标项目行业分类编码
        projectIndustryName: item.typename// 招标项目行业分类
      }
      // cookie存储-招标项目项目类型带给下一步
      sessionStorage.setItem('projectTypeData', JSON.stringify(this.activeName))
    },
    /*
    * 保存数据
    * type参数 draft 点击步骤条切换-进行保存草稿
    * */
    saveData(type) {
      if (type === 'draft') return false// 判断是否-点击步骤条切换-如果是则不执行next下一步
      // route 携带参数
      const pathData = {
        id: this.$route.params.id// 项目Id
      }
      if (this.activeName.industryName) {
        // 已选择类型
        this.$emit('stepPage', 'next', pathData) // 步骤条切换方法 next 下一步
      } else {
        // 未选择类型
        this.$message({
          message: '请选择招标项目类型',
          type: 'warning'
        })
      }
    },
    // 下一步
    next() {
      this.saveData()// 保存数据
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~@assets/style/common/public.less';
  @background:#F5F7F9;//背景色
  @border:#E0E0E0;//边框
  @color:#4666db;//文字颜色
.projecType{
  padding: -16px 18px;
  .projecType_item{
    width:100%;
    height: auto;
    background:@background;
    border: 1px solid @border;
    margin-top: 30px;
    margin-bottom: 48px;
    &:first-of-type{
      margin-top:0;
    }
    .projecType_item_title{
      text-align: center;
      min-height: 240px;
      color:@color;
      float: left;
      border-right: 1px solid @border;
      width: 110px;
      height: 100%;
      position: relative;
      .projecType_item_title_block{
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        color: @hyacinthine;
        .iconfont{
          font-size: 37px;
        }
        span{
          display: block;
        }
      }
    }
    .projecType_item_content{
      float: left;
      width: calc(100% - 110px);
   /*   display: flex;
      flex-wrap: wrap;
      align-items: center;*/
      position: relative;
      min-height: 240px;
      ul{
        position: absolute;
        top: 50%;
        transform:translateY(-50%);
        padding: 0 20px;
        li{
          display: inline-block;
          padding: 6px 10px;
          cursor: pointer;
          &:hover{
            color: @hyacinthine;
          }
          &.active{
            color: @hyacinthine;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
