<template>
  <el-dialog
    title="选择开票对应商品"
    :visible.sync="visible"
    width="80%"
    top="5vh"
    center
    append-to-body
  >
    <div>
      <el-row type="flex" :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="search.productName"
            clearable
            prefix-icon="el-icon-search"
            placeholder="请输入商品名称"
          ></el-input>
        </el-col>
        <el-col :span="16">
          <el-button @click="handleSearch" type="primary">搜索</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="search.resultList"
        border
        stripe
        style="width: 100%;margin-top:10px"
        height="500px"
      >
        <el-table-column
          type="index"
          :index="pageIndex"
          align="center"
          label="序号"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="productName"
          label="产品名称"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="shortCode"
          label="简码"
          width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="taxRate"
          label="税率"
          :formatter="fmtTaxRate"
        ></el-table-column>
        <el-table-column
          prop="specsModel"
          label="规格型号"
          width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          width="120"
          show-overflow-tooltip
          :formatter="fmtPrice"
        ></el-table-column>
        <el-table-column prop="unit" label="计量单位"></el-table-column>
        <el-table-column
          prop="taxPriceFlag"
          label="含税价标志"
          width="100"
          :formatter="fmtTaxPriceFlag"
        ></el-table-column>
        <el-table-column
          prop="taxationCateCode"
          label="税收分类编码"
          width="180"
          show-overflow-tooltip
        ></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="100"
          :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="100"
          :formatter="fmtZeroRateFlag"
        ></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleUseProductItem(scope.row)"
              type="primary"
              size="small"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-row type="flex" :gutter="20">
        <el-col :span="12"> </el-col>
        <el-col :span="12">
          <div style="text-align: right">
            <el-pagination
              @size-change="handleSearchResultSizeChange"
              @current-change="handleSearchResultCurrentChange"
              :current-page="search.resultPagination.currentPage"
              :page-sizes="search.resultPagination.pageSizes"
              :page-size="search.resultPagination.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="search.resultPagination.total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import ProductService from "@/api/product";

export default {
  name: "SelectInvoiceProductDialog",
  data() {
    return {
      // open 传入；
      entTaxId: "",

      visible: false,

      search: {
        productName: "",
        resultList: [],
        resultMultipleSelection: [],
        resultPagination: {
          currentPage: 1,
          pageSizes: [10, 30, 50, 100],
          pageSize: 10,
          total: 0,
        },
      },
    };
  },
  methods: {
    pageIndex(index) {
      let currentPage = this.search.resultPagination.currentPage; // 当前页码，具体看组件取值
      let pageSize = this.search.resultPagination.pageSize; // 每页条数，具体是组件取值
      return index + 1 + (currentPage - 1) * pageSize;
    },
    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;
    },
    handleSearch() {
      this.callSearchEntProduct(1, this.search.resultPagination.pageSize);
    },
    handleSearchResultSizeChange(val) {
      this.callSearchEntProduct(1, val);
    },
    handleSearchResultCurrentChange(val) {
      this.callSearchEntProduct(val, this.search.resultPagination.pageSize);
    },
    /**
     * 搜索企业的产品
     * @param {Number} pageNum : 当前页码
     * @param {Number} pageSize : 每页数量
     */
    callSearchEntProduct(pageNum, pageSize) {
      ProductService.findEntProduct({
        entTaxId: this.entTaxId,
        productName: this.search.productName,
        pageNum: pageNum,
        pageSize: pageSize,
      })
        .then((val) => {
          this.search.resultPagination.total = val.data.total;
          this.search.resultPagination.pageSize = val.data.size;
          this.search.resultPagination.currentPage = val.data.current;
          this.search.resultList = val.data.records;
        })
        .catch((_) => {
          this.$message.error(val.msg);
        });
    },
    handleUseProductItem(row) {
      this.$emit("selected", row);
      this.visible = false;
    },

    open(entTaxId) {
      if (entTaxId) {
        this.entTaxId = entTaxId;
        this.visible = true;
      }
    },
  },
};
</script>
