<script setup lang="ts">
import { FormRules, ElForm } from "element-plus";
import { reactive, ref } from "vue";
import { httpUpdate, httpAdd } from "/@/api/system/menuOperator";
import { responseHandle } from "/@/utils/responseHandle";
import { useNav } from "/@/layout/hooks/nav";
import { inv_type_list } from "/@/utils/status";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import RemoteSelect from "/@/components/RemoteSelect";
import { httpList as httpBuyList } from "/@/api/parameter/invoiceheader";
import { httpList as httpCompanylist } from "/@/api/parameter/finance";
import orderDialog from "./order-dialog.vue";
const { logout } = useNav();
import { ElMessage } from "element-plus";
enum FROM_TYPE {
  order = "order",
  invoice = "invoice"
}
interface orderItem {
  key: number;
  sequenceNo: string;
  inv_fee: string;
}
const modelRef = ref<InstanceType<typeof orderDialog>>(null);
const TYPE = ref<FROM_TYPE>(FROM_TYPE.order);
const formRef = ref<InstanceType<typeof ElForm>>(null);
const loading = ref(false);
const showModel = ref(false);
const orderList = ref([]);

const emit = defineEmits(["reload"]);
const initform = {
  companyNo: "", //销售方公司抬头
  buy_id: "", //购买方公司抬头
  invtype: "", //开票类型
  email: "", //邮箱
  remark: "", //备注
  orderArr: [] //开票销售单明细 obj：sequenceNo//销售单编号 inv_fee//销售单开票金额
};

const ruleForm = ref({ ...initform });
const rules = reactive<FormRules>({
  companyNo: [
    {
      required: true,
      message: "请选择销售方公司抬头",
      trigger: "change"
    }
  ],
  buy_id: [
    {
      required: true,
      message: "请选择购买方公司抬头",
      trigger: "change"
    }
  ],

  invtype: [
    {
      required: true,
      message: "请选择发票类型",
      trigger: "change"
    }
  ],

  email: [
    {
      required: true,
      message: "请输入电子邮箱",
      trigger: "blur"
    }
  ],
  remark: [
    {
      required: true,
      message: "请输入申请备注",
      trigger: "blur"
    }
  ]
  // orderArr
});

function handleUpdate() {
  const data = {
    ...ruleForm.value
  };

  return {
    data,
    api: httpUpdate
  };
}

function handleCreate() {
  const data = {
    ...ruleForm.value
  };

  return {
    data,
    api: httpAdd
  };
}

function handleEdit(index: number, row: any) {
  console.log(modelRef);
  modelRef.value.show();
  // if (index === -1) {
  //   modelRef.value.show();
  //   // showModel.value = true;
  // }
  console.log(index, row);
}
const handleDelete = (index: number, row: any) => {
  console.log(index, row);
};

function handleSave() {
  formRef.value.validate(async vaild => {
    if (vaild) {
      // if (loading.value) return;
      // const handler =
      //   TYPE.value === FROM_TYPE.create ? handleCreate : handleUpdate;
      // loading.value = true;
      // const { api, data } = handler();
      // const { message, code } = await api(data);
      // responseHandle({
      //   code,
      //   message,
      //   logout,
      //   handler: () => {
      //     loading.value = false;
      //     emit("reload");
      //   }
      // });
    }
  });
}
function menu_type_change() {
  const { invtype } = ruleForm.value;
  rules.email[0].required = invtype === "26" || invtype === "27";
}

async function companyNo_change(buy: boolean) {
  const { companyNo } = ruleForm.value;
  const { buy_id } = ruleForm.value;
  console.log(companyNo, buy_id);
}
</script>

