<template>
  <div>
    <div class="layout-content">
      <div class="shopBox" style="margin-bottom:20px;" v-if="fromAddTask != 'fromAddTask'">
        <rent-shop :rentInfoData='wxShops' :merchentEditIf="merchentEditIf"></rent-shop>
      </div>
      <div class="text-box">
        <div class="text-box-title" :style="{background:navigationInfo.moduleColor}">合同信息</div>
        <div class="text-box-content">
          <el-row>
            <el-col :span="3" class="span-title">合同编号:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.contractNumber}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">合同状态:</el-col>
            <el-col :span="18" class="span-text">{{cStatus(wxRentContract.status)}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">合同签约日:</el-col>
            <el-col :span="18" class="span-text">{{changeDate(wxRentContract.signDate)}}</el-col>
          </el-row>
        </div>
      </div>
      <div class="text-box">
        <div class="text-box-title" :style="{background:navigationInfo.moduleColor}">乙方信息</div>
        <div class="text-box-content">
          <el-row>
            <el-col :span="3" class="span-title">商户名称:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.merchantName}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">合同主体名称:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.subjectName}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">经营品牌:</el-col>
            <el-col :span="18" class="span-text">{{changeBrand(wxRentContract.brand)}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">业态:</el-col>
            <el-col :span="18" class="span-text">{{changeBusiness(wxRentContract.businessId)}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">店面类型:</el-col>
            <el-col :span="18" class="span-text">{{changeShopType(wxRentContract.shopType)}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">负责人:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.linkPerson}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">联系电话:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.linkPhone}}</el-col>
          </el-row>
        </div>
      </div>
      <div class="text-box">
        <div class="text-box-title" :style="{background:navigationInfo.moduleColor}">签约信息</div>
        <div class="text-box-content">
          <el-row>
            <el-col :span="3" class="span-title">租赁开始日期:</el-col>
            <el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalStartDate)}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">租赁截止日期:</el-col>
            <el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalEndDate)}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">总租期:</el-col>
            <el-col :span="18" class="span-text">{{totalPeriodMonth+'个月'+totalPeriodDay+"天"}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">装修期:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.fixStartDate+' 至 '+wxRentContract.fixEndDate}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">计租开始日期:</el-col>
            <el-col :span="18" class="span-text">{{changeDate(wxRentContract.startDate)}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">账单生成方式:</el-col>
            <el-col :span="18" class="span-text">{{getAdjustPeriod}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title" v-if="contractType!=3&&contractType!=4">计租方式:</el-col>
            <el-col :span="18" class="span-text" v-if="contractType!=3&&contractType!=4">{{changeType(wxRentContract.type)}}</el-col>
          </el-row>
        </div>
      </div>
      <div class="text-box">
        <div class="text-box-title" :style="{background:navigationInfo.moduleColor}">费用明细</div>
        <div class="text-box-content">
          <el-row>
            <el-col :span="3" class="span-title">计租面积:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.rentArea+'㎡'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title" v-if="contractType!=3&&contractType!=4">计租方式:</el-col>
            <el-col :span="18" class="span-text" v-if="contractType!=3&&contractType!=4">{{changeType(wxRentContract.type)}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" class="span-title">保底营业额:</el-col>
            <el-col :span="18" v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" class="span-text">{{wxRentContract.revenue/100+'元'}}</el-col>
          </el-row>
          <el-row v-if="wxRentContract.type!=2&&contractType==2">
            <el-col :span="3" class="span-title">租金单价:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.rentPrice+' ㎡/元/'+priceUnitType}}</el-col>
          </el-row>
          <el-row v-if="wxRentContract.type!=2&&contractType==4">
            <el-col :span="3" class="span-title">物业费单价:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.rentPrice/100+' ㎡/元/'+priceUnitType}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" v-if="wxRentContract.type!=2" class="span-title">{{contractType==2?"租金:":"物业费:"}}</el-col>
            <el-col :span="18" v-if="wxRentContract.type!=2" class="span-text">{{wxRentContract.price/100+' 元/'+priceUnitType}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4" class="span-title">联营扣点:</el-col>

            <el-col :span="18" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4 && wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio!=''" class="span-text">
              <!-- aaa -->
              <show-rate-list class="cur-rate-list"></show-rate-list>
            </el-col>
            <el-col :span="18" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4 && wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio==''" class="span-text">{{wxRentContract.payRatio/100+'%'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">押金:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.deposit/100+' 元'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="span-title">付款周期:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.receivePeriod+' 月'}}</el-col>
          </el-row>
          <el-row v-if="wxRentContract.latePayRatio">
            <el-col :span="3" class="span-title">滞纳金费率:</el-col>
            <el-col :span="18" class="span-text">{{wxRentContract.latePayRatio+ '%'}}<span  style="margin-left:30px;">{{'欠缴后 '+wxRentContract.latePayDay+' 日开始计费'}}</span></el-col>
          </el-row>
          <el-row  v-if="wxRentContract.adjustRatio&&wxRentContract.adjustRatio.length>0">
            <el-col :span="3" class="span-title">
              年租金调整:
              </el-col>
             <el-col v-if="wxRentContract.adjustRatioWay==1" :span="18" class="span-text"><span  v-for="(item,index) in wxRentContract.adjustRatio"  :key='index'>{{"第"+(index+2)+"年上浮"+item/100+'%'+(wxRentContract.adjustRatio.length>1&&wxRentContract.adjustRatio.length>index+1?', ':'')}}</span></el-col>
              <el-col v-if="wxRentContract.adjustRatioWay==2" :span="18" class="span-text"><span  v-for="(item,index) in wxRentContract.adjustRatio"  :key='index'>{{"第"+(index+2)+"年上浮"+item/100+'元/'+priceUnitType+(wxRentContract.adjustRatio.length>1&&wxRentContract.adjustRatio.length>index+1?', ':'')}}</span></el-col>
              <el-col v-if="wxRentContract.adjustRatioWay==3" :span="18" class="span-text"><span  v-for="(item,index) in wxRentContract.adjustRatio"  :key='index'>{{"第"+(index+2)+"年"+item/100+'元/'+priceUnitType+(wxRentContract.adjustRatio.length>1&&wxRentContract.adjustRatio.length>index+1?', ':'')}}</span></el-col>
          </el-row>
          <el-row v-show="businessType!='3'">
            <el-col :span="3" class="span-title">合同账单:</el-col>
            <el-col :span="18" class="span-text">
                <rent-bill :data="billData" :editIf='true' :ref="billTk"></rent-bill>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="text-box" v-if="businessType==3">
        <div class="text-box-title" :style="{background:navigationInfo.moduleColor}">租赁信息</div>
        <div class="text-box-content">
          <el-row>
            <el-col :span="2" class="span-title">租赁费用:</el-col>
            <el-col :span="6" class="span-text">{{Number(rentOweCount)>0?'有欠缴':'无欠缴'}}</el-col>
            <el-col :span="2" class="span-title">物业费用:</el-col>
            <el-col :span="6" class="span-text">{{Number(propertyOweCount)>0?'有欠缴':'无欠缴'}}</el-col>
            <el-col :span="2" class="span-title">押金情况:</el-col>
            <el-col :span="6" class="span-text">{{Number(depositOweCount)>0?'有欠缴':'无欠缴'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="span-title">其他:</el-col>
            <el-col :span="6" class="span-text">{{sRemark}}</el-col>
          </el-row>
        </div>
      </div>
      <div class="text-box">
        <!-- <div class="text-box-title" :style="{background:navigationInfo.moduleColor}">审批意见</div> -->
        <div class="text-box-content">
          <el-row>
            <el-col :span="3" class="span-title">合同附件:</el-col>
            <el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length<=0">无</el-col>
            <el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length>0"><div class="download-file" v-for="(item,index) in fileNames" :key="index" @click.stop.prevent="download(index)">{{item.name}}</div></el-col>
          </el-row>
        </div>
      </div>
      <el-row style="margin:20px 0 0;text-align:center;">
        <el-button @click.stop.prevent="cancel">返回</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import commonUtil from "../../core/tool/commonUtil";
import AjaxUtil from "../../core/tool/ajaxService";
import { mapState, mapActions } from "vuex";
import{ ContractUrl } from "../contract/businessComp/UrlEnum.js"
import { CouponCacheData } from "../../service/couponData/data.js";
import rentBill from "../contract/contractutil/rentbill.vue";
import { ContractData } from "../../service/contract/data.js";
import rentShop from "./contractutil/rentshop.vue";
import showRateList from './rent/showRateList.vue';
import moment from "moment";

export default {
  name: "pointsCheck",
  components: {
    rentBill,
    rentShop,
    showRateList,

  },
  data() {
    return {
      brands:[],
      fromAddTask:"",
      merchentEditIf: true,
      priceUnitType:'',
      priceUnitOption:ContractData.priceUnitOption,
      totalPeriodMonth: 0,
      totalPeriodDay: 0,
      contractType:0,
      remark: "",
      wxShops:[],
      billData:[],
      billTk: "rentbill",
      wxRentContract:'',
      rentOweCount:'',
      propertyOweCount :'',
      businessType:'',
      depositOweCount:'',
      sRemark:'',
      wxMerchant:'',
      businessIds:[],
      progressData:[],
      fileNames:[],
      active:0,
      // 店铺类型
      shopTypes: ContractData.shopTypes,
      //计租计算方式
      computedTypes: ContractData.computedTypes,
    };
  },
  //新增computed属性
  computed: {
    ...mapState({
      topNav: state => state.topNav.data, //将 this.topNav 映射为  this.$store.topNav.data
      navigationInfo: state => state.topNav.navigationInfo,
      formData: state => state.setRentInfo.formData,
    }),
    getAdjustPeriod() {
      return this.wxRentContract.adjustPeriod == 3
        ? "按自然月生成"
        : "按计租日期生成";
    },
  },

  methods: {
    cStatus(item) {
      return item!=undefined?CouponCacheData.rentStatus.filter(e => {
        return e.value == item.toString();
      })[0].name:'';
    },
    changeBrand(brand){
      return this.brands.length>0&&brand?this.brands.filter(e=>e.id==brand)[0].value:''
    },
    changeBusiness(businessId){
      return this.businessIds.length>0&&businessId!=undefined?this.businessIds.filter(e=>e.id==businessId)[0].title:''
    },
    changeShopType(id){
      return id!=undefined?this.shopTypes.filter(e=>e.value==id)[0].label:'';
    },
    changeDate(date) {
      return moment(date).format("YYYY-MM-DD");
    },
    changeType(type){
      return type!=undefined?this.computedTypes.filter(e=>e.value==type)[0].label:'';
    },  
    ...mapActions([
      "setNavData", // 将this.setNavData 映射为 this.$store.dispatch('setNavData')
      "setFormData",
    ]),
    download:function(index){
      window.open(this.fileNames[index].url)
    },
    cancel(){
      this.$router.back(-1);
    },
    getData() {
      let _this=this;
      this.contractType=this.$route.query.contractType;
      if(this.$route.query.contractType==3||this.$route.query.contractType==4){
        this.getFetch(
          "/api/wxPropertyContract/findById?id=" + this.$route.query.id
        ).then(d => {
            d.data.wxPropertyContract.adjustRatio=d.data.wxPropertyContract.adjustRatio?JSON.parse(d.data.wxPropertyContract.adjustRatio):'';
            _this.wxRentContract=d.data.wxPropertyContract;
            _this.wxRentContract.fixStartDate=_this.wxRentContract.fixStartDate?moment(_this.wxRentContract.fixStartDate).format('YYYY-MM-DD'):""
            _this.wxRentContract.fixEndDate=_this.wxRentContract.fixEndDate?moment(_this.wxRentContract.fixEndDate).format('YYYY-MM-DD'):""
            this.priceUnitType = this.wxRentContract.priceUnit?this.priceUnitOption.filter(e=>e.value==this.wxRentContract.priceUnit)[0].name:'';
            _this.totalPeriodMonth = d.data.totalPeriodMonth
            _this.totalPeriodDay = d.data.totalPeriodDay
            _this.fileNames = JSON.parse(d.data.wxPropertyContract.fileNames);
            _this.wxShops=d.data.wxShops
            if(_this.$route.query.businessType==3){
              _this.rentOweCount=d.data.rentOweCount;
              _this.propertyOweCount=d.data.propertyOweCount;
              _this.depositOweCount=d.data.depositOweCount;
              _this.sRemark=d.data.remark;
            }
            if(_this.businessType!=3){
              _this.$refs[_this.billTk].setData(d.data.previewBillRentList);
            }
            if (d.data.wxRentContract.busDiscountRatio == undefined ||  d.data.wxRentContract.busDiscountTime == undefined) {
              d.data.wxRentContract.busDiscountRatio = '';
              d.data.wxRentContract.busDiscountTime = 1;
            }
            //aaa
            this.formData.busDiscountRatio = d.data.wxRentContract.busDiscountRatio;
            this.formData.busDiscountTime = d.data.wxRentContract.busDiscountTime;
            this.formData.payRatio = d.data.wxRentContract.payRatio;
            let curObj = Object.assign({},this.formData);
            this.setFormData(curObj);
        });
      }else{
        this.getFetch(
          "/api/wxRentContract/findById?id=" + this.$route.query.id
        ).then(d => {
            d.data.wxRentContract.adjustRatio=d.data.wxRentContract.adjustRatio?JSON.parse(d.data.wxRentContract.adjustRatio):'';
            _this.wxRentContract=d.data.wxRentContract;
            _this.wxRentContract.fixStartDate=_this.wxRentContract.fixStartDate?moment(_this.wxRentContract.fixStartDate).format('YYYY-MM-DD'):""
            _this.wxRentContract.fixEndDate=_this.wxRentContract.fixEndDate?moment(_this.wxRentContract.fixEndDate).format('YYYY-MM-DD'):""
            this.priceUnitType = this.wxRentContract.priceUnit?this.priceUnitOption.filter(e=>e.value==this.wxRentContract.priceUnit)[0].name:'';
            _this.totalPeriodMonth = d.data.totalPeriodMonth
            _this.totalPeriodDay = d.data.totalPeriodDay
            _this.fileNames = JSON.parse(d.data.wxRentContract.fileNames);
            _this.wxShops=d.data.wxShops;
            if(_this.$route.query.businessType==3){
              _this.rentOweCount=d.data.rentOweCount;
              _this.propertyOweCount=d.data.propertyOweCount;
              _this.depositOweCount=d.data.depositOweCount;
              _this.sRemark=d.data.remark;
            }
            if(_this.businessType!=3){
              _this.$refs[_this.billTk].setData(d.data.previewBillRentList);
            }
            if (d.data.wxRentContract.busDiscountRatio == undefined ||  d.data.wxRentContract.busDiscountTime == undefined) {
              d.data.wxRentContract.busDiscountRatio = '';
              d.data.wxRentContract.busDiscountTime = 1;
            }
            //aaa
            this.formData.busDiscountRatio = d.data.wxRentContract.busDiscountRatio;
            this.formData.busDiscountTime = d.data.wxRentContract.busDiscountTime;
            this.formData.payRatio = d.data.wxRentContract.payRatio;
            let curObj = Object.assign({},this.formData);
            this.setFormData(curObj);
        });
      }
      this.getFetch(
        "/api/workflow/applyHistoryAndAssignee?businessId=" + this.$route.query.id
      ).then(d => {
        let progressData=d.data;
        progressData=d.data;
        progressData.reverse();
        let indexs=0;
        _this.progressData=[]
        progressData.map((item,index)=>{
          if(item.isLastStart){
            indexs=index
          }
        })
         progressData.map((item,index)=>{
          if(index>=indexs){
            _this.progressData.push(item)
          }
        })
        _this.progressData.map((item,index)=>{
          if(item.status==1){
            item.userName=item.userName+'( 发起审批)'
          }else if(item.status==2){
            item.userName=item.userName+'( 已审批)'
          }else if(item.status==3){
            item.userName=item.userName+'( 驳回)'
          }else if(item.status==4){
            item.userName=item.userName+'( 待审批)'
          }
        })
        for(var i=1;_this.progressData.length<=10;i++) { 
          if(_this.progressData[i].status==4) {
             _this.active=i 
              break; 
          } 
        } 
      });
    }
  },
  mounted: function() {
    // this.getFetch("/api/at/list?describe=")
    commonUtil.pvuv.setPVUV.apply(this, []);
  },
  created() {
    // this.reload()
    this.businessType=this.$route.query.businessType;
    if(this.$route.query.contractType==2){
      this.setNavData(["合同管理", "多经点位", "租金合同", "查看"]);
    }else{
      this.setNavData(["合同管理", "多经点位", "物业合同", "查看"]);
    }
    if(this.$route.query.flags){
      this.fromAddTask = this.$route.query.flags;
      this.setNavData(["招商管理", "多经点位", "租金合同", "查看"]);
    }
    
    this.getData();
    //获取品牌列表
    this.getFetch("/api/wxBrand/queryBrand")
      .then(d => {
        this.brands = d.data;
      })
      .catch(err => {
        this.$message.error(err.data);
      });
    this.getFetch(ContractUrl.businessList)
      .then(d => {
        this.businessIds = d.data;
      })
      .catch(err => {
        this.$message.error(err.data);
      });
  }
};
</script>
<style scoped>
.text-box {
  background: #fff;
  margin-bottom: 20px;
}
.download-file{
  cursor: pointer;
}
.text-box-title {
  height: 42px;
  line-height: 42px;
  padding-left: 20px;
  color: #fff;
  font-weight: 400px;
  font-size: 14px;
  background: rgba(51, 153, 255, 1);
}
.text-box-content {
  padding: 20px;
  line-height: 36px;
  font-size: 12px;
}
.span-title {
  text-align: right;
  padding-right: 15px;
}
.layout-content {
  width: 100%;
  height: auto;
  min-height: 300px;
  background: #141e29;
  border-radius: 2px;
  padding: 0 20px 20px 20px;
  overflow: hidden;
  text-align: left;
}
.el-form {
  background: #f5f7f8;
  text-align: left;
  padding: 25px 22px 22px;
  margin-bottom: 20px !important;
}
.el-form .el-form-item {
  margin-bottom: 0 !important;
  /* width: 200px; */
}
/* .el-select{
      width:120px;
  } */
.tableContainer {
  margin-top: 20px !important;
  background: #fff;
}
.el-button {
  /* width: 60px; */
  border: none !important;
  margin: 0 10px;
  height: 40px;
}
.builtBtn {
  width: 100px;
  height: 32px;
  background: rgba(81, 169, 201, 1);
  border: 0 !important;
  line-height: 32px;
  text-align: center;
  margin: 0;
  padding: 0 !important;
}
.builtBtn:hover {
  background: rgba(81, 169, 201, 0.88);
}
.builtBtn i {
  margin-right: 10px;
}
.fx_send .el-form-item__content .el-select {
  width: 120px !important;
}
.fx_title .el-input {
  width: 150px;
}
.approval-list .span-title{
  padding-right: 0;
}
.cur-rate-list /deep/ .rate-show-list li {
  margin-top: 6px;
}
</style>