<template>
  <div class="ls-vertical">
    <navbar icon="pm"  title="审批备案">
    </navbar>
    <div class="ls-container ">
      <div class="title">
        <span>基础信息</span>
        <div class="right">
          <div  class="start">
            项目星级：
           <my-star v-model="baseInfo.star" :disabled="true"></my-star>
          </div>
          <div class="status">{{baseInfo.projectStatusKey}}</div>
          <div  class="extend">
            <el-button  @click="handleExtend('baseInfo')" type="text"  size="small" >
              <span v-if="baseInfoExtend">收起</span>
              <span v-else>展开</span>列表
              <i :class="baseInfoExtend?'el-icon-arrow-up':'el-icon-arrow-down' "></i>
            </el-button>
          </div>
        </div>
      </div>

     <el-row :gutter="20" class="row-form">
       <el-col :span="6">
         <label>项目编码</label>
         <div class="grid-content">{{baseInfo.projectCode}}</div>
       </el-col>
       <el-col :span="6">
         <label>客户类型</label>
         <div class="grid-content">{{baseInfo.customerTypeKey}}</div>
       </el-col>
       <el-col :span="6">
         <label>客户名称</label>
         <div class="grid-content">{{baseInfo.customer}}</div>
       </el-col>
       <el-col :span="6">
         <label>客户等级</label>
         <div class="grid-content">{{baseInfo.customerGrade}}</div>
       </el-col>
     </el-row>
     <el-row :gutter="20" class="row-form">
       <el-col :span="6">
         <label>代理商</label>
         <div class="grid-content">{{baseInfo.agentName}}</div>
       </el-col>
       <el-col :span="6">
         <label>项目名称</label>
         <div class="grid-content">{{baseInfo.projectName }}</div>
       </el-col>
       <el-col :span="6">
         <label>行业大类</label>
         <div class="grid-content">{{baseInfo.industryCategoryKey}}</div>
       </el-col>
       <el-col :span="6">
         <label>行业子类</label>
         <div class="grid-content">{{baseInfo.industrySubclassKey}}</div>
       </el-col>
     </el-row>
     <el-row :gutter="20" class="row-form">
       <el-col :span="6">
         <label>细分领域</label>
         <div class="grid-content">{{baseInfo.industrySegmentation}}</div>
       </el-col>
       <el-col :span="6">
         <label>机型号</label>
         <div class="grid-content">{{baseInfo.brandModelType}}</div>
       </el-col>
       <el-col :span="6">
         <label>产品状态</label>
         <div class="grid-content">{{baseInfo.productStatusKey}}</div>
       </el-col>
       <el-col :span="6">
         <label>品牌</label>
         <div class="grid-content">{{baseInfo.brandName}}</div>
       </el-col>
     </el-row>
     <template v-if="baseInfoExtend">
     <el-row :gutter="20" class="row-form">
       <el-col :span="6">
         <label>销售区域</label>
         <div class="grid-content">{{baseInfo.salesRegionsKey?baseInfo.salesRegionsKey:baseInfo.salesRegions}}</div>
       </el-col>
       <el-col :span="6">
         <label>芯片平台</label>
         <div class="grid-content">{{baseInfo.platformKey}}</div>
       </el-col>
       <el-col :span="6">
         <label>芯片型号</label>
         <div class="grid-content">{{baseInfo.chipModelKey}}</div>
       </el-col>
       <el-col :span="6">
         <label>存储类型</label>
         <div class="grid-content">{{baseInfo.storageType}}</div>
       </el-col>
     </el-row>
     <el-row :gutter="20" class="row-form">
       <el-col :span="6">
         <label>存储容量</label>
         <div class="grid-content">{{baseInfo.storageCapacity}}</div>
       </el-col>
       <el-col :span="6">
         <label>月需求量</label>
         <div class="grid-content">{{$common.getComdifyNumber(baseInfo.monthCycle)+ ' (pcs)'}}</div>
       </el-col>
       <el-col :span="6">
         <label>提供FCST周期</label>
         <div class="grid-content">{{baseInfo.fcstCycleKey}}</div>
       </el-col>
       <el-col :span="6">
         <label>项目/产品经理</label>
         <div class="grid-content">{{baseInfo.managerName}}</div>
       </el-col>
     </el-row>
     <el-row :gutter="20" class="row-form">
       <el-col :span="6">
         <label>立项时间</label>
         <div class="grid-content">{{baseInfo.projectStartDate}}</div>
       </el-col>
       <el-col :span="6">
         <label>上市时间</label>
         <div class="grid-content">{{baseInfo.productLaunchDate}}</div>
       </el-col>
       <el-col :span="6">
         <label>EOL时间</label>
         <div class="grid-content">{{baseInfo.projectEolDate}}</div>
       </el-col>
       <el-col :span="6">
         <label>终端售价</label>
         <div class="grid-content">{{baseInfo.terminalPrice}}</div>
       </el-col>
     </el-row>
     <el-row :gutter="20" class="row-form">
       <el-col :span="6">
         <label>专项类型</label>
         <div class="grid-content">{{baseInfo.specialTypeKey?baseInfo.specialTypeKey:''}}</div>
       </el-col>
       <el-col :span="6">
         <label>销售人员</label>
         <div class="grid-content">{{baseInfo.salesName}}</div>
       </el-col>
       <el-col :span="12">
         <label>导入关键要素</label>
         <div class="grid-content">{{baseInfo.projectMainInfoKey}}</div>
       </el-col>
     </el-row>
     <el-row :gutter="20" class="row-form">
       <el-col :span="24">
         <label>项目描述</label>
         <div class="grid-content">{{baseInfo.remark}}</div>
       </el-col>
     </el-row>
     </template>

      <!-- 竞品信息 -->
      <div   class="title">
         <span>竞品信息</span>
         <div class="right">
           <div  class="extend">
             <el-button  @click="handleExtend('competitiveInfo')" type="text"  size="small" >
               <span v-if="compeInfoExtend">收起</span>
               <span v-else>展开</span>列表
               <i :class="compeInfoExtend?'el-icon-arrow-up':'el-icon-arrow-down' "></i>
             </el-button>
           </div>
         </div>
       </div>

      <template  v-if="compeInfoExtend" v-for="(item,index) in competitiveList"  >
        <el-row :gutter="20" class="row-form">
          <el-col :span="6">
            <label>存储品牌</label>
            <div class="grid-content">{{item.brandName}}</div>
          </el-col>
          <el-col :span="6">
            <label>存储类型</label>
            <div class="grid-content">{{item.storageType}}</div>
          </el-col>
          <el-col :span="6">
            <label>容量</label>
            <div class="grid-content">{{item.itemCapacity}}</div>
          </el-col>
          <el-col :span="6">
            <label>存储型号</label>
            <div class="grid-content">{{item.storageModelType}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row-form">
          <el-col :span="6">
            <label>采购价</label>
            <div class="grid-content">{{item.purchasePrice}}</div>
          </el-col>
          <el-col :span="6">
            <label>份额占比</label>
            <div class="grid-content">{{item.estimatedProportion}}%</div>
          </el-col>
          <el-col :span="6">
            <label>货源供应</label>
            <div class="grid-content">{{item.sourceSupplyKey}}</div>
          </el-col>
          <!-- <el-col :span="6">
            <label></label>
            <div class="grid-content"></div>
          </el-col>
          <el-col :span="6">
            <label></label>
            <div class="grid-content"></div>
          </el-col> -->
        </el-row>
      </template>

      <!-- 产品信息 -->
      <div   v-show="projectLineList.length" class="title">
         <span>产品信息</span>
         <div class="right">
           <div  class="extend">
             <el-button  @click="handleExtend('productInfo')" type="text"  size="small" >
               <span v-if="productInfoExtend">收起</span>
               <span v-else>展开</span>列表
               <i :class="productInfoExtend?'el-icon-arrow-up':'el-icon-arrow-down' "></i>
             </el-button>
           </div>
         </div>
      </div>

      <template  v-if="productInfoExtend && projectLineList.length"
             v-for="(item,index) in projectLineList" >
      <div  class="product-wrap">
          <el-row :gutter="20" class="row-form">
            <el-col :span="6">
              <label>子行编码</label>
              <div class="grid-content">{{item.lineCode}}</div>
            </el-col>
            <el-col :span="6">
              <label>导入品牌</label>
              <div class="grid-content">{{item.brandNameKey}}</div>
            </el-col>
            <el-col :span="6">
              <label>预计份额</label>
              <div class="grid-content">{{item.estimatedProportion}}%</div>
            </el-col>
            <el-col :span="6">
              <label>PN</label>
              <div class="grid-content">{{item.productPn}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="row-form">
            <el-col :span="6">
              <label>容量</label>
              <div class="grid-content">{{item.itemCapacity}}</div>
            </el-col>
            <el-col :span="6">
              <label>产品类型</label>
              <div class="grid-content">{{item.projectCategory}}</div>
            </el-col>
            <el-col :span="6">
              <label>产品线</label>
              <div class="grid-content">{{item.itemProductLine}}</div>
            </el-col>
            <el-col :span="6">
              <label>锁定FW</label>
              <div class="grid-content">{{formatLockFW(item.lockFw)}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="row-form">
            <el-col :span="6">
              <label>新替代料认证周期</label>
              <div class="grid-content">{{item.newItemNumKey}}</div>
            </el-col>
            <el-col :span="6">
              <label>计划送样</label>
              <div class="grid-content">{{item.sampleDeliveryTime}}</div>
            </el-col>
            <el-col :span="6">
              <label>计划小批</label>
              <div class="grid-content">{{item.smallTrialTime}}</div>
            </el-col>
            <el-col :span="6">
              <label>计划量产</label>
              <div class="grid-content">{{item.productionTime}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="row-form">
            <el-col :span="6">
              <label>立项时间</label>
              <div class="grid-content">{{baseInfo.projectStartDate}}</div>
            </el-col>
            <el-col :span="6">
              <label>上市时间</label>
              <div class="grid-content">{{baseInfo.productLaunchDate}}</div>
            </el-col>
            <el-col :span="6">
              <label>EOL时间</label>
              <div class="grid-content">{{baseInfo.projectEolDate}}</div>
            </el-col>
            <el-col :span="6">
              <label>终端售价</label>
              <div class="grid-content">{{baseInfo.terminalPrice}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="row-form">
            <el-col :span="6">
              <label>导入状态</label>
              <div class="grid-content">{{item.importStatus}}</div>
            </el-col>
            <el-col :span="6">
              <label>月预估量</label>
              <div class="grid-content">{{$common.getComdifyNumber(item.monthEstimates)}}</div>
            </el-col>
            <el-col :span="6">
              <label>预估单价</label>
              <div class="grid-content">{{$common.getComdifyNumber(item.estimatePrice)}}</div>
            </el-col>
            <el-col :span="6">
              <label>月预估金额</label>
              <div class="grid-content">{{$common.getComdifyNumber(item.monthEstimateAmount)}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="row-form">
            <el-col :span="24">
              <label>项目进度</label>
              <div class="grid-content">{{item.makeRemark}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="row-form">
            <el-col :span="24">
              <label>后续计划</label>
              <div class="grid-content">{{item.planRemark}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="row-form">
            <el-col :span="24">
              <label>补充说明</label>
              <div class="grid-content">{{item.remark}}</div>
            </el-col>
          </el-row>
      </div>
      </template>

      <comment-logs ref="approve" :isComment="true" :isApploval="true" :processId.sync="processId"/>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'record',
    components:{

    },
    created(){

      let $this=this;
      parent.window.doSubmit = function(param){
        if(!$this.isProccess){
          $this.approve(param);
          return false;
        }else{
          return true;
        }
      };

      this.processId=this.$common.getUrlParams('processId');
      this.projectId = this.$common.getUrlParams('projectId');
      if(this.projectId || this.processId){
        this.getProjectInfoById();
        this.getCompetitiById();
        this.getProjectLineById();
      }
      setTimeout(()=>{
        $this.$common.judgeBroswer('Edge', 80);
      }, 1000)
    },
    mounted(){
    },
    methods:{
      approve(param){
        param.moduleId=3101;
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'process.approve',
          data: param,
          requestType: 'body',
          showLoad: true,
          success: function (res) {

            if (res.errorCode === 200) {
              this.isProccess=true;
              parent.FormToolBarAction.BTN_TRANSACT();
            } else {
              this.$message.error(res.msg)
            }

          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.body.msg || res.msg
            })
          }.bind(this)
        });
      },
      setEnableParentProcessButton: function(){
        this.setParentValue('canCick', 'true');
      },
      setParentValue: function (id, value) {
        try {
          if (parent) {
            parent.$('#' + id).val(value);
          }
        } catch (err) { }
      },
      // 根据项目id 获取 项目信息
      getProjectInfoById(){
        this.$ajax.post({
            domain: 'crmUrl',
            url: 'project.getProject',
            data: { projectId: this.projectId },
            requestType: 'body',
            showLoad: true,
            success: function (res) {
              this.baseInfo = res.data || {};
              this.projectStatus = this.baseInfo.projectStatus;
              this.setEnableParentProcessButton();
            }.bind(this),
            error: function (res) {
                this.$message({
                  type: 'error',
                  message: res.body.msg || res.msg
                })
            }.bind(this)
        })
      },
      //  根据 项目id 查询竞品信息
      getCompetitiById() {
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'projectCompetitive.getCompetitives',
          data: { projectId: this.projectId },
          requestType: 'body',
          showLoad: true,
          success: function (res) {
            if (res.errorCode === 200) {
                this.competitiveList = res.data || [];
            }
          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.body.msg || res.msg
            })
          }.bind(this)
        })
      },
      //通过项目ID 查询产品信息
      getProjectLineById(){
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'projectLine.getProjectLine',
          data:  { projectId: this.projectId },
          requestType: 'body',
          showLoad: true,
          success: function (res) {
            if (res.errorCode === 200) {
                this.projectLineList = res.data  || [];
            }
          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.body.msg || res.msg
            })
          }.bind(this)
        })
      },


      //是否展开基础信息
      handleExtend(opera){
        if(opera == 'baseInfo'){
          this.baseInfoExtend = !this.baseInfoExtend;
        } else if(opera == 'competitiveInfo'){
          this.compeInfoExtend = !this.compeInfoExtend;
        } else if(opera == 'productInfo'){
          this.productInfoExtend = !this.productInfoExtend;
        }
      },
       //转换 是否 锁定 FW
       formatLockFW(fw){
         if(fw === 'Y'){
           return '是';
         } else if(fw === 'N'){
           return '否';
         } else{
           return '';
         }
       },
       //提交
       handleSubmit(){

       },

      // 导航栏按钮操作
      clickbtn(type) {
        switch (type) {
          case 'submit':
            this.handleSubmit();
          break;
        }
      },

    },
    data(){
      return {
        baseInfoExtend: true, //基础信息是否展开
        compeInfoExtend: true, //竞品信息是否展开
        productInfoExtend: true, //产品信息是否展开
        msg: '',
        baseInfo: {
          star: 0,
        }, //基本信息
        //另外定义一个项目状态 变量，方便 对不同节点 显示不同的内容 做处理
        projectStatus: '',
        competitiveList: [], //竞品信息
        projectLineList: [],  //产品行信息

        projectId: '',  //项目id
        //新增流程香港
        processId:'',
        isProccess:false,

        btns: [
          {
            title: '提交',
            btnEvent: 'submit',
            size: 'mini',
            circle: false,
            type: 'primary',
            show: true,
            icon: ''
          },
        ],



      }
    },
    watch: {
      msg:{
        handler:function(val,oldval){
          if(val){
            this.setParentValue('msg',val);
          }
        }
      },
    }
  }
</script>

<style  lang="scss"  scoped>
.ls-container{
  margin: 0;
  overflow-y: auto;
  border-top: 1px solid #f4f4f4;
  padding: 20px;
  .title {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DCDFE6;
    padding-bottom: 5px;

    >span {
      color: #0077FA;
      font-size: 14px;
      font-weight: bold;
    }
    .right{
      display: flex;
      align-items: center;
      .start{
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .status{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px 19px;
        background: #ECF5FF;
        border-radius: 5px;
        color: #409EFF;
        margin: 0 40px;
      }
      .extend {

        .el-button, span, i {
          color: #0077FA;
        }
      }
    }
  }
  .ls-table-comm{
    margin-bottom: 20px;
  }

  .table-wrap{
    flex: 1;
    overflow: hidden;
  }
  .approval-operat {
    margin: 20px 0;
    padding: 20px;
    background: #F8F8F8;
    border-radius: 5px;
    >div:not(.title){
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      span{
        margin-right: 40px;
        &::before{
          content: '*';
          color: #FF0000;
          margin-right: 2px;
        }
      }
    }
  }
  .opacity0{ opacity: 0; }
  .product-wrap{
    margin-bottom: 20px;
  }
  .comment-logs{
    margin-top: -10px;
  }


}
</style>
