<script setup lang="ts">
import { ref } from "vue";
import { getDateDetails } from "/@/utils/constants"

const visible = ref(false);
const details = getDateDetails()

const config_1 = {
  columns: [
    {
      prop: "open_time",
      label: "开票日期"
    },
    {
      prop: "inv_number",
      label: "发票号码"
    },
    {
      prop: "inv_code",
      label: "发票代码"
    },
    {
      prop: "amount",
      label: "发票税前金额"
    },
    {
      prop: "checkNumber",
      label: "校验码"
    },
    {
      prop: "amountAfterTax",
      label: "发票税后金额"
    }
  ],
  data: [
    {
      inv_type: "纸质普通发票",
      amountAfterTax: false,
      checkNumber: true,
      inv_number: true,
      open_time: true,
      inv_code: true,
      amount: true,
    },
    {
      inv_type: "纸质专用发票",
      amountAfterTax: false,
      checkNumber: false,
      inv_number: true,
      open_time: true,
      inv_code: true,
      amount: true
    },
    {
      inv_type: "电子普通发票",
      open_time: true,
      inv_number: true,
      inv_code: true,
      amount: true,
      checkNumber: true,
      amountAfterTax: false
    },
    {
      inv_type: "电子专用发票",
      open_time: true,
      inv_number: true,
      inv_code: true,
      amount: true,
      checkNumber: false,
      amountAfterTax: false
    },
    {
      inv_type: "电子发票（增值税专用发票）",
      open_time: true,
      inv_number: true,
      inv_code: "--",
      amount: false,
      checkNumber: "--",
      amountAfterTax: true
    },
    {
      inv_type: "电子发票（增值税普通发票）",
      open_time: true,
      inv_number: true,
      inv_code: "--",
      amount: false,
      checkNumber: "--",
      amountAfterTax: true
    }
  ]
};

const config_2 = {
  columns: [
    // {
    //   prop: "on_out_month",
    //   label: "未跨月"
    // },
    {
      prop: "out_month",
      label: "是否有信息表"
    }
  ],
  data: [
    {
      inv_type: "纸质普通发票",
      on_out_month: "--",
      out_month: false
    },
    {
      inv_type: "纸质专用发票",
      on_out_month: "--",
      out_month: true
    },
    {
      inv_type: "电子普通发票",
      on_out_month: false,
      out_month: false
    },
    {
      inv_type: "电子专用发票",
      on_out_month: true,
      out_month: true
    }
  ]
};

const config_3 = {
  columns: [{ prop: "out_month", label: "作废or红冲" }],
  data: [
    { inv_type: "纸质普通发票", on_out_month: false, out_month: true },
    { inv_type: "纸质专用发票", on_out_month: false, out_month: true },
    { inv_type: "电子普通发票", on_out_month: true, out_month: true },
    { inv_type: "电子专用发票", on_out_month: true, out_month: true }
  ]
};

const config_4 = {
  columns: [
    { prop: "tax", label: "税率" },
    {
      prop: "discount",
      label: "优惠政策"
    },
    {
      label: "增值税管理",
      level2: {
        label: "是否必填",
        prop: "addTaxRequired"
      }
    },
    {
      prop: "addTax",
      label: "增值税管理"
    },
    {
      prop: "invTag",
      label: "税率标识"
    }
  ],
  data: [
    {
      tax: "零税率",
      discount: "有优惠政策",
      addTaxRequired: true,
      addTax: "免税、不征税",
      invTag: "免税、不征税"
    },
    {
      tax: "非零税率",
      discount: "有优惠政策",
      addTaxRequired: false,
      addTax: "不填",
      invTag: "不填"
    },
    {
      tax: "零税率",
      discount: "没有优惠政策",
      addTaxRequired: false,
      addTax: "不填",
      invTag: "零税率"
    },
    {
      tax: "非零税率",
      discount: "没有优惠政策",
      addTaxRequired: false,
      addTax: "不填",
      invTag: "不填"
    }
  ]
};


const data = [
    {
      business: "对账单",
      businessType: "通用",
      before: true,
      after: true
    },
    {
      business: "对账单",
      businessType: "源头/采购",
      before: true,
      after: false
    },
    {
      business: "采购单",
      businessType: "通用",
      before: false,
      after: false
    },
    {
      business: "采购单",
      businessType: "源头/采购 -- 未对账",
      before: true,
      after: true
    },
    {
      business: "采购单",
      businessType: "源头/采购 -- 已对账",
      before: false,
      after: true
    },
]


