<template>
  <div class="detail-table-box">
    <div class="system-settings-btn-row">
      <el-button class="operate-btn" type="primary" @click="dialogVisible=true;type = 0"><i class="el-icon-plus"></i>新增</el-button>
      <!--<el-button class="operate-btn" type="primary" @click="exportModule(orgnId)"><i class="el-icon-upload2"></i>导出</el-button>-->
    </div>
    <div class="system-settings-data  table-container-style">
      <el-table :data="qyzzList" highlight-current-row style="width: 100%;" height="300">
        <el-table-column property="certificateName" label="证书名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column property="getTime" label="获得时间" align="center" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column property="effectiveTime" label="有效时间" align="center" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column property="certificateType" label="证书类型" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column property="enclosure" label="附件" align="center" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center"  width="150">
          <template slot-scope="scope">
            <div class="table-edit-btn" @click="editMaster(scope.row)"></div>
            <div class="table-delete-btn" @click="deleteMaster(scope.row)"></div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="type===0?'添加资质':'修改资质'" :visible.sync="dialogVisible" width="450px" :close-on-click-modal=false>
      <el-form :model="importParam" :rules="addRules" ref="importForm" label-width='120px'>
        <el-form-item label="证书类型" prop="certificateType">
          <el-select v-model="importParam.certificateType" clearable placeholder="请选择" style="width:300px;">
            <el-option v-for="item in zslxList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书名称" prop="certificateName">
          <el-input v-model="importParam.certificateName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="获得时间" prop="">
          <el-date-picker v-model="importParam.getTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="有效期至" prop="">
          <el-date-picker v-model="importParam.effectiveTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="上传" prop="">
          <el-upload :action='GLOBAL.BASE_HTTP_URL+"/zhyw/file"' :limit=1 :before-remove="beforeAttachmentRemove" :on-exceed="handleAttachmentExceed" :file-list="fileList" :on-success="onUploadSuccess">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="importReport(orgnId)">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: 'enterpriseManage',
    data () {
      return {
        type: 0,//标示弹出框类型：0为新增，1为修改
        dialogVisible:false,
        zslxList:[],
        fileList:[],
        addRules:{
          certificateType: [
            { required: true, message: '请选择证书类型', trigger: 'change' }
          ],
          certificateName: [
            { required: true, message: '请填写证书名称', trigger: 'blur' }
          ],
          /*getTime: [
            { required: true, message: '请选择获得时间', trigger: 'blur' }
          ],
          effectiveTime: [
            { required: true, message: '请选择有效时间', trigger: 'blur' }
          ],*/
          fileList: [
            { required: true, message: '请选择上传数据文件' }
          ]
        },
        importParam:{orgnId:'',certificateName: "",certificateType:'',getTime:"",effectiveTime:'',enclosure:'',enclosureId :""},
        currentId:null

      }
    },
    props:['qyzzList','orgnId'],
    created(){
      let vm = this
      /*vm.GLOBAL.app.getDictList(resp => {
        vm.zslxList = resp["zslx"];
      });*/
    },
    mounted (){
      var vm = this
    },
    methods:{
      handleAttachmentExceed() {
        this.$message.warning("当前限制选择1个文件");
      },
      beforeAttachmentRemove(file) {
        return this.$confirm(`确定移除 ${ file.name }？`,'提示', {
          type: 'warning'
        }).then(() => {
          this.fileList=[];
          this.importParam = {orgnId:'',certificateName: "",certificateType:'',getTime:"",effectiveTime:'',enclosure:'',enclosureId :""}
        });
      },
      onUploadSuccess(response,file) {
        var _this = this;
        if(!_this.$Util.isEmpty(response) && response.code === 200 && !_this.$Util.isEmpty(response.data)){
          var _list = response.data.split(":");
          if(_list.length === 2){
            _this.fileList.push(file);
            _this.importParam.enclosureId = _list[0];
            _this.importParam.enclosure = _list[1];
            _this.$refs["importForm"].validate((valid) => {return valid});
          }
        }
      },
      importReport: function (orgnId) {
        var _this = this;
        _this.$refs['importForm'].validate((valid) => {
          if (valid) {
            _this.importParam.orgnId = orgnId;
            if(_this.type == 1){
              _this.$http.put('/xmgl/enterpriseQualification/'+_this.currentId, _this.importParam).then(function (resp) {
                var _data = resp.data;
                if (_data.code === 200) {
                  _data.data.effectiveTime = new Date(_data.data.effectiveTime).format("yyyy-MM-dd");
                  _data.data.getTime = new Date(_data.data.getTime).format("yyyy-MM-dd");
                  _this.qyzzList.find((v,i)=>{
                    if(v.id == _data.data.id){
                      _this.$set(_this.qyzzList, i, _data.data)
                    }
                  })
                  _this.$message.success("修改成功")
                  _this.fileList=[];
                  _this.importParam = {orgnId:'',certificateName: "",certificateType:'',getTime:"",effectiveTime:'',enclosure:'',enclosureId :""};
                } else {
                  _this.$message.error(_data.message);
                }
              })
            }else{
              _this.$http.post('/xmgl/enterpriseQualification', _this.importParam).then(function (resp) {
                var _data = resp.data;
                if (_data.code === 200) {
                  _data.data.effectiveTime = new Date(_data.data.effectiveTime).format("yyyy-MM-dd");
                  _this.qyzzList.push(_data.data)
                  _this.$message.success("新增成功")
                  _this.fileList=[];
                  _this.importParam = {orgnId:'',certificateName: "",certificateType:'',getTime:"",enclosure:'',enclosureId :""}
                } else {
                  _this.$message.error(_data.message);
                }
              });
            }
            _this.dialogVisible = false;
          } else {
            return false;
          }
        });
      },
      editMaster(rowData){
        let vm = this
        vm.type = 1;
        vm.fileList.push({name:rowData.enclosure, url:vm.GLOBAL.BASE_HTTP_URL + "/zhyw/file/" +rowData.enclosureId/*, response:{data:rowData}*/})
        vm.importParam = JSON.parse(JSON.stringify(rowData));
        vm.currentId = rowData.id;
        vm.dialogVisible = true;
      },
      deleteMaster: function (rowData) {
        var _this = this;
        _this.$confirm('确认删除？','提示', {type: 'warning'}).then(() => {
          if(!_this.$Util.isEmpty(rowData) && !_this.$Util.isEmpty(rowData.id)){
            _this.$http.delete('/xmgl/enterpriseQualification/'+rowData.id).then(function (resp) {
              var _data = resp.data;
              if (_data.code === 200) {
                _this.qyzzList.findIndex((v,i)=> {
                  if(v.id == rowData.id){
                    _this.qyzzList.splice(i,1);
                    return false;
                  }
                });
              } else {
                _this.$message.error(_data.message);
              }
            });
          }
        }).catch(() => {});
      },
      exportModule: function (orgnId) {
        let _this = this;
        _this.$http.get('/xmgl/enterpriseQualification/'+orgnId+'/export'/*,{ params: _this.filter}*/).then(function (resp) {
          let _data = resp.data,enclosureId  = _data.data;
          if (_data.code === 200 && !_this.$Util.isEmpty(enclosureId)) {
            // 下载文件
            _this.$http.get('/zhyw/file/'+enclosureId ).then(() => {
              /*_this.$notify({
                title: '提示',
                message: '导出企业资质成功！',
                type: 'success'
              });*/
            });
          } else {
            _this.$message.error(_data.message);
          }
        });
      },
    }
  }
