<template>
  <div class="app-container">
    <el-form v-model="pagerDto" inline>
      <el-form-item label="客户品名">
        <el-input v-model="pagerDto._Eq_CustomerCnName" clearable />
      </el-form-item>
      <el-form-item label="报关品名">
        <el-input v-model="pagerDto._Eq_DeclarationOfChineseName" clearable />
      </el-form-item>
      <el-form-item label="HSCode">
        <el-input v-model="pagerDto._Eq_HSCode" clearable />
      </el-form-item>
      <el-form-item label="申报品名是否作用于Fedex">
        <el-select
          v-model="pagerDto._Eq_Fedex"
          placeholder="请选择作用渠道"
          clearable
        >
          <el-option
            v-for="(item, index) in channelTypes"
            :key="index"
            :value="item.Id"
            :label="item.Name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="海关编码是否作用于DHL">
        <el-select
          v-model="pagerDto._Eq_DHL"
          placeholder="请选择作用渠道"
          clearable
        >
          <el-option
            v-for="(item, index) in channelTypes"
            :key="index"
            :value="item.Id"
            :label="item.Name"
          />
        </el-select>
      </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="CustomerCnName" label="客户品名" />
        <el-table-column prop="DeclarationOfChineseName" label="报关品名" />
        <el-table-column prop="DeclarationOfEnglishName" label="报关英文品名" />
        <el-table-column prop="HSCode" label="HSCode" />
        <el-table-column prop="Fedex" label="申报品名是否作用于Fedex" >
          <template  slot-scope="r">
            {{r.row.Fedex?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column prop="DHL" label="海关编码是否作用于DHL" >
          <template  slot-scope="r">
            {{r.row.DHL?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column prop="IsClothing" label="是否是服装类产品" >
          <template  slot-scope="r">
            {{r.row.IsClothing?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column prop="CreateUserName" label="创建人" />
        <el-table-column prop="CreateTime" label="创建时间" />
        <el-table-column label="操作">
          <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>
    </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="CustomerCnName">
          <el-input v-model="editItem.CustomerCnName" />
        </el-form-item>
        <el-form-item label="报关品名" prop="DeclarationOfChineseName">
          <el-input v-model="editItem.DeclarationOfChineseName" />
        </el-form-item>
                <el-form-item label="报关英文品名" prop="DeclarationOfEnglishName">
          <el-input v-model="editItem.DeclarationOfEnglishName" />
        </el-form-item>
        <el-form-item label="HSCode" prop="HSCode">
          <el-input v-model="editItem.HSCode" />
        </el-form-item>

        <el-form-item label="申报品名是否作用于Fedex" prop="Fedex">
          <el-select v-model="editItem.Fedex">
            <el-option
              v-for="item in channelTypes"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="海关编码是否作用于DHL" prop="DHL">
          <el-select v-model="editItem.DHL">
            <el-option
              v-for="item in channelTypes"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否服装类品名" prop="IsClothing">
          <el-select v-model="editItem.IsClothing">
            <el-option
              v-for="item in channelTypes"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </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";

export default {
  name: 'DeclarationFix',
  data() {
    return {
      loading: false,
      submiting: false,
      showEditPannel: false,
      editMode: "",
      channelTypes: [
        { Name: "是", Id: 1 },
        { Name: "否", Id: 0 },
      ],


      editItem: {
        CustomerCnName: "",
        DeclarationOfChineseName:"",
        DeclarationOfEnglishName: "",
        HSCode: "",
        Fedex:0,
        Remark: null,
        DHL:0,
        IsClothing:0,
      },
        rules: {
        CustomerCnName: { required: true, message: '请填写客户品名', trigger: 'blur' },
        DeclarationOfChineseName: { required: true, message: '请填写报关品名', trigger: 'blur' },
        DeclarationOfEnglishName: { required: true, message: '请填写报关英文品名', trigger: 'blur' },

        Type: { required: true, message: '请选择类型', trigger: 'blur' },
        Fedex: {
          required: true,
          message: '请选择申报品名是否作用于Fedex',
          trigger: 'blur'
        },
        DHL: {
          required: true,
          message: '请选择海关编码是否作用于DHL',
          trigger: 'blur'
        },
      },
      sourceData: [],
      pagerDto: {
        _Eq_CustomerCnName: null,
        _Eq_DeclarationOfChineseName: null,
        _Eq_HSCode: null,
        PageIndex: 1,
        PageSize: 100,
        total: 0,
      },
    };
  },
  created() {
    this.pagerDto.PageIndex = 1;
    this.pagerDto._Eq_ChannelId = "";
    this.searchData();
  },
  methods: {
    searchData() {
      this.loading = true;
      request({
        url: "/CustomerDeclaration/query",
        method: "post",
        data: 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.editMode = "edit";
      this.editItem.Id = item.Id;
      this.editItem.CustomerCnName = item.CustomerCnName;
      this.editItem.DeclarationOfChineseName = item.DeclarationOfChineseName;
      this.editItem.DeclarationOfEnglishName = item.DeclarationOfEnglishName;
      this.editItem.HSCode = item.HSCode;
      this.editItem.CountryCodeValues = item.CountryCodeValues;
      this.editItem.Fedex = item.Fedex===true?1:0;
      this.editItem.Remark = item.Remark;
      this.editItem.IsClothing = item.IsClothing?1:0;
      this.editItem.DHL=item.DHL===true?1:0
      this.showEditPannel = true;
    },
    remove(item) {
      this.$confirm("是否删除该品名设置?", "正在删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        request({
          url: "/CustomerDeclaration/remove",
          params: { id: item.Id },
          method: "post",
        })
          .then((resp) => {
            console.log(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.CustomerCnName = "";
      this.editItem.Fedex = 0;
      this.editItem.DeclarationOfChineseName = "";
      this.editItem.DeclarationOfEnglishName = "";
      this.editItem.HSCode = "";
      this.editItem.Remark = "";
    },
    showAddPanel() {
      this.editMode = "add";
      this.initEditItem();
      this.showEditPannel = true;
    },
    submit() {
      let url = "/CustomerDeclaration/create";
      let op = "新增";
      if (this.editMode === "edit") {
        url = "/CustomerDeclaration/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: "确定",
              callback: () => {
                this.searchData();
              },
            });
          } else {
            const msg = resp.message;
            this.$message(msg);
          }
        })
        .finally(() => {
          this.submiting = false;
        });
    },
    validtAndSubmit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
</style>
