<template>
  <el-form
    ref="ruleForm"
    :rules="rules"
    :model="ruleForm"
    label-position="left"
    label-width="95px"
    size="mini"
    v-loading="loading"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="需求订单" prop="req_id" v-if="!demandInfo">
          <el-input placeholder="请选择需求订单" @focus="demandVisible = true" />
        </el-form-item>
      </el-col>
    </el-row>

    <div style="display:flex;margin-bottom:10px" v-if="demandInfo">
      <demand-detail :id="demandInfo.id" />
      <el-tooltip placement="top" content="重新选择需求订单">
        <i
          class="el-icon-circle-close"
          style="font-size:18px;margin:0px 10px;cursor:pointer"
          @click="handleDemandChange(null)"
        />
      </el-tooltip>
    </div>

    <el-row gutter="20">
      <el-col :span="12">
        <el-form-item label="申请总金额" prop="total_amount">
          <digital-input
            :values="ruleForm.total_amount"
            :placeholder="'采购毛利率'"
            :position="'right'"
            :controls="false"
            :precision="2"
            :size="'mini'"
            :append="'元'"
            :min="0"
            @reschange="number_change($event)"
          />
        </el-form-item>

        <el-form-item label="发票类型" prop="invoice_type">
          <el-select v-model="ruleForm.invoice_type" style="width:100%" placeholder="发票类型">
            <el-option
              v-for="invoice in openInvoiceTypeList"
              :key="invoice.value"
              :value="invoice.value"
              :label="invoice.label"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input placeholder="备注" v-model="ruleForm.remark" style="width:100%" type="textarea" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="发票抬头" prop="invoice_id">
          <el-input
            :disabled="!demandInfo || !demandInfo.companyNo"
            v-if="!invoiceInfo"
            placeholder="请选择发票抬头"
            @focus="titleVisible = true"
          />

          <div style="display:flex;margin-bottom:10px" v-if="invoiceInfo">
            <show-data-table
              border
              :sitem="invoiceInfo"
              style="padding: -5px 0 10px 0"
              :newTime="newTime"
              :columns="invoiceColumns"
            >
              <template #tel>{{invoiceInfo.address}}{{invoiceInfo.tel}}</template>

              <template #bank>{{invoiceInfo.bank_name}}{{invoiceInfo.bank_account}}</template>
            </show-data-table>

            <el-tooltip placement="top" content="重新选择发票抬头">
              <i
                class="el-icon-circle-close"
                style="font-size:18px;margin:0px 10px;cursor:pointer"
                @click="handleTitleChange(null)"
              />
            </el-tooltip>
          </div>
        </el-form-item>
      </el-col>
    </el-row>

    <div style="display:flex;justify-content:flex-end;margin-bottom:10px">
      <el-button size="mini" type="primary" @click="onSubmit">保存</el-button>
    </div>

    <demand-modal :visible.sync="demandVisible" @change="handleDemandChange" />

    <title-modal
      :visible.sync="titleVisible"
      :companyNo="demandInfo ? demandInfo.companyNo : ''"
      @change="handleTitleChange"
    />
  </el-form>
</template>

<script>
import DemandModal from "./demandModal.vue";
import TitleModal from "./titleModal.vue";
import { demandDetailColumns } from "./_columns";
import demandRequest from "@/apis/service/customerService/demandOrder";
import {
  demandStatusOptions,
  invoiceTypeList,
  openInvoiceTypeList
} from "@/assets/js/statusList";
import asyncRequest from "@/apis/service/customerService/invoiceApply";

/** 
  * @props
  * req_id 需求订单
    invoice_id /发票抬头
    invoice_type 发票类型
    total_amount 申请总金额
    remark // 备注
  */

export default {
  name: "CreateInvoiceNode",
  props: ["isApply"], //isApply 是否为创建开票申请
  components: { DemandModal, TitleModal },
  data() {
    return {
      loading: false,
      demandStatusOptions,
      openInvoiceTypeList,
      invoiceTypeList,
      demandInfo: null,
      invoiceInfo: null,
      demandDetailColumns,
      demandVisible: false,
      titleVisible: false,
      invoiceColumns: [
        {
          prop: "title",
          label: "抬头",
          span: 24
        },
        {
          prop: "tax_no",
          label: "纳税人识别号",
          span: 24
        },
        {
          prop: "tel",
          label: "地址、电话",
          span: 24,
          _slot_: "tel"
        },
        {
          prop: "bank_account",
          label: "开户行及账号",
          span: 24,
          _slot_: "bank"
        }
      ],
      newTime: "",
      demandVisible: false,
      ruleForm: {
        req_id: "",
        invoice_id: "", //发票抬头
        invoice_type: "", //发票类型
        total_amount: "", //申请总金额
        remark: "" // 备注
      },
      rules: {
        invoice_id: [
          {
            required: true,
            trigger: "change",
            message: "请输入发票抬头"
          }
        ],
        req_id: [
          {
            required: true,
            trigger: "change",
            message: "请选择需求订单"
          }
        ],
        invoice_type: [
          {
            required: true,
            trigger: "change",
            message: "请选择发票类型"
          }
        ],
        total_amount: [
          {
            required: true,
            trigger: "change",
            message: "请输入申请总金额"
          }
        ],
        remark: [
          {
            required: true,
            trigger: "change",
            message: "请输入发票备注"
          }
        ]
      }
    };
  },
  methods: {
    async onSubmit() {
      try {
        await this.$refs.ruleForm.validate();
        const applyAmount = this.ruleForm.total_amount;
        const winvAmount = this.demandInfo.winv_fee;

        if (Number(applyAmount) > Number(winvAmount)) {
          this.$message.warning("申请总金额不能超过未开票金额");
          return;
        }

        this.loading = true;
        const { code } = await asyncRequest.create(this.ruleForm);
        this.loading = false;
        if (code !== 1) return;
        this.$router.push("/customerService/invoiceApply");
      } catch (err) {
        console.log(err);
      }
    },
    number_change(e) {
      this.ruleForm.total_amount = e || 0;
    },
    async handleTitleChange(invoiceInfo) {
      if (!invoiceInfo) {
        this.invoiceInfo = null;
        this.ruleForm.invoice_id = "";
        return;
      }

      this.invoiceInfo = invoiceInfo;
      this.ruleForm.invoice_id = invoiceInfo.id;
    },
    async handleDemandChange(demandInfo) {
      if (!demandInfo) {
        this.demandInfo = null;
        this.invoiceInfo = null;
        this.ruleForm.invoice_id = "";
        this.ruleForm.req_id = "";
        return;
      }

      this.demandLoading = true;
      const { data, code } = await demandRequest.detail({ id: demandInfo.id });
      this.demandLoading = false;
      if (code !== 1) return;
      this.demandInfo = data;
      this.ruleForm.req_id = data.id;
    }
  }
};
</script>
