<template>

    <div class="h-100p">
         <avue-crud 
            :table-loading="loading"
            :data="tableData" 
            :option="option"
            v-model="form" 
            :before-open="beforeOpen"
            @row-save="rowSave"  
            @row-update="addUpdate"  
            @selection-change="selectionChange"
            @refresh-change="refreshChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @on-load="onLoad"
            :page.sync="page" 
            ref="crud"
        > 
            <template slot="menuRight"> 
                    <el-button
                        type="danger"
                        size="small"
                        icon="el-icon-delete"
                        plain
                        @click="handleDelete">删除
                    </el-button>
                    <el-button
                    size="small"
                    type="primary"
                    plain
                        icon="el-icon-plus"
                    @click="importdata"
                    >导入
                    </el-button> 
            </template>
        </avue-crud>
           <!-- 导入参数弹窗 -->
        <importDialog ref="importDialog" :importDialogType="importDialogType" @temonLoad="onLoad" :tempage="page"/>
    </div>

 
</template>

<script>
import importDialog from './importDialog.vue';
import {getList,add, update, remove,getDetail} from "@/api/tentative/testtempreature";
export default {
  components:{
    importDialog,
   
  },
     data() {
      return {
        importDialogType:2,
        activeName: 'first',
        page: {
          pageSize: 20,
          currentPage:1
        },
        loading:false,
        tableData: [
          {
            id:1,
            name:'张三',
            sex:'男'
          }, {
            id:2,
            name:'李四',
            sex:'女'
          }
        ],
        selectionList:[],
        query:{},

        option:{
          height: 630,
          calcHeight: 30,
          tip: false,
          searchShow:false,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          selection: true,
          editBtn:true,
          delBtn:false,
          addBtn:true,
          menu:true,
          indexFixed:false,
          selectionFixed:false,
          expandFixed:false,

          dialogClickModal: false,
          column:[
             {
              label:'温度',
              prop:'temperature'
            }, {
              label:'密度',
              prop:'waterDensity'
            }
          ]
        },
      };
    },
    computed:{
     ids () {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
    methods: {
   
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
     beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
     rowSave (row, done, loading) {
          console.log(row,'row');
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
      },
     addUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },

    handleDelete () {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
      
        })
        .then(() => {
          this.onLoad(this.page);//刷新表格数据
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
      },
      selectionChange (list) {
        this.selectionList = list;
      },
      selectionClear () {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
     },
      importdata(){
        console.log('导入');
        this.$refs.importDialog.show()
      },
      
  
  
    }
}
</script>

<style>

</style>