<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="
      () => {
        $emit('update:dialogVisible', false);
      }
    "
  >
    <div class="fee-application">
      <h1>{{ $t("费用申请") }}-{{ orderDetails.orderNo }}</h1>
      <el-divider></el-divider>
      <el-form label-width="100px" inline>
        <el-form-item :label="$t('订单号') + ':'"
          ><div class="content">
            {{ orderDetails.orderNo }}
          </div></el-form-item
        >
        <el-form-item :label="$t('发货人') + '：'"
          ><div class="content">
            {{ orderDetails.consignorVO ? orderDetails.consignorVO.name : "" }}
          </div></el-form-item
        >
        <el-form-item :label="$t('唛头')"
          ><div class="content">{{ orderDetails.marks }}</div></el-form-item
        >
        <el-form-item>
          <el-button
            :disabled="!!processInstanceId || editMode"
            @click="addCost"
            >{{ $t("添加申请") }}</el-button
          ></el-form-item
        >
      </el-form>
      <el-table :data="list">
        <el-table-column :label="$t('序号')" type="index"></el-table-column>
        <el-table-column :label="$t('费用类型')">
          <template v-slot:default="scope">
            <dict-selector
              :disabled="!scope.row.editMode && !!scope.row.status"
              :type="DICT_TYPE.FEE_TYPE"
              v-model="scope.row.feeType"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('金额')">
          <template v-slot:default="scope">
            <el-input
              :disabled="!scope.row.editMode && !!scope.row.status"
              v-model.number="scope.row.applicationFee"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('货币类型')">
          <template v-slot:default="scope">
            <el-select
              :disabled="!scope.row.editMode && !!scope.row.status"
              v-model="scope.row.applicationFeeCurrency"
            >
              <el-option
                v-for="item in JSON.parse(currencys)"
                :key="item.id"
                :label="isChinese ? item.titleZh : item.titleEn"
                :value="item.id"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('付款类型')">
          <template v-slot="{ row }">
            <dict-selector
              :disabled="!row.editMode && !!row.status"
              :type="DICT_TYPE.PAYMENT_TYPE"
              v-model="row.payType"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('备注')">
          <template v-slot:default="scope">
            <el-input
              :disabled="!scope.row.editMode && !!scope.row.status"
              v-model="scope.row.remarks"
              type="textarea"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('确认收款')">
          <template v-slot:default="scope">
            <dict-tag
              :type="DICT_TYPE.ECW_RECEIVABLE_STATE"
              :value="scope.row.receiveFlag"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('申请人')">
          <template v-slot:default="scope">
            {{
              scope.row.status === 0
                ? $t("未提交")
                : scope.row.applicationAuthor
            }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')">
          <template v-slot:default="scope">
            <el-tag v-if="scope.row.status !== 0 && !scope.row.editMode">{{
              STATUS[scope.row.status]
            }}</el-tag>
            <!--el-button type="text" v-if="scope.row.status == 1" @click="examineFn">{{$t('审核中')}}</el-button-->
            <el-button
              type="text"
              v-if="modifable(scope.$index)"
              @click="modify(scope.row)"
              >{{ $t("修改") }}</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.status === 0"
              @click="del(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 20px">
        <work-flow xmlkey="free_apply" v-model="selectedUsers" />
      </div>
      <div style="text-align: center; margin-top: 20px">
        <el-button
          type="primary"
          v-if="!processInstanceId"
          style="margin-right: 30px"
          :disabled="!feeList.length && !editMode"
          @click="submit"
          >{{ $t("提交") }}</el-button
        >
        <el-button
          type="primary"
          v-if="processInstanceId"
          style="margin-right: 30px"
          @click="goProcessDetail"
          >{{ $t("审核中") }}</el-button
        >
        <el-button
          type="primary"
          v-if="processInstanceId"
          style="margin-right: 30px"
          @click="cancel"
          >{{ $t("取消审核") }}</el-button
        >
        <el-button @click="$emit('update:dialogVisible', false)">{{
          $t("返回")
        }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  getOrder,
  feeApplicationCreateBatch,
  ApplicationListByOrderId,
  applicationUpdate,
  feeApplicationListByOrderId,
  feeApplicationCancel,
  getFeeApplicationApproveByOrderId,
  getBatchFeeByProcessId,
  qetBatchFeeByBusinessId,
  getBatchFeeByBusinessId,
} from "@/api/ecw/order";
import { getDictDatas, DICT_TYPE } from "@/utils/dict";
import workFlow from "@/components/WorkFlow";
export default {
  name: "feeApplication",
  components: { workFlow },
  props: {
    orderId: [Number, String],
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    currencys: String,
  },
  data() {
    return {
      orderDetails: {},
      // 费用列表
      list: [],
      // 审核ID，没有则表示不在审核中
      processInstanceId: null,

      DICT_TYPE,
      getDictDatas,
      STATUS: {},
      selectedUsers: [],
    };
  },
  computed: {
    isChinese() {
      return this.$i18n.locale === "zh_CN";
    },
    feeList() {
      return this.list.filter((item) => item.status === 0);
    },
    // 正在编辑的费用申请
    currentItem() {
      return this.list.find((item) => item.editMode);
    },
    // 是否修改模式
    editMode() {
      return !!this.currentItem;
    },
    modifable() {
      return (index) => {
        // 审核中不允许修改
        if (this.processInstanceId) return false;
        // 有未提交的不允许修改
        if (this.feeList.length) return false;
        // 有修改中的不允许修改
        if (this.list.findIndex((item) => item.editMode) > -1) return false;
        return true;
      }
    }   
  },
  created() {
    this.getDictDatas(this.DICT_TYPE.AUDIT_STATUS).forEach((e) => {
      this.STATUS[e.value] = e.label;
    });

    getOrder(this.orderId).then((res) => {
      this.orderDetails = res.data;
    });

    // 查询历史申请
    feeApplicationListByOrderId({ orderId: this.orderId }).then((res) => {
      this.list = res.data;
    });

    // 查询是否有审核中的费用申请
    getFeeApplicationApproveByOrderId(this.orderId).then((res) => {
      if (res.data.formId) {
        this.processInstanceId = res.data.formId;
        /*getBatchFeeByBusinessId(res.data.orderApprovalId).then(res => {
          this.list = res.data
        })*/
      }
    });
  },
  methods: {
    del(index) {
      this.$confirm(this.$t("确定要删除此条费用申请么？")).then(() => {
        this.list.splice(index, 1);
      });
    },
    // 修改
    modify(item) {
      this.$set(item, "editMode", true);
    },
    addCost() {
      this.list.push({
        orderId: this.orderId,
        feeType: undefined, //费用申请类型
        applicationFee: undefined, //金额
        applicationFeeCurrency: undefined, //	费用申请货币类型
        remarks: undefined,
        receiveFlag: 0,
        applicationAuthor: undefined,
        status: 0,
      });
    },
    submit() {
      // 判断费用申请是否有未填项
      const errList = this.feeList.filter((item) => {
        return (
          !item["feeType"] ||
          !item["applicationFee"] ||
          !item["applicationFeeCurrency"] ||
          !item["payType"]
        );
      });
      if (errList.length) {
        return this.$message.error("请填写完整费用申请信息");
      }
      if (this.editMode) {
        // 要提交status=1,否则保持原状态
        const data = {
          ...this.currentItem,
          status: 1,
          copyUserId: this.selectedUsers,
        };
        return applicationUpdate(data).then((r) => {
          this.$message.success(this.$t("修改成功"));
          this.$emit("update:dialogVisible", false);
        });
      }

      feeApplicationCreateBatch({
        orderFeeApplicationCreateReqVOList: this.feeList,
        copyUserId: this.selectedUsers,
        orderId: this.orderId,
      }).then((r) => {
        if (r.code === 0) {
          this.$emit("update:dialogVisible", false);
          this.$message.success(this.$t("添加成功"));
          this.selectedUsers = [];
        }
      });
    },
    goProcessDetail() {
      this.$emit("update:dialogVisible", false);
      this.$router.push(
        "/bpm/process-instance/detail?id=" + this.processInstanceId
      );
    },
    cancel() {
      this.$prompt(this.$t("请输入取消原因"), this.$t("提示"), {
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
      })
        .then(({ value }) => {
          let item = this.list.find((e) => e.status === 1);
          feeApplicationCancel({
            huifu: value,
            bpmProcessId: this.processInstanceId,
          }).then((r) => {
            this.$message({
              type: "success",
              message: this.$t("取消成功"),
            });
            this.$emit("update:dialogVisible", false);
          });
        })
        .catch(() => {});
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getOrderList();
        getOrder(this.orderId).then((r) => {
          if (r.code === 0) {
            this.orderDetails = r.data;
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.fee-application {
  padding: 0 20px;
  h1 {
    font-weight: 600;
    font-size: 20px;
  }
  .content {
    width: 200px;
  }
}
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>