<template>
  <div>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="企业信息" name="business">
        
        <div class="section">
          <div class="title">基础信息</div>
          <ul class="list">
            <li class="item">
              <div>店铺名称：</div>
              <div class="value">
                {{merData.mer_name}}
              </div>
            </li>
            <li class="item">
              <div>店铺类型：</div>
              <div class="value">{{merData.type_name}}</div>
            </li>
            <li class="item">
              <div>更新时间：</div>
              <div class="value">{{merData.update_time}}</div>
            </li>
          </ul>
        </div>

        <div class="section" v-if="merData.com">
          <ul class="list">
            <li class="item">
              <div>企业名称：</div>
              <div class="value">
                {{merData.com.name}}
              </div>
            </li>  
            <li class="item">
              <div>企业类型：</div>
              <div class="value">
                {{merData.com.type}}
              </div>
            </li>  
            <!-- <li class="item">
              <div>客服电话:</div>
              <div class="value">
                {{ merData.com.service}}
              </div>
            </li> -->
            <li class="item">
              <div>企业对接人姓名：</div>
              <div class="value">
                {{ merData.com.contact}}
              </div>
            </li>
            <li class="item">
              <div>企业对接人联系电话：</div>
              <div class="value">
                {{ merData.com.mobile}}
              </div>
            </li>
            <li class="item">
              <div>企业对接人身份证号:</div>
              <div class="value">
                {{ merData.com.number}}
              </div>
            </li>
            <!-- <li class="item">
              <div>发起人:</div>
              <div class="value">
                {{ merData.com.initiator}}
              </div>
            </li>
            <li class="item">
              <div>发起人电话:</div>
              <div class="value">
                {{ merData.com.inti_mobile}}
              </div>
            </li>
            <li class="item item100">
              <div>发起人编号:</div>
              <div class="value">
                {{ merData.com.inti_number}}
              </div>
            </li>
            <li class="item">
              <div>发起人手持介绍信照片:</div>
              <div class="value">
                <el-image v-for="(url,i) in  merData.com.init_image"
                  :key="i"
                  style="width: 100px; height: 100px"
                  :src="url" 
                  :preview-src-list="merData.com.init_image">
                </el-image>
              </div>
            </li> -->
            <li class="item">
              <div>资质图片:</div>
              <div class="value">
              <el-image
                v-for="(item, index) in merData.images"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="merData.images"
              />
            </div>
              <!-- <div class="value">
                <el-image v-for="(url,i) in  merData.com.init_image"
                  :key="i"
                  style="width: 100px; height: 100px"
                  :src="url" 
                  :preview-src-list="merData.com.init_image">
                </el-image>
              </div> -->
            </li>
            <!-- <li class="item item100">
              <div>是否惠美乡村店铺:</div>
              <div class="value">
                {{ merData.com.is_huimei? '是': '否'}}
              </div>
            </li> -->
            <!-- <li class="item item100">
              <div>惠美乡村红头文件:</div>
              <div class="value">
                <el-image v-for="(url,i) in  merData.com.image_huimei"
                  :key="i"
                  style="width: 100px; height: 100px"
                  :src="url" 
                  :preview-src-list="merData.com.image_huimei">
                </el-image>
              </div>
            </li> -->
            <li class="item item100">
              <div>是否退伍军人:</div>
              <div class="value">
                {{ merData.com.is_soldier? '是': '否'}}
              </div>
            </li>
            <li class="item item100">
              <div>退伍军人证件照:</div>
              <div class="value">
                <el-image v-for="(url,i) in  merData.com.image_soldier"
                  :key="i"
                  style="width: 100px; height: 100px"
                  :src="url" 
                  :preview-src-list="merData.com.image_soldier">
                </el-image>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="身份证信息" name="account">
        <div class="section" v-if="merData.idcard">
          <div class="title">身份证信息</div>
          <ul class="list">
            <li class="item">
              <div>身份证正面：</div>
              <div class="value">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="merData.idcard.image1" 
                  :preview-src-list="[merData.idcard.image1]">
                </el-image>
              </div>
            </li>
            <li class="item">
              <div>身份证反面：</div>
              <div class="value">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="merData.idcard.image2" 
                  :preview-src-list="[merData.idcard.image2]">
                </el-image>
              </div>
            </li>
            <li class="item">
              <div>身份证上的名字：</div>
              <div class="value">{{merData.idcard.name}}</div>
            </li>
            <li class="item">
              <div>身份证上的号码：</div>
              <div class="value">{{merData.idcard.number}}</div>
            </li>
            <li class="item">
              <div>身份证上的开始时间：</div>
              <div class="value">{{merData.idcard.start}}</div>
            </li>
            <li class="item">
              <div>身份证结束时间：</div>
              <div class="value">{{merData.idcard.end}}</div>
            </li>
            <li class="item">
              <div>手持身份证：</div>
              <div class="value">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="merData.idcard.image3" 
                  :preview-src-list="[merData.idcard.image3]">
                </el-image>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="营业执照信息" name="biz">
        <div class="section" v-if="merData.biz">
          <div class="title">营业执照信息</div>
          <ul class="list">
            <li class="item">
              <div>营业执照照片：</div>
              <div class="value">
                <el-image v-for="(url,i) in  merData.biz.image"
                  :key="i"
                  style="width: 100px; height: 100px"
                  :src="url" 
                  :preview-src-list="merData.biz.image">
                </el-image>
              </div>
            </li>
            <li class="item">
              <div>营业执照号码：</div>
              <div class="value">{{merData.biz.number}}</div>
            </li>
            <li class="item">
              <div>开始时间：</div>
              <div class="value">{{merData.biz.start}}</div>
            </li>
            <li class="item">
              <div>结束时间：</div>
              <div class="value">{{merData.biz.end}}</div>
            </li>
            <li class="item">
              <div>营业执照地址：</div>
              <div class="value">{{cityInfo}}</div>
            </li>
            <li class="item">
              <div>实际经营地址：</div>
              <div class="value">{{merData.biz.address_true}}</div>
            </li>
            <!-- <li class="item">
              <div>实际经营范围：</div>
              <div class="value">{{merData.biz.businessScope}}</div>
            </li> -->
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="银行卡信息" name="bank">
        <div class="section" v-if="merData.bank">
          <div class="title">银行卡信息</div>
          <ul class="list">
            <li class="item">
              <div>姓名：</div>
              <div class="value">
                {{merData.bank.bankCardUserName}}
              </div>
            </li>
            <li class="item">
              <div>银行：</div>
              <div class="value">{{merData.bank.bankName}}</div>
            </li>
            <li class="item">
              <div>卡号：</div>
              <div class="value">{{merData.bank.bankCard}}</div>
            </li>
            <li class="item">
              <div>开户行：</div>
              <div class="value">{{merData.bank.bankBranchName}}</div>
            </li>
            <li class="item">
              <div>联行号：</div>
              <div class="value">{{merData.bank.CNAPS}}</div>
            </li>
            <li class="item">
              <div>银行卡照片：</div>
              <div class="value">
                <el-image v-for="(url,i) in  merData.bank.bankCardImg"
                  :key="i"
                  style="width: 100px; height: 100px"
                  :src="url" 
                  :preview-src-list="merData.bank.bankCardImg">
                </el-image>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
     <div class="images" v-show="false" v-viewer="{ movable: false }">
      <img v-for="(src,index) in merData.mer_certificate" :src="src" :key="index" />
    </div> 
  </div>   
