<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
      <!-- 操作工具栏 -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm()"
                     v-hasPermi="['base:company-quals:create']">新增</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" v-for="(item, index) in list"  :key="item.id" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <div slot="header" class="clearfix" style="text-align:center;position: relative;">
              <span>
                <dict-tag :type="DICT_TYPE.BASE_QUALS_TYPE" :value="item.qualsType"/>
              </span>
              <el-button v-hasPermi="['base:company-quals:delete']" class="dl-del-button" @click="handleDelete(item.id)" type="text" icon="el-icon-delete" ></el-button>
            </div>
            <div class="dl-clearfix">
              <!-- 卡片内容 -->
              <image-preview :src="item.fileUrl" class="image"></image-preview>
              <div class="dl-float-box">
                <span>{{item.qualsName}}({{item.qualsNo}})</span>
                <div class="bottom clearfix">
                  <time class="time">有效期：{{item.startDate}}至{{item.endDate}}</time>
                </div>
              </div>
              <el-button type="text" v-hasPermi="['base:company-quals:update']" @click="openForm(item.id)" class="button">编辑</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <edit-quals-draw ref="qualsDrawRef" :corp-id="corpId" @success="editQualsSuccess"></edit-quals-draw>
  </div>
</template>
<script>
import * as CompanyQualsApi from '@/api/base/company'
import EditQualsDraw from './EditQualsDraw'
import ImagePreview from "@/components/ImagePreview";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";

export default {
  name: 'CompanyQualsForm',
  components: { EditQualsDraw,ImagePreview },
  data() {
    return {
      // 弹出层标题
      dialogTitle: '',
      // 是否显示弹出层
      dialogVisible: false,
      //所有资质
      list:[],
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading:false,
      //企业id
      corpId:"",
    }
  },
  created() {

  },
  methods: {
    /** 打开弹窗 */
    async open(corpName,id) {
      this.corpId = id
      this.dialogVisible = true
      this.dialogTitle = corpName+"-资质管理"
      this.getList()
    },
    /** 查询资质 */
    async getList(){
      const res = await CompanyQualsApi.getCompanyQualsPage({corpId:this.corpId})
      this.list = res.data
    },
    /** 新增/编辑资质 */
    async openForm(qualsId){
      if(qualsId){
        //编辑
        this.$refs['qualsDrawRef'].open(qualsId)
      }else{
        //新增
        this.$refs['qualsDrawRef'].open()
      }
    },
    /** 删除按钮操作 */
    async handleDelete(id) {
      await this.$modal.confirm('是否确认删除数据？')
      try {
        await CompanyQualsApi.deleteCompanyQuals(id)
        await this.getList()
        this.$modal.msgSuccess('删除成功')
      } catch {
      }
    },
    /** 新增/编辑地址完成回调 */
    editQualsSuccess(){
      this.getList()
    }
  }
}
</script>

<style>
.dl-clearfix{
  content: "";
  display: flex;
  clear: both;
  position: relative;
  height: 120px;
}
.dl-float-box{
  padding: 10px 5px;
  width: 50%;
}
.dl-del-button {
  right: -13px;
  top: -14px;
  position: absolute;
  padding: 3px 0
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  position: absolute;
  right: 5px;
  bottom: 5px;
}

.image {
  width: 50%;
  display: block;
}

</style>
