<!--使用台账-->
<template>
  <div class="app-container useLedger">
    <div class="page-container useLedger-page" v-if="pageType == 1">
      <div class="page-form-title-box" :class="searchType ? 'searchType':''">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <div>
            <el-form-item label="">
              <el-input
                maxLength="30"
                v-model="queryParams.searchValue"
                placeholder="化学品名/CAS/编码/实验室/房间号/姓名/联系方式"
                style="width: 350px"
              />
            </el-form-item>
            <el-form-item label="">
              <el-select style="width:180px;" v-model="queryParams.deptId" placeholder="请选择学院">
                <el-option
                  v-for="dict in deptOptions"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="floorId">
              <el-cascader
                placeholder="请选择楼栋楼层"
                :props="{value: 'id', label: 'name',children:'buildFloorVoList',checkStrictly: true}"
                v-model="queryParams.buildIdAndfloorId"
                :options="buildFloorOptions">
              </el-cascader>
            </el-form-item>
            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
            <p class="page-add-common-style-button"
               style="float: right;"
               @click="searchToggle"
            >{{searchType?'简单搜索':'高级搜索'}}</p>
            <el-form-item style="float: right;">
              <export-component :exportConfig="exportConfig" v-hasPermiRouter="['chemical:useRecord:export']"></export-component>
            </el-form-item>
          </div>
          <div v-if="searchType">
            <el-form-item label="">
              <el-select v-model="queryParams.chemicalLevel"  placeholder="请选择级别" style="width: 180px">
                <el-option
                  v-for="dict in levelOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="queryParams.chemicalCategory"  placeholder="请选择类别" style="width: 180px">
                <el-option
                  v-for="dict in categoryOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="queryParams.cabinetId"  placeholder="选择化学品柜" style="width: 180px">
                <el-option
                  v-for="dict in cabinetOptions"
                  :key="dict.cabinetId"
                  :label="dict.cabinetName"
                  :value="dict.cabinetId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                :clearable="false"
                v-model="dateRangeA"
                size="small"
                style="width: 220px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="领用时间"
                end-placeholder="领用时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                :clearable="false"
                v-model="dateRangeB"
                size="small"
                style="width: 220px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="归还时间"
                end-placeholder="归还时间"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" v-loading="loading" border :data="dataList" ref="table-box"
                  @selection-change="handleSelectionChange"  :row-key="getRowKeys">
          <el-table-column type="selection" width="50" fixed :reserve-selection="true" align="center"/>
          <el-table-column label="化学品名称" align="left" fixed width="250" prop="chemicalName" show-overflow-tooltip/>
          <el-table-column label="编码" align="left" width="150" prop="tagCode" show-overflow-tooltip/>
          <el-table-column label="CAS" align="left" width="150" prop="casNum" show-overflow-tooltip/>
          <el-table-column label="类别" align="left" width="160" prop="chemicalCategory" show-overflow-tooltip/>
          <el-table-column label="级别" align="left" width="100" prop="chemicalLevel">
            <template slot-scope="scope">
              <span>{{scope.row.chemicalLevel==1?'管控':(scope.row.chemicalLevel==2?'非管控':'')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="实验室" align="left" width="200" prop="subName">
            <template slot-scope="scope">
              <span>{{scope.row.subName}}({{scope.row.subRoom?scope.row.subRoom:''}})</span>
            </template>
          </el-table-column>
          <el-table-column label="安全员" align="left" width="150" prop="safeInfo" show-overflow-tooltip/>
          <el-table-column label="位置" align="left" width="230" prop="name">
            <template slot-scope="scope">
              <span>{{scope.row.cabinetName}}-{{scope.row.doorName}}-{{scope.row.layers}}层</span>
            </template>
          </el-table-column>
          <el-table-column label="领用人" align="left" width="100" prop="useUserName" />
          <el-table-column label="领用时间" align="left" width="200" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.collectTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="领用量" align="left" width="100" prop="name">
            <template slot-scope="scope">
              <span>{{scope.row.collectStockNum}}{{scope.row.collectStockNum?scope.row.specUnit:''}}</span>
            </template>
          </el-table-column>
          <el-table-column label="归还时间" align="left" width="200" prop="name">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.returnTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作人" align="left" width="100" prop="createByName" />
          <el-table-column label="操作" align="left" width="100" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="tableButton(2,scope.row)"
                >详情</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <infoPage v-if="pageType == 2" :propsData="propsData"></infoPage>
  </div>
</template>

<script>
  import exportComponent from "@/components/exportComponent/exportComponent.vue";
  import infoPage from "./infoPage.vue"
  import { getDeptDropList,systemBuildingGetTreeList,} from "@/api/commonality/permission";
  import { getDicts } from '@/api/commonality/noPermission'
  import {
    chemicalCabinetSelect,
    chemicalUserecordDetail,
    chemicalUserecordList
  } from '@/api/chemicalManage'
  export default {
    name: 'index',
    components: {
      exportComponent,
      infoPage,
    },
    data(){
      return{
        loading:false,
        pageType:1,
        //学院
        deptOptions:[],
        //楼栋楼层
        buildFloorOptions:[],
        //级别
        levelOptions:[{value:1,label:'管控'},{value:0,label:'非管控'}],
        //类别
        categoryOptions:[],
        cabinetOptions:[],
        dateRangeA:[],
        dateRangeB:[],
        //查询条件
        queryParams:{
          page:1,
          pageSize:20,
          searchValue :"",
          deptId:'',
          buildId :null,
          floorId :null,
          buildIdAndfloorId:[],
          chemicalLevel:'',
          cabinetId:'',
        },
        ids:'',
        dataList:[],
        total:0,
        //组件传参
        propsData:{},
        //导出配置
        exportConfig:{
          api:'chemical/userecord/export',             //导出接口地址
          ids:'',                                       //勾选导出,勾选的IDS
          fileName:'使用台账导出',                         //导出文件的命名
        },
        //搜索状态开关
        searchType:false,
      }
    },
    created(){

    },
    mounted(){
      this.getDeptDropList();
      this.chemicalCabinetSelect();
      this.getDicts();
      this.systemBuildingGetTreeList();
      this.getList();
    },
    methods:{
      //搜索切换状态
      searchToggle(){
        this.$set(this,'searchType',!this.searchType);
      },
      /** 搜索按钮操作 */
      handleQuery() {
        if (this.queryParams.buildIdAndfloorId[0]){
          if (this.queryParams.buildIdAndfloorId.length ==1){
            this.$set(this.queryParams,'buildId',this.queryParams.buildIdAndfloorId[0]);
          }else if (this.queryParams.buildIdAndfloorId.length ==2){
            this.$set(this.queryParams,'buildId',this.queryParams.buildIdAndfloorId[0]);
            this.$set(this.queryParams,'floorId',this.queryParams.buildIdAndfloorId[1]);
          }
        }
        this.queryParams.page = 1;
        this.$refs['table-box'].clearSelection();
        this.$set(this.exportConfig,'ids','');
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'dateRangeA',[]);
        this.$set(this,'dateRangeB',[]);
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          searchValue:"",
          deptId :null,
          buildId :null,
          floorId :null,
          buildIdAndfloorId :[],
          chemicalLevel:'',
          cabinetId:'',
        });
        this.$refs['table-box'].clearSelection();
        this.$set(this.exportConfig,'ids','');
        this.handleQuery();
      },
      //获取化学品类别
      getDicts(){
        getDicts('chemicals_category').then(response => {
          this.$set(this,'categoryOptions',response.data);
        });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selectedNum = selection.length;
        this.ids = selection.map(item => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
        this.exportConfig.ids=this.ids
      },
      //获取数据列表
      getList(){
        this.$set(this,'loading',true);
        if(this.dateRangeA[0]){
          this.queryParams.startTime = this.dateRangeA[0]+'T00:00:00'
          this.queryParams.endTime = this.dateRangeA[1]+'T23:59:59'
        }else{
          this.queryParams.startTime = "";
          this.queryParams.endTime = "";
        }
        if(this.dateRangeB[0]){
          this.queryParams.returnStartTime = this.dateRangeB[0]+'T00:00:00'
          this.queryParams.returnEndTime = this.dateRangeB[1]+'T23:59:59'
        }else{
          this.queryParams.returnStartTime = "";
          this.queryParams.returnEndTime = "";
        }
        chemicalUserecordList(this.queryParams).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
          this.$set(this,'loading',false);
        });
      },
      tableButton(type,row){
        let self = this;
        if(type == 2){
          //详情
          chemicalUserecordDetail({stockDetailsId:row.stockDetailsId}).then(response => {
            this.$set(this.propsData,'dataList',JSON.parse(JSON.stringify(response.data)));
            this.$set(this.propsData,'chemicalDetail',row);
            this.$set(this,'pageType',2);
          });

        }else if(type =='out'){
          this.$set(this,'pageType',1);
        }
      },
      //查询学院列表
      getDeptDropList(){
        getDeptDropList({deptName:"",level:2,deptType:1}).then(response => {
          this.$set(this, 'deptOptions', response.data)
        });
      },
      //查询化学品柜列表
      chemicalCabinetSelect(){
        chemicalCabinetSelect({}).then(response => {
          this.$set(this, 'cabinetOptions', response.data)
        });
      },
      //查询楼栋楼层
      systemBuildingGetTreeList(){
        systemBuildingGetTreeList({}).then(response => {
          if (response.data[0]) {
            let list = this.forBuildFloor(response.data);
            let newList = [];
            for(let i=0;i<list.length;i++){
              if(list[i].buildFloorVoList){
                for(let o=0;o<list[i].buildFloorVoList.length;o++){
                  if(list[i].buildFloorVoList[o].buildFloorVoList){
                    newList.push(list[i].buildFloorVoList[o])
                  }
                }
              }
            }
            this.$set(this, 'buildFloorOptions', newList)
          }
        })
      },
      //处理楼栋楼层数据
      forBuildFloor(list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(list[i].buildFloorVoList){
            if(list[i].buildFloorVoList[0]){
              list[i].buildFloorVoList = self.forBuildFloor(list[i].buildFloorVoList);
            }else{
              delete list[i].buildFloorVoList;
            }
          }else{
            delete list[i].buildFloorVoList;
          }
        }
        return list
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.id
      },
    },
  }
</script>

<style scoped lang="scss">

.useLedger{
  .useLedger-page{
    .searchType{
      height:140px;
    }
  }
}
</style>
