<template>
    <div>
        <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="newinfo" 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">{{newinfo.contractType}}</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="合同编号" prop="contractNumber">
                        <div class="duiqi">{{newinfo.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">{{newinfo.sectionNumber}}</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="合同名称" prop="contractName">
                        <div class="duiqi">{{newinfo.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">{{newinfo.contractSigningDate}}</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="押金" prop="earnestMoney">
                        <div class="duiqi">{{newinfo.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">{{newinfo.leaseStartDate}}</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="终止日期" prop="contractTerminationDate">
                        <div class="duiqi">{{newinfo.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">{{newinfo.paymentCycle}}</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="租金" prop="contractAmount">
                        <div class="duiqi">{{newinfo.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">{{newinfo.paymentDay}}</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="承租人银行账号" prop="tenantBankAccount">
                        <div class="duiqi">{{newinfo.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">{{newinfo.tenantName}}</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="联系电话" prop="tenantTelephone">
                        <div class="duiqi">{{newinfo.tenantTelephone}}</div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="附件信息" prop="appendicesContract">
                    <div class="duiqi greens" @click ="newinfo.appendicesContract?openfile(newinfo.appendicesContract):''">{{newinfo.appendicesContract?'查看详情':'暂无文件'}}</div>
                  </el-form-item>
                </el-form>
              </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="newshop" 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">{{newshop.name}}</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="手机号" prop="phone">
                        <div class="duiqi">{{newshop.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">{{newshop.idCardType}}</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="身份证号码" prop="idCardNumber">
                        <div class="duiqi">{{newshop.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+newshop.idCardFrontImage" fit="contain"></el-image>
                    </div>
                  </el-form-item>
                  <el-form-item label="身份证照片（反）" prop="idCardBackImage">
                    <div style="margin-top: 10px;">
                      <el-image style="width: 200px;" :src="$baseURL+newshop.idCardBackImage" fit="contain"></el-image>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
    </div>
  </template>
  
  <script>
    import TitleWithCircle from '@/components/top/index';
    import {
      cerePlatformMerchantinfo
    } from '@/api/newly.js'
    export default {
      components: {
        TitleWithCircle
      },
      props: {
        info: {
          type: Object,
          default: function() {
            return {}; // 返回一个空数组作为默认值
          },
        },
      },
      data() {
        return {
          url:'',
          type:'1',
          tableData: [],
          xiangTab: 'first',
          siteIds: [],
          list: [],
          advIds: [],
          shopIds: [],
          shop: {},
          newshop:{},
          newinfo:{}
        }
      },
      created() {
  
      },
      computed: {
  
      },
      methods: {
        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.newinfo = row
          cerePlatformMerchantinfo({id:row.relatedMerchants}).then(res => {
            console.error(res)
            this.newshop = res.data
          })
        },
        closeFn() {
          this.$emit('change', false);
        },
      }
    }
  </script>
  <style>
    .el-form-item__label {
      color: #a2a2a2;
    }
    
    .greens {
      color: #3F9B6A;
    }
  </style>
  