<template>
  <el-form
    ref="ruleForm"
    :rules="rules"
    :model="ruleForm"
    label-position="left"
    label-width="95px"
    size="mini"
    v-loading="loading"
  >
    <el-row gutter="20">
      <el-col :span="12">
        <el-form-item label="发票类型" prop="invoice_type">
          <el-select v-model="ruleForm.invoice_type" placeholder="发票类型" style="width:100%">
            <el-option
              v-for="{ value, label } in openInvoiceTypeList"
              :value="value"
              :label="label"
              :key="value"
            />
          </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 v-if="!invoiceInfo" placeholder="请选择发票抬头" @focus="titleVisible = true" />

          <div style="display:flex;margin-bottom:10px" v-else>
            <show-data-table
              :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>

    <title-modal :visible.sync="titleVisible" :code="code" @change="handleTitleChange" />

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

<script>
import {
  demandStatusOptions,
  invoiceTypeList,
  openInvoiceTypeList
} from "@/assets/js/statusList";

import TitleModal from "./titleModal.vue";

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

export default {
  name: "CreateInvoiceNode",
  props: ["isApply", "code"], //isApply 是否为创建开票申请
  components: { TitleModal },
  data() {
    return {
      loading: false,
      demandStatusOptions,
      invoiceTypeList,
      openInvoiceTypeList,
      demandInfo: null,
      invoiceInfo: null,
      titleVisible: false,
      demandVisible: false,
      invoiceColumns: [
        {
          prop: "title",
          label: "抬头",
          span: 24
        },
        {
          prop: "tax_no",
          label: "纳税人识别号",
          span: 24
        },
        {
          prop: "tel",
          label: "地址、电话",
          span: 24,
          _slot_: "tel"
        },
        {
          prop: "bank_account",
          label: "开户行及账号",
          _slot_: "bank",
          span: 24
        }
      ],
      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 handleTitleChange(invoiceInfo) {
      if (!invoiceInfo) {
        this.invoiceInfo = null;
        this.ruleForm.invoice_id = "";
        return;
      }

      this.invoiceInfo = invoiceInfo;
      this.ruleForm.invoice_id = invoiceInfo.id;
    },
    async onSubmit() {
      try {
        await this.$refs.ruleForm.validate();
        this.$emit("confirm", this.ruleForm);
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>
