<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="
      () => {
        $emit('update:dialogVisible', false);
      }
    "
  >
    <div class="fee-application">
      <h1>{{ $t("费用申请") }}-{{ consDetails.consNum }}</h1>
      <el-divider></el-divider>
      <el-form label-width="100px" inline>
        <el-form-item :label="$t('发货人') + '：'">
          <div class="content">
            {{ consDetails.consignorVO ? consDetails.consignorVO.name : "" }}
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="!!processInstanceId "
            @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.fee"
            ></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.feeCurrency"
            >
              <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="scope.row.id && modifable(scope.row)"
              @click="modify(scope.row)"
            >{{ $t("修改") }}
            </el-button
            >
            <el-button
              type="text"
              v-if="scope.row.editMode&& !processInstanceId"
              @click="del(scope.$index)"
            >删除
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.status === 0&& !processInstanceId"
              @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,
  feeApplicationListByOrderId,
  feeApplicationCancel,
  getFeeApplicationApproveByOrderId
} from "@/api/ecw/order"
import { getDictDatas, DICT_TYPE } from "@/utils/dict"
import workFlow from "@/components/WorkFlow"
import { getCons } from "@/api/ecw/cons"
import { createFeeBatchApplication, getConsFeeList } from "@/api/ecw/consFee"
import { getConsApprovalList } from "@/api/ecw/consApproval"

export default {
  name: "feeApplication",
  components: { workFlow },
  props: {
    consId: [Number, String],
    dialogVisible: {
      type: Boolean,
      default: false
    },
    currencys: String
  },
  data() {
    return {
      consDetails: {},
      // 费用列表
      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);
      return this.list
    },
    // 正在编辑的费用申请
    currentItem() {
      return this.list.find((item) => item.editMode)
    },
    // 是否修改模式
    editMode() {
      return !!this.currentItem
    },
    modifable() {
      return (item) => {
        // 审核中不允许修改
        if (this.processInstanceId) return false
        // 有未提交的不允许修改
        // if (this.feeList.length) return false;
        // 修改中的不允许修改
        if (item.editMode) return false
        return true
      }
    }
  },
  created() {
    this.getDictDatas(this.DICT_TYPE.AUDIT_STATUS).forEach((e) => {
      this.STATUS[e.value] = e.label
    })

    getCons(this.consId).then((res) => {
      this.consDetails = res.data
    })

    // 查询是否有审核中的费用申请
    getConsApprovalList({consId:this.consId,approvalType: 6,status: 1}).then((res) => {
      if (res.data.length!=0) {
        this.processInstanceId = res.data[0].formId
        this.list = JSON.parse(res.data[0].approvalDetail)
      } else {
        // 查询历史申请
        getConsFeeList({ consId: this.consId }).then((res) => {
          console.log("历史申请", res.data)
          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() {
      console.log("添加费用",this.list)
      this.list.push({
        consId: this.consId,
        feeType: undefined, //费用申请类型
        fee: undefined, //金额
        feeCurrency: undefined, //	费用申请货币类型
        remarks: undefined,
        receiveFlag: 0,
        applicationAuthor: undefined,
        status: 0
      })
    },
    deleteByFeeIsZero(id) {
      this.$confirm(this.$t("确定要删除此条费用申请么？")).then(() => {
        feeApplicationDelete(id).then((r) => {
          this.$message({
            type: "success",
            message: this.$t("删除成功")
          })
          this.$emit("update:dialogVisible", false)
        })
      })
    },
    submit() {
      // 判断费用申请是否有未填项
      // console.log("提交的费用信息列表", this.feeList)
      const errList = this.feeList.filter((item) => {
        return (
          !item["feeType"] ||
          item.fee == null || item.fee == undefined ||
          !item["feeCurrency"] ||
          !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);
      //   });
      // }

      createFeeBatchApplication({
        consFeeUpdateReqLists: this.feeList,
        copyUserId: this.selectedUsers,
        consId: this.consId
      }).then((r) => {
        if (r.code === 0) {
          this.$emit("update:dialogVisible", false)
          this.$message.success(this.$t("添加成功"))
          this.selectedUsers = []
          this.$emit("refresh")
        }
      })
    },
    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.consId).then((r) => {
          if (r.code === 0) {
            this.consDetails = 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>
