<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-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>
          <span>审核状态:</span>
          <el-select
            v-model="check_id"
            style="width: 140px; margin-right: 10px"
            placeholder="请选择"
            @change="changeTypeName"
          >
            <el-option
              v-for="item in checkList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <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="toAdd">新增</el-button>
        </div>
      </div>

      <el-table
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266',
        }"
        :data="tableList"
        :class="signAndWeighBoxPatients"
        border
      >
        <el-table-column label="订单日期" align="center">
          <template slot-scope="scope">
            <span>{{ getTimes(scope.row.document_date) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column label="供应商" align="center">
          <template slot-scope="scope">
            <span>{{ getName(scope.row.supplier_id) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联采购单号" align="center" width="150">
          <template slot-scope="scope">
            
            <tr style="background: none;" v-for="(item,index) in scope.row.orderOut" :key="index">
                 <td style="border-right: none;">{{item.good_number}}</td>
             </tr>
          </template>
        </el-table-column>
        <el-table-column label="采购金额" align="center">
          <template slot-scope="scope">
            <span v-if="getAllBuyPrice(scope.row.orderInfo) > 0">{{
              getAllBuyPrice(scope.row.orderInfo)
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="数量" align="center">
          <template slot-scope="scope">
            {{ getAllCount(scope.row.orderInfo) }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.is_warehouse == 1">全部入库</span>
            <span v-if="scope.row.is_warehouse == 2">未入库</span>
            <span v-if="scope.row.is_warehouse == 3">部分入库</span> -->
           <span v-if="scope.row.orderOut!= undefined && scope.row.orderOut.length == 0">未入库</span>
            <span v-if="scope.row.orderOut!= undefined && scope.row.orderOut.length > 0">
              <span >
                <span v-if="getStatus(scope.row.orderOut) == 0">未入库</span>
                <span v-if="getStatus(scope.row.orderOut) > 0">
                  <span v-if="getStatus(scope.row.orderOut) >= getAllCount(scope.row.orderInfo) ">全部入库</span> 
                  <span v-if="getStatus(scope.row.orderOut) < getAllCount(scope.row.orderInfo) ">部分入库</span>
                </span>
              </span> 
            </span> 
          </template>
        </el-table-column>

        <el-table-column label="交货日期" align="center">
          <template slot-scope="scope">
            {{ getTimes(scope.row.delivery_date) }}
          </template>
        </el-table-column>

        <el-table-column label="制单人" align="center">
          <template slot-scope="scope">
            {{ getDocName(scope.row.creater) }}
          </template>
        </el-table-column>

        <el-table-column label="审核人" align="center">
          <template slot-scope="scope">
            {{ getDocName(scope.row.checker) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit-outline"
              size="small"
              type="primary"
              @click="toClick(scope.row.id)"
              >编辑
            </el-button>
            <el-button
              icon="el-icon-delete"
              size="small"
              type="danger"
              @click="toDelete(scope.row, scope.$index)"
              >删除
            </el-button>
          </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 BreadCrumb from "@/xt_pages/components/bread-crumb";

import {
  getAllSupply,
  getAllPurchaseOrderList,
  deletePurchaseOrder,
} from "@/api/supply";
import { uParseTime } from "@/utils/tools";
export default {
  name: "stockIn",
  components: {},
  components: {
    BreadCrumb,
  },
  data() {
    return {
      isActive: false,
      Color_txt: true,
      crumbs: [
        { path: false, name: "采购管理" },
        { path: "/supply/query", name: "采购订单" },
      ],
      keywords: "",
      total: 0,
      multipleSelection: [],
      signAndWeighBoxPatients: "sign-and-weigh-box-patients",
      start_time: "",
      end_time: "",
      page: 1,
      limit: 10,
      goodType: [],
      goodInfo: [],
      org_id: 0,
      types: [],
      tableList: [{}],
      type_name: "",
      checkList: [
        { id: 0, name: "请选择" },
        { id: 1, name: "已审核" },
        { id: 2, name: "未审核" },
      ],
      supplyList: [],
      check_id: 0,
      doctorList: [],
    };
  },
  methods: {
    toAdd() {
      this.$router.push({ path: "/purchase/order/add" });
    },
    changeTypeName() {
      this.getlist();
    },
    startTimeChange() {
      this.getlist();
    },
    endTimeChange() {
      this.getlist();
    },
    search() {
      this.getlist();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getlist();
    },
    getAllSupply() {
      getAllSupply().then((response) => {
        if (response.data.state == 1) {
          var supplyList = response.data.data.supplyList;
          this.doctorList = response.data.data.doctorList;
          for (let i = 0; i < supplyList.length; i++) {
            this.supplyList.push(supplyList[i]);
          }
        }
      });
    },
    getTimes(time) {
      if (time === "") {
        return "";
      }
      return uParseTime(time, "{y}-{m}-{d}");
    },
    getlist() {
      console.log("hhhhhh", this.end_time);
      var params = {
        check_id: this.check_id,
        start_time: this.start_time,
        end_time: this.end_time,
        keyword: this.keywords,
        page: this.page,
        limit: this.limit,
      };
      console.log("params2332232332", params);
      getAllPurchaseOrderList(params).then((response) => {
        if (response.data.state == 1) {
          var list = response.data.data.list;
          console.log("list2323322332323232232323",list)
          this.tableList = list;
          var total = response.data.data.total;
          this.total = total;
         
        }
      });
    },
    getName(id) {
      var name = "";
      for (let i = 0; i < this.supplyList.length; i++) {
        if (id == this.supplyList[i].id) {
          name = this.supplyList[i].supplier_name;
        }
      }
      return name;
    },
    getDocName(id) {
      var user_name = "";
      for (let i = 0; i < this.doctorList.length; i++) {
        if (id == this.doctorList[i].admin_user_id) {
          user_name = this.doctorList[i].user_name;
        }
      }
      return user_name;
    },
    getAllBuyPrice(arr) {
      var buy_price = 0;
      if (arr != undefined && arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          buy_price += arr[i].count * arr[i].price;
        }
      }
      return buy_price.toFixed(2);
    },
    getAllCount(arr) {
      var count = 0;
      if (arr != undefined && arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          count += parseInt(arr[i].count);
        }
      }
      if (count == 0) {
        return "";
      }
      if (count > 0) {
        return count;
      }
    },
    toClick(id) {
      window.sessionStorage.setItem('purchase_start_time',this.start_time)
      window.sessionStorage.setItem('purchase_end_time',this.end_time)
      this.$router.push({ path: "/purchase/order/edit?id=" + id });
    },
    toDelete(val, index) {
      if (val.is_check == 1) {
        this.$message.error("已审核单据，不能删除!");
        return false;
      }
      if (val.orderOut.length > 0) {
        this.$message.error("已关联单据，不能删除!");
        return false;
      }
      this.$confirm("确认删除吗?", "删除", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      })
        .then(() => {
          deletePurchaseOrder(val.id).then((response) => {
            if (response.data.state == 1) {
              var msg = response.data.data.msg;
              this.tableList.splice(index, 1);
              this.getlist()
              this.$message.success("删除成功");
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {});
    },
    // 动态改变表格样式
    Color_Change() {
      this.Color_txt = true;
      console.log(this.Color_txt, "op");
    },

    Color_Changeleave() {
      this.Color_txt = false;
      console.log(this.Color_txt, "false");
    },
    getStatus(val){
      console.log("val23322332",val)
      var arr =[]
      var newArr =[]
      var total = 0
      if(val!=undefined && val.length >0){
        for(let i=0;i<val.length;i++){
          if(val[i].is_check == 1){
             arr.push(val[i])
          }
        }
      }
      if(arr.length > 0){
        for(let i=0;i<arr.length;i++){
          for(let j=0;j<arr[i].order.length;j++){
            newArr.push(arr[i].order[j])
          }
        }
      }
      if(newArr.length >0){
        for(let i=0;i<newArr.length;i++){
          total +=newArr[i].count
        }
      }
      
      return total
    }
  },
  created() {
 
    var now = new Date(); //当前日期
    var nowMonth = now.getMonth(); //当前月
    var nowYear = now.getFullYear(); //当前年
    //本月的开始时间
    var monthStartDate = new Date(nowYear, nowMonth, 1);
    this.start_time = this.getTimes(monthStartDate);
    this.end_time = this.getTimes(new Date());

    this.org_id = this.$store.getters.xt_user.org_id;
    var start_time =  window.sessionStorage.getItem('purchase_start_time')
    
    var end_time =  window.sessionStorage.getItem('purchase_end_time')
   
    if(start_time !=null){
      this.start_time = ""
      this.start_time = start_time
    }
    if(end_time!=null){
      this.end_time = ""
      this.end_time = end_time
    }
    window.sessionStorage.removeItem('purchase_start_time')
    window.sessionStorage.removeItem('purchase_end_time')
    this.getAllSupply();

    this.getlist();
   
  },
};
</script>
<style lang="scss">
.cluster-rs {
  text-align: center;
}
.annotation-rs {
  width: 100%;
  height: 100%;
  border: none;
  td {
    width: 155px;
    padding: 5px;
    border-right: none;
    text-align: center;
    vertical-align: middle;
  }
}
tr:last-child {
  td {
    border-bottom: none;
  }
}
</style>

<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;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
</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;
}

.color {
  background: none !important;
  display: flex;
  flex-direction: column;
}
</style>
