<template>
  <div class="height_100">
    <el-container>
      <el-header>
        <div class="head">
          <el-button type="primary" size="small" @click="add" class="margin-right_10">添加</el-button>
        </div>
      </el-header>
      <el-main v-DivHeight="getDivHeight">
        <el-table v-if="refresh" v-loading="loading"  :data="tableData" :maxHeight="tableHeight - 45"  border :header-cell-style="{ 'text-align': 'center' }"  style="width: 100%">
          <el-table-column  type="index" label="序号" width="100" align="center">
            <template slot-scope="scope">
                <div v-if="refreshCheck">
                    <el-checkbox :label="scope.row.fileGuid" @change="changeCheck(scope.row)" :checked="checkList.indexOf(scope.row.fileGuid) != -1">
                        <span>{{ scope.$index + 1 }}</span>
                    </el-checkbox>
                </div>
                <div v-else>
                    <span>{{ scope.$index + 1 }}</span>
                </div>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="附图">
            <template slot-scope="scope">
              <div v-if="scope.row.isEdit">
                <el-upload ref="upload" action="#" :auto-upload="false" :on-change="(file,fileList)=>change(file,fileList,scope.row)" list-type="picture"
                :show-file-list="false">
                    <span style="display:flex;flex-direction:row;flex-wrap:wrap;">
                    <span class="avatar" v-if="scope.row.fileGuid"
                        style="margin-left:10px">
                        <span class="deleteImg">
                        <span>
                            <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(scope)"></i>
                            <i class="el-icon-delete" @click.stop="handleRemove(scope.row)"></i>
                        </span>
                        </span>
                        <el-image :ref="'image'+scope.$index" class="img" :src="$commonJS.checkViewer(scope.row.fileGuid)" :preview-src-list="[$commonJS.checkViewer(scope.row.fileGuid)]"></el-image>
                    </span>
                    <i class="el-icon-plus avatar-uploader-icon" v-if="!scope.row.fileGuid"></i>
                </span>
            </el-upload>

                
              </div>
              <div v-else >
                <el-image style="width:200px" :src="$commonJS.checkViewer(scope.row.fileGuid)" fit="contain"></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="figureTitle" label="标题">
            <template slot-scope="scope">
              <div v-if="scope.row.isEdit">
                <el-input v-model="scope.row.figureTitle" placeholder="请输入附图标题"></el-input>
              </div>
              <div v-else>{{ scope.row.figureTitle }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="说明">
            <template slot-scope="scope">
              <div v-if="scope.row.isEdit">
                <el-input v-model="scope.row.description" placeholder="请输入附图说明"></el-input>
              </div>
              <div v-else>{{ scope.row.description }}</div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.isEdit">
                     <el-button type="text" @click="cancel(scope)">取消</el-button>
                     <el-button type="text" @click="save(scope.row)">保存</el-button>
                </div>
               <div v-else>
                    <el-button type="text" @click="del(scope)">删除</el-button>
                    <el-button type="text" @click="edit(scope.row)">编辑</el-button>
               </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <addAndEditPicture ref="addAndEditPicture" :projectId="projectId" @save="getList"></addAndEditPicture>
  </div>
</template>
  
<script>
import { getTableHeight } from "@/views/components/mixins";
import addAndEditPicture from '../dialog/addAndEditPicture.vue';
export default {
  components: {
    addAndEditPicture
  },
  mixins: [getTableHeight],
  props: {
    projectId: {
      default: 0,
    },
    refreshCheck:{
        default:false
    }
  },
  data() {
    return {
        refresh:true,
      tableData: [],
      loading: false,
      checkList:[]
    };
  },
  watch: {
    refreshCheck(){
        this.checkList = []
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    changeCheck(row){
        var index = this.checkList.indexOf(row.fileGuid)
        if(index == -1){
            this.checkList.push(row.fileGuid)
        }else{
            this.checkList.splice(index,1)
        }
    },
    toParent(){
        this.$emit('check',this.checkList)
    },
    //获取附图
    getList() {
      var params = {
        projectId: this.projectId,
      };
      this.loading = true;
      this.$api.queryProjectFigures(params).then(response=>{
        if(response.code == 200){
            this.tableData = response.data.data
            this.loading = false
        }
      }).catch(error=>{
        this.tableData = []
        this.loading = false
      })
     
    },
    //编辑
    edit(row) {
        // this.$set(row,'old',row)
        // this.$set(row,'isEdit',true)
        this.$refs.addAndEditPicture.open(row)
    },
    //保存
    save(row) {},
    //取消编辑
    cancel(scope) {
        var row = scope.row
        var index = scope.$index
        if(row.id){
            row = row.old
            this.$set(row,'isEdit',false)
        }else{
            this.tableData.splice(index, 1);
        }
        
    },
    //删除当前一行
    del(scope) {
        this.$confirm('确认删除本条数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            var index = scope.$index;
            var row = scope.row
            if(row.id){
                var ids = [row.id]
                this.$api.removeProjectFigures(ids).then(response=>{
                    if(response.code == 200){
                        this.$message.success('删除成功')
                        // this.tableData.splice(index, 1);
                        this.getList()
                    }
                }).catch(error=>{
                    this.$message.error('删除失败')
                })
            }else{
                this.tableData.splice(index, 1);
            }
        })
    
    },
    //在下方新增一行
    add() {
        this.$refs.addAndEditPicture.open({})
    //   this.tableData.push(
    //     { 
    //         isEdit:true
    //     }
    //   )
    },
    RefreshTable(){
        this.refresh = false
        this.$nextTick(()=>{
            this.refresh = true
        })
    },
    //文件上传
    change(file,fileList,row){
        let formData = new FormData()
        formData.append('sourceId',this.$constants.sourceId)
        formData.append('files',file.raw)
        this.$api.uploadFile(formData).then(response=>{
            if(response.code == 200){
                // row.fileGuid = response.data[0]
                this.$set(row,'fileGuid',response.data[0])
                this.RefreshTable()
            }
        })
    },
    handleRemove(row) {
        this.$set(row,'fileGuid','')
    },
    handlePictureCardPreview(scope) {
        this.$refs['image'+scope.$index].showViewer = true
    },

  },
};
</script>
  <style lang="scss" scoped>
.head {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}
</style>
<style lang="scss" scoped>
.avatar-uploader-icon {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.avatar {
  position: relative;
  width: 148px;
  height: 148px;
  display: block;
}

.avatar:hover .deleteImg {
  display: block;
}

.deleteImg {
  display: none;
  font-size: 30px;
  width: 148px;
  height: 148px;
  background-color: black;
  opacity: 0.6;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
}

.avatar .img {
  width: 148px;
  height: 148px;
}

.deleteImg span i {
  margin-left: 10px;
  color: #fff;
}

.deleteImg span {
  display: flex;
  align-items: center;
  /*垂直居中*/
  justify-content: center;
  /*水平居中*/
  width: 100%;
  height: 100%;
}
</style>