<template>
  <div class="zhuti" v-if='detbox'>
            <div style="height:58px;line-height:58px;">
              <div style="color:#0006"> <span>商家管理</span> <span style="padding:0 5px;">></span> <span
                  style="color:#000000e6">查看</span></div>
            </div>
              <el-tabs v-model="xiangTab">
                <el-tab-pane label="商家信息" name="first">
                  <div style="margin-top: 30px;" class="editcss">
                    <div class="titles">
                      基础信息
                    </div>
                    <div style="padding: 20px;">
                      <el-form :model="list" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                        <el-row :gutter="20">
                          <el-col :span="8">
                            <el-form-item label="姓名" prop="shopName">
                              <div  class="duiqi">{{list.chargePersonName}}</div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item label="手机号" prop="shopName">
                              <div  class="duiqi">{{list.chargePersonPhone}}</div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item label="账户密码" prop="shopName">
                              <div  class="duiqi">{{list.shopPassword}}</div>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="8">
                            <el-form-item label="证件类型" prop="shopName">
                              <div  class="duiqi">{{xiangData.shopName}}</div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item label="身份证号码" prop="shopName">
                              <div  class="duiqi">{{xiangData.shopName}}</div>
                            </el-form-item>
                          </el-col>

                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="12">
                            <el-form-item label="身份证照片（正）" prop="shopName">
                              <div  class="duiqi">{{xiangData.shopName}}</div>
                            </el-form-item>
                          </el-col>


                        </el-row>
<el-row :gutter="20">

                          <el-col :span="12">
                            <el-form-item label="身份证照片（反）" prop="shopName">
                              <div  class="duiqi">{{xiangData.shopName}}</div>
                            </el-form-item>
                          </el-col>

                        </el-row>
                      </el-form>
                    </div>

                  </div>
                </el-tab-pane>
                <el-tab-pane label="意向信息" name="second">
                  <div style="margin-top: 30px;" class="editcss">

                      <div style="padding: 20px;">
                        <el-form :model="xiangData"  ref="ruleForm" label-width="140px" class="demo-ruleForm">
                          <el-row :gutter="20">
                            <el-col :span="8">
                              <el-form-item label="意向租赁类型" prop="shopName">
                                <div  class="duiqi">{{xiangData.shopName}}</div>

                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="意向经营类型" prop="venueNumber">
                                <div class="duiqi">{{xiangData.venueNumber}}</div>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="意向租金（月）" prop="venueNumber">
                                <div class="duiqi">{{xiangData.venueNumber}}</div>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="8">
                              <el-form-item label="意向租赁周期" prop="houseNumber">
                                <div  class="duiqi">{{xiangData.houseNumber}}</div>

                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="意向区域" prop="architecturalForm">
                                <div  class="duiqi">{{xiangData.architecturalForm}}</div>

                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                      </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="招商过程信息" name="third">
                  <div style="margin-top: 30px;" class="editcss">
                    <div class="titles">
                      跟进记录
                    </div>

                      <div style="padding: 20px;">
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                                <el-table-column label="跟进人员" min-width="150" >

                                </el-table-column>
                                <el-table-column label="跟进时间"  min-width="150">
                                <template slot-scope="scope">
                                 {{scope.row.cereContractInformation.contractSigningDate}}

                                </template>
                                </el-table-column>
                                <el-table-column label="跟进类型"  min-width="300">
                                  <template slot-scope="scope">
                                   {{scope.row.cereContractInformation.leaseStartDate}}

                                  </template>
                                </el-table-column>
                                <el-table-column  label="客户级别" min-width="100">
                                <template slot-scope="scope">
                                 {{scope.row.cereContractInformation.lessorName}}

                                </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="当前状态"  min-width="150">
                                  <template slot-scope="scope">
                                   {{scope.row.cereContractInformation.shopNumber}}
                                  </template>
                                </el-table-column>

                                <el-table-column label="操作" min-width="300">
                                  <template slot-scope="scope">
                                    <div @click="" class="tableBtn greens">查看记录</div>
                                  </template>
                                </el-table-column>
                              </el-table>
                              <!-- <div class="fenye">
                                  <div>共{{total}}条</div>
                                <el-pagination :hide-on-single-page='flag' background small :current-page="currentPage"
                                  :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next" :total="total "
                                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                              </div> -->
                            </el-col>
                          </el-row>

                      </div>

                    <div class="titles">
                      谈判记录
                    </div>
                    <div style="margin-top: 30px;" class="editcss">
                      <div style="padding: 20px;">

                          <el-row :gutter="20">
                            <el-col :span="24">

                              <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                                <el-table-column label="跟进人员" min-width="150" >

                                </el-table-column>
                                <el-table-column label="谈判时间"  min-width="150">
                                <template slot-scope="scope">
                                 {{scope.row.cereContractInformation.contractSigningDate}}

                                </template>
                                </el-table-column>
                                <el-table-column label="谈判主题"  min-width="300">
                                  <template slot-scope="scope">
                                   {{scope.row.cereContractInformation.leaseStartDate}}

                                  </template>
                                </el-table-column>
                                <el-table-column  label="标段号" min-width="100">
                                <template slot-scope="scope">
                                 {{scope.row.cereContractInformation.lessorName}}

                                </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="当前状态"  min-width="150">
                                  <template slot-scope="scope">
                                   {{scope.row.cereContractInformation.shopNumber}}
                                  </template>
                                </el-table-column>

                                <el-table-column label="操作" min-width="300">
                                  <template slot-scope="scope">
                                    <div @click="" class="tableBtn greens">查看记录</div>
                                  </template>
                                </el-table-column>
                              </el-table>
                              <!-- <div class="fenye">
                                  <div>共{{total}}条</div>
                                <el-pagination :hide-on-single-page='flag' background small :current-page="currentPage"
                                  :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next" :total="total "
                                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                              </div> -->
                            </el-col>
                          </el-row>

                      </div>
                    </div>
                   </div>
                </el-tab-pane>
                <el-tab-pane label="商户租赁信息" name="four">
                  <div style="margin-top: 30px;" class="editcss">
                    <div class="titles">
                      商铺资源
                    </div>
                      <div style="padding: 20px;">
