<template>
  <el-dialog append-to-body :title="$t('报价单')" :visible.sync="offerDialogVisible" :close-on-click-modal="false" width="80%">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item :label="$t('编号')" prop="searchNumber">
        <el-input v-model="queryParams.searchNumber" :placeholder="$t('请输入报价单号、订单号')" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item :label="$t('客户')" prop="searchCustomer">
        <el-input v-model="queryParams.searchCustomer" :placeholder="$t('请输入客户')" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item :label="$t('客户经理')" prop="followUpSalesmanId">
        <user-selector v-model="queryParams.followUpSalesmanId" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('搜索')}}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{$t('重置')}}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="offerList" border size="mini">
      <el-table-column align="center" width="80">
        <template slot-scope="{row}">
          <el-radio v-model="offerId" :label="row.offerId">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column :label="$t('报价单号')" min-width="160px">
        <template slot-scope="{row}">
          <el-link type="primary" @click.native="$router.push('/offer/detail?offerId=' + row.offerId)">{{row.number}}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('销售阶段')" min-width="120">
        <template slot-scope="{row}">
          <dict-tag :type="DICT_TYPE.ECW_OFFER_STATUS" :value="row.status" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单编号')" min-width="150px">
        <template slot-scope="{row}">
          <el-link type="primary" @click.native="$router.push('/order/detail?orderId=' + row.orderId)">{{row.orderNo}}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('客户编号')" align="center" min-width="100">
        <template slot-scope="{row}">
          <el-link type="primary" @click.native="$router.push('/customer/query/' + row.relationId)">{{row.customerNumber}}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('客户名称')" align="center" prop="relationName" min-width="100" />
      <el-table-column :label="$t('联系方式')">
        <template slot-scope="scope">
          +{{ scope.row.relationAreaCode }}{{ scope.row.relationPhone }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('运输方式')">
        <template slot-scope="scope" >
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('渠道')" align="center" min-width="120" prop="channelName">
      </el-table-column>
      <el-table-column :label="$t('始发地')" align="center" min-width="120" prop="departureName">
      </el-table-column>
      <el-table-column :label="$t('目的地')" align="center" prop="objectiveName" min-width="120" />
      <el-table-column :label="$t('预计销售额')" min-width="160">
        <template slot-scope="{row}">
          <div class="" v-for="(item, feeIndex) in row.estCostVO.feeDtoList" :key="feeIndex">
            <dict-tag :type="DICT_TYPE.ECW_COST_FEE_TYPE" :value="item.feeType" />
            {{item.amount}} {{currencyMap[item.currencyId]}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('客户经理')" prop="creatorName" align="center" min-width="100" />
      <el-table-column :label="$t('创建时间')" align="center" min-width="160">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="offerTotal > 0" :total="offerTotal" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
        @pagination="getOfferList"/>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">{{$t('确 定')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCurrencyList } from '@/api/ecw/currency';
import { getOfferPage } from "@/api/ecw/offer"
import UserSelector from '@/components/UserSelector'

export default {
  name: "CustomerFollowSelectOffer",
  components: {
    UserSelector
  },
  props: {
    customerId: Number
  },
  data() {
    return {
      offerId: null,
      offerDialogVisible: false,
      queryParams: {
        pageNo: 1,
        pageSize: 6
      },
      offerList: [],
      offerTotal: 0,
      currencyList: [],
    }
  },
  created() {
    getCurrencyList().then(res => {
      this.currencyList = res.data
    })

    this.getOfferList()
  },
  computed:{
    currencyMap(){
        let map = {}
        this.currencyList.forEach(item => {
            map[item.id] = this.$l(item, 'title')
        })
        return map
    },
    exportCityList() {
      return this.tradeCityList.filter(item => item.type == 2)
    },
    importCityList() {
      return this.tradeCityList.filter(item => item.type == 1)
    },
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getOfferList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery();
    },
    getOfferList() {
      getOfferPage({
        ...this.queryParams,
        customerId: this.customerId
      }).then(response => {
        this.offerList = response.data.list;
        this.offerTotal = response.data.total;
      });
    },
    confirm() {
      if (this.offerId) {
        this.$emit('select', this.offerId)
        this.offerDialogVisible = false
      } else {
        this.$message.error(this.$t("请选择报价单"))
      }
    }
  }
}
</script>