<template>
  <div class="preview" v-loading="loading">
    <template v-if="progress.FILLING">
      <div class="preview-hd">
        <el-steps align-center :active="options.length">
          <template v-for="item in options">
            <el-step
              :title="item.title"
              :status="progress.FILLING[item.code] && progress.FILLING[item.code].progress === 1 ? 'success' : 'error'"
              :key="item.code"
            ></el-step>
          </template>
        </el-steps>
      </div>
      <div class="preivew-bd">
        <template v-for="item in options">
          <div
            class="preview-item"
            :class="progress.FILLING[item.code].progress === 1 ? 'is-success' : 'is-error'"
            :key="item.code"
            v-if="progress.FILLING[item.code]"
          >
            <div class="preview-item-hd">
              <div class="title">
                {{ item.title }}
                <template v-if="progress.FILLING[item.code].progress === 1">（已完善）</template>
                <template v-else>（待完善）</template>
              </div>
              <div class="line"></div>
              <el-button plain size="small" @click="handleEdit(item.edit.to)" v-if="hasEdit">编辑</el-button>
            </div>
            <div class="preview-item-bd">
              <template v-if="item.computed">
                <div v-html="item.computed(material[item.code])"></div>
              </template>
              <template v-else-if="item.isMultiple">
                <div class="group" v-for="(data, index) in material[item.code]" :key="index">
                  <dl
                    v-for="subitem in item.items"
                    :key="subitem.code"
                    v-show="subitem.visible ? subitem.visible() : true"
                  >
                    <dt>{{ subitem.label }}：</dt>
                    <dd>
                      <template v-if="subitem.computed">
                        <div v-html="subitem.computed(data)"></div>
                      </template>
                      <template v-else>{{ data[subitem.code] }}</template>
                    </dd>
                  </dl>
                </div>
              </template>
              <template v-else>
                <div class="group">
                  <dl v-for="subitem in item.items" :key="subitem.code">
                    <dt>{{ subitem.label }}：</dt>
                    <dd>
                      <template v-if="subitem.computed">
                        <div v-html="subitem.computed(material[item.code])"></div>
                      </template>
                      <template v-else>{{ material[item.code][subitem.code] }}</template>
                    </dd>
                  </dl>
                </div>
              </template>
            </div>
          </div>
        </template>
        <div class="preview-item is-success" v-if="isManager">
          <div class="preview-item-hd">
            <div class="title">照片/附件</div>
            <div class="line"></div>
          </div>
          <div class="preview-item-bd">
            <template v-if="material.attachments">
              <ul class="attachments">
                <li class="attachments-item" v-for="(item, index) in material.attachments" :key="index">
                  <div class="inner" @click="handlePreview(item)">
                    <el-image :src="item.oss_sign_url" class="pic">
                      <template #error>
                        <i class="el-icon-document"></i>
                      </template>
                    </el-image>
                    <div class="name">{{ item.file_type_label }}</div>
                    <div v-if="item.status_desc">
                      <el-tag size="mini">{{ item.status_desc }}</el-tag>
                    </div>
                  </div>
                  <el-button-group v-if="hasButton" style="margin-left: 40px">
                    <el-button size="mini" :disabled="item.status === 'INACTIVE'" @click="handleRemove(item)"
                      >删除</el-button
                    >
                    <el-button size="mini" :disabled="item.status === 'LOG'" @click="handleSave(item)">存档</el-button>
                  </el-button-group>
                </li>
              </ul>
            </template>
          </div>
        </div>
        <div class="preview-item is-success" v-if="isManager">
          <div class="preview-item-hd">
            <div class="title">支付记录</div>
            <div class="line"></div>
          </div>
          <div class="preview-item-bd">
            <template v-if="material.payment_records">
              <el-table :data="material.payment_records">
                <el-table-column align="left" prop="payment_method_desc" label="支付方式"> </el-table-column>
                <el-table-column align="center" prop="bill_amount" label="支付金额"> </el-table-column>
                <el-table-column align="right" prop="payment_status_desc" label="支付状态"> </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
      </div>
    </template>
    <img :src="previewImageUrl" :alt="previewImageTitle" id="image" style="display: none" />
  </div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import Viewer from 'viewerjs'
