<template>
  <div class="app-container">
    <el-form  :inline="true"  >
      <el-form-item label="单位名称:" >
        <el-input v-model="name"  placeholder="请输入单位名称" style="width: 160px" clearable></el-input>
      </el-form-item>
      <el-form-item class="right">
        <el-button plain size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary"  size="mini"  @click="getList()">搜索</el-button>
      </el-form-item>
      <br>
      <el-button
        type="primary"
        size="mini"
        @click="add"
        >新增</el-button
      >
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="margin-top:20px;"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column prop="name" label="单位名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="introduce" label="单位介绍" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="logo" label="公司logo">
        <template width="90" slot-scope="scope" >
           <el-image
            v-if="scope.row.logo"
            style="width: 80px"
            :preview-src-list="[scope.row.logo]"
            :src="scope.row.logo">
          </el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="remark" label="备注"> </el-table-column> -->
      <el-table-column prop="createBy" label="创建者" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="lans"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            class="hongs"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body :before-close="cancel" :close-on-click-modal="false" class="roleform roleDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位名称" prop="name" >
              <el-input v-model="form.name" placeholder="请输单位名称" maxlength="30" width="30%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位介绍" prop="introduce">
              <el-input v-model="form.introduce" placeholder="请输单位介绍" maxlength="30" width="30%" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" maxlength="30" width="30%" />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="单位LOGO" prop="logo" ref="img">
              <el-upload
                class="upload-demo"
                action="#"
                :limit = 1
                :on-change="handleChange"
                :file-list="fileList"
                :auto-upload="false"
                accept=".jpg,.jpeg,.JPG,.JPEG,.PNG,.png,.GIF,.gif"
                >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
        <el-button :loading="loading" type="primary"  v-else>提交中...</el-button>
        <el-button @click="cancel" plain>取 消</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      @size-change="handleSizeChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="sizes,prev, pager, next"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>
<script>

