<template>
  <div>
    <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="info" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="主体名称" prop="leaseCycle">
                      <div class="duiqi">{{info.leaseCycle}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="统一社会信用代码" prop="rentalRent">
                      <div class="duiqi">{{info.rentalRent}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="主体类型" prop="operationType">
                      <div class="duiqi">{{info.operationType}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="法定代表人" prop="intentionRegion">
                      <div class="duiqi">{{info.intentionRegion}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="经营范围" prop="idCardNumber">
                      <div class="duiqi">{{info.idCardNumber}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="成立日期" prop="idCardType">
                      <div class="duiqi">{{info.idCardType}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="住所" prop="idCardValidStart">
                      <div class="duiqi">{{info.idCardValidStart}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="邮箱地址" prop="idCardValidEnd">
                      <div class="duiqi">{{info.idCardValidEnd}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="营业期限" prop="intentionTime">
                      <div class="duiqi">{{info.intentionTime}} - {{info.idCardPhotoBack}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="营业执照" prop="idCardPhotoFront">
                  <div style="display: flex;">
                    <allimg v-if="item" :src="item" fit="contain"  v-for="item in info.idCardPhotoFront.split(',')" 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="second">
          <div style="margin-top: 30px;" class="editcss">
            <TitleWithCircle title="基础信息" />
            <div style="padding: 20px;margin-top: 10px;">
              <el-form :model="shopMsg" 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">{{shopMsg.name}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="手机号" prop="phone">
                      <div class="duiqi">{{shopMsg.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">{{shopMsg.idCardType}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="身份证号码" prop="idCardNumber">
                      <div class="duiqi">{{shopMsg.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;height:200px" :src="$baseURL+shopMsg.idCardFrontImage" fit="contain"></el-image>
                  </div> -->
                  <div style="display: flex;">
                    <allimg  :src="shopMsg.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;height:200px" :src="$baseURL+shopMsg.idCardBackImage" fit="contain"></el-image>
                  </div> -->
                  <div style="display: flex;">
                    <allimg  :src="shopMsg.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-tabs>
    </div>
    <!-- v-if='info.auditStatus == 1' -->
    <div v-if="info.auditStatus == 1  && issp == '2'">
      <!-- <div style="padding-left: 130px;margin: 25px 0;">
        <el-radio v-model="radio" label="2">同意</el-radio>
        <el-radio v-model="radio" label="3">拒绝</el-radio>
      </div> -->
      <TitleWithCircle title="审核情况"/>
      <div style="padding: 20px;">
        <el-form :model="info" label-width="130px" class="demo-ruleForm">
          <el-form-item label="状态">
          <el-radio v-model="radio" label="2">同意</el-radio>
          <el-radio v-model="radio" label="3">拒绝</el-radio>
        </el-form-item>
          <el-form-item label="审核意见">
            <el-input maxlength="200" show-word-limit rows="4" v-model="info.auditSuggestions" placeholder="请输入审核意见"
              type="textarea" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if="info.auditStatus == '2' || info.auditStatus == '3'">
      <TitleWithCircle title="审核结果"/>
      <div style="padding: 20px;">
        <el-form :model="info" label-width="100px" class="demo-ruleForm">
          <el-form-item label="状态">
            <div class="duiqi">{{info.auditStatus=='2'?'已通过':info.auditStatus=='3'?'不通过':'无'}}</div>
          </el-form-item>
          <el-form-item label="审核意见">
            <div class="duiqi">{{info.auditSuggestions || '无'}}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <el-button v-if="info.auditStatus == 1 && 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>
</template>

<script>
  import {
    queryByContractcontractNumber
  } from '../../api/commodityLease.js'
  import {
    businessListGetById
  } from '../../api/business.js'
  import TitleWithCircle from '@/components/top/index';
  import MapXian from "@/components/MapContainer/MapXian";
  import {
    cerePlatformMerchant
  } from '@/api/newly.js'
  import {
    msgedit,

  } from '@/api/cereBusinessInfo'
  import allimg from '@/components/chakan/allimg.vue';
  import newmap from "@/components/newmap/index";
  import indexall from "@/components/newmap/indexall";
  export default {
    components: {
      TitleWithCircle,
      MapXian,
      newmap,
      allimg,
      indexall
    },
    props: {
      info: {
        type: Object,
        default: function() {
          return {}; // 返回一个空数组作为默认值
        },
      },
      issp: {
        type: String,
        default: function() {
          return '1';
        },
      },
    },
    data() {
      return {
        radio: '2',
        url: '',
        type: '1',
        tableData: [],
        xiangTab: 'first',
        siteIds: [],
        list: [],
        advIds: [],
        shopIds: [],
        shop: {},
        newshop: {},
        newinfo: {},
        parentMessage: {},
        pagequery: {
          pageNumber: 0,
          pageSize: 10,
          checkState:'2',
          phone: '',
        },
        shopMsg:{}
      }
    },
    created() {
      console.log(this.info)
      this.pagequery.phone = this.info.phone
      cerePlatformMerchant(this.pagequery).then(res=>{
         this.shopMsg = res.data.content[0]
      })
    },
    computed: {

    },
    methods: {
      minSev() {
        console.error(this.info)
        console.error(this.radio)

        msgedit({
          id: this.info.id,
          'auditStatus': this.radio,
          auditSuggestions: this.info.auditSuggestions
        }).then(res => {
          console.error(res)
          if (res.code == 200) {
            this.$message({
              message: '处理成功',
              type: 'success'
            })
            this.info.auditStatus = this.radio
          } else {
            this.$message({
              message: '处理失败',
              type: 'error'
            })
          }
        })
      },
      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
        businessListGetById({
          shopId: row.relatedMerchants
        }).then(res => {
          console.log(res)
          this.newshop = res.data
        })
      },
      closeFn() {
        this.$emit('change', false);
      },
    }
  }
</script>
<style>
  .el-form-item__label {
    color: #a2a2a2;
  }

  .greens {
    color: #3F9B6A;
  }
</style>
