<template>
  <div class="app-container">
    <el-form v-model="pagerDto" inline>
      <el-form-item label="客户">
        <el-select
          v-model="pagerDto._Eq_CustomerId"
          placeholder="客户名称"
          clearable
          filterable
        >
          <el-option
            v-for="item in customers"
            :key="item.Id"
            :label="item.CompanyName"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="品名">
        <el-input v-model="pagerDto._Eq_GoodsName" clearable />
      </el-form-item>
      <el-button icon="el-icon-search" type="primary" @click="searchData">搜索</el-button>
      <el-button icon="el-icon-circle-plus-outline" type="success" @click="showAddPanel"
        >新增</el-button
      >
    </el-form>
    <div>
      <el-table v-loading="loading" :data="sourceData" border>
        <el-table-column prop="CustomerName" label="客户名称" />
        <el-table-column prop="GoodsName" label="申报品名" />

        <el-table-column prop="LimitTypeText" label="限制类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.LimitType == 0" type="danger">排除</el-tag>
            <el-tag v-else type="success">接受</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="EnabledText" label="是否启用">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.Enabled" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="CreateUserName" label="创建人" />
        <el-table-column prop="CreateTime" label="创建时间" />
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" plain @click="remove(scope.row)"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @current-change="pagerSerach"
      />
    </div>

    <el-dialog :visible.sync="showEditPannel">
      <el-form
        ref="editForm"
        v-loading="submiting"
        label-width="8em"
        :model="editItem"
        :rules="rules"
      >
        <el-form-item label="客户" prop="CustomerId">
          <el-select v-model="editItem.CustomerId" clearable filterable>
            <el-option
              v-for="item in customers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
          <span style="color: #999; margin-left: 10px">不选为全部客户生效</span>
        </el-form-item>
        <el-form-item label="品名" prop="GoodsName" required>
          <el-input v-model="editItem.GoodsName" />
        </el-form-item>
        <el-form-item label="限制方式" prop="LimitType">
          <el-select v-model="editItem.LimitType">
            <el-option
              v-for="item in limitTypes"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="Enabled">
          <el-switch v-model="editItem.Enabled" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editItem.Remark" />
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button size="large" type="success" @click="validtAndSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import { _getCustomers } from "@/api/baseInfo";
import { _query, _delete } from "@/api/channelDeclarationLimit";

export default {
  name: 'UsDeclarationLimit',
  data() {
    return {
      loading: false,
      loadingChannelNames: false,
      submiting: false,
      showEditPannel: false,
      showChannelPannel: false,
      editMode: "",
      customers: [],
      ChannelNames: [],
      limitTypes: [
        { Id: 0, Name: "排除" },
        { Id: 1, Name: "接受" },
      ],
      editItem: {
        CustomerId: 0,
        LimitType: 0,
        GoodsName: "",
        Enabled: "",
        Remark: null,
      },
      rules: {
        GoodsName: [
          {
            required: true,
            message: "请输入品名",
            trigger: "blur",
          },
        ],
      },
      sourceData: [],
      pagerDto: {
        _Eq_GoodsName: null,
        _Eq_CustomerId: null,
        PageIndex: 1,
        PageSize: 100,
        total: 0,
      },
    };
  },
  created() {
    _getCustomers().then((response) => {
      this.customers = response;
    });
    this.pagerDto.PageIndex = 1;
    this.pagerDto._Eq_CustomerId = null;
    this.pagerDto._Eq_GoodsName = null;

    this.searchData();
  },
  methods: {
    searchData() {
      this.loading = true;
      _query(this.pagerDto)
        .then((resp) => {
          this.loading = false;
          this.pagerDto.total = resp.TotalCount;
          this.pagerDto.PageIndex = resp.PageIndex;

          this.sourceData = resp.Result;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    edit(item) {
      this.initEditItem();
      this.editMode = "edit";
      this.editItem.Id = item.Id;
      this.editItem.CustomerId = item.CustomerId;
      this.editItem.GoodsName = item.GoodsName;
      this.editItem.LimitType = item.LimitType;
      this.editItem.Enabled = item.Enabled;
      this.editItem.Remark = item.Remark;
      this.showEditPannel = true;
    },
    remove(item) {
      this.$confirm("是否删除该项?", "正在删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        _delete({ id: item.Id })
          .then((resp) => {
            if (resp === true) {
              const idx = this.sourceData.findIndex((i) => i.Id === item.Id);
              this.sourceData.splice(idx, 1);
            } else {
              const msg = resp.message;
              this.$message(msg);
            }
          })
          .catch(() => {
            this.$message("删除出错");
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    pagerSerach(p) {
      this.pagerDto.PageIndex = p;
      this.searchData();
    },
    initEditItem() {
      this.editItem.Id = 0;
      this.editItem.CustomerId = null;
      this.editItem.GoodsName = "";
      this.editItem.LimitType = 0;
      this.editItem.Enabled = true;
      this.editItem.Remark = "";
    },
    showAddPanel() {
      this.editMode = "add";
      this.initEditItem();
      this.showEditPannel = true;
    },
    submit() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          let url = "/USDeclarationLimit/create";
          let op = "新增";
          if (this.editMode === "edit") {
            url = "/USDeclarationLimit/modify";
            op = "修改";
          }
          this.submiting = true;
          request({
            url: url,
            data: this.editItem,
            method: "post",
          })
            .then((resp) => {
              if (resp.success === true) {
                this.showEditPannel = false;
                this.initEditItem();
                this.$alert(`${op}成功`, `${op}成功`, {
                  confirmButtonText: "确定",
                });
                this.searchData();
              } else {
                const msg = resp.message;
                this.$message(msg);
              }
            })
            .finally(() => {
              this.submiting = false;
            });
        } else {
          return false;
        }
      });
    },
    validtAndSubmit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style scoped></style>
