<template>
  <div class="qualification-detail" ref="qualificationDetail">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="qualification-content screenSet" id="screenSet">
      <div class="head">
        <div class="top space-between">
          <div class="flex-c">
            <div class="name">审核状态</div>
            <div class="type" :class="typeState">{{ typeStateText }}</div>
            <div class="history cp" @click="showHistoryDialog">
              <i class="el-icon-document"></i>
              查看审核历史
            </div>
          </div>
          <div class="flex-c fs14">
            <div class="mLR10">审核人：{{ detail.auditName }}</div>
            <div>审核时间：{{ detail.auditTime }}</div>
          </div>
        </div>
        <div class="hr"></div>
        <div class="bottom" v-if="$route.query.source === 'ghs'">
          <div>店铺名称：{{ detail.storeName }}</div>
          <div>
            管理员姓名：{{ detail.adminName }}
            <span class="c0D9078 cp" @click="copyTxt">复制</span>
          </div>
          <div>管理员手机号：{{ detail.adminMobile }}</div>
        </div>
        <div class="bottom" v-if="$route.query.source === 'pf'">
          <div>医生姓名：{{ detail.doctorName }}</div>
          <div>
            医生ID：{{ detail.doctorId }}
            <span class="c0D9078 cp" @click="copyTxt">复制</span>
          </div>
          <div>申请时间：{{ detail.applyTime }}</div>
        </div>
      </div>
    </div>
    <div class="company" ref="company">
      <div class="tit">
        <div class="mr5">公司信息</div>
        <div class="c0D9078 cp" @click="refuse">
          <i class="el-icon-edit-outline"></i>
          拒绝原因
        </div>
      </div>
      <div class="refuse-info">拒绝原因：{{ reasonRejection(1) }}</div>
      <div class="info">
        <div>
          <div>企业类型：{{ detail.orgType }}</div>
          <div>联系人：{{ detail.contactName }}</div>
        </div>
        <div>
          <div>企业地区：{{ detail.areaStr }}</div>
          <div>联系电话：{{ detail.contactPhone }}</div>
        </div>
        <div>详情地址：{{ detail.orgAddress }}</div>
      </div>
    </div>
    <div class="business">
      <div class="tit">
        <div>工商信息</div>
      </div>
      <div class="refuse-info">拒绝原因：{{ reasonRejection(2) }}</div>
      <div class="">
        <div class="flex-c fs12">
          <div class="mr5">营业执照</div>
          <div class="c0D9078 cp" @click="refuse">
            <i class="el-icon-edit-outline"></i>拒绝原因
          </div>
        </div>
        <div class="img">
          <el-image
            :src="detail.businessLicenseUrl"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ]"
          />
        </div>
        <div class="space-between flex-c">
          <div>企业名称：{{ detail.orgName }}</div>
          <div>信用代码：{{ detail.creditCode }}</div>
          <div>
            有效日期：{{ detail.licenseValidDateBegin }} 至
            {{ detail.licenseValidDateEnd }}
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div>
        <div class="flex-c fs12">
          <div class="mr5">上一年度报告</div>
          <div class="c0D9078 cp" @click="refuse">
            <i class="el-icon-edit-outline"></i>拒绝原因
          </div>
        </div>
        <div class="refuse-info">拒绝原因：{{ reasonRejection(3) }}</div>
        <div class="img">
          <el-image
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ]"
          />
        </div>
        <div>有效日期：</div>
      </div>
      <el-divider></el-divider>
      <div>
        <div class="flex-c fs12">
          <div class="mr5">委托人身份证照片</div>
          <div class="c0D9078 cp" @click="refuse">
            <i class="el-icon-edit-outline"></i>拒绝原因
          </div>
        </div>
        <div class="refuse-info">拒绝原因：{{ reasonRejection(4) }}</div>
        <div class="img">
          <el-image
            :src="detail.assignorCertBackUrl"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ]"
          />
        </div>
        <div class="img">
          <el-image
            :src="detail.assignorCertFrontUrl"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ]"
          />
        </div>
        <div class="space-between flex-c">
          <div>委托人姓名：{{ detail.assignorName }}</div>
          <div>委托人身份证号：{{ detail.assignorCertNo }}</div>
          <div>
            委托人身份证有效日期：{{ detail.assignorValidDateBegin }}至{{
              detail.assignorValidDateEnd
            }}
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div>
        <div class="flex-c fs12">
          <div class="mr5">委托书</div>
          <div class="c0D9078 cp" @click="refuse">
            <i class="el-icon-edit-outline"></i>拒绝原因
          </div>
        </div>
        <div class="refuse-info">拒绝原因：{{ reasonRejection(5) }}</div>
        <div class="img">
          <el-image
            :src="detail.assignorCertBackUrl"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ]"
          />
        </div>
      </div>
      <el-divider></el-divider>
      <div>
        <div class="flex-c fs12">
          <div class="mr5">法人身份证照片</div>
          <div class="c0D9078 cp" @click="refuse">
            <i class="el-icon-edit-outline"></i>拒绝原因
          </div>
        </div>
        <div class="refuse-info">拒绝原因：{{ reasonRejection(6) }}</div>
        <div class="img">
          <el-image
            :src="detail.legalCertBackUrl"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ]"
          />
        </div>
        <div class="img">
          <el-image
            :src="detail.legalCertFrontUrl"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ]"
          />
        </div>
        <div class="space-between flex-c">
          <div>法人人姓名：{{ detail.legalName }}</div>
          <div>法人身份证号：{{ detail.legalCertNo }}</div>
          <div>
            法人身份证有效日期：{{ detail.legalValidDateBegin }} 至
            {{ detail.legalValidDateEnd }}
          </div>
        </div>
      </div>
      <div>
        <div class="tit">
          <div>资质信息</div>
        </div>
        <div class="flex-start">
          <div class="">经营范围：</div>
          <div class="flex1">{{ detail.bizScope }}</div>
        </div>
        <div v-for="item in 4" :key="item" class="item">
          <div class="flex-c fs12">
            <div class="mr5">药品经营许可证</div>
            <div class="c0D9078 cp" @click="refuse">
              <i class="el-icon-edit-outline"></i>拒绝原因
            </div>
          </div>
          <div class="refuse-info">拒绝原因：{{ reasonRejection(7) }}</div>
          <div class="img">
            <el-image
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :preview-src-list="[
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
              ]"
            />
          </div>
          <div>有效日期：沙发沙发沙发沙发</div>
        </div>
      </div>
    </div>
    <history-dialog :hidden="historyDialogHidden" @close="historyDialogClose" />
    <refuse-dialog />
    <footer>
      <el-button type="primary" size="small" @click="confirm"
        >审核通过</el-button
      >
      <el-button type="default" size="small" @click="handleClose"
        >审核不通过</el-button
      >
    </footer>
  </div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "@/components/breadcrumb.vue";