import { companyList, companyAdd, companyUpdata, companyDel, imgDel } from "@/api/unit-info/unit-info";
import { fileUpload } from "@/api/uploadfile.js";
export default {
  data() {
    return {
      uploadDisabled:false,
      open:false,
      title:undefined,
      loading:true,
      //存储开始页
      pageNo: 1,
      //存储每页几条
      pageSize:10,
      totalCount:undefined,
      name:undefined,
      delImg:undefined,

       // 表单校验
      rules: {
        name: [
          { required: true, message: "公司名称不能为空", trigger: "blur" },
        ],
        logo: [
          { required: true, message: "公司logo不能为空", trigger: "change" }
        ],
      },
      imageUrl: "",
      fileList:[],
      dialogImageUrl: "",
      dialogVisible: false,
      hideUploadEdit: false, // 是否隐藏上传按钮
      tableData: [],
      multipleSelection: [],
      value: "",

      input: "",

      dialogFormVisible: false,
      form: {
        id:undefined,
        name: "",
        introduce: "",
        remark: "",
        logo:undefined
      },
      formData:undefined, //上传图片
      logoUrl:undefined,//图片地址
      num:0,
    };
  },
  created(){
    this.getList()
  },
  mounted() {

  },
  methods: {
    //文件上传
    handleChange(param){
      this.num++
      if(this.num>1){
        this.num = 0
        return false
      }else{
        const formData = new FormData();
        formData.append('file', param.raw)
        formData.append('multipart', param.raw)
        fileUpload(formData).then(response => {
          this.$message.success("上传成功");
          this.form.logo = response.data
        });
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.name = undefined
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    cancel() {
      this.open = false;
      this.handlePicRemove()
      // this.reset();
    },
    //修改数据
    companyUpdata(){
      companyUpdata(this.form).then(Response =>{
        if(Response.status == "SUCCESS"){
          this.$message.success("修改成功")
          this.open = false
          this.getList()
        }
      }).catch(()=>{
        this.imgDel()
      })
    },
    //获取数据数据
    getList(){
      companyList(
        {
          current: this.pageNo,
          size: this.pageSize,
          name:this.name
        }
      ).then(Response =>{
        let data = Response.data.pageList
        if(data){
          // for(let i = 0;i<data.length;i++){
          //   if(data[i].logo.indexOf("localhost:8082")){
          //     data[i].logo = data[i].logo.replace('localhost:8082', '172.16.120.49')
          //   }
          // }
          this.tableData = data
          this.totalCount = Response.data.totalCount
        }
        this.loading = false
      })
    },
    //新增数据
    companyAddData(){
      companyAdd(this.form).then(Response =>{
        if(Response.status == "SUCCESS"){
          this.open = false
          this.$message.success("添加成功")
          this.getList()
        }
      }).catch(()=>{
        this.imgDel()
      })
    },
    //删除图片
    imgDel(){
      if(this.delImg){
        imgDel({"fileName":this.delImg.split("archive/")[1]}).then(Response=>{
          if(Response.status == "SUCCESS"){
            this.form.logo = undefined
            this.delImg = undefined
          }
        })
      }
    },
    //删除数据
    companyDelData(row){
      companyDel(row.id).then(Response =>{
        if(Response.status == "SUCCESS"){
          this.open = false
          this.$message.success("删除成功")
          if(this.form.logo){
            this.delImg = this.form.logo
            this.imgDel()
          }
          this.getList()
        }
      })
    },
    //分页查询
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getList()
    },
    //改变每条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList()
    },
    //新增按钮
    add(){
      this.form.id =undefined
      this.form.name =undefined
      this.form.introduce =undefined
      this.form.logo =undefined
      this.open = true;
      this.title = "新增";
    },
    submitForm(){
      if(this.form.logo){
      }else{
        this.$refs.img.clearValidate();
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.id){
            this.companyUpdata()
          }else{
            this.companyAddData()
          }
        }
      })

    },
    //修改按钮
    handleEdit(index, row) {
      if(row.logo){
        this.logoStatus = true
        // setTimeout(()=>{
          // var arr = document.getElementsByClassName('el-upload-list')[0]
          // arr.classList.add("yc")
        //   var childs = arr.childNodes;
        //   if(childs.length>0){
        //      for(var i = 0; i < childs.length; i++) {
        //       arr.removeChild(childs[i]);
        //     }
        //   }
        // },1)
      }else{
        this.logoStatus = false
      }
      setTimeout(()=>{
        this.title = "修改"
        this.form = JSON.parse(JSON.stringify(row))
        this.open = true
        setTimeout(()=>{
          var arr = document.getElementsByClassName('el-upload-list')[0]
          arr.classList.add("yc")
          this.$refs.upload.clearFiles();
        },1)

      },1)



    },
    handleDelete(index, row) {
      this.$confirm("确定删除该数据吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
         this.companyDelData(row)
        })
        .catch(() => {
          this.$message.info("已取消删除")
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style >
.el-dialog .el-form-item__label{
  line-height: 40px;
  padding-right:10px;
}
.el-input__prefix{
  top:4px;
}
.el-radio{
  margin-top:10px;
}
.el-tabs--border-card {
  background: rgba(0, 0, 0, 0);
  border: 1px solidrgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
}
.el-tabs--border-card > .el-tabs__header {
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  top: 12px;
  left: 14px;
  border-bottom: 0;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item,
.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
  background: #e4e3e3;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  color: #444;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #fff;
  background-color: #5c88fa;
  border: 1px solid rgba(0, 0, 0, 0);
  border-right-color: rgba(0, 0, 0, 0);

  border-left-color: 0;
}
.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: #fff;
  background-color: #5c88fa;
}
.el-tabs__item {
  height: 35px;
  line-height: 35px;
}

.roleDialog .el-dialog .el-form-item {
  margin: 20px 20px 0;
}
.roleDialog .el-dialog .el-form-item:first-child,
.roleDialog .el-dialog .el-form-item:nth-child(2) {
  display: inline-block;
}
.el-dialog .el-form-item.table-item {
  width: 96%;
}
.el-dialog .el-form-item{
  width:100%;
}
.el-input__inner{
  height:40px;
  line-height: 40px;
}
/* .el-dialog .el-form-item__content, .el-dialog .el-form-item__label{
  line-height: auto;
} */

.roleDialog .el-dialog .el-form-item{
  margin:20px 0
}
.el-table .cell{
  height:auto;
}
.yc{
  display: none;
}
.xs{
  display: block;
}
</style>
<style scoped>

</style>

