<template>
  <div class="app-container">
    <div>
      <el-form inline :model="pagerDto">
        <el-form-item label="提单号前三位">
          <el-input v-model="pagerDto._Eq_LadingCode"></el-input>
        </el-form-item>
        <el-form-item label="所属节点">
          <el-select
            v-model="pagerDto._Eq_XYYStatus"
            placeholder="所属节点"
            clearable
            filterable
          >
            <el-option
              v-for="item in XYYNode"
              :key="item.Id"
              :value="item.Id"
              :label="item.Name"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            size="small"
            type="primary"
            @click="pagerSearch(1)"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-circle-plus-outline"
            size="small"
            type="success"
            @click="showAddPanel"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="pageLoading" border :data="sourceData">
        <el-table-column label="提单号前三位" prop="LadingCode" />
        <el-table-column label="51状态码" prop="status" />
        <el-table-column label="所属节点" prop="XYYStatus">
          <template slot-scope="row">
            <span v-if="row.row.XYYStatus == 4">国内</span>
            <span v-else>国外</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" plain @click="remove(scope.row)"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[20, 50, 100, 200]"
        :current-page="pagerDto.PageIndex"
        :page-size="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @current-change="pagerSearch"
        @size-change="changePager"
      />
    </div>
    <div v-if="showEditPannel">
      <el-dialog :visible.sync="showEditPannel">
        <el-form
          ref="editForm"
          v-loading="submiting"
          label-width="200px"
          :model="editItem"
          :rules="rules"
        >
          <el-form-item label="提单号前三位" prop="LadingCode">
            <el-input v-model="editItem.LadingCode" />
          </el-form-item>
          <el-form-item label="51状态码" prop="status"
            ><el-input v-model="editItem.status"
          /></el-form-item>
          <el-form-item label="所属节点" prop="XYYStatus">
            <el-select
              v-model="editItem.XYYStatus"
              placeholder="所属节点"
              clearable
              filterable
            >
              <el-option
                v-for="item in XYYNode"
                :key="item.Id"
                :value="item.Id"
                :label="item.Name"
              /> </el-select
          ></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>
  </div>
</template>
<script>
import {
  _getPageResult,
  UpdateRule,
  AddRule,
  deleteRule,
} from "@/api/tracking/51TrackLogic";
export default {
  name: "51TrackConfig",
  data() {
    return {
      showEditPannel: false,
      submiting: false,
      editItem: { Id: 0, LadingCode: "", status: "", XYYStatus: "" },
      sourceData: [],
      pageLoading: false,
      XYYNode: [
        { Id: 4, Name: "国内" },
        { Id: 5, Name: "国外" },
      ],
      rules: {
        LadingCode: {
          required: true,
          message: "请填写提单前三位",
          trigger: "blur",
        },
        status: {
          required: true,
          message: "请填写51轨迹状态码",
          trigger: "blur",
        },
        XYYStatus: {
          required: true,
          message: "请选择轨迹节点",
          trigger: "change",
        },
      },
      pagerDto: {
        _Eq_LadingCode: null,
        _Eq_XYYStatus: null,
        QuerySort: [{ Field: "Id", IsDesc: true }],
        PageIndex: 1,
        PageSize: 20,
        total: 0,
      },
    };
  },
  methods: {
    showAddPanel() {
      this.editItem = { Id: 0, LadingCode: "", status: "", XYYStatus: "" };
      this.showEditPannel = true;
    },
    validtAndSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.submiting = true;
          if (this.editItem.Id > 0) {
            UpdateRule(this.editItem)
              .then(() => {
                this.$message({
                  type: "success",
                  message: "修改成功！",
                });
              })
              .finally(() => {
                this.submiting = false;
                this.showEditPannel=false;
                this.pagerSearch(1);
              });
          } else {
            AddRule(this.editItem)
              .then(() => {
                this.$message({
                  type: "success",
                  message: "新增成功！",
                });
              })
              .finally(() => {
                this.submiting = false;
                this.showEditPannel=false;
                this.pagerSearch(1);
              });
          }
        }
      });
    },
    edit(item) {
      this.editItem = JSON.parse(JSON.stringify(item));
      this.showEditPannel = true;
    },
    remove(item) {
      this.$confirm("是否删除该配置?", "正在删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.pageLoading = true;
        deleteRule(item.Id)
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            
          })
          .finally(() => {
            this.pagerSearch(1);
            this.pageLoading = false;
          });
      });
    },
    pagerSearch(pageIndex) {
      if (pageIndex && pageIndex > 0) this.pagerDto.PageIndex = pageIndex;
      else this.pagerDto.PageIndex = 1;

      this.pageLoading = true;
      _getPageResult(this.pagerDto)
        .then((res) => {
          this.sourceData = res.Result;
          this.pagerDto.total = res.TotalCount;
        })
        .finally(() => {
          this.pageLoading = false;
        });
    },
    changePager(size) {
      this.pagerDto.PageSize = size;
      this.pagerDto.PageIndex = 1;
      this.pagerSearch(1);
    },
  },
};
</script>
