<!--
 * @Author: wj 1454560336@qq.com
 * @Date: 2023-09-18 10:57:47
 * @LastEditors: wj 1454560336@qq.com
 * @LastEditTime: 2023-12-18 10:07:07
 * @FilePath: \admin-manage\src\views\operationManage\shopAudit\audit.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->

<template>
  <div class="shopAudit app-container" v-loading="loading">
    <img :src="auditImg[info.applyState-1]" alt="" class="state">
    <div class="name-box">
      <div class="shop-name">{{info.shopName}}</div>
      <div class="status">正常</div>
    </div>
    <div class="info">
      <div class="info-item">{{info.shopName}}</div>
      <div class="info-item">店铺类型：{{info.shopMenuId|filterType(that)}}</div>
      <div class="info-item create-time">店铺申请时间：{{info.checkTime}}</div>
    </div>
    <div class="intro">
     {{info.detailContent}}
    </div>
    <div class="address">
      店铺地址：{{info.address}}
    </div>

    <div class="contact">
      <div class="name">联系人：{{info.serviceName}}</div>
      <div class="tel">联系电话：{{info.serviceTel}}</div>
    </div>

    <div class="shop-img">
      <div class="img-box">
        <img class="img" :src="info.doorImg" alt="">
        <div class="label">店铺门头照</div>
      </div>
      <div class="img-box">
        <img class="img" :src="info.detailImg" alt="">
        <div class="label">店铺详情图</div>
      </div>
    </div>

    <!-- 店铺审核不显示 -->
    <!-- <template v-if="type !== 1"> -->
    <template>
      
      <div class="title">资质信息</div>

      <div class="license">
        <div class="img-box">
          <div class="label">营业执照</div>
          <img class="img" :src="info.businessImg" alt="">
        </div>
      </div>

      <div class="title">身份信息</div>
      <div class="identity">
        <div class="img-box">
          <div class="label">身份证正面</div>
          <img class="img" :src="info.idCardFront" alt="">
        </div>
        <div class="img-box">
          <div class="label">身份证反面</div>
          <img class="img" :src="info.idCardBack" alt="">
        </div>
      </div>
    </template>


    <div class="title">审核意见</div>
    <el-input
      type="textarea"
      :rows="6"
      :disabled="mode != 'audit'"
      class="textarea"
      placeholder="请输入内容"
      v-model="setQuery.rejectMsg">
    </el-input>

   <div class="btn-group" v-if="mode == 'audit'">
       <el-button type="danger"  @click="save(3)">拒绝</el-button>
      <el-button type="primary" :loading="loading"  @click="save(2)">通过</el-button>
    </div>

  </div>
</template>
  
<script>
  import {check,detail} from '@/api/shop';
import {getMenuName} from '@/api/appConfig';

export default {
  name: "shopAudit",
  components: {},
  data() {
    return {
      that:this,
      mode:'audit',
      reason:'',
      loading:false,
      type:0,
      info:{
        "address": "",
		"applyState": 0,
		"businessImg": "",
		"checkTime": "",
		"checkType": 0,
		"checkUserId": "",
		"city": "",
		"district": "",
		"doorImg": "",
		"handlerImg": "",
		"idCardBack": "",
		"idCardFront": "",
		"idCardNo": "",
		"loginAccount": "",
		"logoPath": "",
		"mapLat": "",
		"mapLon": "",
		"province": "",
		"rejectMsg": "",
		"saleNum": 0,
		"serviceTel": "",
		"shopId": "",
		"shopLabel": "",
		"shopName": "",
		"shopType": 0,
		"state": 0,
		"status": 0
      },
      setQuery:{
        "applyState": 0,
        "checkUserId": localStorage.getItem('epid'),
        "rejectMsg": "",
        "shopId": this.$route.query.id
      },
      auditImg:[
        require('@/assets/audit1.png'),
        require('@/assets/audit2.png'),
        require('@/assets/audit3.png'),
        require('@/assets/audit4.png'),
      ],
      options:[]
    };
  },
  filters: {
    filterType: function(val,that) {
      return that.options[val]
    }
  },
  methods: {
    // 详情
    detail(){
      this.loading = true;
      detail({shopId:this.$route.query.id}).then(res=>{
      this.loading = false;
        if (res.state == "Success") {
          this.info = res.content
        }
      })
    },
    // 审核
    save(applyState) {
      this.setQuery.applyState = applyState
      if(applyState == 2){
        this.setQuery.rejectMsg = '审核通过'
         this.$confirm('此操作将审核通过该店铺, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.check()
        })
      }else if(applyState == 3 && this.setQuery.rejectMsg == ''){
        return  this.$message.error('请输入审核意见');
      }else{
        this.check()
      }
      
    },
    // 获取经营类型
    getMenuName(){
      getMenuName().then(res=>{
        if(res.state == 'Success'){
          this.options = res.content
        }
      })
    },
    check(){
      this.loading = true;
      check(this.setQuery).then((res) => {
        this.loading = false;
        if (res.state == "Success") {
          this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
          });
          this.setQuery = {
           "applyState": 0,
          "checkUserId": "",
          "rejectMsg": "",
          "shopId": ""
          };
          this.$router.push("/operationManage/shopAudit/index");
        }
      });
    }
  },
  created() {
    this.mode = this.$route.query.mode || 'audit'
    this.type = this.$route.query.type 
    this.detail()
    this.getMenuName()
  },
};
</script>
  
<style lang="scss" scoped>
.shopAudit {
  font-size: 14px;
  padding-bottom: 40px;
  position: relative;
  .state{
    width: 200px;
    height: 162px;
    position: absolute;
    top: 0;
    right: 100px;
  }
  .name-box {
    display: flex;
    align-items: center;
    .shop-name {
      font-size: 22px;
      font-weight: bold;
    }
    .status {
      color: green;
      padding: 2px 4px;
      border-radius: 4px;
      background: rgb(221, 240, 221);
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .info {
    display: flex;
    align-items: center;
    margin-top: 15px;
    .info-item {
      margin-right: 60px;
    }
    .create-time {
      color: #666;
    }
  }
  .intro {
    margin-top: 25px;
    line-height: 24px;
  }
  .address {
    margin-top: 25px;
  }
  .contact {
    display: flex;
    align-items: center;
    margin-top: 25px;

    .name {
      margin-right: 60px;
    }
    .tel {
    }
  }

  .shop-img {
    display: flex;
    .img-box {
      .img {
        background: #ccc;
        width: 350px;
        height: 250px;
        border-radius: 4px;
        margin: 20px 20px 0 0;
      }
      .label {
        text-align: center;
        margin-top: 10px;
      }
    }
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 15px 0;
  }
  .license {
    .img-box {
      .img {
        background: #ccc;
        width: 350px;
        height: 250px;
        border-radius: 4px;
        margin: 20px 20px 0 0;
      }
      .label {
        margin-top: 10px;
      }
    }
  }
  .identity {
    display: flex;
    .img-box {
      .img {
        background: #ccc;
        width: 350px;
        height: 250px;
        border-radius: 4px;
        margin: 20px 20px 0 0;
      }
      .label {
        text-align: center;
        margin-top: 10px;
      }
    }
  }
  .textarea{
    width: 800px;
  }
  .btn-group{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>
  