import * as api from '@/api/my'

// 行业类别
const industryList = [
  { label: '互联网/电子商务', value: '1 ' },
  { label: '基金/证券/期货/投资', value: '2 ' },
  { label: '保险', value: '3 ' },
  { label: '银行', value: '4 ' },
  { label: '信托/担保/拍卖/典当', value: '5 ' },
  { label: '计算机软件', value: '6 ' },
  { label: 'IT服务(系统/数据/维护)', value: '7 ' },
  { label: '电子技术/半导体/集成电路', value: '8 ' },
  { label: '计算机硬件', value: '9 ' },
  { label: '通信/电信/网络设备', value: '10' },
  { label: '通信/电信运营、增值服务', value: '11' },
  { label: '网络游戏', value: '12' },
  { label: '房地产/建筑/建材/工程', value: '13' },
  { label: '家居/室内设计/装饰装潢', value: '14' },
  { label: '物业管理/商业中心', value: '15' },
  { label: '专业服务/咨询(财会/法律/人力资源等)', value: '16' },
  { label: '广告/会展/公关', value: '17' },
  { label: '中介服务', value: '18' },
  { label: '检验/检测/认证', value: '19' },
  { label: '外包服务', value: '20' },
  { label: '快速消费品（食品/饮料/烟酒/日化）', value: '21' },
  { label: '耐用消费品（服饰/纺织/皮革/家具/家电）', value: '22' },
  { label: '贸易/进出口', value: '23' },
  { label: '零售/批发', value: '24' },
  { label: '租赁服务', value: '25' },
  { label: '教育/培训/院校', value: '26' },
  { label: '礼品/玩具/工艺美术/收藏品/奢侈品', value: '27' },
  { label: '汽车/摩托车', value: '28' },
  { label: '大型设备/机电设备/重工业', value: '29' },
  { label: '加工制造（原料加工/模具）', value: '30' },
  { label: '仪器仪表及工业自动化', value: '31' },
  { label: '印刷/包装/造纸', value: '32' },
  { label: '办公用品及设备', value: '33' },
  { label: '医药/生物工程', value: '34' },
  { label: '医疗设备/器械', value: '35' },
  { label: '航空/航天研究与制造', value: '36' },
  { label: '交通/运输,物流/仓储', value: '37' },
  { label: '医疗/护理/美容/保健/卫生服务', value: '38' },
  { label: '酒店/餐饮,旅游/度假,媒体/出版/影视/文化传播', value: '39' },
  { label: '娱乐/体育/休闲', value: '40' },
  { label: '能源/矿产/采掘/冶炼', value: '41' },
  { label: '石油/石化/化工,电气/电力/水利', value: '42' },
  { label: '环保', value: '43' },
  { label: '政府/公共事业/非盈利机构', value: '44' },
  { label: '学术/科研,农/林/牧/渔跨领域经营', value: '45' },
  { label: '其他', value: '90' }
]
export default {
  name: 'Preview',
  props: {
    hasEdit: { type: Boolean, default: false },
    isManager: { type: Boolean, default: false }
  },
  data() {
    return {
      loading: false,
      previewImageUrl: '',
      previewImageTitle: '',
      viewer: null,
      material: {},
      progress: {},
      options: [
        {
          title: '个人资料',
          code: 'basic_info',
          edit: {
            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_profile' } }
          },
          items: [
            { label: '姓名', code: 'real_name_cn' },
            { label: '英文名', code: 'real_name_en' },
            {
              label: '现居住城市',
              code: 'address_city',
              computed(data) {
                return data.address_city ? `${data.address_province}-${data.address_city}` : ''
              }
            },
            { label: '证件类型', code: 'id_type' },
            { label: '证件号码', code: 'id_number' },
            { label: '手机', code: 'phone_number' },
            { label: '邮箱', code: 'email' },
            { label: '性别', code: 'gender' },
            { label: '国籍', code: 'nationality' },
            { label: '生日', code: 'birthday' },
            { label: '微信号', code: 'we_chat_account' },
            { label: '邮寄地址', code: 'mailing_address' },
            { label: '紧急联系人', code: 'emergency_contact_name' },
            { label: '紧急联系人电话', code: 'emergency_contacts_phone' }
          ]
        },
        {
          title: '教育背景',
          code: 'educations',
          edit: {
            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_education' } }
          },
          isMultiple: true,
          items: [
            {
              label: '教育时间',
              code: 'start_date',
              computed(data) {
                return `${data.start_date}至${data.end_date}`
              }
            },
            { label: '专业名称', code: 'major_cn' },
            { label: '学校名称', code: 'school_name_cn' },
            { label: '学历/学位', code: 'degree' }
          ]
        },
        {
          title: '工作经验',
          code: 'careers',
          edit: {
            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_career' } }
          },
          isMultiple: true,
          items: [
            {
              label: '工作时间',
              code: 'start_date',
              computed(data) {
                return `${data.start_date}至${data.end_date}`
              }
            },
            { label: '工作单位', code: 'company_name_cn' },
            {
              label: '行业类别',
              code: 'industry',
              computed(data) {
                const found = industryList.find(item => item.value === data.industry)
                return found ? found.label : data.industry
              }
            },
            { label: '工作部门', code: 'dept_cn' },
            { label: '工作职位', code: 'position_cn' },
            { label: '工作描述', code: 'job_desc_cn' }
          ]
        },
        {
          title: '学习目的',
          code: 'answers',
          edit: {
            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_answer' } }
          },
          computed(data = []) {
            const result = data.map(item => {
              return `<dl><dt>${item.question}</dt><dd>${item.answer}</dd></dl>`
            })
            return `<div class="answers">${result.join('')}</div>`
          }
        },
        {
          title: '所受培训',
          code: 'trainings',
          edit: {
            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_training' } }
          },
          isMultiple: true,
          items: [
            {
              label: '培训时间',
              code: 'start_date',
              computed(data) {
                return `${data.start_date}至${data.end_date}`
              }
            },
            { label: '培训机构', code: 'institution_cn' },
            { label: '课程名称', code: 'course_cn' }
          ]
        },
        {
          title: '荣誉奖励',
          code: 'honors',
          edit: {
            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_honor' } }
          },
          isMultiple: true,
          items: [
            { label: '获取时间', code: 'time' },
            { label: '荣誉奖励', code: 'title' },
            { label: '证书颁发机构', code: 'institution_cn' }
          ]
        },
        {
          title: '推荐信',
          code: 'reco_letters',
          edit: { to: { path: '/my/application', query: { active: 'application_tjx' } } },
          isMultiple: true,
          items: [
            { label: '推荐人姓名', code: 'provider_name' },
            { label: '推荐人电话', code: 'provider_phone_number' },
            { label: '推荐人邮箱', code: 'provider_email' },
            { label: '与推荐人关系', code: 'provider_relationship' },
            { label: '推荐人工作单位', code: 'provider_company_name', visible: () => this.isManager },
            { label: '推荐人职务', code: 'provider_job_title', visible: () => this.isManager },
            { label: '推荐信内容', code: 'letter_content', visible: () => this.isManager }
          ]
        }
        // {
        //   title: '无犯罪证明',
        //   code: 'attachments',
        //   edit: { to: { path: '/my/application', query: { active: 'application_wfzzm' } } },
        //   computed(data) {
        //     if (!data || !data.length) {
        //       return ''
        //     }
        //     const found = data.find(item => item.file_type_id === 'NO_CRIMINAL_CERT')
        //     return found
        //       ? `<a href="${found.oss_sign_url}" target="_blank"><img src="${found.oss_sign_url}" style="max-width:300px;margin:10px 0;"></a>`
        //       : ''
        //   }
        // }
      ]
    }
  },
  computed: {
    right() {
      const { right = '' } = this.$route.query
      return right.toUpperCase()
    },
    hasButton() {
      return this.right.includes('X')
    }
  },
  methods: {
    // 获取报名信息
    getApplication() {
      this.loading = true
      api.getApplication(this.$route.query).then(response => {
        const { data, error, message } = response
        if (error.toString() === '0') {
          const { material, progress } = data
          this.material = material
          const missedRequiredList = progress.FILLING.attachments.missed_required_list
          progress.FILLING.attachments.progress = missedRequiredList.NO_CRIMINAL_CERT ? 0 : 1
          this.progress = progress
        } else {
          this.$message.error(message)
        }
        this.loading = false
      })
    },
    handleEdit(to) {
      this.$emit('edit', to)
      // this.$router.push(to)
    },
    // 删除
    handleRemove(data) {
      this.changeFileStatus(data, 'INACTIVE')
    },
    // 存档
    handleSave(data) {
      this.changeFileStatus(data, 'LOG')
    },
    changeFileStatus(data, status) {
      api.changeFileStatus(this.material.user_id, data.id, status).then(response => {
        this.getApplication()
      })
    },
    // 预览
    handlePreview(file) {
      let url = file.oss_sign_url
      if (!url) {
        this.$message({ type: 'warning', message: '无法查看' })
        return
      }
      url = url.includes('?') ? url.split('?').shift() : url
      const names = ['jpg', 'jpeg', 'png', 'gif']
      const name = url.split('.').pop() || ''
      if (names.includes(name.toLocaleLowerCase())) {
        this.previewImageUrl = file.oss_sign_url
        this.previewImageTitle = file.file_type_label
        this.$nextTick(() => {
          this.viewer.update()
          this.viewer.show(true)
        })
      } else {
        this.newWindowPreview(file.oss_sign_url)
      }
    },
    // 新窗口预览
    newWindowPreview(url) {
      const a = document.createElement('a')
      a.href = url
      a.target = '_blank'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    createViewer() {
      this.viewer = new Viewer(document.getElementById('image'), {
        navbar: false,
        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true }
      })
    }
  },
  beforeMount() {
    this.getApplication()
  },
  mounted() {
    this.createViewer()
    document.body.style = 'background-color:#eee;'
  },
  destroyed() {
    this.viewer && this.viewer.destroy()
    document.body.style = ''
  }
}
</script>

