<template>
  <el-row class="shipping-ladingBill">
    <el-row class="oper-button">
      <el-button type="primary" @click="clickZipDownload">{{$t('打包下载')}}</el-button>
      <el-button type="primary" @click="handleCommand('downloadReceivableList')">{{$t('应收汇总表')}}</el-button>
      <el-button type="primary" @click="handleCommand('downloadLoadGoodsList')">{{$t('下载已装单')}}</el-button>
    </el-row>

    <el-row style="margin-top:15px">
      <el-table :data="billData.list" border max-height="500px">
        <el-table-column :label="$t('序号')" align="center" width="50" prop="tidanNo" />
        <el-table-column :label="$t('订单号')" align="center" prop="orderNo">
          <template slot-scope="scope">
            <div>
              {{scope.row.orderNo}}
            </div>
            <div style="color:blue;fontWeight:bold;">
              {{ scope.row.drawee? scope.row.drawee:''}}
            </div>
            <div style="color:red;fontWeight:bold;">
              {{ scope.row.applicationInfo? scope.row.applicationInfo : ''}}
            </div>
            <div style="color:red;fontWeight:bold;">
              {{ scope.row.customsTypeName? scope.row.customsTypeName : ''}}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('货物信息')" align="center" prop="">
          <template slot-scope="scope">
            <section class="table-goodList">
              <div v-for="(item, index) in scope.row.orderItemList" :key="index" class="goodList-div">
                <p>{{$t('品名')}}：{{$l(item, 'prodTitle')}}</p>
                <p>{{$t('品牌')}}：【<template v-if="item.brandName">{{item.brandName}}</template>
                  <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="item.feeType" />{{ $t('】') }}
                </p>
                <p>{{$t('其他')}}：{{getTotlContent(item)}}</p>
              </div>
            </section>
          </template>
        </el-table-column>
        <el-table-column :label="$t('控货')" align="center" prop="">
          <template slot-scope="scope">
            {{scope.row.isCargoControl ? $t('是') : $t('否') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('计划箱数')" align="center" prop="num">
          <template slot-scope="scope">
            {{ scope.row.num }}{{$t('箱')}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('实装箱数')" align="center" prop="loadNum">
          <template slot-scope="scope">
            {{ scope.row.loadNum }}{{$t('箱')}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('提货点')" align="center" prop="destWarehouse" />
        <el-table-column :label="$t('体积')" align="center" prop="loadVolume">
          <template slot-scope="scope">
            {{ scope.row.loadVolume }}m³
          </template>
        </el-table-column>
        <el-table-column :label="$t('重量')" align="center" prop="loadWeight">
          <template slot-scope="scope">
            {{ scope.row.loadWeight }}kg
          </template>
        </el-table-column>
        <el-table-column :label="$t('客户经理')" align="center" prop="salesmanId" />
        <el-table-column :label="$t('制作')" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!-- 0 （未制作提货单）  1（审核中） 2（审核通过） 3（审核拒绝） -->
            <el-button v-if="scope.row.status === 0" type="text" size="small" @click="handleCommand('makeBill',scope.row)">{{$t('提单制作')}}</el-button>
            <el-button v-if="scope.row.status === 1" type="text" size="small" @click="handleCommand('queryBill',scope.row)">{{$t('审核中')}}</el-button>
            <template v-if="scope.row.status === 2">
              <el-button type="text" size="small" @click="handleCommand('previewBill',scope.row)" style="color:green">{{$t('已审核通过')}}</el-button>
              <el-button type="text" size="small" @click="handleCommand('queryBill',scope.row)">{{$t('重新制作')}}</el-button>
              <el-button type="text" size="small" @click="handleCommand('resetBill',scope.row)" style="color:#333333">{{$t('重置')}}</el-button>
            </template>
            <template v-if="scope.row.status === 3">
              {{$t('审核拒绝')}}
              <el-button type="text" size="small" @click="handleCommand('queryBill',scope.row)">{{$t('重新制作')}}</el-button>
              <el-button type="text" size="small" @click="handleCommand('resetBill',scope.row)" style="color:#333333">{{$t('重置')}}</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row>
      <el-col class="totle-info">
        <div>{{$t('总计')}}：{{getSumData}}</div>
        <div>{{$t('容量')}}：{{calcCapacity}}</div>
      </el-col>
    </el-row>

    <el-dialog :title="dialogCfg.title" :visible.sync="dialogCfg.visible" :width="dialogCfg.width" :fullscreen="dialogCfg.fullscreen" append-to-body class="shippingSea-dialog" @closed="dialogclosed">
      <makeLadingBill v-if="dialogCfg.visible && ['makeBill','queryBill','resetBill'].includes(dialogCfg.type)" :currData="currData" :currRow="currRow" :dialogCfg="dialogCfg" @closeDialog="closeDialog" :selfNo="shipmentObj.selfNo" />
      <previewBill v-if="dialogCfg.type === 'previewBill'" :contentHtml="currData.billContent" :currRow="currRow" :type="dialogCfg.type" />
    </el-dialog>
  </el-row>
</template>

<script>
import {
  getMakeBillList,
  makeBillService,
  getBillService,
  deleteBillService,
} from "@/api/ecw/box";
import {
  getTotlContent,
  getCapacity,
  downloadFile,
} from "../shippingSea/utils";
import makeLadingBill from "./makeLadingBill.vue";
import previewBill from "./previewBill.vue";

export default {
  name: "ladingBill",
  components: { makeLadingBill, previewBill },
  props: {
    shipmentObj: Object,
    getCabinetName: Function,
  },
  data() {
    return {
      billData: {
        list: [],
      },
      // 提货单数据
      currData: {},
      // 当前行
      currRow: {},
      // 弹出类型
      dialogCfg: {
        title: "",
        type: "",
        width: "100px",
        // 是否显示弹出层
        visible: false,
        fullscreen: false,
      },
      // 模板内容
      billContent: "",
      handleType: "",
    };
  },
  created() {
    this.getBillList();
    this.buildTitle();
  },
  methods: {
    getTotlContent,
    getBillList() {
      getMakeBillList({ shipmentId: this.shipmentObj.id }).then((res) => {
        this.billData = res.data;
      });
    },
    buildTitle() {
      const cabinetLabel = this.getCabinetName(this.shipmentObj.cabinetId);
      /* const title = `查看提单 ${this.shipmentObj.selfNo ?? ""} 柜号：${
        this.shipmentObj.cubNo ?? ""
      } 柜型：${cabinetLabel}`; */
      const title = this.$t(
        "查看提单 {selfNo} 柜号：{cubNo} 柜型：{cabinetLabel}",
        {
          selfNo: this.shipmentObj.selfNo,
          cubNo: this.shipmentObj.cubNo,
          cabinetLabel,
        }
      );
      this.$set(this.dialogCfg, "title", title);
    },
    closeDialog(type) {
      this.$set(this.dialogCfg, "visible", false);
      if (type === "query") {
        this.getBillList();
      }
      if (type === "close") {
        this.$emit("closeDialog");
      }
    },
    dialogclosed() {
      if (this.handleType === "resetBill") {
        this.getBillList();
      }
    },
    handleCommand(type, row) {
      this.handleType = type;
      switch (type) {
        case "previewBill":
          this.getBill(row);
          break;
        case "makeBill":
          this.makeBill(row);
          break;
        case "queryBill":
          this.getBill(row);
          break;
        case "resetBill":
          // 先删除，在创建
          deleteBillService(row.id).then((res) => {
            const { code } = res;
            if (code === 0) {
              this.makeBill(row);
            }
          });
          break;
        case "downloadLoadGoodsList":
          downloadFile(
            type,
            { shipmentId: this.shipmentObj.id },
            this.$t("已装单") + `(${this.shipmentObj.selfNo}).xlsx`,
            "xlsx"
          );
          return;
        case "downloadReceivableList":
          downloadFile(
            type,
            { shipmentId: this.shipmentObj.id },
            this.$t("应收汇总表") + `(${this.shipmentObj.selfNo}).xlsx`,
            "xlsx"
          );
          return;
      }
      this.currRow = row;
      this.$set(this.dialogCfg, "type", type);
      this.$set(this.dialogCfg, "width", "1200px");
      this.$set(this.dialogCfg, "visible", true);
    },
    makeBill(row) {
      makeBillService({
        orderId: row.orderId,
        shipmentId: this.shipmentObj.id,
      }).then((res) => {
        const { data } = res;
        const { titleZh = "", contentZh = "" } = data?.ladingTemplate ?? {};
        let billContent = `${titleZh}${data.orderInfo}${contentZh}`;
        this.currData = {
          billContent,
          orderNo: this.currRow.orderNo,
        };
      });
    },
    getBill(row) {
      getBillService({ id: row.id }).then((res) => {
        const { data } = res;
        this.currData = {
          billContent: data?.billContent ?? "",
          orderNo: this.currRow.orderNo,
          bpmProcessId: data.bpmProcessId,
        };
      });
    },
    clickZipDownload() {
      downloadFile(
        "zipDownload",
        { shipmentId: this.shipmentObj.id },
        this.shipmentObj.selfNo + ".zip",
        "zip"
      );
    },
  },
  computed: {
    /* 总计 */
    getSumData() {
      return `${this.billData.totalNum ?? 0}${this.$t("箱")} ${
        this.billData.totalVolume ?? 0
      }m³ ${this.billData.totalWeight ?? 0}kg`;
    },
    /* 容量 */
    calcCapacity() {
      const { cabinet } = this.billData;
      return getCapacity(cabinet);
    },
  },
};
</script>

<style lang="scss" scoped>
.shipping-ladingBill {
  .oper-button {
    text-align: right;
  }
  .table-goodList {
    p {
      margin: 0;
    }
    .goodList-div {
      border-bottom: 1px solid #e6ebf5;
      > p {
        text-align: left;
      }
      > p:last-child {
        > span {
          margin-right: 5px;
        }
      }
    }
    > div:last-child {
      border-bottom: none;
    }
  }
  .totle-info {
    font-size: 20px;
    margin-top: 15px;
  }
}
</style>