<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>
          <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="primary"
                              plain
                              icon="el-icon-plus"
                              size="mini"
                              @click="handleAdd"
                              v-hasPermi="['machinery:type:add']"
                              >新增</el-button
                          >
                      </el-col> 
                       <el-col :span="1.5">
                          <el-button
                          type="warning"
                          plain
                          icon="el-icon-download"
                          size="mini"
                          @click="handleExport"
                          >导出
                          </el-button>
                      </el-col> 
                      <right-toolbar
                          :showSearch.sync="showSearch"
                          @queryTable="getList"
                      ></right-toolbar>
      </el-row>
        <el-table
          v-loading="loading"
          :data="typeList"
          ref="multipleTable"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'children' }"
          border
        >
          <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="label"
            show-overflow-tooltip
          />
          <el-table-column
            label="计量单位"
            align="center"
            prop="unitName"
            show-overflow-tooltip
          />
          <el-table-column
            label="购置价格(元)"
            align="center"
            prop="buyPrice"
            show-overflow-tooltip
            width="100"
          />
          <el-table-column
            label="数量"
            align="center"
            prop="storageNum"
            show-overflow-tooltip
          />
          <el-table-column
            label="备注信息"
            align="center"
            prop="remark"
            show-overflow-tooltip
          />

          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['machinery:type:edit']"
                v-if="scope.row.level==3 || scope.row.level==2"
              >
                修改
              </el-button>
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-delete-solid"
                @click="handleDelete(scope.row)"
                v-hasPermi="['machinery:type:edit']"
                v-if="scope.row.level==3 || scope.row.level==2"
              >
                删除
              </el-button>
              <!-- <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                                v-hasPermi="['machinery:type:del']"
                            >
                                删除
                            </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"
      /> -->
  
     <!-- 新增或修改弹窗 -->
     <el-dialog :title="title" :visible.sync="showHouse" width="600px"   append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
          <el-row :gutter="24">
            <el-col :span="20">
                    <el-form-item label="所属上级" prop="parentId">
                        <treeselect
                        v-model="form.parentId"
                        :options="treeList"
                        :normalizer="normalizer"
                        :show-count="true"
                        :searchable="false"
                        :disable-branch-nodes="false"
                        placeholder="选择上级菜单"
                        @select="onSelect"
                      />
                      </el-form-item>
            </el-col>
        </el-row>
     
          <el-row :gutter="24">
             <el-col :span="20">
                    <el-form-item label="名称" prop="label">
                        <el-input v-model="form.paName" placeholder="请输入名称" maxlength="20">
                      </el-input>
                    </el-form-item>      
             </el-col>   
          </el-row>    
          <el-row :gutter="24">  
             <el-col :span="20">
                    <el-form-item label="计量单位" prop="unitName">
             <el-input v-model="form.unitName" placeholder="请输入计量单位" maxlength="20">
                      </el-input>
                    </el-form-item>      
             </el-col> 
           </el-row>  

          <el-row :gutter="24">  
             <el-col :span="20">
                    <el-form-item label="购置价格(元)" prop="buyPrice">
             <el-input v-model="form.buyPrice" placeholder="请输入购置价格" maxlength="20" type="number">
                      </el-input>
                    </el-form-item>      
             </el-col> 
           </el-row>  

           <el-row :gutter="24">  
             <el-col :span="20">
               <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入备注"
                  v-model="form.remark"
                  maxlength="50"
                  show-word-limit
                  >
                </el-input>
                </el-form-item>      
             </el-col> 
           </el-row> 

          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  
    </div>
  </template> 
  
  <script>
  import { getListAccessory,getListTree,getAccessoryDetail,addAccessory,editAccessory,delAccessory, } from "@/api/baseGround/accessory";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import IconSelect from "@/components/IconSelect";

  import { downloadFile } from '@/utils/download'
  export default {
    name: "Post",
    components: { Treeselect },
    data() {
      return {
        // 遮罩层
        loading: false,
  
        loadingTwo: false,
  
  
        // 是否显示项目部Id
        showName: false,
  
        // 是否显示施工预警信息
        showWarn: false,
  

        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
  
  
        // 显示搜索条件
        showSearch: true,
        showHouse: false,
       
        //列表数据
        typeList: undefined,

        treeList:[],
        flagTemp:1,
        // 总条数
        total: 0,
        totalTwo : 0,
        // 施工记录表格数据
        houseList: [],
        maxLength:100,//已选列表上限，防止数据过多请求报错
        keeperDataRange:[],
        // 班组人员表格数据
        teamList: [],
        teamTempList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyWord:undefined
        },

        // 表单参数
        form: {},
              // 表单校验
              rules: {
                paName: [
                    {
                        required: true,
                        message: '名称不能为空',
                        trigger: 'blur',
                    },
                ],
            },
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询岗位列表 */
      getList() {
        this.loading = true;
        getListAccessory(this.queryParams).then(response => {
          this.typeList = response.data;
         
          this.loading = false;
        });
      },

        /** 新增按钮操作 */
        handleAdd() {
        this.flagTemp=1;
        this.reset()
        this.getTreeselect();
        this.form.id = 0;
        this.showHouse = true
        this.title = '新增'
        },

        getTreeselect(){
          getListTree().then(response=>{
            this.treeList = response.data;
            const menu = { id: 0, label: '配件类型', children: this.treeList };
           this.treeList=[],
           this.treeList.push(menu)
          });
        },

        /** 转换菜单数据结构 */
        normalizer(node) {
          if (node.children && !node.children.length) {
            delete node.children;
          }
          return {
            id: node.id,
            label: node.label,
            children: node.children
          };
        },

        handleUpdate(row){
          this.flagTemp=2;
          this.reset()
          this.getTreeselect();
          const id = row.id 
            getAccessoryDetail(id).then((response) => {
                this.form = response.data;
                this.showHouse = true
                this.title = '修改'
            })
        },
        // 表单重置 
        reset() {
            this.form = {};
            this.resetForm("form");
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.keyWord=null;
            this.handleQuery();
        },

        //** 提交按钮 */
        submitForm() { 
          this.$refs["form"].validate(valid => {
          if (valid) {
            console.log(this.form)
              if (this.flagTemp==2) {
                  console.log('修改')
                editAccessory(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.showHouse = false;
                  this.getList();
                });
              } else if(this.flagTemp==1){
                console.log('新增')
                console.log('this.form')
                addAccessory(this.form).then(response => {
                  this.$modal.msgSuccess("新增成功");
                  this.showHouse = false;
                  this.getList();
                });
            }
            }
            });
        },

        // 取消按钮
        cancel() {
          this.showHouse = false;
          this.reset();
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const id = row.id
            this.$modal
                .confirm('是否确认删除数据项？')
                .then(function () {
                    return delAccessory(id)
                })
                .then(() => {
                    this.$modal.msgSuccess('删除成功')
                    this.getList()
                })
                .catch(() => {})
        },
       
        handleExport() {
            this.download('/material/ma_part_type/export', {
              ...this.queryParams
            }, `仓库管理_${new Date().getTime()}.xlsx`)
        },
  
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      onSelect(e) {
        console.log('eeeee',e)
        this.form.id = e.id;
        this.form.level = e.level
      }

    }
  };
  </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>