<template>
  <div class="app-container">
    <el-card >
      <div slot="header" class="clearfix">
        <i class="el-icon-back" @click="goToAbout">返回  |  </i>
        <!--        <el-link icon="el-icon-edit" :underline="false" @click="goToAbout">编辑</el-link>-->
        <span> 退货详情</span>
      </div>
      <div style="height: 90px; display: flex; justify-content: space-between;">
        <div style="height: 100%; width: 50%; display: flex; justify-content: space-between;">
          <div style="height: 100%; width: 70%;  display: flex; justify-content: space-between;">
            <div class="box">
              <span>{{damageForm.totalAmount}}</span>
              <span>报损总额</span>
            </div>
            <div class="box">
              <span>{{damageForm.productQuantity}}</span>
              <span>商品数量</span>
            </div>
            <div class="box">
              <span>{{damageForm.damageQuantity}}</span>
              <span>报损数量</span>
            </div>
          </div>
          <div style="height: 100%; width: 30%; display: flex; flex-direction: column; justify-content: space-between;">
            <el-form ref="myForm" label-width="100px">
              <el-form-item label="报损单号">

                <el-input  v-model="damageForm.orderNumber"
                :disabled="numberInput"
                           style="width: 220Px">
                  <el-button slot="append" @click="refresh()" icon="el-icon-refresh"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="报损时间" >
                <el-date-picker
                :disabled="numberInput"
                  style="width: 220Px"
                  v-model="damageForm.orderDate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker> 
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="height: 100%; width: 30%; display: flex; align-items: center; justify-content: flex-end;">
          <el-button type="primary" v-if="state=='await'" :disabled="saveFlag" @click="save()">保存</el-button>
          <el-button type="success" v-if="state=='await'" :disabled="auditFlag" @click="audit()">保存并审核</el-button>
          <el-button type="success" v-if="state=='ysh'" :disabled="storageFlag" @click="storage">退货处理库存</el-button>
          <el-button type="warning" v-if="state =='await' || state=='ysh'" :disabled="voidFlag" @click="abolition()">作废</el-button>
        </div>

      </div>
    </el-card>


    <el-card style="margin-top: 20px" >
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="commodityAdd"
          >添加报损商品</el-button>
        </el-col>
        <!--        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      </el-row>
      <el-table ref="tables"
                v-loading="loading"
                :data="detailsList"
                :default-sort="defaultSort">

        <el-table-column label="商品名称" align="center" prop="commodityName"/>
        <el-table-column label="分类名称" prop="cvsGoodId" align="center">
          <template slot-scope="scope">
            <span>{{ getName(cvsGoodList, scope.row.cvsGoodId) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="供应商" prop="supplierId" align="center">
          <template slot-scope="scope">
            <span>{{ getName(supplierList, scope.row.supplierId) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="unit">
          <template slot-scope="scope">
            <span>{{ scope.row.unit == null?"-":scope.row.unit}}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存" align="center" prop="preInboundInventory"/>
        <el-table-column label="报损数量" align="center" prop="damageQuantity">
          <template slot-scope="scope">
            <el-input-number :disabled="numberInput" v-model="scope.row.damageQuantity" @change="change(scope.row,1)" controls-position="right" :min="1" :max="100000000" :step="1" style="max-width: 100%"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="当前加权均进价" align="center" prop="weightedAverageCost"/>
        <el-table-column label="小计金额" align="center" prop="subtotalAmount"/>

        <el-table-column v-if="state =='await' || state=='ysh'" label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="commodityDel(scope.row)"
            >删除</el-button>
          </template>
          <!--          v-hasPermi="['']"-->

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

      <!--      <pagination-->
      <!--        v-show="total>0"-->
      <!--        :total="total"-->
      <!--        :page.sync="queryParams.page"-->
      <!--        :limit.sync="queryParams.pageSize"-->
      <!--        @pagination="getList"-->
      <!--      />-->
    </el-card>


    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false">
      <el-container>
        <el-header style="">
          <el-form ref="tankForm" :model="commodityForm" label-width="80px">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="商品分类">
                    <el-select
                      v-model="commodityForm.cvsGoodId"
                      placeholder="全部"
                      clearable
                    >
                      <el-option v-for="item in cvsGoodList" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
              <el-form-item label="供应商" prop="supplierId">
                <el-select
                  v-model="commodityForm.supplierId"
                  placeholder="全部"
                  clearable
                >
                  <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="详细信息">
                  <el-input v-model="commodityForm.detailed" placeholder="商品名称，拼音码，条形码等信息" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="inquire()">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-header>
        <el-main>
          <el-table ref="tables"
                    v-loading="loading"
                    :data="commodityList"
                    @selection-change="handleSelectionChange"
                    border
                    :default-sort="defaultSort">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>

            <el-table-column label="商品名称" align="center" prop="name"/>
            <el-table-column label="商品编码" align="center" prop="goodsNo"/>
            <el-table-column label="分类名称" prop="cvsGoodId" align="center">
              <template slot-scope="scope">
                <span>{{ getName(cvsGoodList, scope.row.cvsGoodId) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="供应商" prop="supplierId" align="center">
              <template slot-scope="scope">
                <span>{{ getName(supplierList, scope.row.supplierId) }}</span>
              </template>
            </el-table-column>
              <el-table-column label="单位" align="center" prop="unit"/>
            <el-table-column label="当前库存" align="center" prop="stock"/>
          </el-table>

        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCommodity">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getAuditPremApi} from "@/api/oilConfig/staff";
import {BigNumber} from "bignumber.js";
import {listLJGoods} from "@/api/convenienceStore/ljgoods";
import {getName,parseTime} from "../../../utils/fuint";
import {selectParentById, selectTree} from "@/api/convenienceStore/goods";
import {listSupplier} from "@/api/convenienceStore/supplier";
import {
  getDamageDetailsPageApi,
  delDetailsApi,
  editDamageApi,
  addDamageApi,
  batchProcessingApi,
  auditDamageApi,
  storageDamageApi,
  abolitionDamageApi
} from "@/api/convenienceStore/damage";


export default {
  name: "details",
  props:[
    'PdamageId',
    'PorderNumber',
    'PorderDate',
    'PapprovalStatus'
  ],
  data() {
    return {
      detailsList: [],
      commodityList: [],
      damageId:null,
      commodityForm:{
        cvsGoodId: "",
        cvsGood: "",
        supplierId: "",
        supplier: "",
        detailed: "",
        page: 1,
        pageSize: 10,
        isRecovery:0,
      },
      damageForm: {
        orderNumber: null,
        approvalStatus: "",
        orderDate: null,
        totalAmount: 0, //总金额
        productQuantity: 0, //商品数量
        damageQuantity: 0  //进货数量
      }  ,

      // 商品分类列表
      cvsGoodList:[],
      // 供应商列表
      supplierList:[],


      state:'await',

      saveFlag:false,
      auditFlag:true,
      voidFlag:true,
      storageFlag:true,
      multipleSelection:[], // 表格

      // 弹出框标题
      title:'选择商品',
      // 显示搜索条件
      showSearch: true,
      disableInput: false, // 默认不禁用
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 0,

      // 查询参数
      queryParams: {
        // supplierId: '',
        damageId: null,
        page:null,
        pageSize:null
      },
      // 遮罩层
      loading: false,
      // 默认排序
      defaultSort: {prop: 'createTime', order: 'descending'},
      // 表单校验
      rules: {
        supplierName: [
          { required: true, message: "供应商名称不能为空", trigger: "blur" },
        ],
      },
    }
  },

  async created() {

    this.damageForm.damageId = this.$props.PdamageId
    this.damageId = this.$props.PdamageId
    this.queryParams.damageId = this.$props.PdamageId
    this.damageForm.orderNumber = this.$props.PorderNumber
    this.damageForm.orderDate = this.$props.PorderDate
    this.damageForm.approvalStatus = this.$props.PapprovalStatus
    this.state = this.$props.PapprovalStatus

    if ( this.state == null) {
      this.state = 'await'
    }

    if (this.state=='await') {
      this.numberInput = false
    }else {
      this.numberInput = true
    }


    console.log("this.damageForm",this.damageForm)
    if (this.damageForm.orderNumber == null) {
      this.refresh();
    }
    if (this.damageForm.orderDate == null) {
      this.damageForm.orderDate =new Date()
    }

    this.getDetailsList();
    this.getQueryList();
    this.JudgmentButton();
  },
  methods: {
    getDetailsList() {
      let this_ = this
      getDamageDetailsPageApi(this.queryParams).then(res=>{
        this_.detailsList = res.data.records;
        this.total = res.data.total;
        this.sumMethod(res.data.records);
      })
    },
    getCommodityList() {
      let this_ = this
      listLJGoods(this_.commodityForm).then(res=>{
        this_.commodityList = res.data.records;
        this_.sumMethod(res.data.records);
        // this.total = response.data.total;
      })
    },
    // 页面跳转
    goToAbout() {
      this.$router.push('/convenienceStore/damage/index');
    },
    commodityAdd() {
      this.open = true;
    },
    commodityDel(data) {
      if (data.id != null) {
        delDetailsApi(data).then(res=>{
        })
      }
      const index = this.detailsList.indexOf(data); // 查找要删除的对象的索引
      if (index !== -1) {
        this.detailsList.splice(index, 1); // 使用splice方法删除对象
      }
    },
    // 查询商品
    inquire() {
      this.getCommodityList();
    },

    // 改变数字时
    change(data,flag) {

      let damageQuantity = new BigNumber(data.damageQuantity);
      let weightedAverageCost = new BigNumber(data.weightedAverageCost);
      let subtotalAmount = damageQuantity.times(weightedAverageCost);

      data.subtotalAmount = subtotalAmount.toNumber(); 


      // let damageQuantity = new BigNumber( data.damageQuantity);
      // let weightedAverageCost = new BigNumber( data.weightedAverageCost);
      // let subtotalAmount = new BigNumber(0);

      // data.subtotalAmount = damageQuantity.times(weightedAverageCost)
      // let subtotalAmount = damageQuantity.times(weightedAverageCost)
      // console.log("this.detailsList",subtotalAmount)
      // data.subtotalAmount = subtotalAmount

      this.sumMethod(this.detailsList);
      // console.log("this.detailsList",this.detailsList)
      // 进行保存
      // this.detailsList = data
      // this.edit()
    },

    // 计算header数据
    sumMethod(data) {
      let this_ = this

      // if (data.length>0) {
      //   this_.damageForm.totalAmount = data.length
      // } else {
      //   this_.damageForm.totalAmount = 0
      // }
      console.log("qqqqqqqqqqq",data)

      this.damageForm.productQuantity =  data.length,
      this_.damageForm.totalAmount =  new BigNumber(0),
      this_.damageForm.damageQuantity = new BigNumber(0),

      data.forEach(da => {
        if (da.damageQuantity != null) {
          this_.damageForm.damageQuantity= this_.damageForm.damageQuantity.plus(da.damageQuantity)
        }
        if (da.subtotalAmount != null) {
          this_.damageForm.totalAmount= this_.damageForm.totalAmount.plus(da.subtotalAmount)
        }
      })
    },

    addCommodity () {
      let this_ = this
      this.multipleSelection.forEach(mul=>{
        let now = {
          goodsId: mul.id,
          commodityName: mul.name,
          supplierId: mul.supplierId,
          cvsGoodId: mul.cvsGoodId,
          unit:mul.unit,
          preInboundInventory:mul.stock,
          damageQuantity: 1,
          weightedAverageCost: mul.buyingPrice,
          subtotalAmount: mul.buyingPrice
        }
        this_.detailsList.push(now)
      })
      this_.open = false

      this_.sumMethod(this_.detailsList);
    },

    // 查询搜索列表信息
    getQueryList(){
      selectTree().then(response => {
        this.cvsGoodList = response.data.records
      });
      listSupplier().then(response => {
        this.supplierList = response.data.records
      })
    },
    cancel() {
      this.open = false;
    },
    // 表格选择器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 刷新订单编号
    refresh() {
      let timestamp = new Date().getTime();
      let min = 100; // 最小的四位数是 1000
      let max = 999; // 最大的四位数是 9999
      let randomFourDigitNumber = Math.floor(Math.random() * (max - min + 1)) + min;
      this.damageForm.orderNumber = timestamp+randomFourDigitNumber.toString();
    },



    // 判断按钮是否可用
    async JudgmentButton(){
      let judgmentPermissions1 = await this.judgmentPermissions("退货审核");
      if (judgmentPermissions1 > 0){
        this.auditFlag=false,
          this.voidFlag=false
      }
      let judgmentPermissions2 = await this.judgmentPermissions("退货出库");
      if (judgmentPermissions2 > 0){
        this.storageFlag = false
      }

      let judgmentPermissions3 = await this.judgmentPermissions("退货废止");
      if (judgmentPermissions3 > 0){
        this.voidFlag=false
      }else {
        this.voidFlag=true

      }
    },

    // 判断权限
    async judgmentPermissions(data) {
      let fil ={
        auditPrem:data
      }
      return await getAuditPremApi(fil).then(res => {
        return res.data
      });
    },

    async save(flag){
      let this_ = this
      // 保存之前进行判断
      if (this_.damageForm.orderNumber == null) {
        this.$modal.msgError("退货单号不能为空");
        return -1;
      }else if (this_.damageForm.orderDate == null) {
        this.$modal.msgError("退货时间不能为空");
        return -1;
      }else if(this_.detailsList.length<=0) {
        this.$modal.msgError("退货单不能为空");
        return -1;
      }

      if (this_.damageId == null) {
        // 新增
        this_.damageForm.approvalStatus = 'await'
        await addDamageApi(this_.damageForm).then(res=>{
          this_.damageId = res.data.id
          this.queryParams.damageId = res.data.id
        }).catch(res=>{
          this.$modal.msgError("保存失败");
          return;
        })
      }else {
        // 修改
        this_.damageForm.id = this_.damageId
        this.queryParams.damageId = this_.damageId
        await editDamageApi(this_.damageForm).then(res=> {
        }).catch(res=>{
          this.$modal.msgError("保存失败");
          return;
        })
      }
      // 批量保存订单

      this_.detailsList.forEach(data=>{
        data.damageId = this_.damageId
      })

      await batchProcessingApi(this_.detailsList).then(res=>{
        this.$modal.msgSuccess("保存成功");
        if (flag != -1) {
          this.goToAbout();
        }
      }).catch(res=>{
        this.$modal.msgError("保存失败");
      })

    },
    // 保存并审核
    async audit(){
      // 保存
      let number = await this.save(-1);
      if (number != -1) {
        // 审核
        let fil ={
          id: this.damageId
        }
        console.log(" id: this.damageId",fil)
        await auditDamageApi(fil).then(res => {
          if (res.data) {
            this.state = 'ysh'
            this.$modal.msgWarning("审核成功");
          }else {
            this.$modal.msgWarning("暂无审核权限");
          }
          this.goToAbout()
        })
      }
    },

    // 入库
    storage() {
      let this_ = this;
          // 保存之前进行判断
          if (this_.damageForm.orderNumber == null) {damageIde/Damage
        this.$modal.msgError("退货单号不能为空");
        return -1;
      }else if (this_.damageForm.orderDate == null) {
        this.$modal.msgError("退货时间不能为空");
        return -1;
      }else if(this_.detailsList.length<=0) {
        this.$modal.msgError("退货单不能为空");
        return -1;
      }

      this.$confirm('确认后盘点中的对应油品入库油罐库存将发生变化，且不可逆，确认已按照盘点数量入库吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 审核
        let fil ={
          id: this.damageId
        }
        storageDamageApi(fil).then(res => {
          this.state = 'qrts'
          this.$modal.msgWarning("入库成功");
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }, 
  
  
    // 作废
    abolition(){
      if (this.damageId < 0) {
        this.$modal.msgWarning("数据未保存，不可废弃");
        return;
      }
      this.$confirm('确定要废弃盘点好的数据吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let fil ={
          id: this.damageId
        }
        abolitionDamageApi(fil).then(res => {
          if (res.data) {
            this.state = 'yzf'
            this.$modal.msgWarning("作废成功");
            this.goToAbout()
          } else {
            this.$modal.msgWarning("暂无作废权限");
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      })
    },
  }
}
</script>

<style scoped>
.app-container{
  width: 100%;
  height: 100%;
  background: #f6f8f9;
}

.box {
  height: 100%;
  width: 50%;
  margin-right: 10px;
  background-color: rgba(204, 204, 204, 0.3);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