<template>
  <div class="addEditForm">
    <el-form
      ref="formRef"
      v-loading="loading"
      :model="ruleForm"
      :rules="rules"
      label-width="90px"
      status-icon
    >
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="销售方公司抬头"
            prop="companyNo"
            label-width="135px"
          >
            <RemoteSelect
              v-model:value="ruleForm.companyNo"
              :api="httpCompanylist"
              style="width: 100%"
              placeholder="销售方公司抬头"
              response-label-prop="company_name"
              response-val-prop="companyNo"
              @itemChange="companyNo_change(false)"
            /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item
            label="购买方公司抬头"
            prop="buy_id"
            label-width="135px"
          >
            <RemoteSelect
              v-model:value="ruleForm.buy_id"
              :api="httpBuyList"
              style="width: 100%"
              placeholder="购买方公司抬头"
              response-label-prop="invoice_title"
              response-val-prop="checkNo"
              @itemChange="companyNo_change(true)"
            /> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="发票类型" prop="invtype">
            <el-select
              v-model="ruleForm.invtype"
              style="width: 100%"
              @change="menu_type_change"
              placeholder="发票类型"
            >
              <el-option
                v-for="(si, sii) in inv_type_list"
                :key="'type' + si.value + sii"
                :label="si.label"
                :value="si.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="ruleForm.email" placeholder="电子邮箱"
          /></el-form-item>
        </el-col>

        <el-col :span="9">
          <el-form-item label="申请备注" prop="remark">
            <el-input
              v-model="ruleForm.remark"
              :rows="4"
              type="textarea"
              maxlength="2000"
              placeholder="申请备注"
            /> </el-form-item
        ></el-col>
        <el-col :span="9">
          <el-form-item label="发票备注" prop="remark">
            <el-input
              v-model="ruleForm.remark"
              :rows="4"
              type="textarea"
              maxlength="2000"
              placeholder="发票备注"
            /> </el-form-item
        ></el-col>
        <el-col :span="24" v-show="TYPE === 'order'">
          <el-table :data="orderList" stripe border style="width: 100%">
            <el-table-column
              prop="sequenceNo"
              label="销售订单编号"
              width="160"
            />
            <el-table-column
              prop="address"
              label="销售方公司编号"
              width="160"
            />
            <el-table-column
              prop="address"
              label="销售方公司名称"
              width="160"
            />
            <el-table-column
              prop="address"
              label="购买方公司编号"
              width="160"
            />
            <el-table-column
              prop="address"
              label="购买方公司名称"
              width="160"
            />
            <el-table-column prop="inv_fee" label="开票金额" width="110" />

            <el-table-column>
              <template #header>
                <span>操作</span>
                <el-button size="small" class="fr" @click="handleEdit(-1, {})"
                  >添加订单</el-button
                >
              </template>
              <template #default="scope">
                <el-button
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="flex justify-end">
        <el-button :loading="loading" type="primary" @click="handleSave"
          >保存</el-button
        >
      </div>
    </el-form>
    <orderDialog ref="modelRef" />
  </div>
</template>
<style lang="scss" scoped>
.addEditForm {
  .InvoiceTmpDiv {
    font-size: 12px;
    width: 100%;
    .title {
      font-size: 26px;
      color: #b16363;
      text-align: center;
      line-height: 56px;
    }
    .extra {
      color: #b15b16;
      padding: 0 0 6px 0;
      div {
        line-height: 18px;
      }
      .content {
        color: #181818;
      }
    }
    .height84 {
      [class*="el-col-"] {
        border-right: 1px solid #b16363;
        &:last-child {
          border-right: 0px;
        }
      }
      ul {
        padding: 15px 0;
        // border-right: 1px solid #b16363;
        li {
          height: 20px;
          line-height: 20px;
        }
      }
      .el-col-15 {
        padding: 5px 10px;
        div {
          line-height: 20px;
        }
      }
      .el-col-7 {
        padding: 5px 10px;
        line-height: 20px;
      }
    }
    .row {
      border: 1px solid #b16363;
      border-bottom: none;
      color: #b15b16;
      &.con {
        padding: 5px 0;
        line-height: 22px;
      }
      .content {
        color: #181818;
      }
      .col_1 {
        width: 4.16%;
      }
      .col_2 {
        width: 8.33%;
      }
      .col_3 {
        width: 12.5%;
      }
      .col_5 {
        width: 20.83%;
      }
      .col_6 {
        width: 25%;
      }
      .col_7 {
        width: 29.16%;
      }
      .col_8 {
        width: 33.33%;
      }
      .col_14 {
        width: 58.33%;
      }
      .col_15 {
        width: 62.5%;
      }
      .col_17 {
        width: 70.83%;
      }
      .col_18 {
        width: 75%;
      }
      .col_24 {
        width: 100%;
      }
      .col_1,
      .col_2,
      .col_3,
      .col_4,
      .col_5,
      .col_6,
      .col_7,
      .col_8,
      .col_14,
      .col_15,
      .col_17,
      .col_18,
      .col_24 {
        display: inline-block;
        padding: 8px;
        box-sizing: border-box;
        vertical-align: middle;
        border-left: 1px solid #b16363;
        height: 100%;
        &.no-border {
          border-left: none;
        }
      }
    }
    .row-div {
      border: 1px solid #b16363;
      // padding:7px 0;
      border-bottom: 0px;
      [class*="el-col-"] {
        padding: 4px 0;
        line-height: 22px;
        border-right: 1px solid #b16363;
        &:last-child {
          border-right: 0px;
        }
      }
      .el-row {
        &:first-child {
          [class*="el-col-"] {
            padding-top: 8px;
          }
        }
        &:last-child {
          [class*="el-col-"] {
            padding-bottom: 10px;
          }
        }
      }
    }

    .last-row {
      padding: 6px 0 0 0;
      .content {
        color: #181818;
      }
      color: #b15b16;
      border-top: 1px solid #b16363;
    }
    .label {
      width: 78px;
      display: inline-block;
      text-align-last: justify;
      text-align: justify;
    }
    .title-label {
      width: 52px;
    }
  }
}
</style>
