<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <h5>
        客户/分公司折扣信息
        <el-button @click="dialogDiscount = true"> 折扣调整 </el-button>
      </h5>
      <el-table
        border
        :highlight-current-row="true"
        width="100%"
        row-key="Id"
        :select-on-indeterminate="true"
        :data="thisChinapostdiscount"
      >
        <el-table-column label="客户" prop="客户" />
        <el-table-column label="线路名称" prop="线路名称" />
        <el-table-column label="折扣" prop="折扣" />
        <el-table-column label="生效时间" prop="生效时间" />
      </el-table>
    </el-col>
    <el-col :span="16">
      <h5>
        公开价 生效时间:{{ EnableTime }}
        <el-button @click="dialogBase = true">公开价调整</el-button>
      </h5>
      <el-table
        v-show="channelId != 106"
        border
        :highlight-current-row="true"
        width="100%"
        :data="sdata"
      >
        <el-table-column label="国家" prop="国家" />
        <el-table-column label="二字简码" prop="二字简码" />
        <el-table-column label="资费标准">
          <el-table-column label="元/件" prop="操作费" />
          <el-table-column label="元/千克" prop="运费" />
        </el-table-column>
        <el-table-column label="起重">
          <el-table-column label="千克" prop="起重" />
        </el-table-column>
        <el-table-column label="限重">
          <el-table-column label="千克" prop="限重" />
        </el-table-column>
      </el-table>
      <el-table
        v-show="channelId == 106"
        border
        :highlight-current-row="true"
        width="100%"
        :data="sdata"
      >
        <el-table-column label="国家" prop="国家" />
        <el-table-column label="二字简码" prop="二字简码" />
        <el-table-column label="首重">
          <el-table-column label="（元/50克）" prop="操作费" />
        </el-table-column>
        <el-table-column label="续重">
          <el-table-column label="（元/50克）" prop="运费">
            <template slot-scope="r">
              {{ Math.round(r.row.运费 * 0.05 * 100) / 100 }}
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="重量段" prop="重量段">
          <el-table-column label="KG">
            <template slot-scope="r">
              {{ r.row.起重 }}-{{ r.row.限重 }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-col>
    <el-dialog
      title="公开价调整"
      :visible.sync="dialogBase"
      :close-on-click-modal="false"
    >
      <el-form label-position="right" label-width="150px">
        <el-form-item label="生效时间">
          <el-date-picker
            v-model="batchDto.setTime"
            value-format="yyyy-MM-dd"
          />
          <span
            v-show="batchDto.isChange && !batchDto.setTime"
            style="color: red"
          >
            *当前报价已变更，必须填入生效时间
          </span>
        </el-form-item>
        <el-form-item label="导入明细">
          <el-upload
            class="upload-demo"
            action="http://120.24.149.148/api/Finance/updateLoadFile"
            :on-success="importDefailts"
            :multiple="false"
            :show-file-list="false"
          >
            <el-button size="small" type="danger">上传明细</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="模板">
          <a type="button" :href="TemplateUrl" target="_bank">点击下载</a>
        </el-form-item>
        <el-form-item label="调整说明(非必填)">
          <el-input v-model="batchDto.Remark" type="textarea" :rows="2" />
        </el-form-item>
        <el-form-item label="文件内容预览">
          <el-table
            v-show="channelId != 106"
            v-loadding="dataLoading"
            border
            :highlight-current-row="true"
            width="100%"
            :data="viewData"
          >
            <el-table-column label="国家" prop="国家" />
            <el-table-column label="二字简码" prop="二字简码" />
            <el-table-column label="资费标准">
              <el-table-column label="元/件" prop="操作费" />
              <el-table-column label="元/千克" prop="运费" />
            </el-table-column>
            <el-table-column label="起重">
              <el-table-column label="克" prop="起重" />
            </el-table-column>
            <el-table-column label="限重">
              <el-table-column label="克" prop="限重" />
            </el-table-column>
          </el-table>

          <el-table
            v-show="channelId == 106"
            border
            :highlight-current-row="true"
            width="100%"
            :data="viewData"
          >
            <el-table-column label="国家" prop="国家" />
            <el-table-column label="二字简码" prop="二字简码" />
            <el-table-column label="首重">
              <el-table-column label="（元/50克）" prop="操作费" />
            </el-table-column>
            <el-table-column label="续重">
              <el-table-column label="（元/50克）" prop="运费">
                <!-- <template slot-scope="r">
                  {{ Math.round(r.row.运费 * 0.05 * 100) / 100 }}
                </template> -->
              </el-table-column>
            </el-table-column>

            <el-table-column label="重量段" prop="重量段">
              <el-table-column label="KG">
                <template slot-scope="r">
                  {{ r.row.起重 }}-{{ r.row.限重 }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogBase = false">取 消</el-button>
          <el-button type="primary" @click="SendDingDing()">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="折扣调整" :visible.sync="dialogDiscount">
      <el-form label-position="right" label-width="150px">
        <el-form-item label="生效时间">
          <el-date-picker
            v-model="discountDto.setTime"
            value-format="yyyy-MM-dd"
          />
          <span
            v-show="discountDto.isChange && !discountDto.setTime"
            style="color: red"
          >
            *当前报价已变更，必须填入生效时间
          </span>
        </el-form-item>
        <!-- <el-form-item label="导入数据">
          <el-upload
            :action="DiscountApi"
            :headers="header"
            :multiple="false"
            :on-success="inputDiscountDataSuccess"
            :loading="updateDiscountDataLoading"
            :before-upload="inputDiscountDataLoad"
            :on-error="inputDiscountDataError"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="选择用户与折扣">
          <el-select
            v-model="CustomerIdArry"
            style="width: 30%"
            placeholder="客户"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="item in Customers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
          <el-input
            v-model="discount"
            style="width: 30%"
            maxlength="3"
            placeholder="折扣"
            oninput="value=value.replace(/[^\d]/g,'')"
            type="text"
            clearable
          />

          <el-button type="primary" @click="addDiscount()">添加</el-button>
          <el-button type="warning" @click="removeDiscount()">移除</el-button>
        </el-form-item>
        <el-form-item label="内容预览">
          <el-table
            border
            :highlight-current-row="true"
            width="100%"
            :data="discountData"
          >
            <el-table-column label="客户名称" prop="CompanyName" />
            <el-table-column label="折扣(%)" prop="Discount">
              <template slot-scope="r">
                <span>{{ r.row.Discount }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDiscount = false">取 消</el-button>
        <el-button type="primary" @click="SendDiscountData()">提 交</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  InputChinaPostData,
  postBatchChange,
  postDiscountChange,
} from "@/api/financeQuotation";
export default {
  name: "Chinapost",
  props: [
    "basedata",
    "expressid",
    "chinapostdiscount",
    "expressname",
    "inputCustomers",
  ],
  data: function () {
    return {
      sdata: [],
      discountData: [],
      channelName: "",
      CustomerIdArry: null,
      discount: null,
      channelId: 0,
      EnableTime: "",
      dialogDiscount: false,
      updateDiscountDataLoading: false,
      dialogBase: false,
      dataLoading: false,
      DiscountApi:
        process.env.VUE_APP_New_API +
        "/FinanceQuotation/InputChinaPostDiscountData",
      // process.env.VUE_APP_BASE_API +
      TemplateUrl: "http://120.24.149.148/Data/Template/EUB结算价11.2.xlsx",
      header: { Authorization: "token " + getToken() },
      thisChinapostdiscount: [],
      batchDto: { isChange: false, setTime: null },
      discountDto: { isChange: false, setTime: null },
      Customers: [],
      viewData: [],
      attrUrl: "",
    };
  },
  watch: {
    basedata(n, o) {
      this.sdata = n;
      this.EnableTime = this.sdata[0].生效时间;
    },
    expressid(n, o) {
      this.channelId = n * 1;
    },
    expressname(n, o) {
      debugger;
      this.channelName = n;
    },
    inputCustomers(n, o) {
      this.Customers = n;
    },
    chinapostdiscount(n, o) {
      this.thisChinapostdiscount = n;
    },
  },
  methods: {
    // inputDiscountDataLoad() {
    //   if (this.updateDiscountDataLoading) {
    //     this.$message("上传中，请勿重复上传");
    //     return false;
    //   } else {
    //     this.updateDiscountDataLoading = true;
    //   }
    // },
    // inputDiscountDataError(response) {
    //   var msg = JSON.parse(response.message);
    //   this.$message(msg.message);
    //   this.updateDiscountDataLoading = false;
    // },
    // inputDiscountDataSuccess(response, file, fileList) {
    //   this.discountData = response.data;
    //   this.updateDiscountDataLoading = false;
    // },
    // 数据动效处理 start
    addDiscount() {
      if (this.CustomerIdArry.length < 1) {
        this.$message({ type: "error", message: "请选择客户！" });
        return false;
      }
      if (this.discount < 1) {
        this.$message({ type: "error", message: "请填写折扣！" });
        return false;
      }
      var IsRepate = false;

      this.CustomerIdArry.forEach((x) => {
        var Company = this.discountData.find((f) => f.customerId == x);
        if (Company != null) {
          IsRepate = true;
          return true;
        }
        var CompanyName = this.Customers.find((f) => f.Id == x).CompanyName;
        this.discountData.unshift({
          CompanyName: CompanyName,
          customerId: x,
          Discount: this.discount,
        });
      });
      if (IsRepate) {
        this.$message({
          type: "warning",
          message: "已过滤重复客户，如需更改折扣，请先移除！",
        });
      }
      this.CustomerIdArry = null;
      this.discount = null;
    },
    removeDiscount() {
      if (this.CustomerIdArry.length < 1) {
        this.$message({ type: "error", message: "请选择客户！" });
      }
      this.CustomerIdArry.forEach((x) => {
        const model = this.discountData.findIndex((arr) => arr.customerId == x);
        if (model > -1) {
          this.discountData.splice(model, 1);
        }
      });
    },
    // 数据动效处理 end
    showNoShipping() {
      document.getElementById("noShipping").scrollIntoView();
    },
    importDefailts(url) {
      this.attrUrl = url.Data.url;
      this.dataLoading = true;
      InputChinaPostData(url.Data.url, this.channelName).then((r) => {
        this.viewData = r;
      });
    },
    SendDingDing() {
      // 邮政报价专用
      var fillter = [
        {
          setTime: this.batchDto.setTime,
          Remark: this.batchDto.Remark,
          FileUrl: this.attrUrl,
          ChangeCustomers: [761], // 邮政公开价 写死
          ExpressId: this.channelId,
          ExpresssName: this.channelName,
        },
      ];
      if (fillter.length > 0 && this.batchDto.setTime == null) {
        this.$message({ type: "error", message: "请输入生效时间" });
        return false;
      }
      if (this.channelId == 0) {
        this.$message({ type: "error", message: "请选择渠道，并点击查询！" });
        return false;
      }
      postBatchChange(fillter).then((r) => {
        this.$message({ type: "success", message: "提交成功，等待批复" });
        this.dialogBase = false;
        this.pagerSerach();
      });
    },
    SendDiscountData() {
      if (this.channelId == 0) {
        this.$message({ type: "error", message: "请选择渠道，并点击查询！" });
        return false;
      }
      if (this.discountDto.setTime == null) {
        this.$message({ type: "error", message: "请输入生效时间" });
        return false;
      }
      if (this.discountDto.setTime < this.EnableTime) {
        this.$message({ type: "error", message: "折扣价生效时间不能小于公开价生效时间！" });
        return false;
      }
      var data = {
        setTime: this.discountDto.setTime,
        ExpressId: this.channelId,
        discountData: this.discountData,
      };
      postDiscountChange(data).then((r) => {
        this.$message({ type: "success", message: "提交成功，等待批复" });
        this.dialogDiscount = false;
        this.pagerSerach();
      });
    },
  }, // method End
};
</script>
