<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">
              <el-icon><el-icon-document /></el-icon>
              查看审核历史
            </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(1)">
          <el-icon><el-icon-edit-outline /></el-icon>
          拒绝原因
        </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(2)">
            <el-icon><el-icon-edit-outline /></el-icon>拒绝原因
          </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(3)">
            <el-icon><el-icon-edit-outline /></el-icon>拒绝原因
          </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(4)">
            <el-icon><el-icon-edit-outline /></el-icon>拒绝原因
          </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(5)">
            <el-icon><el-icon-edit-outline /></el-icon>拒绝原因
          </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(6)">
            <el-icon><el-icon-edit-outline /></el-icon>拒绝原因
          </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(7)">
              <el-icon><el-icon-edit-outline /></el-icon>拒绝原因
            </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 ref="refuseDialog" @confirm="refuseConfirm" />
    <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 {
  Document as ElIconDocument,
  EditOutline as ElIconEditOutline,
} from '@element-plus/icons'
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, postCertifyAudit } from '@/utils/qualification'
import Footer from '../layout/footer.vue'
export default {
  components: {
    BreadCrumb,
    historyDialog,
    refuseDialog,
    Footer,
    ElIconDocument,
    ElIconEditOutline,
  },
  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]
    },
  },
  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.refuseContent || ''
    },
    // 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 params = {
        certificateInfoId: 1,
        certifyStatus: 3,
        certifyValidDtoList: this.certifyValidDtoList,
      }
      if (this.certifyValidDtoList.length) {
        this.$confirm(
          '部分内容你已经标记拒绝，不可通过审核，请返回查看',
          '确认通过审核吗？',
          {
            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(() => {})
        return
      }
      this.$confirm('', '确认通过审核吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          postCertifyAudit(params).then((res) => {
            console.log(res)
            document.querySelector('#body-content').scrollTop = 0
            this.init()
          })
        })
        .catch(() => {})
    },
    handleClose() {
      const params = {
        certificateInfoId: 1,
        certifyStatus: 4,
        certifyValidDtoList: this.certifyValidDtoList,
      }
      if (this.certifyValidDtoList.length) {
        this.$confirm('', '确认通过审核不通过吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            document.body.scrollTop = 0
          })
          .catch(() => {})
        return
      }
      this.$confirm(
        '未检测到有标记拒绝原因的项目，请返回查看',
        '确认通过审核不通过吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {})
        .catch(() => {})
    },
    refuseConfirm(params) {
      console.log(params)
      this.certifyValidDtoList.push(params)
    },
    refuse(type) {
      console.log(type)
      this.$refs.refuseDialog.show(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>
