<template>
  <div class="wrap">
    <div class="nav_bar_bg" :class="{ 'status_wait': supplierInfo?.state == 0, 'status_danger': supplierInfo?.state == 99, 'status_success': supplierInfo?.state == 1 }">
      <template v-if="supplierInfo?.state == 0">
        <div class="status_wrap">
          <img class="wait_icon" src="@/assets/supplier/waitIcon.png" alt="">
          <span class="wait_status">审批中</span>
        </div>
      </template>
      <template v-if="supplierInfo?.state == 1">
        <div class="status_wrap">
          <img class="wait_icon" src="@/assets/supplier/successIcon.png" alt="">
          <span class="wait_status success_status">恭喜你，审核通过！</span>
        </div>
      </template>
      <template v-if="supplierInfo?.state == 99">
        <div class="status_wrap">
          <img class="wait_icon" src="@/assets/supplier/failIcon.png" alt="">
          <span class="wait_status danger_status">审核不通过</span>
        </div>
        <div class="danger_tip">
          {{supplierInfo?.failReason}}
        </div>
      </template>
    </div>
    <div class="supplier_content">
      <div class="credentials_info">
        <div class="common_title">证件照信息</div>
        <div class="credentials_wrap">
          <div class="credentials_item">
            <div class="credentials_title">1.法人身份证人像页</div>
            <img :src="supplierInfo?.idCardFrontUrl" alt="">
          </div>
          <div class="credentials_item ml2">
            <div class="credentials_title">2.法人身份证国徽页</div>
            <img :src="supplierInfo?.idCardBackUrl" alt="">
          </div>
          <div class="credentials_item ml2">
            <div class="credentials_title">3.营业执照</div>
            <img :src="supplierInfo?.businessLicense" alt="">
          </div>
          <div class="credentials_item">
            <div class="credentials_title">4.开户许可证/基本存款账户信息</div>
            <img v-if="supplierInfo?.accountUrl"  :src="supplierInfo?.accountUrl" alt="">
            <div v-else class="empty"></div>
          </div>
        </div>
      </div>
      <div class="company_info">
        <div class="common_title">公司信息</div>
        <div class="info_wrap">
          <div class="info_item">
            <div class="label">服务商名称：</div>
            <div class="content">{{supplierInfo?.name}}</div>
          </div>
          <div class="info_item" v-if="supplierInfo?.abbr">
            <div class="label">服务商简称：</div>
            <div class="content">{{supplierInfo?.abbr}}</div>
          </div>
          <div class="info_item" v-if="supplierInfo?.supplierCode">
            <div class="label">服务商编号：</div>
            <div class="content">{{supplierInfo?.supplierCode}}</div>
          </div>
          <div class="info_item" v-if="supplierInfo?.areaName">
            <div class="label">注册地址：</div>
            <div class="content">{{supplierInfo?.areaName}}</div>
          </div>
          <div class="info_item">
            <div class="label">法人姓名：</div>
            <div class="content">{{supplierInfo?.legalName}}</div>
          </div>
          <div class="info_item">
            <div class="label">联系人姓名：</div>
            <div class="content">{{supplierInfo?.linkName}}</div>
          </div>
          <div class="info_item">
            <div class="label">联系电话：</div>
            <div class="content">{{supplierInfo?.linkPhone}}</div>
          </div>
          <div class="info_item">
            <div class="label">邮箱：</div>
            <div class="content">{{supplierInfo?.linkEmail}}</div>
          </div>
          <div class="info_item">
            <div class="label">服务能力：</div>
            <div class="content service_color">{{supplierInfo?.serviceCategoryName}}</div>
          </div>
          <div class="info_item">
            <div class="label">拖车数量：</div>
            <div class="content">{{supplierInfo?.trailCount || ''}}</div>
          </div>
          <div class="info_item">
            <div class="label">抢修车数量：</div>
            <div class="content">{{supplierInfo?.minorCount || ''}}</div>
          </div>
          <div class="info_item">
            <div class="label">服务区域：</div>
            <div class="content">{{supplierInfo?.serviceAreaName}}</div>
          </div>
          <template v-if="type == 'audit' && supplierInfo?.state != 1">
            <div class="info_item">
              <div class="label"><span style="color: red;margin-right: 2px">*</span>审批：</div>
              <div class="content">
                <van-radio-group v-model="form.state"  direction="horizontal" icon-size="18px">
                  <van-radio name="1">审批通过</van-radio>
                  <van-radio name="99">审批不通过</van-radio>
                </van-radio-group>
              </div>
            </div>
            <div class="info_item" v-if="form.state == 1">
              <div class="label"><span style="color: red;margin-right: 2px">*</span>服务商简称：</div>
              <div class="content">
                <el-input style="width: 100%" v-model.trim="form.abbr" placeholder="请输入服务商简称"></el-input>
              </div>
            </div>
            <div class="info_item" v-if="form.state == 99">
              <div class="label"><span style="color: red;margin-right: 2px">*</span>不通过原因：</div>
              <div class="content">
                <textarea class="report_textarea" rows="4" maxlength="200" show-word-limit placeholder="点击这里输入不通过原因" v-model.trim="form.failReason"></textarea>
              </div>
            </div>
          </template>

        </div>
      </div>


      <div class="btn_wrap" v-if="type == 'show' && supplierInfo?.state == 99 && origin != 'web'">
        <div class="btn" @click="goModifyPage">修改信息</div>
      </div>
      <div class="btn_wrap" v-if="type == 'audit' && supplierInfo?.state != 1">
        <div class="btn" v-if="type == 'audit'" @click="auditSupplier">保 存</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getSupplierInfo, auditSupplier } from "@/api/mine"
  import {myMixins} from "@/utils/myMixins"
  export default {
    name: "supplierInfo",
    mixins:[myMixins],
    data() {
      return {
        id:'', //车辆Id
        form: {
          state: '',
          abbr: '',
          failReason: '',
        },
        supplierInfo: {},
        type: 'show',
        origin: '',
      }
    },
    async mounted() {
      const urlParams = new URLSearchParams(window.location.search);
      this.id=this.$route.query.id ||  urlParams.get('id');
      this.type=this.$route.query.type || urlParams.get('type') || 'show';
      this.origin = this.$route.query.origin || ''
      await this.getInfoHandler();
    },
    methods: {
      goModifyPage() {
        this.goPage('supplierAdd', { id : this.id })
      },
      async auditSupplier() {
        if( !this.form.state ) {
          this.$toast('请选择审批结果')
          return
        }
        if( this.form.state == 99 && !this.form.failReason ) {
          this.$toast('请输入不通过原因')
          return
        }
        if( this.form.state == 1 ) {
          const reg = /^[\u4e00-\u9fa5]{2}$/;
          if(!this.form.abbr) {
            this.$toast('请输入服务商简称')
            return
          }
          if(!(reg.test(this.form.abbr))) {
            this.$toast('服务商简称请输入两位汉字')
            return
          }
        }
        try {
          await auditSupplier({
            id: this.id,
            ...this.form,
            wechatId: 'test',  // 参数将会被去掉
          })
        } finally {
          this.closeParentDialog();
        }
      },
      async getInfoHandler() {
        let res = await getSupplierInfo({
          id: this.id,
        });
        this.supplierInfo = res?.data;
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/mixin.scss";
  @import "@/styles/common.scss";
  .report_textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    min-height: 95px;
    border: 1px solid #E2EAF6;
    padding: 10px;
    font-size: 13px;
  }
  .wrap{
    @include wh(100%,100%);
    box-sizing: border-box;
    padding-bottom: 100px;
    overflow-y: auto;
  }
  .nav_bar_bg {
    width: 100%;
    height: 125px;
    padding-top: 50px;
  }
  .status_wait {
    background: linear-gradient( 180deg, #FFE4C9 0%, rgba(255,248,233,0) 100%);
  }
  .status_success {
    background: linear-gradient( 180deg, #DAFFF8 0%, rgba(237,255,233,0) 100%);
  }
  .status_danger {
    background: linear-gradient( 180deg, #FFE8DA 0%, rgba(255,233,233,0) 100%);
  }
  .status_wrap {
    display: flex;
    align-items: center;
    .wait_icon {
      width: 34px;
      height: 34px;
      margin-left: 31px;
    }
    .wait_status {
      color: #E69B0B;
      font-weight: 600;
      font-size: 16px;
      margin-left: 11px;
    }
    .success_status {
      color: #37B864;
    }
    .danger_status {
      color: #ED440C;
    }
  }
  .danger_tip {
    font-size: 12px;
    color: #FF553B;
    line-height: 18px;
    padding-left: 38px;
    padding-right: 23px;
    margin-top: 5px;
  }
  .supplier_content {
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .common_title {
    font-weight: 500;
    font-size: 14px;
    color: rgba(50, 54, 67, 0.66);
    padding-left: 2px;
  }
  .common_title::after {
    content: '';
    display: block;
    width: 100%;
    border: 1px solid;
    margin-top: 10px;
    opacity: 0.16;
    border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
  }
  .credentials_wrap {
    display: flex;
    width: 100%;
    margin-top: 10px;
    flex-wrap: wrap;
    .credentials_item {
      width: 32%;
      text-align: center;
      .credentials_title {
        font-size: 12px;
        color: #4A4A4A;
        padding: 10px 0;
      }
      img,.empty{
        width: 97px;
        height: 64px;
      }
      .empty{
        border: 1px solid silver;
        margin-left: 8px;
      }
    }
    .ml2 {
      margin-left: 2%;
    }
  }
  .company_info {
    margin-top: 20px;
    /*.company_wrap {*/
      .info_wrap {
        margin-top: 10px;
        .info_item {
          display: flex;
          padding: 10px 2px;
          .label {
            font-size: 13px;
            color: rgba(50, 54, 67, 0.6);
            width: 90px;
            flex-shrink: 0;
          }
          .content {
            font-size: 13px;
            color: #323643;
            /*font-weight: bold;*/
            flex: 1;
          }
          .service_color {
            color: rgba(230, 155, 11, 0.9);
          }
        }
      /*}*/
    }
  }
  .btn_wrap {
    width: 100%;
    padding: 15px 0;
    position: fixed;
    bottom: 0;
    background: #F7F7F9;
    box-shadow: 0px -7px 24px 0px rgba(0, 0, 0, 0.11);
    z-index: 10000 !important;
    left: 0;
    .btn {
      width: calc(100% - 80px);
      margin-left: 40px;
      height: 46px;
      background: #0E76F4;
      border-radius: 5px;
      font-size: 15px;
      color: #FFFFFF;
      text-align: center;
      line-height: 46px;
    }
  }
</style>