</script>
<style>
  /*表格合计    s*/
  .detail-table-box .el-table__footer-wrapper tbody td{background:#050f26;border-top-color:#373f52;color:rgba(255,255,255,0.8)}
  .gsxx-box{}
  /*表格合计    e*/
</style>
<style scoped>
  .gsxx-box{width:calc(100% - 29px);height:calc(100% - 2px);border:1px solid rgba(7,182,255,.5);background:rgba(12,18,30,1);overflow-y: auto}
  .gsxx-row{width:50%;height:calc(100% / 6.5);float:left;color:rgba(255,255,255,.8);}
  .gsxx-label,.gsxx-info{position:relative;height:100%;border-bottom:1px solid rgba(7,182,255,.29)}
  .gsxx-label span,.gsxx-info span{display: block;width: 100%;height: 24px;line-height: 24px;letter-spacing:1px;position: absolute;top: 50%;margin-top: -12px;text-align: center;}
  .gsxx-info span{text-align:left;width: calc(100% - 10px);}
  .gsxx-label{width:130px;background: rgba(7,182,255,.5);float:left;}
  .gsxx-info{width:calc(100% - 140px);float: right;padding-left:10px;}
  .detail-table-box{width:calc(100% - 27px);height:calc(100% - 0px);overflow-y: auto}
  .detail-table-box .system-settings-btn-row{padding-top:0;text-align: right;margin-bottom: 10px;}
  .detail-table-box .system-settings-btn-row .operate-btn{display: inline-block}
  .detail-table-box .system-settings-data{height:calc(100% - 47px);}

  /**/
  .qy-title{width:100%;height:35px;line-height: 35px;font-size:18px;color:#fff;position: relative;}
  .qy-row-box{width:100%;height:calc(100% - 35px);overflow-y: auto}
  .qy-row{width:100%;line-height:25px;}
  .qy-label{width: 80px;float:left;text-align: right;color:rgba(7,182,255,1);}
  .qy-info{width:calc(100% - 84px);float: right;color:rgba(255,255,255,.8);}
  .back-index{position: absolute;right:10px;top:0;height: 35px;background-position:center left;font-size: 14px;}


</style>