<template>
  <div class="app-container">
    <el-form v-model="pagerDto" inline>
      <el-form-item label="作用渠道">
        <el-select v-model="pagerDto._Eq_ChannelId" placeholder="请选择渠道" clearable filterable>
          <el-option
            v-for="(item, index) in channels"
            :key="index"
            :value="item.Id"
            :label="item.Name"
          />
        </el-select>
        <el-form-item label="作用渠道">
          <el-date-picker
            v-model="pagerDto._Eq_EffectiveDate"
            :editable="false"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select v-model="pagerDto._Eq_Enabled" clearable>
          <el-option
            v-for="(item, index) in enabledStatus"
            :key="index"
            :value="item.Value"
            :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="ChannelName" label="渠道名称" width="100px" />
        <el-table-column prop="OperateCost" label="运营成本" width="80px" />
        <el-table-column prop="FirstTransferPrice" label="一级中转" width="80px" />
        <el-table-column prop="SecondTransferPrice" label="二级中转" width="80px" />
        <el-table-column prop="FirstLegUnitPrice" label="头程价格" width="100px" />
        <el-table-column prop="BulkyRate" label="抛货率" width="80px" />
        <el-table-column prop="DeclareUnitPrice" label="国内报关价格" />
        <el-table-column prop="ClearanceUnitWeightPrice" label="国外清关价格(Kg)" />
        <el-table-column prop="ClearanceUnitPiecesPrice" label="国外清关价格(票)" />
        <el-table-column prop="ClearancePriceCurrency" label="清关货币" width="100px" />
        <el-table-column prop="OverSeaTransferPrice" label="海外中转(Kg)" width="80px" />
        <el-table-column prop="OverSeaTransferCurrency" label="海外中转费币种" width="80px" />
        <el-table-column prop="TaxPrice" label="关税(Kg)" width="80px" />
        <el-table-column prop="TaxCurrency" label="关税币种" width="80px" />
        <el-table-column prop="SubsidyPrice" label="补贴(Kg)" width="80px" />
        <el-table-column prop="SubsidyPriceCurrency" label="关税币种" width="80px" />
        <el-table-column prop="EffectiveDateName" label="生效日期" width="100px" />
        <el-table-column prop="Enabled" label="启用" width="80px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.Enabled ? 'success' : 'danger'">{{
              scope.row.Enabled ? "已启用" : "已停用"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="CreateUserName" label="创建人" />
        <el-table-column
          prop="CreateTime"
          :formatter="colFormatDate"
          label="创建时间"
          width="100px"
        />
        <el-table-column label="操作" width="230px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
            <el-button
              type="danger"
              plain
              size="mini"
              @click="remove(scope.row)"
            >移除</el-button>
            <el-button size="mini" type="warning" @click="copy(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="12em"
        :model="editItem"
        :rules="rules"
      >
        <el-form-item label="渠道" prop="ChannelId">
          <el-select v-model="editItem.ChannelId" clearable filterable>
            <el-option
              v-for="item in channels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="运营成本" prop="OperateCost">
          <el-input-number v-model="editItem.OperateCost" />
        </el-form-item>

        <el-form-item label="一级中转" prop="FirstTransferPrice">
          <el-input-number v-model="editItem.FirstTransferPrice" />
        </el-form-item>

        <el-form-item label="二级中转" prop="SecondTransferPrice">
          <el-input-number v-model="editItem.SecondTransferPrice" />
        </el-form-item>

        <el-form-item label="抛货率" prop="BulkyRate">
          <el-input-number v-model="editItem.BulkyRate" />
        </el-form-item>

        <el-form-item label="头程单价" prop="FirstLegUnitPrice">
          <el-input-number v-model="editItem.FirstLegUnitPrice" />
        </el-form-item>
        <el-form-item label="国内报关价格" prop="DeclareUnitPrice">
          <el-input-number v-model="editItem.DeclareUnitPrice" />
        </el-form-item>
        <el-form-item label="国外清关价格(票数)" prop="ClearanceUnitPiecesPrice">
          <el-input-number v-model="editItem.ClearanceUnitPiecesPrice" />
        </el-form-item>
        <el-form-item label="国外清关价格(Kg)" prop="ClearanceUnitWeightPrice">
          <el-input-number v-model="editItem.ClearanceUnitWeightPrice" />
        </el-form-item>
        <el-form-item label="清关价格币种" prop="ClearancePriceCurrency">
          <el-input v-model="editItem.ClearancePriceCurrency" placeholder="请填写货币代码" />
        </el-form-item>

        <el-form-item label="海外中转" prop="OverSeaTransferPrice">
          <el-input-number v-model="editItem.OverSeaTransferPrice" /><el-tag>每KG</el-tag>
        </el-form-item>
        <el-form-item label="海外中转币种" prop="OverSeaTransferPriceCurrency">
          <el-input v-model="editItem.OverSeaTransferPriceCurrency" placeholder="请填写货币代码" />
        </el-form-item>

        <el-form-item label="关税" prop="TaxPrice">
          <el-input-number v-model="editItem.TaxPrice" /><el-tag>每KG</el-tag>
        </el-form-item>
        <el-form-item label="关税币种" prop="TaxPriceCurrency">
          <el-input v-model="editItem.TaxPriceCurrency" placeholder="请填写货币代码" />
        </el-form-item>

        <el-form-item label="补贴" prop="SubsidyPrice">
          <el-input-number v-model="editItem.SubsidyPrice" /><el-tag>每KG</el-tag>
        </el-form-item>
        <el-form-item label="补贴币种" prop="SubsidyPriceCurrency">
          <el-input v-model="editItem.SubsidyPriceCurrency" placeholder="请填写货币代码" />
        </el-form-item>

        <el-form-item label="生效日期" prop="EffectiveDate">
          <el-date-picker
            v-model="editItem.EffectiveDate"
            type="date"
            placeholder="选择生效日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="editItem.Enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </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 { _getAllPublic } from '@/api/baseInfo'
import request from '@/utils/request'
import colFormatDate from '@/utils/columnFormat'
export default {
  name: 'EstimateFee',
  data() {
    return {
      loading: false,
      submiting: false,
      showEditPannel: false,
      editMode: '',
      channels: [],
      enabledStatus: [
        { Value: null, Name: '全部' },
        { Value: 1, Name: '是' },
        { Value: 0, Name: '否' }
      ],
      clearanceChargeMethods: [
        { value: 0, name: '每公斤' },
        { value: 1, name: '每订单' }
      ],
      editItem: {
        ChannelId: null,
        FirstLegUnitPrice: 0.0,
        DeclareUnitPrice: 0.0,
        ClearanceUnitPrice: 0.0,
        ClearancePriceCurrency: '',
        ClearanceChargeMethod: 0,
        EffectiveDate: null,
        Enabled: false,
        Remark: null,
        ClearanceUnitPiecesPrice: 0.0,
        ClearanceUnitWeightPrice: 0.0,
        OperateCost: 0.0,
        FirstTransferPrice: 0.0,
        SecondTransferPrice: 0.0,

        BulkyRate: 0.0,
        OverSeaTransferPrice: 0.0,
        OverSeaTransferPriceCurrency: '',
        TaxPrice: 0.0,
        TaxPriceCurrency: '',
        SubsidyPrice: 0.0,
        SubsidyPriceCurrency: ''
      },

      rules: {
        ChannelId: {
          validator: this.validateChannelId,
          trigger: 'blur'
        },
        FirstLegUnitPrice: {
          validator: this.validateUnitPrice,
          trigger: 'blur'
        },
        DeclareUnitPrice: {
          validator: this.validateUnitPrice,
          trigger: 'blur'
        },
        ClearanceUnitPrice: {
          validator: this.validateUnitPrice,
          trigger: 'blur'
        },

        EffectiveDate: {
          validator: this.validateDate,
          trigger: 'blur'
        },
        ClearancePriceCurrency: {
          required: true,
          message: '请填写清关币种',
          trigger: 'blur'
        }
      },
      sourceData: [],
      pagerDto: {
        _Eq_Enabled: null,
        _Eq_ChannelId: null,
        PageIndex: 1,
        PageSize: 100,
        total: 0
      }
    }
  },
  created() {
    _getAllPublic().then((resp) => {
      this.channels = resp
    })
    this.pagerDto.PageIndex = 1
    this.pagerDto._Eq_ChannelId = ''
    this.searchData()
  },
  methods: {
    colFormatDate,
    validateChannelId(rule, value, callback) {
      if (!value || value <= 0) {
        callback(new Error('请选择渠道'))
      } else {
        callback()
      }
    },
    validateUnitPrice(rule, value, callback) {
      if (value === null || value === '' || value < 0) {
        callback(new Error('金额无效!'))
      } else {
        callback()
      }
    },
    validateDate(rule, value, callback) {
      if (!value) {
        callback(new Error('请选择日期'))
      } else {
        callback()
      }
    },
    searchData() {
      this.loading = true
      request({
        url: '/EstimateFee/QueryPage',
        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
        })
    },
    copy(item) {
      this.edit(item, 'copy')
      this.showEditPannel = true
    },
    edit(item, editMode = 'edit') {
      this.initEditItem()
      this.editMode = editMode
      this.editItem.Id = item.Id
      this.editItem.ChannelId = item.ChannelId
      this.editItem.FirstLegUnitPrice = item.FirstLegUnitPrice
      this.editItem.DeclareUnitPrice = item.DeclareUnitPrice
      this.editItem.ClearanceUnitPrice = item.ClearanceUnitPrice
      this.editItem.ClearanceUnitPiecesPrice = item.ClearanceUnitPiecesPrice
      this.editItem.ClearanceUnitWeightPrice = item.ClearanceUnitWeightPrice
      this.editItem.ClearancePriceCurrency = item.ClearancePriceCurrency
      this.editItem.EffectiveDate = item.EffectiveDate
      this.editItem.Enabled = item.Enabled
      this.editItem.Remark = item.Remark
      this.editItem.ClearanceChargeMethod = item.ClearanceChargeMethod

      this.editItem.OperateCost = item.OperateCost
      this.editItem.FirstTransferPrice = item.FirstTransferPrice
      this.editItem.SecondTransferPrice = item.SecondTransferPrice
      this.editItem.OverSeaTransferPrice = item.OverSeaTransferPrice
      this.editItem.OverSeaTransferPriceCurrency = item.OverSeaTransferPriceCurrency
      this.editItem.BulkyRate = item.BulkyRate
      this.editItem.TaxPrice = item.TaxPrice
      this.editItem.TaxPriceCurrency = item.TaxPriceCurrency

      this.editItem.SubsidyPrice = item.SubsidyPrice
      this.editItem.SubsidyPriceCurrency = item.SubsidyPriceCurrency

      this.showEditPannel = true
    },
    remove(item) {
      this.$confirm('是否删除该预估价格?', '正在删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        request({
          url: '/EstimateFee/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 = null
      this.editItem.ChannelId = null
      this.editItem.FirstLegUnitPrice = 0.0
      this.editItem.DeclareUnitPrice = 0.0
      this.editItem.ClearanceUnitPrice = 0.0
      this.editItem.ClearancePriceCurrency = ''
      this.editItem.EffectiveDate = null
      this.editItem.ClearanceChargeMethod = 0
      this.editItem.Remark = ''
      this.editItem.OperateCost = 0.0
      this.editItem.FirstTransferPrice = 0.0
      this.editItem.SecondTransferPrice = 0.0
      this.editItem.OverSeaTransferPrice = 0.0
      this.editItem.OverSeaTransferPriceCurrency = ''

      this.editItem.BulkyRate = 0.0
      this.editItem.TaxPrice = 0.0
      this.editItem.TaxPriceCurrency = ''
      this.editItem.SubsidyPrice = 0.0
      this.editItem.SubsidyPriceCurrency = ''
    },
    showAddPanel() {
      this.editMode = 'add'
      this.initEditItem()
      this.showEditPannel = true
    },
    submit() {
      let url = '/EstimateFee/create'
      let op = '新增'
      if (this.editMode === 'edit') {
        url = '/EstimateFee/modify'
        op = '修改'
      } else if (this.editMode === 'copy') {
        url = '/EstimateFee/copy'
        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>
