<template>
  <div class="select-invoice-products-item">
    <div class="isp-ent-info">
      <span v-text="bind.entName" class="ent-name"></span>
      <span v-text="bind.entTaxId"></span>
    </div>

    <el-row :gutter="20" class="actions-container">
      <el-col :span="4">
        <el-input v-model="invoiceProductId" readonly></el-input>
      </el-col>

      <el-col :span="20">
        <el-button
          type="primary"
          plain
          icon="el-icon-edit-outline"
          @click="handleSelectInvoiceProductDialogOpen"
        >
          立即修改
        </el-button>
      </el-col>
    </el-row>

    <el-table v-if="existSelectedItem" :data="selectedItem" border>
      <el-table-column
        prop="productName"
        label="产品名称"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="taxationCateCode"
        label="税收分类编码"
        width="160"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="taxRate"
        label="税率"
        width="120"
        :formatter="fmtTaxRate"
      ></el-table-column>

      <el-table-column
        prop="price"
        label="单价"
        width="120"
        show-overflow-tooltip
        :formatter="fmtPrice"
      ></el-table-column>

      <el-table-column
        prop="taxPriceFlag"
        label="含税价标志"
        width="120"
        :formatter="fmtTaxPriceFlag"
      ></el-table-column>

      <el-table-column
        prop="taxationCateName"
        label="税收分类名称"
        width="120"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="taxationCateAbbr"
        label="税收分类简称"
        width="120"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="preferentialFlag"
        label="使用优惠政策"
        width="120"
        :formatter="fmtPreferentialFlag"
      ></el-table-column>

      <el-table-column
        prop="preferentialType"
        label="优惠政策类型"
        width="120"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="zeroRateFlag"
        label="零税率标识"
        width="120"
        :formatter="fmtZeroRateFlag"
      ></el-table-column>

      <el-table-column fixed="right" align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            icon="el-icon-delete"
            @click="handleSelectedItemDel(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <select-invoice-product-dialog
      ref="selectInvoiceProductDialog"
      @selected="handleDialogSelectedProduct"
    ></select-invoice-product-dialog>
  </div>
</template>

<script>
import SelectInvoiceProductDialog from "@/pages/commodity/components/SelectInvoiceProductDialog.vue";
import ProductService from "@/api/product";

export default {
  name: "SelectInvoiceProductsItem",
  components: {
    SelectInvoiceProductDialog,
  },
  props: {
    /**
     * 签约企业信息；
     */
    bind: {
      type: Object,
      default: () => ({
        entName: "",
        entTaxId: "",
        infoId: "",
        // 处理已存在的情况；
        invoiceProductId: "",
      }),
    },
  },
  data() {
    return {
      // 默认值“无”；
      invoiceProductId: this.bind.invoiceProductId || "无",
      selectedItem: [],
    };
  },
  computed: {
    /**
     * 是否存在选中项目；
     */
    existSelectedItem() {
      const list = this.selectedItem || [];
      return list.length > 0;
    },
  },
  mounted() {
    this.$emit("init", {
      infoId: this.bind.infoId,
      invoiceProductId: this.invoiceProductId,
    });

    if (this.invoiceProductId && this.invoiceProductId !== "无") {
      const _this = this;
      _this.loading = true;
      ProductService.findEntProductById(this.invoiceProductId)
        .then((val) => {
          _this.selectedItem = [val.data];
        })
        .catch((err) => {
          _this.$message.error(err);
        })
        .finally(() => {
          _this.loading = false;
        });
    }
  },
  methods: {
    fmtTaxRate(row, column, cellValue) {
      return Number.parseFloat(cellValue) * 100 + "%";
    },
    fmtPrice(row, column, cellValue) {
      return cellValue != null ? "￥" + cellValue : "";
    },
    fmtTaxPriceFlag(row, column, cellValue) {
      if (cellValue) {
        return "含税";
      } else {
        return "不含税";
      }
    },
    fmtPreferentialFlag(row, column, cellValue) {
      if (cellValue === 0) {
        return "不使用";
      } else if (cellValue === 1) {
        return "使用";
      }
      return cellValue;
    },
    fmtZeroRateFlag(row, column, cellValue) {
      if (cellValue == null) {
        return "无";
      } else if (cellValue === 1) {
        return "免税";
      } else if (cellValue === 2) {
        return "不征收";
      } else if (cellValue === 3) {
        return "普通零税率";
      }
      return cellValue;
    },

    handleSelectInvoiceProductDialogOpen() {
      this.$refs.selectInvoiceProductDialog.open(this.bind.entTaxId);
    },

    handleDialogSelectedProduct(item) {
      this.invoiceProductId = item.productId;
      this.selectedItem = [item];

      this.changeEmit();
    },

    handleSelectedItemDel() {
      this.selectedItem = [];
      this.invoiceProductId = "无";

      this.changeEmit();
    },

    changeEmit() {
      this.$emit("change", {
        infoId: this.bind.infoId,
        invoiceProductId: this.invoiceProductId,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.select-invoice-products-item {
  .isp-ent-info {
    font-size: 14px;

    .ent-name {
      font-weight: 600;
      margin-right: 12px;
    }
  }

  .actions-container {
    margin-bottom: 8px;
  }
}
</style>
