<template>
  <el-row class="picking_application_list">
    <div class="block_wrap">
      <LayoutConditinal :opts="opts" @submit="handleQuery" @keydown.enter.native.prevent="handleQuery" :loading="loading"/>
    </div>
    <DoorView title="检验项模板管理" >
      <div slot="header">
        <el-button class="createBtn" type="primary" @click="goTestListDetails(null)" size="small" icon="el-icon-plus">新增</el-button>
      </div>
      <el-table
        slot="main"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="itemName"
          label="检验项名称"
          >
        </el-table-column>
        <el-table-column
          prop="sampleVolume"
          label="试样量"
          >
        </el-table-column>
        <el-table-column
          prop="decimalPoint"
          label="保留小数位数">
        </el-table-column>
        <el-table-column
          prop="unit"
          label="单位">
        </el-table-column>
        <el-table-column
          prop="status"
          label="启用状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="switchChange(scope)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="num"
          label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="goTestListDetails(scope.row)" >编辑</el-link>
            <el-popconfirm
              title="确定删除这条数据吗？☢"
              @onConfirm="deleteTestList(scope.row)"
            >
              <el-link  type="primary" slot="reference"  >删除</el-link>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination slot="bottom" class="pagination"
                     :current-page.sync="pageObj.current"
                     @size-change="handleSizeChange"
                     @current-change="paginationChange"
                     background
                     :page-sizes="[10, 20, 40, 100, 200]"
                     :page-size="20"
                     :layout="`total, prev, pager, next, sizes, jumper`"
                     :total="pageObj.total">
      </el-pagination>
    </DoorView>
  </el-row>
</template>

<script>
  import LayoutConditinal from '@/layout/business/LayoutConditinal';
  import DoorView from "@/components/YuComponents/DoorView.vue";
  import * as inspectionItemTemplate from '@/api/business/baseData/inspectionItemTemplate'

  export default {
    name: 'Deploy',
    data() {
      return {
        //查询条件
        queryData: {
          itemName:null
        },
        //是否在加载
        loading: false,
        //搜索组件
        opts: {
          itemName: {
            label: '检验项名称',
            comp: 'el-input',
            bind: {
              clearable: true
            }
          }
        },
        //表格数据
        tableData: [],
        //分页数据
        pageObj: {
          pageNum: 1,
          pageSize: 20,
          current: 1,
          total: 0
        }
      }
    },
    components: { LayoutConditinal,DoorView },
    created() {
      this.update(0);
    },
    methods: {
      //更新数据,type:0不跳转第一页,1反之
      update(type){
        this.loading = true
        if (type)this.pageObj.pageNum = 1
        inspectionItemTemplate.listInspectionItemTemplate({...this.queryData,...this.pageObj}).then(res=>{
          this.pageObj.pageNum = res.data.pageNum
          this.pageObj.total = res.data.total
          this.tableData = res.data.records
          console.log(res)
          this.loading=false
        })
      },
      //查询
      handleQuery(v) {
        this.queryData = {...v}
        this.update(1)
        console.log(v, '查询')
      },
      //分页
      paginationChange(num) {
        this.pageObj.pageNum = num
        this.update(0)
      },
      handleSizeChange(pageSize){
        this.pageObj.pageSize = pageSize
        this.update(0)
        console.log(this.pageObj)
        console.log("分页修改");
      },
      switchChange(s){
        console.log('改变了状态',s.row);
        let status = 0;
        if(s.row.status) status=1
        else  status =0
        inspectionItemTemplate.updateInspectionItemTemplateStatus({id:s.row.id,status:status}).then(res=>{
          console.log(res)
        }).catch(rej=>{
          this.tableData[s.$index].status = !s.row.status
        })
      },
      //跳转新增或者详情
      goTestListDetails(row) {
        let urlObj = {}
        if(row)urlObj = {...row}
        this.$router.push({
          query: {
            type: 'details',
            ...urlObj
          }
        })
        console.log('跳转详情')
      },
      //删除数据
      deleteTestList(row) {
        inspectionItemTemplate.deleteInspectionItemTemplate(row.id).then(res=>{
          this.$message({
            message: row.itemName+' 检验项模板删除成功',
            type: 'success'
          });
          if (this.tableData.length == 1){
            if (this.pageObj.pageNum>1){
              --this.pageObj.pageNum;
              this.update(0)
            }else{
              this.update(1)
            }
            return
          }
          this.update(0);
        })
        console.log('删除按钮',row)
      },


    }
  }
</script>

<style lang="scss">
  .picking_application_list {
    background-color: #ecf0f3;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-y: auto;
    padding: 16px;

    .el-link {
      margin-right: 16px;
    }

    .door-header {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      margin: 0;
    }

    .el-pagination {
      display: flex;
      justify-content: flex-end;
      padding: 0;
      margin-top: 16px;
    }

    .inq-from {
      background: #fff;
      padding: 24px 24px 0;
    }
  }
  .pagination {
    position: relative;
    right: -5px;
    margin-top: 16px;
    padding: 0;
    text-align: right;
  }
</style>
