<!--批量加价-->
<template>
  <div class="app-container">
    <div class="page-title">批量加价</div>
    <div>
        运费或全包加价
        <!--货币-->
        <selector  v-model="form.reduceCurrencyId" :options="currencyList" label-field="titleZh" value-field="id" defaultable class="w-100 ml-10" />
        <!--金额-->
        <el-input type="number" v-model="form.cashCondition"  @keyup.native="checkPositive(form, 'cashCondition')"  class="w-100 ml-10" />
        <!--单位-->
        <selector v-model="form.prodUnit" :options="unitList" label-field="titleZh" value-field="id" defaultable  class="w-100 ml-10" />
    </div>
    <div class="mt-10">
        清关费加价价
        <!--货币-->
        <selector  v-model="form.reduceCurrencyId" :options="currencyList" label-field="titleZh" value-field="id" defaultable  class="w-100 ml-10" />
        <!--金额-->
        <el-input type="number" v-model="form.cashCondition"  @keyup.native="checkPositive(form, 'cashCondition')"  class="w-100 ml-10" />
        <!--单位-->
        <selector v-model="form.prodUnit" :options="unitList" label-field="titleZh" value-field="id" defaultable  class="w-100 ml-10" />
    </div>

    <el-card class="mt-20" v-if="shipmentObj">
      <el-descriptions :column="4" border>
        <el-descriptions-item :label="$t('自编号')">
          {{shipmentObj.selfNo}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('运输方式')">
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />
        </el-descriptions-item>
        <!-- <el-descriptions-item :label="$t('出货渠道')">
          {{getShipChannelName(shipmentObj.shippingChannelId)}}
        </el-descriptions-item> -->
        <el-descriptions-item :label="$t('柜型')">
          {{getCabinetLabel(shipmentObj.cabinetId)}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('状态')">
          {{shipmentObj.shipmentStatusText}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('总计')">
          {{getBoxSum(shipmentObj.boxStatistics)}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('始发地')">
          {{getCityName(shipmentObj.startWarehouseId)}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('目的地')">
          {{getCityName(shipmentObj.destWarehouseId)}}
        </el-descriptions-item>
        <el-descriptions-item label="SO NO">
          {{shipmentObj.bookSeaInfo ? shipmentObj.bookSeaInfo.sono : '' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="mt-20">
      <div slot="header">
        明细
      </div>
      <div>
        当前部分：
        <el-select :placeholder="$t('请选择')" v-model="sectionId" @change="sectionChange">
          <el-option key="0" :label="$t('全部')" value="0"></el-option>
          <el-option v-for="item in sectionList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </div>
      <el-table border :data="orderList" @selection-change="handleSelectionChange" class="mt-10">
        <el-table-column type="selection" width="50"></el-table-column>>
        <el-table-column align="center" :label="$t('序号')" width="50" prop="tidanNum" />
        <el-table-column prop="orderNo" :label="$t('订单号')" align="center">
          <template v-slot="scope">
            <a href="javascript:void(0)" @click="jumpOrderDetail(scope.row)">{{ scope.row.orderNo }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="goodsList" :label="$t('货物信息')" width="230px" align="center">
          <template v-slot="{row}">
            <section>
              <div v-for="(item, index) in row.goodsList" :key="index">
                {{index+1}}：{{item.prodTitleZh}}
              </div>
            </section>
          </template>
        </el-table-column>
        <el-table-column prop="num" :label="$t('计划箱数')" align="center"></el-table-column>
        <el-table-column prop="installNum" :label="$t('实装箱数')" align="center"></el-table-column>
        <el-table-column prop="unloadNum" :label="$t('卸柜箱数')" align="center"></el-table-column>
        <el-table-column prop="destWarehouseName" :label="$t('提货点')" align="center"></el-table-column>
        <el-table-column prop="volume" :label="$t('体积')" align="center"></el-table-column>
        <el-table-column prop="weight" :label="$t('重量')" align="center"></el-table-column>
        <el-table-column prop="totalWorth" :label="$t('货值')" align="center"></el-table-column>
        <el-table-column prop="customsType" :label="$t('报关方式')" align="center">
          <template slot-scope="scope">
            <div :class="scope.row.customsType !== 1 ? 'customsType-red' : ''">
              <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="scope.row.customsType" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="customsFee" :label="$t('报关费用')" align="center"></el-table-column>
        <el-table-column prop="" :label="$t('当前成交价')" align="center" width="120px">
          <template slot-scope="scope">
            // TODO
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('加价后成交价')" align="center" width="120px">
          <template slot-scope="scope">
            // TODO
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="mt-20">
      <work-flow xmlkey="todo"></work-flow>
    </el-card>

    <div class="mt-20">
      <el-button type="primary" @click="$alert('TODO')">提交审核</el-button>
      <el-button type="primary" @click="$alert('TODO')">审核中</el-button>
      <el-button type="default" @click="$alert('TODO')">取消审核</el-button>
    </div>
  </div>
</template>

<script>
import {getCurrencyList} from "@/api/ecw/currency";
import {getUnitList} from "@/api/ecw/unit";
import selector from '@/components/Selector'
import {getChannelList} from "@/api/ecw/channel";
import {getCabinetPage} from "@/api/ecw/cabinet";
import {getWarehouseList} from "@/api/ecw/warehouse";
import {getSupplierPage} from "@/api/ecw/supplier";
import {boxGoodsDetail, getSectionList} from "@/api/ecw/boxSea";
import {getAbnormalList, getbox, getLogList} from "@/api/ecw/box";
import {getTotlContent} from "@/views/ecw/box/shippingSea/utils";
import WorkFlow from "@/components/WorkFlow";

export default {
  name: "batchMarkup",
  components: {selector, WorkFlow},
  data(){
    return {
      unitList:[],
      currencyList:[],
      form:{},
      orderList:[],
      // 表格多选
      multipleSelection: [],
      // 选择的id
      ids: [],
      channelList:[],
      cabinetList:[],
      sectionList:[],
      // warehouseList:[],
      // allSupplier:[]
      shipmentObj: null,
      shipmentId: null,
      // 当前选择的部分
      sectionId: 0
    }
  },
  computed:{
    /* 渠道 */
    getShipChannelName() {
      return (shippingChannelId) => {
        let item = this.channelList.find(item => item.channelId == shippingChannelId)
        if(!item) return ''
        return this.$l(item, "name");
      };
    },
    /* 获取柜型 */
    getCabinetLabel() {
      return (cabinetId) => {
        return this.cabinetList.find(item => item.id == cabinetId)?.name
      };
    },
    /* 总计 */
    getBoxSum() {
      return (boxStatistics) => {
        if (boxStatistics) {
          return this.$t("{num}箱 {volume}m³ {weight}kg", {
            num: boxStatistics.num ?? 0,
            volume: boxStatistics.volume ?? 0,
            weight: boxStatistics.weight ?? 0,
          });
        }
        return;
      };
    },
    /* 获取仓库 */
    getCityName() {
      return (id) => {
        let arr = this.warehouseList.filter((item) => item.id == id);
        return arr.length > 0 ? this.$l(arr[0], "title") : this.$t("无");
      };
    },
    // 部分信息
    getSectionInfo() {
      const { totalStatistics, secStatistics } = this.sectionObj;
      if (!this.sectionId) {
        return getTotlContent(totalStatistics);
      } else {
        return getTotlContent(secStatistics);
      }
    },
  },
  created() {
    getUnitList().then(res => this.unitList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
    this.shipmentId = this.$route.query.shipmentId
    if(!this.shipmentId){
      return this.$message.error('请求参数错误')
    }
    this.initData()
    this.getSectionList()
    this.getBoxDetail()
  },
  methods:{
    // 检查正数
    checkPositive(object, field){
      const lastChar = object[field].split('').pop()
      object[field] = parseFloat(object[field])
      if(isNaN(object[field]) || object[field] < 0) object[field] = ''
      else object[field] = object[field].toString()

      // 如果最后一位是.且没有其他点则补上
      if(object[field] != '' && object[field].indexOf('.') == -1 && lastChar == '.') object[field] += '.'
    },
    // 表格多选
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.ids = selection.map(item => item.orderId)
    },
    // 初始化字典数据
    initData() {
      // 查询渠道
      getChannelList().then((res) => (this.channelList = res.data));
      // 查询柜型
      getCabinetPage(null).then(
        (response) => (this.cabinetList = response.data.list)
      );
      // 仓库
      getWarehouseList().then((r) => {
        this.warehouseList = r.data;
      });
      /*// 供应商
      getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
        const { data } = res;
        this.allSupplier = data.list;
      });*/
    },
    // 出货信息
    getBoxDetail() {
      getbox(this.shipmentId).then((res) => {
        const { data } = res;
        this.shipmentObj = data ?? {};
      });
    },
    // 查询详情页所有数据
    getSectionList() {
      let param = { shipmentId: this.shipmentId };
      // 部分
      getSectionList(param).then((res) => {
        this.sectionList = res.data.map((item, index) => {
          return {
            ...item,
            title: this.$t("第{index}部分", { index: index + 1 }),
          };
        });
      });
    },
    /* 跳转订单详情 */
    jumpOrderDetail(row) {
      this.$router.push({
        path: "/order/detail",
        query: { orderId: row.orderId },
      });
    },
    // 部分切换
    sectionChange() {
      this.getBoxGoodsDetail();
    },
    // 获取部分详情以及物品
    getBoxGoodsDetail() {
      boxGoodsDetail({
        shipmentId: this.shipmentId,
        secId: this.sectionId,
      }).then((res) => {
        this.sectionObj = res.data;
      });
    },
  }
}
</script>

<style scoped>

</style>
