<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container ">
      <div style="justify-content: space-between;margin: 0px 0 12px 0;display: flex;align-items: center;">
        <div>
          <el-select v-model="type_name" style="width:140px;margin-right:10px;" placeholder="请选择"
          @change="changeTypeName">
            <el-option
              v-for="item in drugType"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
            size="small"
            v-model="start_time"
            prefix-icon="el-icon-date"
            :editable="false"
            style="width: 196px;"
            type="date"
            placeholder="选择日期时间"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="startTimeChange"
           ></el-date-picker>-
            <el-date-picker
              size="small"
              v-model="end_time"
              prefix-icon="el-icon-date"
              :editable="false"
              style="width: 196px;"
              type="date"
              placeholder="选择日期时间"
              align="right"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="endTimeChange"
          ></el-date-picker>
          <el-input
            size="small"
            style="width: 200px;margin-left:10px;"
            class="filter-item"
            v-model.trim="keywords"
            placeholder="药品名称"
          />
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >搜索</el-button
          >
        </div>
        <div>
          <el-button size="small" type="primary" @click="exportList">导出</el-button>
          <el-button size="small" type="primary" @click="toPrint">打印</el-button>
        </div>
      </div>


      <el-table
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        :data="tableData"
        :class="signAndWeighBoxPatients"
        border
      >
        <el-table-column label="药品名称" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.drug_name?scope.row.drug_name:""}}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格名称" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.drug_spec?scope.row.drug_spec:""}}</span>
          </template>
        </el-table-column>
        <el-table-column label="入库数量" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.Count?scope.row.Count:""}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际入库" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.Count?scope.row.Count:""}}</span>
          </template>
        </el-table-column>
        <el-table-column label="出库数量" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.outCount?scope.row.outCount:""}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际出库" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.outCount?scope.row.outCount:""}}</span>
          </template>
        </el-table-column>
        <el-table-column label="剩余库存" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.total?scope.row.total:""}}</span>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100,200,500,1000]"
        :page-size="10"
        background
        align="right"
        style="margin-top:20px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { uParseTime } from "@/utils/tools";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import { getDictionaryDataConfig,getDataConfig } from "@/utils/data";
import { getSelfStockQuery } from "@/api/drug/drug"
export default {
  name: "stockIn",
  created() {
    var types =  getDictionaryDataConfig('system','drug_type')
    console.log("44444",types)
    var arr= []
    var obj = {id:0,name:"全部" }
    arr.push(obj)
    arr.push(...types)
    this.drugType = arr
    console.log("arrr",arr)
    this.getlist()
  },
  components: {
    BreadCrumb
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "库存管理" },
        { path: "/stock/query", name: "库存查询" }
      ],
      keywords: "",
      total: 0,
      multipleSelection: [],
      signAndWeighBoxPatients: "sign-and-weigh-box-patients",
      start_time: "",
      end_time: "",
      page: 1,
      limit: 10,
      tableData:[],
      drugType:[],
      type_name:0,
      stockOutData:[]
    };
  },
  methods: {

     getlist(){
         var params ={
           type_name:this.type_name,
           start_time:this.start_time,
           end_time:this.end_time,
           keywords:this.keywords,
           page:this.page,
           limit:this.limit
         }
        console.log("params",params)
       getSelfStockQuery(params).then(response=>{
          if(response.data.state == 1){
            var stockQuery =  response.data.data.stockQuery
            console.log("入库",stockQuery)
            this.total = response.data.data.total
            console.log("total",this.total)
            var stockOutQuery = response.data.data.stockOutQuery
            console.log("stockOut",stockOutQuery)
             for(let i=0;i<stockQuery.length;i++){
               for(let j=0;j<stockOutQuery.length;j++){
                  if(stockQuery[i].drug_name_id == stockOutQuery[j].drug_name_id ){
                     stockQuery[i].outCount = stockOutQuery[j].Count
                     stockQuery[i].total = stockQuery[i].Count - stockOutQuery[j].Count
                  }
               }
             }
            console.log("表格数据",stockQuery)
             this.tableData = stockQuery
          }
       })
     },
    handleSizeChange(val) {
      this.limit = val;
      this.getlist()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getlist()
    },

    startTimeChange: function(val) {
      var time = this.getTimestamp(val) - this.getTimestamp(this.end_time);

      if (time > 0) {
        this.$message.error("开始时间不能大于结束时间");
        this.start_time = "";
      } else {
        this.getlist()
      }
    },
    endTimeChange: function(val) {
      var time = this.getTimestamp(val) - this.getTimestamp(this.start_time);
      if (time < 0) {
        this.$message.error("结束时间不能小于开始时间");
        this.end_time = "";
      } else {
        this.getlist()
      }

    },


    search: function() {
      this.getlist()
    },

    exportList(){
         import('@/vendor/Export2Excel').then(excel => {
         const tHeader = ['药品名称', '规格名称', '入库数量','实际入库','出库数量','实际出库','剩余库存']
         const filterVal = ['drug_name', 'drug_spec', 'Count','Count','outCount','outCount','total']
         const data = this.formatJson(filterVal, this.tableData)

         excel.export_json_to_excel({
           header: tHeader,
           data,
           filename: '库存查询'
         })
          this.downloadLoading = false
        })
       },
       formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
      changeTypeName(){
        this.getlist()
      },
      toPrint(){
        this.$router.push("/stock/selfstockprint?start_time="+this.start_time+"&end_time="+this.end_time+"&keyword="+this.keywords+"&type_name="+this.type_name)

      },


      getTimestamp(time) {
      // 把时间日期转成时间戳
      return new Date(time).getTime() / 1000;
    },
      getDictionaryDataConfig(module, filed_name) {
        return getDictionaryDataConfig(module, filed_name)

      },
      getDataConfig(module, filed_name){
        return getDataConfig(module, filed_name)
      },
  }
};
</script>

<style rel="stylesheet/css" lang="scss" scoped>
.information {
  border: 1px #dcdfe6 solid;
  padding: 30px 20px 30px 20px;

  .border {
    border-bottom: 1px #dcdfe6 solid;
    margin: 0px 0 20px 0;
  }
}

.title {
  background: #409eff;
  height: 44px;
  line-height: 44px;
  padding: 0 0 0 10px;
  color: #fff;
  margin: 0 0 10px 0;
}

.edit_separater {
  border-top: 1px solid rgb(233, 233, 233);
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>

<style>
.sign-and-weigh-box .sign-and-weigh-box-patients .cell {
  font-size: 12px;
}

.sign-and-weigh-box .sign-and-weigh-box-patients .current-row > td {
  background: #6fb5fa;
}

.count {
  color: #bd2c00;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>