function getSpanNumber(data, prop) {
  let length = Array.isArray(data) ? data.length : 0;
  if (length > 0) {
    let position = 0;
    let temp = data[0][prop];
    let result = [1];
    for (let i = 1; i < length; i++) {
      if (data[i][prop] == temp) {
        result[position] += 1;
        result[i] = 0;
      } else {
        position = i;
        result[i] = 1;
        temp = data[i][prop];
      }
    }
    return result;
  } else {
    return [0];
  }
}

const spanMethod = ({ row:_1, column:_2, rowIndex, columnIndex }: any) => {
    if(Number(columnIndex) === 0){
      let nameSpan = getSpanNumber(data, "business");
      return { rowspan: nameSpan[rowIndex], colspan: 1};
    }
  }

defineExpose({
  onDisplay: () => (visible.value = true)
});
</script>

<template>
  <ElDialog
    v-model="visible"
    title="使用说明"
    center
    width="1040px"
    top="8vh"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <ElRow>
      <ElCol :span="24">
        <h2>
          1.发票查验必填字段说明（适用于销售开票、销售退票、对账发票上传业务）。
        </h2>
        <div class="py-[10px] px-[20px]">
          <ElTable size="small" :data="config_1.data" border :header-cell-style="{ background: '#f5f7fa', 'text-align': 'center' }">
            <ElTableColumn prop="inv_type" label="发票类型" width="180px" />
            <ElTableColumn
              v-for="col in config_1.columns"
              :key="col.prop"
              :prop="col.prop"
              :label="col.label"
            >
              <template #="{ row }">
                <span v-if="typeof row[col.prop] === 'string'">--</span>
                <IconifyIconOffline
                  v-else
                  :style="{ color: row[col.prop] ? '#67C23A' : '#F56C6C' }"
                  :icon="row[col.prop] ? 'success' : 'close-bold'"
                />
              </template>
            </ElTableColumn>
          </ElTable>
        </div>
      </ElCol>
    </ElRow>

    <ElRow>
      <ElCol :span="12">
        <h2>2.采购单业务标签使用一览表：</h2>
        <div class="py-[10px] px-[20px]">
          <ElTable size="small" :data="data" border :header-cell-style="{ background: '#f5f7fa', 'text-align': 'center'}" :spanMethod="spanMethod">
            <ElTableColumn>
              <ElTableColumn label="结算业务" prop="business" center />
              <ElTableColumn label="业务类型" prop="businessType"  width="140px" />
            </ElTableColumn>
            
            <ElTableColumn :label="'对账创建时间:' + details.year + '/' + details.month + '/' + details.day">
              <template #header>
                <div class="flex flex-col">
                  <p>对账单创建时间:</p>
                  <p>20{{ details.year }}-{{details.month}}-{{details.day}} 00:00:00</p>
                </div>
              </template>
              <ElTableColumn label="之前" prop="before">
                <template #="{ row }">
                  <IconifyIconOffline :style="{ color: row.before ? '#67C23A' : '#F56C6C' }" :icon="row.before ? 'success' : 'close-bold'" />
                </template>
              </ElTableColumn>

              <ElTableColumn label="之后" prop="before">
                <template #="{ row }">
                  <IconifyIconOffline :style="{ color: row.after ? '#67C23A' : '#F56C6C' }" :icon="row.after ? 'success' : 'close-bold'" />
                </template>
              </ElTableColumn>
            </ElTableColumn>
          </ElTable>
        </div>
      </ElCol>

      <!-- <ElCol :span="12">
        <h2>3.红字专用信息表说明（仅开启金税设置后使用）</h2>
        <div class="py-[10px] px-[20px]">
          <ElTable
            size="small"
            :data="config_2.data"
            border
            :header-cell-style="{
              background: '#f5f7fa',
              'text-align': 'center'
            }"
          >
            <ElTableColumn prop="inv_type" label="发票类型" />
            <ElTableColumn
              v-for="col in config_2.columns"
              :key="col.prop"
              :prop="col.prop"
              label="作废or红冲"
            >
              <template #="{ row }">
                <span v-if="typeof row[col.prop] === 'string'">--</span>
                <IconifyIconOffline
                  v-else
                  :style="{ color: row[col.prop] ? '#67C23A' : '#F56C6C' }"
                  :icon="row[col.prop] ? 'success' : 'close-bold'"
                />
              </template>
            </ElTableColumn>
          </ElTable>
        </div>
      </ElCol> -->
    </ElRow>
  </ElDialog>
</template>
