<template>
  <div>
    <div style="display: flex; align-items: flex-end">
      <img
        src="@/assets/price/price.png"
        alt
        style="width: 26px; height: 26px"
      >
      <span
        style="
          font-size: 18px;
          font-weight: bold;
          color: #333333;
          line-height: 26px;
          margin-left: 5px;
        "
      >{{ $t('price.header') }}</span>
    </div>
    <div style="display: flex; align-items: flex-end; margin-top: 5px">
      <div style="width: 75px; height: 4px; background: #396fff" />
      <div
        style="
          width: 75px;
          height: 1px;
          background: #fff;
          border: 1px solid #acacac;
        "
      />
    </div>
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" style="margin-top: 40px;">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item :label="$t('price.departure')" style="margin-bottom: 0" prop="departureId" required :error="$t('price.departureRules')">
            <el-select v-model="queryParams.departureId" :placeholder="$t('price.departureNotice')">
              <el-option v-for="item in expoerCityList" :key="item.id" :label="$l(item,'title')" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('price.objective')" style="margin-bottom: 0" prop="objectiveId" required :error="$t('price.objectiveRules')">
            <el-select v-model="queryParams.objectiveId" :placeholder="$t('price.objectiveNotice')">
              <el-option v-for="item in importCityList" :key="item.id" :label="$l(item,'title')" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 20px;">
        <el-col :span="12">
          <el-form-item :label="$t('price.prod')" prop="prodId" required :error="$t('price.prodRules')">
            <product-selector v-model="queryParams.prodId" :title="$l(null,'title')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('price.transport')" prop="transportId">
            <dict-selector v-model="queryParams.transportId" style="width: 200px;" :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :placeholder="$t('请选择运输方式')" formatter="number" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item :label="$t('price.channel')" prop="channelId">
            <selector
              v-model="queryParams.channelId"
              :disabled="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, queryParams.transportId).cssClass != 'channel'"
              :options="channelList"
              value-field="channelId"
              label-field="nameZh"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('price.num')"
            prop="num"
            :rules="[
              { required: true, message: $t('price.numRule1')},
              { pattern: /^[1-9]\d*$/, message: $t('price.numRule2')}
            ]"
          >
            <el-input
              v-model="queryParams.num"
              style="width: 180px"
            ><template slot="append">{{ $t('price.box') }}</template></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item
            :label="$t('price.quantity')"
            prop="quantity"
            :rules="[
              { required: true, message: $t('price.quantityRule1')},
              { pattern: /^[1-9]\d*$/, message: $t('price.quantityRule2')}
            ]"
          >
            <el-input
              v-model="queryParams.quantity"
              style="width: 180px"
            ><template slot="append">{{ $t('price.one') }}</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('price.weight')"
            prop="weight"
            :rules="[
              { required: true, message: $t('price.weightRule1')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('price.weightRule2')}
            ]"
          >
            <el-input
              v-model.number="queryParams.weight"
              style="width: 180px"
            ><template slot="append">kg</template></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item
            :label="$t('price.long')"
            prop="long"
            :rules="[
              { required: true, message: $t('price.longRule1')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('price.longRule2')}
            ]"
          >
            <el-input
              v-model="queryParams.long"
              style="width: 180px"
            ><template slot="append">cm</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="$t('price.wide')"
            prop="wide"
            :rules="[
              { required: true, message: $t('price.wideRule1')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('price.wideRule2')}
            ]"
          >
            <el-input
              v-model="queryParams.wide"
              style="width: 180px"
            ><template slot="append">cm</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="$t('price.high')"
            prop="high"
            :rules="[
              { required: true, message: $t('price.highRule1')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('price.highRule2')}
            ]"
          >
            <el-input
              v-model="queryParams.high"
              style="width: 180px"
            ><template slot="append">cm</template></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('common.search') }}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t('common.reload') }}</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table
      :data="orderList"
      style="width: 100%;margin-top: 30px;"
    >
      <template slot="empty">
        <span style="color: #969799;">{{ $t('price.none') }}</span>
      </template>
      <el-table-column
        :label="$t('price.transport')"
        width="120"
        align="center"
        header-align="center"
      >
        <template slot-scope="{row}">
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId" />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('price.channel')"
        width="150"
        align="center"
        header-align="center"
      >
        <template slot-scope="{row}">
          {{ getChannelNameById(row.channelId) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="seaFreight"
        :label="$t('price.seaFreight')"
        width="120"
        align="center"
        header-align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.seaFreight==0">
            {{ $t('price.none') }}
          </span>
          <template v-else>
            {{ scope.row.seaFreight }} {{ currencyMap[scope.row.seaFreightCurrency] }} / {{ getUnitTitle(scope.row.seaFreightVolume ) }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="clearanceFreight"
        :label="$t('price.clearanceFreight')"
        align="center"
        header-align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.clearanceFreight==0">
            {{ $t('price.none') }}
          </span>
          <template v-else>
            {{ scope.row.clearanceFreight }} {{ currencyMap[scope.row.clearanceFreightCurrency] }} / {{ getUnitTitle(scope.row.clearanceFreightVolume ) }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="startTitleZh"
        :label="$t('price.startTitle')"
        align="center"
        header-align="center"
      > <template slot-scope="{row}">
        {{ $l(row, 'startTitle') }}
      </template>
      </el-table-column>
      <el-table-column
        prop="destTitleZh"
        :label="$t('price.destTitle')"
        align="center"
        header-align="center"
      > <template slot-scope="{row}">
        {{ $l(row, 'destTitle') }}
      </template>
      </el-table-column>
      <el-table-column
        prop="estimatedSales"
        :label="$t('price.estimatedSales')"
        align="center"
        header-align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.estClearanceFreight==0&&scope.row.estSeaFreight==0">
            {{ $t('price.none') }}
          </span>
          <template v-else>
            {{ $t('运费') }}:{{ scope.row.estSeaFreight }} {{ currencyMap[scope.row.seaFreightCurrency] }}
            <div v-if="scope.row.charging==0">
              {{ $t('清关费') }}:{{ scope.row.estClearanceFreight }} {{ currencyMap[scope.row.clearanceFreightCurrency] }}
            </div>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div style="background: #F5F5F5;margin-top: 30px;position: relative;">
      <div style="display: flex; align-items: flex-end;padding: 30px 20px;">
        <img src="@/assets/price/notice.png" alt style="width: 30px; height: 30px">
        <span style="font-size: 22px;font-weight: bold;color: #333333;line-height: 30px;margin-left: 5px;">{{ $t('price.notice') }}：</span>
      </div>
      <div style="background: #fff;font-size: 14px;padding: 20px 30px 30px;margin: 0px 20px;" v-html="text">{{ text }}</div>
      <div style="position: absolute;right: 10px;top: -10px;">
        <img src="@/assets/price/bg.png" alt style="width: 240px; height: 120px">
      </div>
    </div>
  </div>
</template>

<script>
import DictSelector from '@/components/DictSelector'
import ProductSelector from '@/components/ProductSelector'
import { getDictData, getDictDatas } from '@/utils/dict'
import Selector from '@/components/Selector'
import { getTradeCityList, getChannelList } from '@/api/data'
import { getCalculationList } from '@/api/coupon'
import DictTag from '@/components/DictTag'
import { getNeedKnow, getUnitList, getCurrencyList } from '@/api/data'
export default {
  name: 'Price',
  components: {
    ProductSelector, DictSelector, Selector, DictTag
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        departureId: '',
        objectiveId: '',
        prodId: '',
        transportId: null,
        channelId: null
      },
      channelList: [], // 出货取到
      currencyList: [],
      routerList: [],
      orderList: [],
      transportTypeList: [], // 运输方式
      transportList: [],
      tradeCityList: [],
      unitList: [], // 单位列表
      text: ''
    }
  },
  computed: {
    expoerCityList() {
      return this.tradeCityList.filter((item) => item.type == 2)
    },
    importCityList() {
      return this.tradeCityList.filter((item) => item.type == 1)
    },

    getDictData() {
      return (type, value) => getDictData(type, value) || {}
    },
    getDictDatas() {
      return getDictDatas
    },
    // 根据渠道id显示渠道名
    getChannelNameById() {
      return (channelId) => {
        var channe = this.channelList.find((item) => item.channelId == channelId)
        if (channe) {
          return this.$l(channe, 'name')
        } else {
          return ''
        }
      }
    },
    currencyMap() {
      const map = {}
      this.currencyList.forEach(item => {
        map[item.id] = this.$l(item, 'title')
      })
      return map
    },
    getUnitTitle() {
      return unitId => {
        for (const index in this.unitList) {
          const unitItem = this.unitList[index]
          if (unitItem.id == unitId) {
            return this.$l(unitItem, 'title')
          }
        }
      }
    }
  },
  created() {
    getChannelList().then((res) => (this.channelList = res.data))
    getTradeCityList().then((res) => (this.tradeCityList = res.data))
    getNeedKnow({ key: 'pricequery' }).then((res) => {
      this.text = this.$l(res.data, 'content')
    })
    getUnitList().then(response => {
      this.unitList = response.data
    })
    getCurrencyList().then(res => {
      this.currencyList = res.data
    })
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.getData()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['queryForm'].resetFields()
    },
    getData() {
      this.$refs['queryForm'].validate(v => {
        if (v) {
          this.queryParams.boxGauge = `${this.queryParams.long}*${this.queryParams.wide}*${this.queryParams.high}`
          getCalculationList(this.queryParams).then(r => {
            this.orderList = r.data
          })
        }
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-table__header .el-table__cell{
  background-color: #27417C;
  font-size: 13px;
  height: 48px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
}
</style>
