<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="2" v-if="id === 'add'">
              <create-invoice-apply />
            </el-collapse-item>

            <template v-else>
              <el-collapse-item title="开票申请详情" name="4">
                <show-data-table
                  style="margin-bottom:10px"
                  :newTime="newTime"
                  :sitem="sitem"
                  :columns="invoiceApplyColumns"
                >
                  <template #company>
                    <div style="display:flex">
                      <p style="margin-right:5px">{{sitem.companyName}}</p>

                      <el-tooltip :content="'客户公司编号 : ' + sitem.companyNo" placement="top">
                        <i class="el-icon-warning-outline" />
                      </el-tooltip>
                    </div>
                  </template>

                  <template #title>
                    <div style="display:flex;height:23px">
                      <p style="margin-right:5px">{{sitem.invoice_title}}</p>

                      <el-popover placement="top" trigger="hover">
                        <show-data-table 
                          :sitem="sitem"
                          style="padding: -5px 0 10px 0"
                          :columns="invoiceColumns"
                        >
                          <template #tel>
                            {{sitem.invoice_addr}} {{sitem.invoice_mobile}}
                          </template>

                          <template #bank>
                            {{sitem.invoice_bank}} {{sitem.invoice_bankNo}}
                          </template>
                        </show-data-table>

                        <template #reference>
                          <i class="el-icon-warning-outline" />
                        </template>
                      </el-popover>
                    </div>
                  </template>

                  <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>

                  <template #invoice_type>
                    <el-tag size="mini">
                      {{(invoiceTypeList.find(({value}) => value === String(sitem.invoice_type)) || {}).label || '--'}}
                    </el-tag>
                  </template>
                </show-data-table>
              </el-collapse-item>

              <el-collapse-item title="需求订单详情" name="3">
                <demand-detail :id="sitem.req_id" />
              </el-collapse-item>
              
              <el-collapse-item title="发票申请管理" name="5" v-if="Number(sitem.status) === 2">
                <upload-invoice-node :requestMethod="handleInvoiceUpload" />
              </el-collapse-item>
            </template>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { demandColumns, statusList, invoiceApplyColumns} from "./columns";
import asyncRequest from "@/apis/service/customerService/invoiceApply";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";

import CreateInvoiceApply from "./components/createInvoiceApply.vue"
import { invoiceTypeList } from '@/assets/js/statusList';

export default {
  name: "invoiceApplyDetail",
  mixins: [resToken],
  components:{ CreateInvoiceApply },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size", "private_field", "isSupertube"]),
    id(){
      return this.$route.query.id
    },
    powers() {
      const { btnList } = this.$store.getters;
      const tran = btnList.find((item) => item.menu_route == "invoiceApplyDetail") || {};
      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 {
      invoiceTypeList,
      size: "small",
      eaxmList: [],
      demandColumns,
      statusList,
      projectTabs: "1",
      invoiceApplyColumns,
      activeNames: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "20"],
      newTime: "",
      loading: false,
      queryType: "",
      queryId: "",
      status: "",
      sitem: null,
      orderItem: {},
      moneyDirItem: {},
      moneyItem: {},
      BossItem: {},
      invoiceColumns:[
        {
          prop: 'invoice_code',
          label: '纳税人识别号',
          span:24
        },
        {
          prop: 'tel',
          label: '地址、电话',
          span:24,
          _slot_: 'tel'
        },
        {
          prop: 'bank_account',
          label: '开户行及账号',
          span:24,
          _slot_:'bank'
        }
      ],
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      const { id, type } = this.$route.query;
      this.queryId = id;
      this.queryType = type;
      this.projectTabs = "1";
      this.loading = true;

      if(id !== 'add'){
        await this.initData();
      }
      
      this.loading = false;
    },

    handleClick(row) {
      console.log(row);
    },
    async initData() {
      this.loading = true;
      const invoice = await asyncRequest.detail({
        id: this.$route.query.id
      })

      this.loading = false
      if(invoice.code !== 1) return
      
      this.sitem = invoice.data
      this.getNewTime()
    },

    getNewTime() {
      this.newTime = new Date().valueOf();
    },

    async handleInvoiceUpload(invoiceList){
      const params = {
        invoiceList,
        id:this.sitem.id
      }

      const result = await asyncRequest.upload(params)
      
      if(result.code === 1){
        this.initForm()
      }

      return result
    },

    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>