import historyDialog from "./components/historyDialog.vue";
import refuseDialog from "./components/refuseDialog.vue";

import { getCertifyDetail } from "@/utils/qualification";
import Footer from "../layout/footer.vue";
export default {
  components: {
    BreadCrumb,
    historyDialog,
    refuseDialog,
    Footer,
  },
  filters: {},
  computed: {
    typeState() {
      const reviewType = ["tobe-reviewed", "success-reviewed", "no-reviewed"];

      return reviewType[this.$route.query.status];
    },
    typeStateText() {
      const reviewType = ["待审核", "审核成功", "审核不通过"];

      return reviewType[this.$route.query.status];
    },
  },
  filters: {
  },
  data() {
    return {
      curmbFirst: "批发资质详情",
      historyDialogHidden: false,
      detail: {},
      certifyValidDtoList: [], //认证审核校验描述
      certifyLicenseImgList: [], //认证图片list：资质信息类
      certifyReportImgList: [], //认证图片list 年度报告类
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getCertifyDetail(this.id).then((res) => {
        const {
          certifyValidDtoList = [],
          certifyLicenseImgList = [],
          certifyReportImgList = [],
        } = res.data;
        console.log(this.certifyValidDtoList);
        this.certifyValidDtoList = certifyValidDtoList;
        this.certifyLicenseImgList = certifyLicenseImgList;
        this.certifyReportImgList = certifyReportImgList;
        this.detail = res.data;
      });
    },
    showHistoryDialog() {
      this.historyDialogHidden = true;
    },
    historyDialogClose() {
      this.historyDialogHidden = false;
    },
    reasonRejection(type) {
     const value = this.certifyValidDtoList.filter(v => {
       return v.infoType === type
      })[0];
      return value || '' ;
    },
    // copy
    copyTxt(text) {
      var type = "text/plain";
      var blob = new Blob([text], { type });
      var data = [new ClipboardItem({ [type]: blob })];
      navigator.clipboard.write(data).then(
        () => {
          /* success */
          this.$message.success("复制成功");
        },
        () => {
          /* failure */
          this.$message.error("复制失败");
        }
      );
    },
    confirm() {
      const msg = "部分内容你已经标记拒绝，不可通过审核，请返回查看";
      this.$confirm(msg, "确认通过审核吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(document.querySelector('#body-content').scrollTop);
          console.log(this.$refs.company.scrollHeight,document.scrollTop);
          document.querySelector('#body-content').scrollTop = this.$refs.company.scrollHeight
        })
        .catch(() => {});
    },
    handleClose() {
      const msg = "未检测到有标记拒绝原因的项目，请返回查看";
      this.$confirm(msg, "确认通过审核不通过吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          document.body.scrollTop = 0;
        })
        .catch(() => {});
    },
    refuse(type) {
      switch (type) {
        case 1:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scope>
.hr {
  background-color: #dcdfe6;
  position: relative;
  display: block;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
.mr5 {
  margin-right: 5px;
}
.qualification-detail {
  .qualification-content {
    background: #fff;
    padding: 10px;
    .head {
      .top {
        display: flex;
        align-items: center;
        .name {
          font-weight: bold;
          font-size: 16px;
        }
        .type {
          border: 1px solid #ccc;
          padding: 2px 5px;
          font-size: 14px;
          border-radius: 5px;
          margin: 0 5px;
          &.tobe-reviewed {
            color: #fac94d;
            border: 1px solid #fac94d;
          }
          &.success-reviewed {
            color: #71d60a;
            border: 1px solid #71d60a;
          }
          &.no-reviewed {
            color: #e2292a;
            border: 1px solid #e2292a;
          }
        }
        .history {
          color: #0d9078;
          font-size: 12px;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .company {
    background-color: #fff;
    margin: 10px 30px;
    padding: 20px;
    .c0D9078 {
      margin-left: 5px;
      font-size: 12px;
    }
    .info {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      line-height: 40px;
      div {
      }
    }
  }
  .business {
    background-color: #fff;
    margin: 10px 30px;
    padding: 20px;
    font-size: 12px;
    .img {
      width: 80px;
      height: 150px;
    }
    .item {
      margin-bottom: 10px;
    }
    .flex-c {
      margin-bottom: 10px;
    }
    .flex-start {
      margin-bottom: 20px;
    }
  }
  .tit {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 16px;
    margin-bottom: 20px;
    > :first-child {
      font-weight: bold;
    }
    &::before {
      content: "";
      width: 2px;
      height: 70%;
      position: absolute;
      left: -5px;
      background-color: #0d9078;
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #fff;
    width: calc(100% - 255px);
    text-align: right;
    padding: 10px 20px;
  }
  .refuse-info {
    font-size: 12px;
    color: #e54543;
  }
}
</style>
