<template>
  <el-dialog id="dialog-container" :title="title" :visible.sync="open" width="1000px" height="480px" append-to-body>
    <div class="dialog-body" style="height: 430px;padding:0px !important">
      <div class="search-container" ref="searchPanel" style="padding-left: 5px;padding-right: 5px;">
        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="供应商编号" prop="providerId">
            <el-input v-model="queryParams.providerId" placeholder="请输入供应商编号" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="供应商名称" prop="providerName">
            <el-input v-model="queryParams.providerName" placeholder="请输入供应商名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="queryParams.contact" placeholder="请输入联系人" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-container">
        <div ref="mainTablePanel">
          <el-table ref="goodsTable" v-loading="loading" border size="mini" height="350" :data="providerList"
            @selection-change="handleSelectionChange" @row-click="handleClick" @row-dblclick="handleDblClick">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="供应商编号" align="center" prop="providerId" />
            <el-table-column label="供应商类别编号" align="center" prop="proTypeId" />
            <el-table-column label="供应商名称" align="center" prop="providerName" />
            <el-table-column label="拼音简称" align="center" prop="pyName" />
            <el-table-column label="详细地址" align="center" prop="address" />
            <el-table-column label="联系人" align="center" prop="contact" />
            <el-table-column label="联系电话" align="center" prop="phone" />
            <el-table-column label="联系人手机" align="center" prop="mobile" />
            <el-table-column label="联系传真" align="center" prop="fax" />
            <el-table-column label="邮箱" align="center" prop="email" />
            <el-table-column label="邮编编码" align="center" prop="postCode" />
            <el-table-column label="开户银行" align="center" prop="bank" />
            <el-table-column label="账号名称" align="center" prop="accountName" />
            <el-table-column label="账号" align="center" prop="account" />
            <el-table-column label="预计到货天数" align="center" prop="arrDays" />
            <el-table-column label="供应商等级" align="center" prop="providerLevel">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.provider_level" :value="scope.row.providerLevel" />
              </template>
            </el-table-column>
            <el-table-column label="合格率" align="center" prop="percent" />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="性质" align="center" prop="nature">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.nature" :value="scope.row.nature" />
              </template>
            </el-table-column>
            <el-table-column label="网站	" align="center" prop="website" />
            <el-table-column label="法人代表" align="center" prop="legalMan" />
            <el-table-column label="所属地址	" align="center" prop="areaId" />
            <el-table-column label="注册地址	" align="center" prop="regAddress" />
            <el-table-column label="发票抬头" align="center" prop="invoiceTitle" />
            <el-table-column label="税号	" align="center" prop="taxNumber" />
            <el-table-column label="付款方式	" align="center" prop="payTypeId">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.pay_method" :value="scope.row.payTypeId" />
              </template>
            </el-table-column>
            <el-table-column label="发票邮寄地址	" align="center" prop="invoiceAddress" />
            <el-table-column label="收件人	" align="center" prop="recipient" />
            <el-table-column label="收件人电话	" align="center" prop="recPhone" />
            <el-table-column label="收件人传真" align="center" prop="recFax" />
            <el-table-column label="收件人邮箱" align="center" prop="recEmail" />
          </el-table>
          <div class="pagePanel">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getList" />
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listProvider } from "@/api/system/provider";
export default {
  name: "ProviderSelect",
  dicts: ['provider_level', 'nature', 'pay_method'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: false,
      // 非多个禁用
      multiple: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 供应商表格数据
      providerList: [],
      // 选择的供应商
      selectItem: null,
      // 弹出层标题
      title: "选择供应商",
      // 是否显示弹出层
      open: false,
      // 选择回调函数
      callBack: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        providerId: null,
        proTypeId: null,
        providerName: null,
        pyName: null,
        address: null,
        contact: null,
        phone: null,
        mobile: null,
        fax: null,
        email: null,
        postCode: null,
        bank: null,
        accountName: null,
        account: null,
        arrDays: null,
        providerLevel: null,
        percent: null,
        nature: null,
        website: null,
        legalMan: null,
        areaId: null,
        regAddress: null,
        invoiceTitle: null,
        taxNumber: null,
        payTypeId: null,
        invoiceAddress: null,
        recipient: null,
        recPhone: null,
        recFax: null,
        recEmail: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        goodsId: [
          { required: true, message: "物料编号不能为空", trigger: "blur" }
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
  },
  methods: {
    /** 查询供应商列表 */
    getList() {
      this.loading = true;
      listProvider(this.queryParams).then(response => {
        this.providerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        goodsId: null,
        goodsName: null,
        goodsShortName: null,
        pyName: null,
        barcode: null,
        goodsTypeId: null,
        specification: null,
        model: null,
        price: null,
        glength: null,
        gwidth: null,
        gheight: null,
        recoil: null,
        gvolume: null,
        scaleUnit: null,
        unit: null,
        warnUp: null,
        warnDown: null,
        produceArea: null,
        grossWeight: null,
        netWeight: null,
        providerId: null,
        hsnumber: null,
        abc: null,
        hazardous: null,
        storageConditions: null,
        period: null,
        periodUnit: null,
        addtax: null,
        season: null,
        tariffrate: null,
        remark: null,
        status: null,
        version: null,
        img: null,
        createBy: null,
        createDate: null,
        updateDate: null,
        scFlag: null,
        costPrice: null,
        customerId: null,
        isOpen: null,
        defaultStorageAreaId: null,
        updateBy: null,
        materialCharacteristics: null,
        recheckDays: null,
        defaultStorageId: null,
        storageId: null,
        reinspectionDays: null,
        isSampling: null,
        isCheck: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = [];

      if (Array.isArray(selection) && selection.length > 1) {
        this.$refs.goodsTable.toggleRowSelection(selection[0], false);
        this.$refs.goodsTable.toggleRowSelection(selection[1], true);
      }

      this.selectItem = selection[selection.length - 1];
    },
    /** 提交按钮 */
    submitForm() {
      if (this.selectItem == null) {
        this.$modal.console.error("请选择一个供应商");
        return;
      }
      this.callBack(this.selectItem)
      this.open = false;
    },
    showModal(newCallBack) {
      this.open = true
      this.callBack = newCallBack;
      this.getList();
    },
    handleDblClick(row) {
      this.callBack(row)
      this.open = false;
    },
    handleClick(row) {
      this.$refs.goodsTable.toggleRowSelection(row)
      this.selectItem = row
    }
  }
}
</script>
<style scoped>
.app-container {
  height: calc(100vh - 84px);
}

#dialog-container {
  .el-dialog__body {
    padding: 5px !important;
  }

  .pagination-container {
    background: none !important;
    margin-top: 5px !important;

    .el-pagination {
      left: 0;
    }
  }
}
</style>