<script setup lang="ts">
import { ref } from "vue";
const visible = ref(false);

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: "on_out_month",
    //   label: "未跨月"
    // },
    {
      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: "不填"
    }
  ]
};

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

<template>
  <ElDialog
    v-model="visible"
    title="使用说明"
    center
    width="1040px"
    top="8vh"
    append-to-body
  >
    <ElRow>
      <h1>测试是否正常更新</h1>
      <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="config_3.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="col.label"
            >
              <template #="{ row }">
                <ElTag :type="row[col.prop] ? 'error' : 'info'" size="small">
                  {{ row[col.prop] ? "红冲" : "作废" }}
                </ElTag>
              </template>
            </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>

      <ElCol :span="24">
        <h2>4.金税系统类目设置说明（不管金税设置是否开启）</h2>
        <div class="py-[10px] px-[20px]">
          <ElTable
            size="small"
            :data="config_4.data"
            border
            :header-cell-style="{
              background: '#f5f7fa',
              'text-align': 'center'
            }"
          >
            <template v-for="col in config_4.columns" :key="col.prop">
              <ElTableColumn
                :prop="col.prop"
                :label="col.label"
                v-if="!col.level2"
              >
                <template #="{ row }">
                  <span v-if="typeof row[col.prop] === 'string'">{{
                    row[col.prop]
                  }}</span>

                  <IconifyIconOffline
                    v-else
                    :style="{ color: row[col.prop] ? '#67C23A' : '#F56C6C' }"
                    :icon="row[col.prop] ? 'success' : 'close-bold'"
                  />
                </template>
              </ElTableColumn>

              <ElTableColumn :label="col.label" v-else>
                <ElTableColumn
                  :label="col.level2.label"
                  :prop="col.level2.prop"
                >
                  <template #="{ row }">
                    <span v-if="typeof row[col.level2.prop] === 'string'">{{
                      row[col.level2.prop]
                    }}</span>

                    <IconifyIconOffline
                      v-else
                      :style="{
                        color: row[col.level2.prop] ? '#67C23A' : '#F56C6C'
                      }"
                      :icon="row[col.level2.prop] ? 'success' : 'close-bold'"
                    />
                  </template>
                </ElTableColumn>
              </ElTableColumn>
            </template>
          </ElTable>
        </div>
      </ElCol>
    </ElRow>
  </ElDialog>
</template>
