<template>
  <el-dialog
    :title="contentTitle"
    :visible.sync="visible"
    width="888px"
    :center="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
  >
    <div v-html="contentHtml"></div>

    <div slot="footer">
      <el-checkbox
        label="不再提示"
        class="tip-flag-checkbox"
        v-if="autoFlag"
        v-model="tipFlagChecked"
      ></el-checkbox>

      <el-button
        @click="handlePolicyDialogClose"
        :disabled="loadingSetDefaultEnable"
        :loading="loadingClose"
      >
        关 闭
      </el-button>

      <el-button
        type="primary"
        v-if="policyValid && !useFlag"
        :disabled="loadingClose"
        :loading="loadingSetDefaultEnable"
        @click="handleSetDefaultEnable"
      >
        我是增值税小规模纳税人 > 默认启用“免征增值税”
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
  name: "Policy2022040101ContentDialog",
  data() {
    return {
      visible: false,
      contentTitle: "税务政策通知",
      contentHtml: `
          <p>&nbsp;&nbsp;自2022年4月1日至2022年12月31日，增值税小规模纳税人适用3%征收率的应税销售收入，免征增值税；适用3%预征率的预缴增值税项目，暂停预缴增值税。</p>
          <br/>
          <p>&nbsp;&nbsp;《财政部 税务总局关于延续实施应对疫情部分税费优惠政策的公告》（财政部 税务总局公告2021年第7号）第一条规定的税收优惠政策，执行期限延长至2022年3月31日。</p>
          <br/>
          <p>&nbsp;&nbsp;政策解读：</p>
          <p>&nbsp;&nbsp;1、<span style="color: red;font-weight: 600;">小规模纳税人</span>的1%税率税收优惠政策执行期限延长至2022年3月31日，自2022年4月1日起税率恢复为3%。</p>
          <p>&nbsp;&nbsp;2、增值税普通发票：自2022年4月1日至2022年12月31日，<span style="color: red;font-weight: 600;">增值税小规模纳税人</span>适用3%征收率应税销售收入免征增值税的，<span style="color: red;font-weight: 600;">应按规定开具免税普通发票。</span></p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;增值税专用发票：自2022年4月1日至2022年12月31日，<span style="color: red;font-weight: 600;">增值税小规模纳税人</span>选择放弃免税并开具增值税专用发票的，<span style="color: red;font-weight: 600;">应开具征收率为3%的增值税专用发票。</span></p>
          <br/>
          <p>&nbsp;&nbsp;公告及相关政策链接：</p>
          <p>&nbsp;&nbsp;<a href="http://www.chinatax.gov.cn/chinatax/n359/c5173850/content.html" target="_blank" rel="noopener noreferrer">http://www.chinatax.gov.cn/chinatax/n359/c5173850/content.html</a></p>
          <p>&nbsp;&nbsp;<a href="http://www.chinatax.gov.cn/chinatax/n359/c5173863/content.html" target="_blank" rel="noopener noreferrer">http://www.chinatax.gov.cn/chinatax/n359/c5173863/content.html</a></p>
          `,

      // 启用按钮状态控制；
      loadingSetDefaultEnable: false,
      // 关闭按钮状态控制；
      loadingClose: false,

      // 不再提示；
      tipFlagChecked: false,

      // 自动弹窗标识，用于控制“不再提示”勾选框显示；
      autoFlag: false,
    };
  },
  mounted() {
    this.getPolicyAsync();
  },
  computed: {
    ...mapGetters("policy2022040101", ["visibleTip", "useFlag", "policyValid"]),
  },
  watch: {
    visibleTip: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          this.open(newVal);
        }
      },
    },
  },
  methods: {
    handlePolicyDialogClose() {
      this.visible = false;
      if (this.tipFlagChecked) {
        this.loadingClose = true;
        this.savePolicyAsync({ tipFlag: !this.tipFlagChecked })
          .then((res) => {
            // 设置成功，关闭弹窗；
            this.visible = false;
          })
          .catch((err) => {
            // 保存失败，提示；
            this.$message.error(err.msg || err);
          })
          .finally(() => {
            this.loadingClose = false;
          });
      }
    },

    handleSetDefaultEnable() {
      const args = { useFlag: true };
      if (this.tipFlagChecked) {
        args.tipFlag = !this.tipFlagChecked;
      }

      this.loadingSetDefaultEnable = true;
      this.savePolicyAsync(args)
        .then((res) => {
          // 设置成功，关闭弹窗；
          this.visible = false;
        })
        .catch((err) => {
          // 保存失败，提示；
          this.$message.error(err.msg || err);
        })
        .finally(() => {
          this.loadingSetDefaultEnable = false;
        });
    },

    /**
     * 打开弹窗；
     */
    open(autoFlag = false) {
      this.SET_DISPLAYED_TIP(true);
      this.autoFlag = autoFlag;
      this.visible = true;
    },

    ...mapMutations("policy2022040101", ["SET_DISPLAYED_TIP"]),
    ...mapActions("policy2022040101", ["getPolicyAsync", "savePolicyAsync"]),
  },
};
</script>

<style scoped>
.tip-flag-checkbox {
  margin-right: 20px;
}
</style>
