<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item  prop="keyWord">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="请输入退租名称"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
            />   
        </el-form-item>
        <el-form-item  prop="keyWord1">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="请输入退租编码"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
            />   
        </el-form-item>
        <el-form-item  prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择退租状态" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item  prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择退租分类" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item  prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择退租型号" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item  prop="dateRange">
            <el-date-picker
                v-model="dateRange"
                type="datetimerange" 
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至" 
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>  
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="success" plain
                    size="mini"
                    :disabled="multiple" 
                >
                退租新建
                </el-button>
            </el-col> 
            <el-col :span="1.5">
                <el-button
                    type="warning" plain
                    icon="el-icon-download"
                    size="mini"  
                >批量上架</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning" plain
                    icon="el-icon-download"
                    size="mini"  
                >批量下架</el-button>
            </el-col>
      </el-row> 
      <el-table v-loading="loading" :data="tableList" ref="multipleTable" row-key="taskId" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
        <el-table-column label="序号" align="center" width="80" type="index">
          <template slot-scope="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="退租名称" align="center" prop="" width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="退租编码" align="center" prop="" width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="退租类目" align="center" prop="" width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="退租型号" align="center" prop="" :show-overflow-tooltip="true"/>
        <el-table-column label="退租状态" align="center" prop="status" :show-overflow-tooltip="true">
            <!-- <template slot-scope="scope">
                <dict-tag :options="dict.type.purchase_task_status" :value="scope.row.status"/>
            </template> -->
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="" width="150" :show-overflow-tooltip="true"/> 
        <el-table-column label="操作" align="center" width="250">
                        <template slot-scope="scope">
                            <el-button
                                size="mini" 
                                @click="handleView(scope.row)">
                                查看
                            </el-button>
                            <el-button
                                size="mini" type="primary"
                                @click="handleUpdate(scope.row)">
                                编辑
                            </el-button> 
                            <el-button  
                                size="mini" type="warning" >
                                下架
                            </el-button>
                            <el-button  size="mini" type="danger" >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />  
    </div>
  </template> 
  
  <script> 
  import { getPurchaseList } from "@/api/purchase/goodsAccept"; 
  export default {
    name: "",
    // dicts: ['purchase_task_status'],
    data() {
      return {
        // 遮罩层
        loading: false,     
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true, 
        // 显示搜索条件
        showSearch: true, 
        statusList:[{id:'1',name:'状态1'},{id:'2',name:'状态2'},{id:'3',name:'状态3'}],
        ids:[],
        // 总条数
        total: 0, 
        //表格数据
        tableList: [], 
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        dateRange:[],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyWord:undefined,
          status:undefined,
        },
      };
    },
    created() { 
    //   this.getList();
    },
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
            if(this.dateRange.length>0){
                this.queryParams.startTime=this.dateRange[0]
                this.queryParams.endTime=this.dateRange[1]
            }else{
                this.queryParams.startTime=undefined
                this.queryParams.endTime=undefined
            }  
            getPurchaseList(this.queryParams).then(response => {
                this.tableList = response.data.rows;
                this.total = response.data.total;
                this.loading = false;
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.dateRange=[]
            this.queryParams.keyWord=null;
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.taskId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        //编辑
        handleUpdate(row){
            console.log(row)
            // let query = { Id:row.id,taskId: row.taskId,isView:"false" }
            // this.$tab.closeOpenPage({
            //     path: '/purchase/goodsAcceptDetail',
            //     query,
            // })
        },
        //查看
        handleView(row){
            console.log(row)
            // let query = { Id:row.id,taskId: row.taskId,isView:"true" }
            // this.$tab.closeOpenPage({
            //     path: '/purchase/goodsAcceptDetail',
            //     query,
            // })
        },  
        handleExport() {
        //     this.download('/material/ma_machine/export', {
        //       ...this.queryParams
        //     }, `仓库管理_${new Date().getTime()}.xlsx`)
        },
        

    }
  };
  </script>
  <style lang="scss" scoped>
  .uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deviceCode {
      margin-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
  }
  ::v-deep.el-table .fixed-width .el-button--mini {
      width: 60px !important;
      margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
  </style>