</template>
<script>

import { merchantOperateLog } from "@/api/merchant";
export default {
  props: {
    merData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      loading: true,
      merId: '',
      direction: 'rtl',
      activeName: 'business',
      timeVal: [],
      tableDataLog: {
        data: [],
        total: 0
      },
      tableFromLog: {
        user_type: '',
        date: [],
        page: 1,
        limit: 10
      },
    };
  },
  computed: {
   cityInfo(){
    return this.merData.biz?.cityInfo?this.merData.biz.cityInfo+this.merData.biz.address:this.merData.biz.address
  } 
  },
  filters: {
  },
  methods: {
    lookImg(item) {
      this.imageUrl = item;
      const viewer = this.$el.querySelector('.images').$viewer;
      viewer.show();
      this.$nextTick(() => {
        let i = this.merData.mer_certificate.findIndex((e) => e === item);
        viewer.update().view(i);
      });
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e
      this.tableFromLog.date = e ? this.timeVal.join('-') : ''
      this.onOperateLog(this.merId)
    },
    onOperateLog(id){
      this.merId = id;
      merchantOperateLog(id, this.tableFromLog).then((res) => {
        this.tableDataLog.data = res.data.list
        this.tableDataLog.total = res.data.count
      });
    },
    pageChangeLog(page) {
      this.tableFromLog.page = page
      this.onOperateLog(this.merId)
    },
    handleSizeChangeLog(val) {
      this.tableFromLog.limit = val
      this.onOperateLog(this.merId)
    },
    operationType(type) {
      if (type == 0) {
        return '系统';
      } else if (type == 1) {
        return '用户';
      } else if (type == 2) {
        return '平台';
      } else if (type == 3) {
        return '商户';
      } else if (type == 4) {
        return '商家客服';
      } else {
        return '未知';
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tabs--border-card {
  box-shadow: none;
  border-bottom: none;
}
.section {
  padding: 20px 0 8px;
  border-bottom: 1px dashed #eeeeee;
  .title {
    padding-left: 10px;
    border-left: 3px solid var(--prev-color-primary);
    font-size: 15px;
    line-height: 15px;
    color: #303133;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin-top: 5px;
  }
  .item {
    flex: 0 0 calc(100% / 2);
    display: flex;
    margin-top: 16px;
    font-size: 13px;
    color: #606266;
    padding-right: 20px;
    padding-left: 20px;
    &.item100{
     flex: 0 0 calc(100% / 1);
     padding-right: 20px;
     padding-left: 20px;
    }
    &:nth-child(2n + 1) {
      padding-right: 20px;
      padding-left: 20px;
    }
    // &:nth-child(2n) {
    //  padding-right: 20px;
    // }
  }
  .value {
    flex: 1;
    image {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin: 0 12px 12px 0;
      vertical-align: middle;
    }
  }
}
.info-red{
  color: red;
  font-size: 12px;
}
.tab {
  display: flex;
  align-items: center;
  .el-image {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
}
::v-deep .el-drawer__body {
  overflow: auto;
}
.gary {
  color: #aaa;
}

</style>
