<template>
  <div class="edit-add-detail">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-icon_analysis_patent"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="form-content">
      <div class="company-information">
        <el-form
          ref="formInfo"
          :model="parameter"
          label-position="right"
          label-width="auto"
        >
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">资质库信息</div>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="资质编码">
                <el-input
                  readonly
                  clearable
                  v-model="parameter.qualificationCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资质名称">
                <el-input
                  readonly
                  clearable
                  v-model="parameter.qualificationName"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="资质类型名称">
                <el-input
                  readonly
                  clearable
                  v-model="parameter.qualificationTypeName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资质来源" prop="qualificationForm">
                <dict-select
                  dictCode="zzly"
                  :hasDefaultOption="true"
                  clearable
                  style="width:100%"
                  readonly
                  v-model="parameter.qualificationForm"
                  placeholder="请选择资质来源"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12" v-if="parameter.qualificationForm == 1">
            <el-form-item label="企业名称" prop="qualificationForm">
              <el-input
                readonly
                v-model="parameter.createName"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="parameter.qualificationForm == 2">
            <el-form-item label="专家姓名" prop="qualificationForm">
              <el-input
              readonly
                v-model="parameter.createName"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
            <el-col :span="12">
              <el-form-item label="有效截止期">
                <el-input
                  readonly
                  clearable
                  v-model="parameter.expiryDate"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="取得日期"
                prop="qualificationAcquisitionDate"
              >
                <el-date-picker
                  clearable
                  style="width:100%"
                  v-model="parameter.qualificationAcquisitionDate"
                  type="date"
                  readonly
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">附件信息</div>
            </div>
            
          </div>
          <el-table
              class="down"
              :data="dataList"
              border
              stripe
              style="width: 100%;margin-top: 20px;"
            >
              <el-table-column prop="name" label="文件名称"></el-table-column>
              <el-table-column prop="size" label="文件大小">
                <template slot-scope="scope">
                  <span>{{ scope.row.fileSize }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="上传时间">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.createTime }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="150px" label="操作">
                <template slot-scope="scope">
                  <el-button size="small" type="text">
                    <a
                      target="_blank"
                      @click="downloadFile(scope.row.name, scope.row.url)"
                      >下载</a
                    >
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="footer">
      <el-button @click="handleClose">{{ $t('domestic.cancel') }}</el-button>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import basicData from '@/api/basicData'
export default {
  name: 'domesticDialog',
  components: {Breadcrumb},
  data() {
    return {
      breadcrumbOpt: [{breadcrumbName: '资质库'}, {breadcrumbName: '详情'}],
      parameter: {}
    }
  },
  created() {
    this.parameter = this.$route.query.detailRows
    this.detail(this.parameter.id)
  },
  mounted() {},
  methods: {
    // 关闭//面包屑点击
    handleClose() {
      this.$router.push({
        name: 'qualificationManagement',
        params: {
          tabsActiveName: 'libraryQualifications',
          pageBean: this.$route.query.pageBean
        }
      })
      this.parameter = {}
    },
    //下载按钮回调
    downloadFile(name, url) {
      console.log(name, 'name')
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      a.download = name
      a.target = '_blank'
      a.href = url
      a.dispatchEvent(event)
    },
    //详情
    detail(val) {
      this.$http
        .post('${portal}/bizQualificationLabel/v1/getById?id=' + val)
        .then(res => {
          if (res.data.state) {
            this.parameter = res.data.value
            this.dataList = res.data.value.accessoryList
            this.parameter.createName = this.parameter.qualificationMember
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 120px;
  font-size: 14px;
  color: #828282;
  font-weight: 500;
}

::v-deep .el-form-item__content span {
  font-size: 14px;
  color: #000;
  font-weight: 500;
}

::v-deep .el-form-item {
  margin-bottom: 10px;
}

.rows {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 16px;
  padding: 10px 0;

  .rows-left {
    margin-right: 10px;

    .rows-hr {
      width: 3px;
      height: 18px;
      background-color: #0e6eff;
      border-radius: 2px;
    }
  }

  .rows-title {
    .text-overflow {
      width: 100%;
      font-size: 16px;
    }
  }
}
</style>
