<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="'归档查看'" :form="form">
      <div>

      </div>
      <template v-slot:mission_name>
        <div id='printunit'>
          <el-divider>归档信息</el-divider>
          <div>
            <el-descriptions class="margin-top" :column="4" border>
              <el-descriptions-item span='2'>
                <template slot="label">
                  任务名称
                </template>
                {{showform.name?showform.name:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2'>
                <template slot="label">
                  任务类型
                </template>
                {{showform.unit_type_detail?showform.unit_type_detail.value:''}}
              </el-descriptions-item>
              <el-descriptions-item :span="showform.type==4?2:4">
                <template slot="label">
                  任务来源
                </template>
                {{showform.admin?showform.admin.name:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="showform.type==4">
                <template slot="label">
                  任务类别
                </template>
                {{showform.mission_type?showform.mission_type:''}}
              </el-descriptions-item>
              <el-descriptions-item span='4'>
                <template slot="label">
                  附件
                </template>
                <div v-for="item in pictureList">
                  <a :href="item.url" target="_blank">{{item.name}}</a>
                  <el-link target="_blank" style="margin:0 10px;" @click="toshowFile(item.url)" type="primary">
                    预览
                  </el-link>
                  <el-link target="_blank" @click="base.downLoadFileUrl(item.id)" type="primary">
                    下载
                  </el-link>
                </div>
              </el-descriptions-item>
              <el-descriptions-item span='4'>
                <template slot="label">
                  任务内容及要求
                </template>
                {{showform.content?showform.content:''}}
              </el-descriptions-item>
              </el-descriptions-item>
              <el-descriptions-item span='2'>
                <template slot="label">
                  开始日期
                </template>
                {{showform.start_date?showform.start_date:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2'>
                <template slot="label">
                  要求完成日期
                </template>
                {{showform.end_date?showform.end_date:''}}
              </el-descriptions-item>

              <el-descriptions-item span='4' v-if="is_what_unitType==='答题'">
                <template slot="label">
                  答题正确数
                </template>
                {{showform.ask_number?showform.ask_number+'条':''}}
              </el-descriptions-item>
              <el-descriptions-item span='4' v-if="is_what_unitType==='学习'">
                <template slot="label">
                  最短学习时长
                </template>
                {{showform.study_time?showform.study_time+'分钟':''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  培训时间
                </template>
                {{showform.train_time?showform.train_time:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  培训单位
                </template>
                {{showform.train_company?showform.train_company:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  培训课时
                </template>
                {{showform.train_number?showform.train_number:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  授课人
                </template>
                {{showform.train_person?showform.train_person:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  培训内容
                </template>
                {{showform.train_content?showform.train_content:''}}
              </el-descriptions-item>
              <el-descriptions-item span='4'>
                <template slot="label">
                  任务提交附件
                </template>
                <div v-for="item in backform.files">
                  <a :href="item.url" target="_blank">{{item.original_name}}</a>
                  <el-link target="_blank" style="margin:0 10px;" @click="toshowFile(item.url)" type="primary">
                    预览
                  </el-link>
                  <el-link target="_blank" @click="base.downLoadFileUrl(item.id)" type="primary">
                    下载
                  </el-link>
                </div>
              </el-descriptions-item>
              <el-descriptions-item span='4'>
                <template slot="label">
                  最终成果附件
                </template>
                <div v-for="item in backform.regulation_article_file">
                  <a :href="item.url" target="_blank">{{item.files.original_name}}</a>
                  <el-link target="_blank" style="margin:0 10px;" @click="toshowFile(item.files.url)" type="primary">
                    预览
                  </el-link>
                  <el-link target="_blank" @click="base.downLoadFileUrl(item.id)" type="primary">
                    下载
                  </el-link>
                </div>
              </el-descriptions-item>
              <el-descriptions-item span='4' >
                <template slot="label">
                  归档概述
                </template>
                {{backform.content?backform.content:''}}
              </el-descriptions-item>
            </el-descriptions>
          </div>

        </div>
      </template>
      <template v-slot:footerContent>
        <div>
          <Button type="primary" ghost style='margin-left:5px;margin-bottom:5px;' @click="closeDig">关闭</Button>

        </div>

      </template>
    </xy-dialog>
    <viewFile ref='viewFile'></viewFile>
  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  import {
    get
  } from "@/api/task/unit.js";
  import {
    get as getArticle
  } from "@/api/lawsfile/article.js";
  import viewFile from '@/components/viewFile/viewFile.vue'
  export default {
    components: {
      viewFile,
    },
    data() {
      return {
        isShow: false,
        type: 'show',
        id: '',
        mission_id:'',
        fileurl: '',
        pictureList: [],
        showform: {},
        backform:{},
        form: {
          mission_name: '',
        },
        is_what_unitType: '',

      }
    },
    created() {

    },
    methods: {

      closeDig() {
        this.isShow = false
      },
      toshowFile(url) {
        console.log("url", url)
        this.$refs.viewFile.url = url
        this.$refs.viewFile.diaShow = true
      },
      async getDetail() {
        let res = await get(this.mission_id)
        console.log(res)
        this.form = {
          mission_name: '',
        }
        for (var f of res.files) {
          this.pictureList.push({
            id: f.id,
            url: f.url,
            name: f.original_name
          })
        }
        this.showform = res
        this.is_what_unitType = res.unit_type_detail ? res.unit_type_detail.value : ''
      },
      async getBackPlan(){
        let res = await getArticle(this.id)
        this.backform = res
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.getDetail()
          this.getBackPlan()
        } else {
          this.id = ''
          this.mission_id = ''
          this.type = 'show'
          this.showform = {}
          this.pictureList = []
          this.is_what_unitType = ''
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .name7,
  ::v-deep .content,
  ::v-deep .end_type,
  ::v-deep .file_ids,
  ::v-deep .mission_name,
  ::v-deep .audit_status,
  ::v-deep .showlist,
  ::v-deep .trainlist,
  ::v-deep .uploadslist,
  ::v-deep .studylist {
    flex-basis: 100%;
  }

  ::v-deep .el-collapse {
    border-top: none;
  }

  ::v-deep .type {
    display: none;
  }

  ::v-deep .el-divider__text {
    font-size: 20px;
  }

  ::v-deep .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
    width: 16%
  }

  .xy-table-item-label {
    width: 140px;
  }

  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  ::v-deep .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar {
    width: 80px !important;
    display: block;
    border-radius: 6px;
  }

  // ::v-deep .xy-table-item-label {
  //   width: 160px !important;
  // }

  ::v-deep .el-date-editor .el-range-separator {
    width: auto !important;
  }

  ::v-deep .el-input-number .el-input__inner {
    text-align: left !important;
  }

  .searchCompanys {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    .el-input {
      width: 80%
    }
  }
</style>
