<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreateAdd">
        增加库位
      </el-button>
    </div>
    <div class="top-right-btn">
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="getDepotLocationInfo" />
      </el-tooltip>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all>
      <el-table-column
        prop="partDepotName"
        label="所属库房名称">
      </el-table-column>
     <el-table-column
        label="所属库房类型"
        prop="partDepotType"
      >
      </el-table-column>
      <el-table-column
        label="库位名称"
        prop="depotLocationName"
      >
      </el-table-column>
      <el-table-column
        label="库位高储"
        prop="highStockpile"
      >
      </el-table-column>
      <el-table-column
        label="库位低储"
        prop="lowStockpile"
      >
      </el-table-column>
      <el-table-column
        label="关联客户名称"
        prop="relatedUserName"
      >
      </el-table-column>
      <el-table-column
        label="库存报警值"
        prop="depotWarn"
      >
      </el-table-column>
      <el-table-column align="center" label="状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.voidFlag==0" type="success">
            启用
          </el-tag>
          <el-tag v-else="row.voidFlag==1" type="danger">
            禁用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button @click="handleUpdate(row)" type="primary" size="mini">
            编辑
          </el-button>
          <el-button @click="editStatus(row.id,'1')" type="danger" v-if="row.voidFlag==0" size="mini">
            禁用
          </el-button>
          <el-button @click="editStatus(row.id,'0')" v-else="row.voidFlag==1" size="mini">
            启用
          </el-button>


        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getDepotLocationInfo" />

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%">
      <!--内部弹窗-->
      <el-dialog
        title="客户列表"
        :visible.sync="innerVisible"
        append-to-body>
        <el-input v-model="clientInfo.search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchClient">
          搜索
        </el-button>
        <el-table :data="clientInfo.clientData"
                  v-loading="listLoading"
                  style="width: 100%;margin: 20px 0;"
                  row-key="id"
                  border
                  highlight-current-row
                  @current-change="handleCurrentChange">
          <el-table-column
            prop="clientCode"
            label="客户编号">
          </el-table-column>
          <el-table-column
            label="客户名称"
            prop="clientName"
          >
          </el-table-column>
        </el-table>
        <pagination v-show="clientInfo.listData.total>0" :total="clientInfo.listData.total" :page.sync="clientInfo.listData.page" :limit.sync="clientInfo.listData.pageSize" @pagination="getClientInfo" />
      </el-dialog>
      <el-form label-width="130px" label-position="right">
        <el-form-item label="库位名称">
          <el-input v-model="form.depotLocationName"></el-input>
        </el-form-item>
        <el-form-item label="库位高储">
          <el-input v-model="form.highStockpile"></el-input>
        </el-form-item>
        <el-form-item label="库位低储">
          <el-input v-model="form.lowStockpile"></el-input>
        </el-form-item>
        <el-form-item label="关联客户">
          <el-button type="warning" @click="innerVisible = true">选择客户</el-button>
          <span v-if="form.relatedUserName">{{form.relatedUserName}}</span>
        </el-form-item>
        <el-form-item label="库存报警">
          <el-input v-model="form.depotWarn"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus==='1'?addBtn():editBtn()">确 定</el-button>
      </div>
    </el-dialog>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
  import {getDepotLocationInfoByDepotId,addDepotLocationInfo,getDepotLocationInfoById,updateDepotLocationInfo,getClientInfoList} from '@/api/baseInfo/depot/depotLocationInfo.js'
  import Cancledialog from '@/components/Dialog/Cancledialog.vue'

  export default {
    components: {
      Cancledialog
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          0: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        dialogStatus: 1,//1增加，2修改
        dialogTitle: '',
        dialogVisible: false,
        innerVisible:false,
        search: {
          keyWord:''
        },
        form:{
          partDepotId:'',
          depotLocationName:'',
          highStockpile:'',
          lowStockpile:'',
          relatedUserId:'',
          relatedUserName:'',
          depotWarn:'',
        },
        listData:{
          total:0,
          page: 1,
          pageSize:10
        },
        options:[],

        clientInfo:{
          listData:{
            total:0,
            page: 1,
            pageSize:10
          },
          search: {
            keyWord:''
          },
          clientData:[],
          listLoading: false,
          currentRow:null
        },
        confirmdialog:false,
        listLoading: false,
        tableData: [],
        menuId:''
      }
    },
    mounted() {
      this.depotId = this.$route.query.id
      this.form.partDepotId = this.$route.query.id
      this.getDepotLocationInfo();
    },
    methods: {
      //获取列表
      getDepotLocationInfo() {
        const _that = this
        _that.listLoading = true
        var params = {
          keyWord: _that.search.keyWord,
          depotId:_that.depotId
        };
        var page = {
          pageIndex:_that.listData.page,
          pageSize: _that.listData.pageSize,
        }
        var data = {
          "params": JSON.stringify(params),
          "page": JSON.stringify(page)
        }
        // console.log(data);
        getDepotLocationInfoByDepotId(data).then(response => {
          console.log(response)
          const data = response.data
          // //  组合表单数据
          _that.tableData = data

          _that.listData.total = response.total
          // console.log(_that.tableData)
          _that.listLoading = false
        }).catch(err => {
          _that.listLoading = false
        })
      },
      //增加机型档案
      handleCreateAdd(){
        //增加系统目录
        const _that = this

        _that.getClientInfo();
        _that.form={
          partDepotId:_that.depotId,
          depotLocationName:'',
          highStockpile:'',
          lowStockpile:'',
          relatedUserId:'',
          relatedUserName:'',
          depotWarn:'',
        }
        _that.clientInfo.currentRow = null
        _that.dialogTitle = '增加库位'
        _that.dialogStatus = '1';
        _that.dialogVisible = true;

      },
      //刷新变革
      tableRefresh(){
        //刷新变革
        this.getDepotLocationInfo()
      },
      //增加机型档案
      addBtn(){
        const _that = this
        var infoType =JSON.stringify(_that.form)
        var data = {
          "depotLocationInfo": infoType ,
        }
        // console.log(data);
        // return

        addDepotLocationInfo(data).then(res => {
          // console.log(res);
          if(res.httpCode == 200){
            _that.dialogVisible = false
            _that.$message({
              message: '增加成功',
              type: 'success'
            });
            _that.tableRefresh();
          }else{
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
          _that.dialogVisible = true
        })
      },

      //唤起修改
      handleUpdate(row){
        const _that = this;
        _that.getClientInfo();
        _that.form={
          partDepotId:_that.depotId,
          depotLocationName:'',
          highStockpile:'',
          lowStockpile:'',
          relatedUserId:'',
          relatedUserName:'',
          depotWarn:'',
        }

        _that.dialogTitle = '修改库位'
        _that.dialogVisible = true
        _that.dialogStatus = '2';

        var idPrint = row.id
        var data= {
          id : idPrint
        }

        getDepotLocationInfoById(data).then(res => {
          console.log(res);
          const data = res.data

          _that.form={
            id:data.id,
            partDepotId:_that.depotId,
            depotLocationName:data.depotLocationName,
            highStockpile:data.highStockpile,
            lowStockpile:data.lowStockpile,
            relatedUserId:data.relatedUserId,
            relatedUserName:data.relatedUserName,
            depotWarn:data.depotWarn,
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      },
      //修改库位
      editBtn(){
        const _that = this
        var infoType =JSON.stringify(_that.form)
        var data = {
          "depotLocationInfo": infoType ,
        }

        updateDepotLocationInfo(data).then(res => {
          // console.log(res);
          if(res.httpCode == 200){
            _that.dialogVisible = false
            _that.$message({
              message: '修改成功',
              type: 'success'
            });
            _that.tableRefresh();
          }else{
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
          _that.dialogVisible = true
        })

      },

      //启用禁用
      editStatus(id,status){
        var _that = this;
        var printerTypeInfo = {
          id:id,
          voidFlag:status
        }
        var params = {
          "depotLocation": JSON.stringify(printerTypeInfo),
        }

        var url = '/baseinfo/voidDepotLocationInfo';
        _that.$refs.confirmDialog.updataClick(params, url);
      },


      //搜索
      searchData(){
        this.listData.page = 1;
        this.getDepotLocationInfo()
      },

      //获取客户列表
      getClientInfo(){

        const _that = this
        _that.clientInfo.listLoading = true
        var params = {
          keyWord: _that.clientInfo.search.keyWord,
        };
        var page = {
          pageIndex:_that.clientInfo.listData.page,
          pageSize: _that.clientInfo.listData.pageSize,
        }
        var data = {
          "params": JSON.stringify(params),
          "page": JSON.stringify(page)
        }
        // console.log(data);
        getClientInfoList(data).then(response => {
          console.log(response)
          const data = response.data
          // //  组合表单数据
          _that.clientInfo.clientData = data

          _that.clientInfo.listData.total = response.total
          // console.log(_that.tableData)
          _that.clientInfo.listLoading = false
        }).catch(err => {
          _that.clientInfo.listLoading = false
        })
      },

      //选中客户
      handleCurrentChange(val){
        console.log(val);
        var _that = this;
        _that.clientInfo.currentRow = val;
        _that.form.relatedUserId = val.id;
        _that.form.relatedUserName = val.clientName;
        _that.innerVisible = false;

      },
      //搜索客户
      searchClient(){
        this.clientInfo.listData.page = 1;
        this.getClientInfo()
      }

    }
  }
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
</style>
