<template>
  <div class="bargainListDetail">
    <div class="bargainListDetail-main">
      <el-tabs v-model="projectTabs" v-loading="loading">
        <el-tab-pane label="平台订单详情" name="1">
          <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
            <el-collapse-item :title="'平台订单详情'" name="1">
              <show-data-table
                style="padding: -5px 0 10px 0"
                :columns="editColumns"
                :newTime="newTime"
                :sitem="sitem"
              >
                <template #status>
                  <el-tag
                    :size="tablebtnSize"
                    :type="(statusList.find((item) => item.id == sitem.status) || {}).type || ''"
                    v-text="(statusList.find((item) => item.id == sitem.status) || {}).label || '--'"
                  ></el-tag>
                </template>
              </show-data-table>
            </el-collapse-item>

            <el-collapse-item title="需求订单详情" name="2">
              <demand-detail :id="sitem.req_id" />
            </el-collapse-item>

            <el-collapse-item 
              v-loading="Statusloading"
              v-if="Number(sitem.status) > 1" 
              :title="Number(sitem.status) !== 1 && Number(sitem.status) !== 3 ? '凭证图片' : '待供应商上传凭证'" name="3" 
            >
              <credentials-node 
                @confirm="hanleSupplierUpload" 
                :readonly="Number(sitem.status) !== 1 && Number(sitem.status) !== 3"
                :url="sitem && sitem.pay_proof ? sitem.pay_proof.split(',') : ''"
              />
            </el-collapse-item>

            <el-collapse-item title="待平台审核付款凭证" name="3" v-if="Number(sitem.status) === 2" v-loading="Statusloading">
              <normal-node   @confirm="handlePlatformPay" />
            </el-collapse-item>

            <el-collapse-item title="待供应商上传发票要求" name="4" v-if="Number(sitem.status) === 4" v-loading="Statusloading">
              <wait-supplier-upload  @confirm="handleUploadInvoiceReq" />
            </el-collapse-item>

            <el-collapse-item title="发票管理" name="5" v-if="Number(sitem.status) === 5">
              <upload-invoice-node 
                :requestMethod="handleUploadInvoce" 
              />
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/platformService/settlement";
import WaitSupplierUpload from "./components/waitSupplierUpload.vue"
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";

import {
  statusList,
  editColumns,
  demandOrderColumns
} from "./columns";

export default {
  components: {
    WaitSupplierUpload
  },
  name: "settlementDetail",
  mixins: [resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size", "private_field", "isSupertube"]),
    powers() {
      const { btnList } = this.$store.getters;
      const tran = btnList.find((item) => item.menu_route == "settlementDetail") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
    ppowers() {
      const { roleProcess } = this.$store.getters;
      const tran = roleProcess.find((i) => i.process_type === "YJD") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },

  data() {
    return {
      size: "small",
      eaxmList: [],
      editColumns,
      demandOrderColumns,
      statusList,
      projectTabs: "1",
      activeNames: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "20"],
      newTime: "",
      loading: false,
      queryType: "",
      queryId: "",
      status: "",
      sitem: {},
      Statusloading: false,

      orderItem: {},
      moneyDirItem: {},
      moneyItem: {},
      BossItem: {},
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      const { id, type } = this.$route.query;
      this.queryId = id;
      this.queryType = type;
      this.projectTabs = "1";
      this.loading = true;
      await this.initData();
      this.loading = false;
    },
    async handleUploadInvoce(invoiceList){
      const params = {
        invoiceList,
        id:this.queryId
      }

      const result = await asyncRequest.upload(params)

      if(result.code === 1){
        this.initForm()
      }

      return result
    },
    async hanleSupplierUpload({credentials}){
      const pay_proof = credentials.join(',')

      this.Statusloading = true
      const { code } = await asyncRequest.status({
        status:2,
        pay_proof,
        id:this.queryId
      })

      this.Statusloading= false

      if(code !== 1) return
      this.initForm()
    },
    async handleUploadInvoiceReq({ invoice_type, invoice_id, remark:invoice_remark }){
      this.Statusloading = true
      const { code } = await asyncRequest.status({
        status:5,
        id:this.queryId,
        invoice_id,
        invoice_type,
        invoice_remark
      })
      this.Statusloading = false
      if(code !== 1) return
      this.initForm()
    },
    async handlePlatformPay({status,remark}){
      this.Statusloading = true
      const { code } = await asyncRequest.status({
        id: this.queryId,
        status: String(status) === "1" ? "4" : "3",
        remark
      })

      this.Statusloading= false

      if(code !== 1) return
      this.initForm()
    },
    handleClick(row) {
      console.log(row);
    },
    async refresh() {
      this.routeReGoto("bargainList", {});
    },
    async initData() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        id: this.queryId,
      });
      this.loading = false;
      if(code !== 1) return
      this.sitem = data;
      this.getNewTime()
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },

    // 点击业务审核的保存按钮
    async examFormSubmit(e, title) {
      if (!this.loading) {
        const { state, remark, adjunct, adjunct_name } = e;
        let model = {
          bargainNo: this.queryId,
          status: state,
          adjunct: adjunct,
          adjunct_name: adjunct_name,
          remark: remark,
        };
        await this.$confirm(`确定要提交${title}审批结果？`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const { after_price, lower_price } = this.sitem;
            if (after_price * 1 < lower_price * 1 && state + "" + "" === "1") {
              this.loading = false;
              await this.$confirm(
                `当前商品同意议价后，售价已低于系统最低售价${this.sitem.lower_price}元！`,
                `最终售价已低于系统最低售价！是否继续？`,

                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "error",
                }
              )
                .then(async () => {
                  if (adjunct === "") {
                    this.$message.warning("越线通过，附件为必填项！");
                    return;
                  }
                  this.loading = true;
                  await this.statusSubmit(model, title);
                })
                .catch(() => {
                  this.loading = false;
                  console.log("取消1");
                });
            } else {
              await this.statusSubmit(model, title);
            }
          })
          .catch(() => {
            this.loading = false;
            console.log("取消");
          });
      }
    },
    async statusSubmit(model, title) {
      if (model.status === "0") model.status = "2";
      const { code, data, message } = await asyncRequest.status(model);
      this.loading = false;
      // console.log("res", data);
      if (code === 0) {
        this.$notify.success({
          title: title + "成功！",
          message: "",
        });
        await this.initForm();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.bargainListDetail {
  position: relative;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  .bargainListDetail-main {
    position: relative;
    padding: 10px;
    height: 100%;
    width: 100%;
  }
  .bargainListDetail-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
  /deep/ .ddiv {
    border-top: 1px solid #dcdfe6;
  }
  /deep/ .dtitle {
    width: 40px;
    text-align: center;
    height: 100%;
    min-height: 100%;
    ul {
      padding: 12px 0 0 0;
    }
  }
  /deep/ .dmain {
    padding: 20px 0 0 0;
    width: calc(100% - 40px);
    border-left: 1px solid #dcdfe6;
  }
}
</style>
