webapp / GreenwayWeb

<template>
  <div>
    <div v-show="type == '1'">
      <el-tabs v-model="xiangTab">
        <el-tab-pane label="合同信息" name="first">
          <div style="margin-top: 30px;" class="editcss">
            <TitleWithCircle title="合同信息" />
            <div style="padding: 20px;margin-top: 10px;">
              <el-form :model="info" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <!-- <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="合同类型" prop="contractType">
                      <div class="duiqi">{{info.contractType}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="合同编号" prop="contractNumber">
                      <div class="duiqi">{{info.contractNumber}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="标段号" prop="sectionNumber">
                      <div class="duiqi">{{info.sectionNumber}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="合同名称" prop="contractName">
                      <div class="duiqi">{{info.contractName}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="合同签订日期" prop="contractSigningDate">
                      <div class="duiqi">{{info.contractSigningDate}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="押金" prop="earnestMoney">
                      <div class="duiqi">{{info.earnestMoney}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="起租日期" prop="leaseStartDate">
                      <div class="duiqi">{{info.leaseStartDate}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="终止日期" prop="contractTerminationDate">
                      <div class="duiqi">{{info.contractTerminationDate}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="付款周期" prop="paymentCycle">
                      <div class="duiqi">{{info.paymentCycle}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="租金" prop="contractAmount">
                      <div class="duiqi">{{info.contractAmount}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="付款日" prop="paymentDay">
                      <div class="duiqi">{{info.paymentDay}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="承租人银行账号" prop="tenantBankAccount">
                      <div class="duiqi">{{info.tenantBankAccount}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="出租人名称" prop="tenantName">
                      <div class="duiqi">{{info.tenantName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="联系电话" prop="tenantTelephone">
                      <div class="duiqi">{{info.tenantTelephone}}</div>
                    </el-form-item>
                  </el-col>
                </el-row> -->
                <el-row :gutter="20">
                  <el-col :span="item.width == '50%（半行）'?12:item.width == '100%（一行）'?24:12" v-for="(item,index) in list1" >
                    <el-form-item :label="item.name" prop="appendicesContract" v-if="item.type == '附件'">
                      <div class="duiqi greens" @click ="item.value?openfile(item.value):''">{{item.value?'查看详情':'暂无文件'}}</div>
                    </el-form-item>
                    <el-form-item :label="item.name" v-else-if="item.type == '图片'">
                      <div v-if="item.value">
                          <div style="display: flex;">
                            <allimg v-if="item1" :src="item1" fit="contain"  v-for="item1 in item.value.split(',')" style="width: 112px;height: 112px;border: 1px dotted #dcdfe6;border-radius: 2px;overflow: hidden;margin: 0 10px 10px 0;"/>
                          </div>
                      </div>
                      <div  class="duiqi" v-else>无</div>
                    </el-form-item>
                    <el-form-item :label="item.name" prop="paymentDay" v-else-if="item.type != '资源' && item.type != '商家'">
                      <div class="duiqi">{{item.value}}<span v-if="item.key == 'earnestMoney' || item.key == 'contractAmount'"> 元</span></div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="附件信息" prop="appendicesContract">
                  <div class="duiqi greens" @click ="info.appendicesContract?openfile(info.appendicesContract):''">{{info.appendicesContract?'查看详情':'暂无文件'}}</div>
                </el-form-item>
              </el-form>
            </div>
            <TitleWithCircle title="合同修订历史" />
            <div style="padding: 20px;margin-top: 10px;">
              <el-table :data="list"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">

                <el-table-column label="类型">
                  <template slot-scope="scope">
                    {{scope.row.contractChangeReason}}

                  </template>
                </el-table-column>
                <el-table-column label="操作时间">
                  <template slot-scope="scope">
                    {{scope.row.updateDate}}

                  </template>
                </el-table-column>
                <el-table-column label="操作人">
                  <template slot-scope="scope">
                    {{scope.row.updateUser}}

                  </template>
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                  <div @click="open(scope.row)" class="tableBtn greens">查看</div>
                </template>
              </el-table-column>
              </el-table>

            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商家信息" name="second">
          <div style="margin-top: 30px;" class="editcss">
            <TitleWithCircle title="基础信息" />
            <div style="padding: 20px;margin-top: 10px;">
              <el-form :model="shop" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="姓名" prop="name">
                      <div class="duiqi">{{shop.name}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="手机号" prop="phone">
                      <div class="duiqi">{{shop.phone}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="证件类型" prop="idCardType">
                      <div class="duiqi">{{shop.idCardType}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="身份证号码" prop="idCardNumber">
                      <div class="duiqi">{{shop.idCardNumber}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="身份证照片（正）" prop="idCardFrontImage">
                  <!-- <div style="margin-top: 10px;">
                    <el-image style="width: 200px;" :src="$baseURL+shop.idCardFrontImage" fit="contain"></el-image>
                  </div> -->
                  <div style="display: flex;">
                    <allimg  :src="shop.idCardFrontImage" fit="contain" style="width: 112px;height: 112px;border: 1px dotted #dcdfe6;border-radius: 2px;overflow: hidden;margin: 0 10px 10px 0;"/>
                  </div>
                </el-form-item>
                <el-form-item label="身份证照片（反）" prop="idCardBackImage">
                  <!-- <div style="margin-top: 10px;">
                    <el-image style="width: 200px;" :src="$baseURL+shop.idCardBackImage" fit="contain"></el-image>
                  </div> -->
                  <div style="display: flex;">
                    <allimg  :src="shop.idCardBackImage" fit="contain" style="width: 112px;height: 112px;border: 1px dotted #dcdfe6;border-radius: 2px;overflow: hidden;margin: 0 10px 10px 0;"/>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商户租赁信息" name="third">
          <div class="editcss">
            <div>
              <el-table :data="tableData"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                <el-table-column label="商铺名称">
                  <template slot-scope="scope">
                    {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName?scope.row.advertisingName:scope.row.venueName}}

                  </template>
                </el-table-column>
                <el-table-column label="实际使用面积" >
                  <template slot-scope="scope">
                    {{scope.row.actualArea ? scope.row.actualArea :  scope.row.actualUsableArea?scope.row.actualUsableArea:'-'}}

                  </template>
                </el-table-column>
                <el-table-column label="类型" >
                  <template slot-scope="scope">
                    {{scope.row.shopName ? '商铺' : scope.row.advertisingType?scope.row.advertisingType:'场地'}}

                  </template>
                </el-table-column>
                <!-- <el-table-column label="状态" min-width="150">
                <template slot-scope="scope">
                  {{scope.row.cereContractInformation.tenantName}}

                </template>
              </el-table-column> -->
                <el-table-column label="操作" >
                  <template slot-scope="scope">
                    <div class="tableBtn greens" @click="details(scope.row)">查看</div>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div v-if="info.dataStatus == '4' && issp == '2'" style="margin-top: 20px;">
        <TitleWithCircle title="审核情况"/>
        <div style="padding: 20px;">
          <el-form :model="info" label-width="100px" class="demo-ruleForm">
            <el-form-item label="状态">
              <el-radio v-model="radio" label="1">通过</el-radio>
              <el-radio v-model="radio" label="6">不通过</el-radio>
            </el-form-item>
            <el-form-item label="审核意见">
              <el-input maxlength="200" show-word-limit rows="4" v-model="reviewComments" placeholder="请输入审核意见"
                type="textarea" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-if="(info.dataStatus == '1' || info.dataStatus == '6')&& info.isInterior == '1' && xiangTab=='first'" style="margin-top: 20px;">
        <TitleWithCircle title="审核结果"/>
        <div style="padding: 20px;">
          <el-form :model="info" label-width="100px" class="demo-ruleForm">
            <el-form-item label="状态">
              <div class="duiqi">{{info.dataStatus=='1'?'使用中':info.dataStatus=='3'?'已拒绝':'无'}}</div>
            </el-form-item>
            <el-form-item label="审核意见">
              <div class="duiqi">{{info.reviewComments || '无'}}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div>
        <el-button v-if="info.dataStatus == '4' && issp == '2'" @click="minSev"
      style="background-color: #3F9B6A;color: #fff;">确定</el-button>
        <el-button class="buttonHover"
          style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;margin-top: 20px;"
          @click="changetype">返回</el-button>
      </div>
    </div>
    <div v-show="type == '2'">
      <oneht ref="onhet"></oneht>
      <div>
        <el-button class="buttonHover"
          style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;margin-top: 20px;"
          @click="changetype">返回</el-button>
      </div>
    </div>
    <div v-show="type == '3'">
      <div v-if="detailstype == '商铺'">
        <resourceCommodity :editbgid="detailsinfo" @removeonaction="removeonaction"></resourceCommodity>
      </div>
      <div v-if="detailstype == '广告位'">
        <chakanmap :editbgid="detailsinfo" @removeonaction="removeonaction"></chakanmap>
      </div>
      <div v-if="detailstype == '场地'">
        <chakancd :editbgid="detailsinfo" @removeonaction="removeonaction"></chakancd>
      </div>
    </div>

  </div>
</template>

<script>
  import oneht from "@/components/chakan/oneht";
  import {
    queryByContractcontractNumber
  } from '../../api/commodityLease.js'
  import {
    businessListGetById
  } from '../../api/business.js'
  import TitleWithCircle from '@/components/top/index';
  import {
    cerePlatformMerchantinfo
  } from '../../api/newly.js'
  import resourceCommodity from '@/components/resourceCommodity/index'
      import chakanmap from '@/components/chakan/map'
      import allimg from '@/components/chakan/allimg.vue';
  import chakancd from '@/components/chakan/cd'
  import {
    editById,
  } from '@/api/manage.js'
  export default {
    components: {
      oneht,
      TitleWithCircle,
      chakancd,
      chakanmap,
      resourceCommodity,
      allimg
    },
    props: {
      info: {
        type: Object,
        default: function() {
          return {}; // 返回一个空数组作为默认值
        },
      },
      issp: {
        type: String,
        default: function() {
          return '1';
        },
      },
    },
    data() {
      return {
        reviewComments:'',
        radio: '1',
        url:'',
        type:'1',
        tableData: [],
        xiangTab: 'first',
        siteIds: [],
        list: [],
        advIds: [],
        shopIds: [],
        shop: {},
        newshop:{},
        newinfo:{},
        detailsinfo:{},
        detailstype:'',
        list1:[]
      }
    },
    created() {
      console.log(this.info)
      this.list1 = JSON.parse(this.info.templateInformation)
      console.log(this.list1)
      this.url = process.env.VUE_APP_DOMAIN_PREFIX_1
      let infonew = {
        contractNumber: this.info.contractNumber
      }
      if(this.info.dataStatus == 1) {
        infonew.dataStatus = '1'
      }
      queryByContractcontractNumber(infonew).then(res => {
        console.error(res)
        // this.shop = res.data.shop
        this.siteIds = res.data.siteIds
        this.shopIds = res.data.shopIds
        this.advIds = res.data.advIds
        this.list = res.data.list
        this.tableData = [...res.data.siteIds, ...res.data.shopIds, ...res.data.advIds]
      })
      cerePlatformMerchantinfo({id:this.info.relatedMerchants}).then(res => {
        console.error(res)
        this.shop = res.data
      })
    },
    computed: {

    },
    methods: {
      minSev() {
        editById({
          isInterior:'1',
          contractNumber: this.info.contractNumber,
          dataStatus: this.radio,
          reviewComments: this.reviewComments?this.reviewComments:null
        }).then(res => {
          console.error(res)
          if (res.code == 200) {
            this.$message({
              message: '处理成功',
              type: 'success'
            })
            this.info.dataStatus = this.radio
            this.$emit('removeonaction', '1')
          } else {
            this.$message({
              message: '处理失败',
              type: 'error'
            })
          }
        })
      },
      removeonaction() {
        this.type = '1'
      },
      details(row) {
        this.detailstype = row.shopName?'商铺':row.advertisingType?'广告位':'场地'
        this.detailsinfo = row
        this.type = '3'
      },
      openfile(e) {
        if (e) {
          const fullUrl = this.$baseURL + e;
          try {
            window.open(fullUrl, '_blank'); // 在新标签页中打开文件
          } catch (error) {
            console.error('打开文件失败:', error);
          }
        } else {
          console.error('无文件可查看');
        }
      },
      changetype(){
        this.xiangTab= 'first'
        if(this.type == '1'){
          this.$emit('removeonaction', '1')
        }else{
          this.type = '1'
        }
      },
      open(row) {
        console.error(row)
        this.type = '2'
        this.$refs.onhet.open(row)
      },
      closeFn() {
        this.$emit('change', false);
      },
    }
  }
</script>
<style>
  .el-form-item__label {
    color: #a2a2a2;
  }
  
  .greens {
    color: #3F9B6A;
  }
</style>