<style lang="scss" scoped>
.preview {
  max-width: 750px;
  min-height: 80vh;
  padding: 20px;
  margin: 0 auto;
  background-color: #fff;
}
.preview-hd {
  padding: 20px 0;
  ::v-deep .el-step__title {
    font-size: 12px;
  }
}
.preview-item {
  margin: 20px;
}
.is-success {
  color: #37a912;
  .line {
    background: linear-gradient(90deg, #37a912 0%, rgba(255, 218, 218, 0) 100%);
  }
}
.is-error {
  color: #da2a56;
  .line {
    background: linear-gradient(90deg, #da2a56 0%, rgba(255, 218, 218, 0) 100%);
  }
}
.preview-item-hd {
  display: flex;
  align-items: center;
  .title {
    font-size: 18px;
    font-weight: 600;
  }
  .line {
    flex: 1;
    height: 4px;
    margin: 0 20px;
  }
}
.preview-item-bd {
  padding-top: 20px;
  .group {
    display: flex;
    flex-wrap: wrap;
  }
  .group + .group {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #f1f1f1;
  }
  dl {
    flex: 50%;
    display: flex;
    margin-bottom: 10px;
    font-size: 14px;
    color: #222;
  }
  dt {
    font-weight: bold;
  }
  dd {
    flex: 1;
    word-break: break-all;
  }
}
</style>
<style lang="scss">
.preview {
  .answers {
    dl {
      margin-bottom: 10px;
      font-size: 14px;
      color: #222;
      & + dl {
        margin-top: 20px;
      }
    }
    dt {
      font-weight: bold;
      margin-bottom: 5px;
    }
    dd {
      word-break: break-all;
    }
  }
  .attachments-item {
    display: flex;
    align-items: center;
    padding: 0 10px;
    &:hover {
      background-color: #f5f7fa;
    }
    .inner {
      flex: 1;
      padding: 10px 0;
      height: 40px;
      display: flex;
      align-items: center;
      color: #222;
      cursor: pointer;
    }
    .pic {
      width: 40px;
      height: 40px;
      font-size: 40px;
      line-height: 40px;
      text-align: center;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .name {
      flex: 1;
      padding: 0 10px;
    }
    .time {
      font-size: 12px;
    }
  }
  .attachments-item + .attachments-item {
    border-top: 1px solid #ebeef5;
  }
}
.viewer-toolbar > ul {
  margin-bottom: 20px;
}
</style>