<el-form :model="xiangData"  ref="ruleForm" label-width="140px" class="demo-ruleForm">


                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="主体名称" prop="shopName">
                      <div  class="duiqi">{{xiangData.shopName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="主体类型" prop="shopName">
                      <div  class="duiqi">{{xiangData.shopName}}</div>
                    </el-form-item>
                  </el-col>

                </el-row>
                </el-form>
                              <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                                <el-table-column label="商铺名称" min-width="150" >

                                </el-table-column>
                                <el-table-column label="详细位置"  min-width="150">
                                <template slot-scope="scope">


                                </template>
                                </el-table-column>
                                <el-table-column label="租金/周期"  min-width="300">
                                  <template slot-scope="scope">


                                  </template>
                                </el-table-column>
                                <el-table-column  label="状态" min-width="100">
                                <template slot-scope="scope">


                                </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="300">
                                  <template slot-scope="scope">
                                    <div @click="" class="tableBtn greens">查看记录</div>
                                    <div @click="" class="tableBtn greens">合同记录</div>
                                  </template>
                                </el-table-column>
                              </el-table>
                              <!-- <div class="fenye">
                                  <div>共{{total}}条</div>
                                <el-pagination :hide-on-single-page='flag' background small :current-page="currentPage"
                                  :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next" :total="total "
                                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                              </div> -->
                            </el-col>
                          </el-row>
                      </div>
                    <div class="titles">
                      广告位资源
                    </div>
                    <div style="margin-top: 30px;" class="editcss">
                      <div style="padding: 20px;">

                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                                <el-table-column label="广告位名称" min-width="150" >

                                </el-table-column>
                                <el-table-column label="投放时间"  min-width="150">
                                <template slot-scope="scope">


                                </template>
                                </el-table-column>
                                <el-table-column label="广告位类型"  min-width="300">
                                  <template slot-scope="scope">


                                  </template>
                                </el-table-column>
                                <el-table-column  label="状态" min-width="100">
                                <template slot-scope="scope">


                                </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="300">
                                  <template slot-scope="scope">
                                    <div @click="" class="tableBtn greens">查看记录</div>
                                    <div @click="" class="tableBtn greens">合同记录</div>
                                  </template>
                                </el-table-column>
                              </el-table>
                              <!-- <div class="fenye">
                                  <div>共{{total}}条</div>
                                <el-pagination :hide-on-single-page='flag' background small :current-page="currentPage"
                                  :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next" :total="total "
                                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                              </div> -->
                            </el-col>
                          </el-row>
                      </div>
                    </div>
                   </div>
                </el-tab-pane>
                <el-tab-pane label="缴费记录" name="five">
                  <div style="margin-top: 30px;" class="editcss">
                    <div class="titles">
                      租赁缴费
                    </div>
                      <div style="padding: 20px;">


                          <el-row :gutter="20">
                            <el-col :span="24">

                              <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                                <el-table-column label="资源类型" min-width="150" >

                                </el-table-column>
                                <el-table-column label="资源名称" min-width="150" >

                                </el-table-column>
                                <el-table-column label="租金/周期" min-width="150" >

                                </el-table-column>
                                <el-table-column label="付款日" min-width="150" >

                                </el-table-column>
                                <el-table-column label="缴费时间"  min-width="150">
                                <template slot-scope="scope">


                                </template>
                                </el-table-column>
                                <el-table-column label="付款类型"  min-width="300">
                                  <template slot-scope="scope">


                                  </template>
                                </el-table-column>
                                <el-table-column  label="状态" min-width="100">
                                <template slot-scope="scope">


                                </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="300">
                                  <template slot-scope="scope">
                                    <div @click="" class="tableBtn greens">查看</div>
                                      <div @click="" class="tableBtn greens">更改状态</div>
                                  </template>
                                </el-table-column>
                              </el-table>

                            </el-col>
                          </el-row>
                      </div>

                    <div class="titles">
                      物业缴费
                    </div>
                    <div style="margin-top: 30px;" class="editcss">
                      <div style="padding: 20px;">

                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                                <el-table-column label="数据项" min-width="150" >

                                </el-table-column>
                                <el-table-column label="数据项"  min-width="150">
                                <template slot-scope="scope">


                                </template>
                                </el-table-column>
                                <el-table-column label="数据项"  min-width="300">
                                  <template slot-scope="scope">


                                  </template>
                                </el-table-column>
                                <el-table-column  label="数据项" min-width="100">
                                <template slot-scope="scope">


                                </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="300">
                                  <template slot-scope="scope">
                                    <div @click="" class="tableBtn greens">查看</div>
                                  </template>
                                </el-table-column>
                              </el-table>

                            </el-col>
                          </el-row>
                      </div>
                    </div>
               </div>
                </el-tab-pane>
                <el-tab-pane label="合同信息" name="six">
                  <div style="margin-top: 30px;" class="editcss">
                      <div style="padding: 20px;">
                          <el-row :gutter="20">
                            <el-col :span="24">

                              <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                                <el-table-column label="合同名称" min-width="150" >

                                </el-table-column>
                                <el-table-column label="合同金额" min-width="150" >

                                </el-table-column>
                                <el-table-column label="签订日期" min-width="150" >

                                </el-table-column>
                                <el-table-column label="终止日期" min-width="150" >

                                </el-table-column>
                                <el-table-column label="合同类型"  min-width="150">
                                <template slot-scope="scope">
                                 {{scope.row.cereContractInformation.contractSigningDate}}

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

                                  </template>
                                </el-table-column>

                                <el-table-column label="操作" min-width="300">
                                  <template slot-scope="scope">
                                    <div @click="" class="tableBtn greens">查看</div>
                                      <div @click="" class="tableBtn greens">合同变更</div>
                                      <div @click="" class="tableBtn greens">合同续约</div>
                                      <div @click="" class="tableBtn greens">合同终止</div>
                                  </template>
                                </el-table-column>
                              </el-table>

                            </el-col>
                          </el-row>
                      </div>
                    </div>
                </el-tab-pane>
              </el-tabs>
      <el-row :gutter="20">
                          <el-col :span="12">
                              <div style="padding-left:160px;">
                               <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                                 @click="closeFn()">返回</el-button>

                              </div>

                          </el-col>
                        </el-row>
          </div>
</template>

<script>

  export default {
    components: {

    },
    props: {
      detbox: {
        type: Boolean,
        default: false
      },
      list: {
        type: Object,
        default: function() {
          return {}; // 返回一个空数组作为默认值
        },
      }
    },
    data() {
      return {
        tableData:[],
        xiangTab:'first',
        xiangData:{},
        total: 1,
        currentPage: 1,
        pageSize:10

      }
   },
   created() {
        console.log(this.list)
   },
   computed: {

   },
   methods: {
    closeFn(){
this.$emit('change', false);
    },
   }
  }
  </script>
<style>
</style>
