<template>
  <div class="exp-form">
    <van-collapse v-model="activeNames">
      <van-collapse-item title="结算信息" name="1">
        <van-field v-model="form.invNo" label="结算单号" readonly />
        <van-field v-model="form.invDt" label="结算日期" readonly />
        <van-field v-model="form.contrNo" label="合同编号" readonly />
        <van-field v-model="form.khContrNo" label="对方合同编号" readonly />
        <van-field v-model="form.tradePartnerName" label="客户名称" readonly  />
        <van-field v-model="form.priceDcnMth" label="定价方式" readonly :formatter="formatterPriceDcnMth"/>
        <van-field v-model="form.taxRate" label="税率" readonly />
        <van-field v-model="form.payMth" label="结算类型" readonly :formatter="formatter"/>
        <van-field v-model="form.qty" label="结算重量" readonly />
        <van-field v-model="form.invAmt" label="结算金额" readonly />
        <van-field v-model="form.invFlag" label="结算标识" readonly />
        <van-field v-model="form.invDesc" label="开票说明" readonly />
        <van-field v-model="form.remark" label="备注" readonly />
      </van-collapse-item>
      <van-collapse-item title="结算标准" name="2">
        <div v-for="(item,index) in tableDataSettlement" style="color: #323233">
          <div class="padd" style="display: flex;justify-content: space-between;">
            <span>结算项目：{{ item.settleItem }}</span>
            <span>项目编码：{{ item.settleNo }}</span>
          </div>
          <div class="padd" style="display: flex;justify-content: space-between;">
            <span>项目上限：{{ item.settleValueTo }}</span>
            <span>项目下限：{{ item.settleValueFrom }}</span>
          </div>
          <div class="padd" style="display: flex;justify-content: space-between;">
            <span>项目跨度：{{ item.settleSpan }}</span>
            <span>结算差额：{{ item.settleDiffer }}</span>
          </div>
          <div class="padd">
            <span>基准值：{{ item.referenceValue }}</span>
          </div>
          <van-divider />
        </div>
      </van-collapse-item>
      <van-collapse-item title="结算行" name="3">
        <div v-for="(item,index) in tableDataLine" style="color: #323233">
          <div class="padd" style="display: flex;justify-content: space-between;">
            <span>物料名称：{{ item.itemNm }}</span>
<!--            <span>结算单号：{{ item.settleNo }}</span>-->
          </div>
          <div class="padd" style="display: flex;justify-content: space-between;">
            <span>品位：{{ item.transTasteSci }}</span>
            <span>水分：{{ item.transWaterSci }}</span>
          </div>
          <div class="padd" style="display: flex;justify-content: space-between;">
            <span>数量：{{ item.qty }}</span>
            <span class="redSpan">修改数量：{{ item.qtyUpdate }}</span class="redSpan">
          </div>
          <div class="padd" style="display: flex;justify-content: space-between;">
            <span>结算单价：{{ item.invPrice }}</span>
            <span class="redSpan">修改单价：{{ item.invPriceUpdate }}</span>
          </div>
          <div class="padd" style="display: flex;justify-content: space-between;">
            <span>结算金额：{{ item.invAmt }}</span>
            <span class="redSpan">新结算金额：{{ item.invAmtUpdate }}</span>
          </div>
          <van-divider />
        </div>

      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const { proxy } = getCurrentInstance();

import {
  useWorkflowStore
} from '@/stores/workflow';

import { AddressList, PickerGroup, Button   , showNotify ,showToast ,showFailToast   } from 'vant';

const workflow = useWorkflowStore();
const route = useRoute()
onMounted(() => {
  workflow.setWorkId(route.query.workId);
  getTableData();
  dictData();
});

const activeNames = ref(['1']);

const form = ref({
  id: '',
  signReqNm: '',
  signDt: '',
  otherInformation: '',
  estProfit: null,
  ProcessInstanceSts: '',

  addDeptName: '',
  addTime: '',
  workModel: {
    flowStatusName: ''
  }
});

const getTableData = () => {
  var url = 'sal/InvHead/queryByWorkId';
  var param = {
    workId: workflow.workId
  };

  proxy.$axios.get(url, param).then((response: any) => {
    if (response.data.code == '0') {
      form.value = response.data.data;
      form.value.payMthStr = response.data.data.payMth
      form.value.priceDcnMthStr = response.data.data.priceDcnMth
      getTableDataLine(response.data.data.id)
      querySettlement.value = {
        contrId: response.data.data.contrId,
        conLineId: response.data.data.taxRateLine,
      }
      getTableDataSettlement()
    } else {
      // showNotify('操作失败！' + response.data.msg);
      // showNotify({ type: 'danger', message: '操作失败！' + response.data.msg });
      showFailToast('操作失败！' + response.data.msg);
    }
  });
};

const tableDataMx = ref([]);
const tableDataSettlement = ref([]);
const tableDataLine = ref([]);



const dictList = ref({});
const dictData = () => {
  var url = 'framework/Common/querySelectorList';
  var param = {
    type: JSON.stringify(['MEASURING_UNIT' , 'COM_PAY_MTH' , 'PRICE_DCN_MTH'])
  };
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      dictList.value = response.data.data;
    } else {
      showFailToast('操作失败！' + response.data.msg);
    }
  });
};



const formatter = () => {
  var re = ''
  if (dictList.value.COM_PAY_MTH){
    for (var i =0 ; i < dictList.value.COM_PAY_MTH.length ; i++){
      if (form.value.payMth == dictList.value.COM_PAY_MTH[i].dicCode){
        re =  dictList.value.COM_PAY_MTH[i].dicName
        form.value.payMthStr = re
        break;
      }
    }
  }
  return form.value.payMthStr
}
const formatterPriceDcnMth = () => {
  var re = ''
  if (dictList.value.PRICE_DCN_MTH){
    for (var i =0 ; i < dictList.value.PRICE_DCN_MTH.length ; i++){
      if (form.value.priceDcnMth == dictList.value.PRICE_DCN_MTH[i].dicCode){
        re =  dictList.value.PRICE_DCN_MTH[i].dicName
        form.value.priceDcnMthStr = re
        break;
      }
    }
  }
  return form.value.priceDcnMthStr
}
const querySettlement = ref({
  contrId: '',
  conLineId: ''
})
const getTableDataSettlement = () => {
  var url = 'cot/Settlement/queryByContrIdAndConLineId'
  var param = {
    params: JSON.stringify(querySettlement.value)
  }
  proxy.$axios.post(url, param).then(response => {
    if (response.data.code == '0') {
      tableDataSettlement.value = response.data.data
      // totalRowsSettlement.value = response.data.data.total
    } else {
      showFailToast('操作失败！' + response.data.msg);
    }
  })
}

const getTableDataLine = (id) => {
  var url = 'sal/InvLine/queryNoPerssion'
  var param = {
    page: 1,
    rows: 9999,
    params: JSON.stringify({fId: id})
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableDataLine.value = response.data.data.records
    } else {
      showFailToast('操作失败！' + response.data.msg);
    }
  })
}

</script>

<style lang="scss" scoped>
.exp-form {
  background: #f7f8fa;
  padding-bottom: 20px;
}

.padd {
  padding: 3px;
}

.van-collapse-item {
  padding: 10px;
  border-radius: 45px !important;

  .van-cell--clickable {
    border-radius: 10px 10px 0 0;
  }
}

:deep .van-cell {
  border-radius: 10px 10px 0 0;
}

:deep .van-collapse-item__wrapper {
  border-radius: 0 0 10px 10px;
}
.redSpan {
  color: red;
}
</style>
