<template>
  <div class="app-container">
    <div class="page-title">{{$route.query.product_id ? productTitle + '-' : '全部'}}路线价格列表</div>
    <!-- 搜索工作栏 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <!-- <el-form-item label="商品编码" prop="productCode" v-if="!$route.query.product_id">
          <el-input v-model="queryParams.productCode" placeholder="请输入商品编码" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>

        <el-form-item label="海关编码" prop="customsCode" v-if="!$route.query.product_id">
          <el-input v-model="queryParams.customsCode" placeholder="请输入海关编码" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item> -->

        <el-form-item label="商品名称" prop="titleZh" v-if="!$route.query.product_id">
          <el-input v-model="queryParams.titleZh" placeholder="请输入中英文名称、商品编码、海关编码" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        
        <el-form-item label="商品类型" prop="typeId" v-if="!$route.query.product_id">
          <el-select v-model="queryParams.typeId" placeholder="选择商品类型" clearable>
            <el-option v-for="type in typeList" :key="type.id" :label="type.titleZh" :value="type.id"/>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="商品属性" prop="attrId" v-if="!$route.query.product_id">
          <el-select v-model="queryParams.attrId" placeholder="选择商品属性" clearable>
            <el-option v-for="attr in attrList" :key="attr.id" :label="attr.attrName" :value="attr.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="商品特性" prop="attrId" v-if="!$route.query.product_id">
          // TODO
        </el-form-item> -->
        <el-form-item label="运输方式" prop="transportType">
          <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportType" formatter="number" />
        </el-form-item>  
        <el-form-item label="出货渠道" prop="shippingChannelId">
        <el-select v-model="queryParams.shippingChannelId" clearable>
          <el-option v-for="item in channelList" :key="item.id" :label="item.nameZh" :value="item.channelId" /> 
        </el-select>
      </el-form-item> 
        <el-form-item label="始发地" prop="startCityId">
          <el-select v-model="queryParams.startCityId" clearable>
            <el-option v-for="city in startCityList" :key="city.id" :label="city.titleZh" :value="city.id" /> 
          </el-select>
        </el-form-item>  

      <el-form-item label="目的地" prop="destCityId">
        <el-select v-model="queryParams.destCityId" clearable>
          <el-option v-for="city in destCityList" :key="city.id" :label="city.titleZh" :value="city.id" /> 
        </el-select>
      </el-form-item>  
      
      <el-form-item label="状态" prop="destCityId" v-if="!$route.query.product_id">
        // TODO
      </el-form-item>
  
      
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <!--全部路线吗没有新增入口，指定商品的路线价格才有添加路线-->
      <el-col :span="1.5" v-if="$route.query.product_id">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['ecw:product-price:create']">新建价格</el-button>
      </el-col>
      <el-col :span="1.5">
        <!--未指定商品-->
        <el-button  v-if="!$route.query.product_id" type="primary" plain icon="el-icon-setting" size="mini" @click="handleBatchEdit">批量设置价格</el-button>
        <el-button  v-if="!$route.query.product_id" type="primary" plain icon="el-icon-setting" size="mini" @click="batchBlock" :disabled="multiple">批量加入黑名单</el-button>
        <el-button  v-if="!$route.query.product_id" type="primary" plain icon="el-icon-setting" size="mini" @click="batchOff" :disabled="multiple">批量下架</el-button>

        <!--指定商品-->
        <el-button v-if="$route.query.product_id" type="primary" plain icon="el-icon-setting" size="mini" @click="batchSetSingleProductPrice">批量设置单个商品的路线路线</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
                   v-hasPermi="['ecw:product-price:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column label="序号" prop="id" width="50" />

      <el-table-column label="商品编码" align="center" prop="productCode" >
        <template slot-scope="{row}">
            <el-link type="primary" @click.native="handleUpdate(row)">
              {{ row.productDO ? row.productDO.productCode : '无productDO字段' }}
            </el-link>
        </template>
      </el-table-column>

      <el-table-column label="海关编码" align="center" prop="customsCode">
        <template slot-scope="{row}">
            <div>
              {{ row.productDO ? row.productDO.customsCode : '无productDO字段' }}
            </div>
        </template>
      </el-table-column>

      <el-table-column label="商品类型" align="center" prop="typeId">
        <template slot-scope="{row}">
          <span>{{ row.productDO ? getTypeName(row.productDO.typeId) : '无productDO字段' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品名称" align="center" prop="productName">
        <template slot-scope="{row}">
            <el-link type="primary" @click.native="handleUpdate(row)">
              {{ row.productDO ? row.productDO.titleZh + '/' + row.productDO.titleEn : '无productDO字段' }}
            </el-link>
        </template>
      </el-table-column>

      <el-table-column prop="tansportType" label="运输方式" align="center" width="100">
          <template slot-scope="scope">
            <div>
              {{ transportName(scope.row.warehouseLineDO.transportType) }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="tansportType" label="出货渠道" align="center" width="100">
          <template slot-scope="{row}">
            <div>
              {{ channelName(row.shippingChannelId) }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="startDestTitle" label="始发地/目的地" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.warehouseLineDO.startTitleZh }}
              <br />
              {{ scope.row.warehouseLineDO.destTitleZh }}
            </div>
          </template>
      </el-table-column>

      <el-table-column prop="price" label="价格" align="center">
          <template slot-scope="scope">
            <div>
              海运费:{{ getCurrencySymbol(scope.row.transportPriceUnit) + scope.row.transportPrice}}&nbsp; 
              {{ getCurrencyTitle(scope.row.transportPriceUnit) + '/' + getUnitTitle(scope.row.transportVolumeUnit)}}
              <br />
              清关费:{{ getCurrencySymbol(scope.row.clearancePriceUnit) + scope.row.clearancePrice}}&nbsp; 
              {{ getCurrencyTitle(scope.row.clearancePriceUnit) + '/' + getUnitTitle(scope.row.clearanceVolumeUnit)}}
            </div>
          </template>
      </el-table-column>

      <el-table-column prop="auditStatus" align="center" label="状态" width="120">
        <template slot-scope="scope">
          <div>
              {{ statusName(scope.row) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="advanceStatus" label="预付" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <!-- {{ getAdvanceStatuTitle(scope.row.advanceStatus) }} -->
              <dict-tag :type="DICT_TYPE.ECW_PAY_ADVANCE" :value="scope.row.needPay"></dict-tag>
            </div>
          </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['ecw:product-price:update']">编辑</el-button>

          <el-button size="mini" type="text" icon="el-icon-edit" @click="updateStatus(scope.row, 'blacklist')"
                    >{{ scope.row.blacklist == 0 ? '加入黑名单' : '移除黑名单' }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="updateStatus(scope.row, 'auditStatus')"
                    >{{scope.row.auditStatus == AuditStatusEnum.PASS ? '下架' : '上架'}}</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['ecw:product-price:delete']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

  </div>
</template>

<script>
import { createProductPrice, updateProductPrice, deleteProductPrice, getProductPrice, getProductPricePage, exportProductPriceExcel, batchBlock, batchOff } from "@/api/ecw/productPrice";
import { openedRouterList } from "@/api/ecw/warehouse";
import { getTradeCityList } from "@/api/ecw/region";
import { getProductTypeList } from "@/api/ecw/productType";
import { getProductAttrList } from "@/api/ecw/productAttr";
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
import { getCurrencyList } from '@/api/ecw/currency';
import { getUnitList } from '@/api/ecw/unit';
import { AuditStatusEnum} from '@/utils/constants'
import { getChannelList } from '@/api/ecw/channel';
import DictTag from '@/components/DictTag'
import {arrryToKeyedObjectBy} from '@/utils/index'
import { getProduct } from '@/api/ecw/product';
export default {
  name: "ProductPrice",
  components: {
    DictTag
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //特性列表
      attrList:[],
      typeList: [],
      product: null,
      cityList: [],
      /* startCityList: [],  //始发地城市
      destCityList: [],   //目的地城市 */
      routedList: [],     //已开头路线列表
      currecyList: [],    //货币列表
      unitList: [],       //单位列表
      channelList:[] , // 渠道
      routeParams:{},    //路线搜索条件
      isUpdate: false,   //更新操作

      //货柜位置
      locationList:[],

      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品价格列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dateRangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        productId: null,
        warehouseLineId: null,
        transportType: null,
        transportPrice: null,
        transportPriceUnit: null,
        transportVolumeUnit: null,
        clearancePrice: null,
        clearancePriceUnit: null,
        clearanceVolumeUnit: null,
        shippingChannelId: null,
        status: null,
      },
      // 表单参数
      form: {
        typeId: null,
        titleZh: null
      },
      // 表单校验
      rules: {
        typeId: [{ required: true, message: "产品类型不能为空", trigger: "blur" }],
        titleZh: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
        titleEn: [{ required: true, message: "英文名称不能为空", trigger: "blur" }],
        transportPrice: [{ required: true, message: "海运费不能为空", trigger: "blur" }],
        clearancePrice: [{ required: true, message: "清关费不能为空", trigger: "blur" }],
        advanceStatus: [{ required: true, message: "是否预付不能为空", trigger: "blur" }],
        containerLocation:[{ required: true, message: "货柜位置不能为空", trigger: "blur" }],
        square:[{ required: true, message: "方数不能为空", trigger: "blur" }],
        needBook:[{ required: true, message: "预约入仓不能为空", trigger: "blur" }],
      },

      lineList: [],
      transportDatas: getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE),
      /* advanceStatusDictDatas: getDictDatas(DICT_TYPE.ADVANCE_STATUS), */
      AuditStatusEnum: AuditStatusEnum,
      locationList: getDictDatas(DICT_TYPE.ECW_CONTAINER_LOCATION),
      
    };
  },

  computed: {
    // 商品名称
    productTitle(){
      if(!this.product){
        return ''
      }
      return this.product.titleZh
    },
    // 渠道用id做键值
    keyedChannel(){
      return arrryToKeyedObjectBy(this.channelList, 'channelId')
    },
    // 根据渠道id获取渠道名
    channelName(){
      return id => {
        return this.keyedChannel[id] ? this.keyedChannel[id].nameZh : null
      }
    },
    // 根据类型获取类型名称
    getTypeName() {
      return typeId => {
        for(let index in this.typeList) {
          let typeItem = this.typeList[index];
          if(typeItem.id == typeId) {
            return typeItem.titleZh;
          }
        }
      }
    },
    // 根据状态获取状态名称 ，这个应该可以改成字典,目前接口缺少相关数据，待定
    statusName() {
      return row => {
        if(row.blacklist) return '黑名单';
        if(row.auditStatus === AuditStatusEnum.PASS) return '已审核';
        return '已下架';
      }
    },

    // 根据运输方式获取名称
    transportName() {
      return transportType => {
        return this.getDictDataLabel(this.DICT_TYPE.ECW_TRANSPORT_TYPE, transportType)
      }
    },
    // 显示币种符号
    getCurrencySymbol() {
      return currencyId => {
        for(let index in this.currecyList) {
          let currecyItem = this.currecyList[index];
          if(currecyItem.id == currencyId) {
            return currecyItem.fuhao;
          }
        }
      }
    },
    // 显示币种名称
    getCurrencyTitle() {
      return currencyId => {
        for(let index in this.currecyList) {
          let currecyItem = this.currecyList[index];
          if(currecyItem.id == currencyId) {
            return currecyItem.titleZh;
          }
        }
      }
    },

    getUnitTitle() {
      return unitId => {
        for(let index in this.unitList) {
          let unitItem = this.unitList[index];
          if(unitItem.id == unitId) {
            return unitItem.titleZh;
          }
        }
      }
    },

    startCityList(){
      return this.cityList.filter(item => item.type == 2 || item.type == 3)
    },
    destCityList(){
      return this.cityList.filter(item => item.type == 1 || item.type == 3)
    },
  },

  activated() {
    /* console.log('activated', this.product.id)
    this.$set(this.queryParams, 'typeId', +this.$route.query.product_type || null)

    let productId = this.product?.id
    console.log(this.$route.query.product_id, productId, this.$route.query.product_id != productId)
    if(this.$route.query.product_id != productId){
      this.queryParams = {
        pageNo: 1,
        pageSize: 10
      }
    }
    this.handleQuery() */
  },
  watch:{
    '$route.query.product_id'(){
      console.log(this.$route.query)
      if(!this.$route.query.product_id){
        return this.product = null
      }
      let productId = this.product?.id
      if(this.$route.query.product_id != productId){
        this.queryParams = {
          pageNo: 1,
          pageSize: 10
        }
        getProduct(this.$route.query.product_id).then(res => {
          this.product = res.data
        })
        this.handleQuery()
      }
    }
  },
  created() {
    if(this.$route.query.product_type){
      this.$set(this.queryParams, 'typeId', +this.$route.query.product_type);
    }
    // 指定产品获取产品信息
    if(this.$route.query.product_id){
      getProduct(this.$route.query.product_id).then(res => {
        this.product = res.data
      })
    }else{
      // 不指定产品获取类型等信息
      this.getTypeList();
      this.getAttrList();
    }
    
    //获取城市列表
    this.getAllCityList();
    this.getChannelList()
   
    //获取货币列表
    this.requestCurrencyList();
    //获取单位列表
    this.requestUnitList();

    this.$nextTick(() => {
      this.getList();
    })
  },



  methods: {
    getChannelList(){
      getChannelList().then(res => this.channelList = res.data)
    },
    /** 获取产品属性列表 */
    getAttrList() {
      getProductAttrList().then(response => {
          this.attrList = response.data;
      })
    },

     /** 获取产品类型列表 */
    getTypeList() {
      getProductTypeList().then(response => {
        this.typeList = response.data;
      })
    },

    /**获取所有城市列表 */
    getAllCityList() {
      getTradeCityList({}).then(response => {
          this.cityList = response.data;
      })
    },

    /**获取已开通路线列表 */
    getOpenedRouterList() {
        openedRouterList(this.routeParams).then(response => {
            this.routedList = response.data;
            this.setDefaultSelect();
        })
    },

    /**获取所有货币列表 */
    requestCurrencyList() {
      getCurrencyList().then(response => {
        this.currecyList = response.data;
      }) 
    },

    /**获取所有单位列表 */
    requestUnitList() {
      getUnitList().then(response => {
        this.unitList = response.data;
      })
    },

    handleSelectionChange(val) {
        this.lineList = val;
    },

    /**运输线路改变 */
    transportTypeChange(newVal) {
      this.routeParams.transportType = this.form.transportType;
      this.getOpenedRouterList();
    },

    /**始发地改变 */
    startCityChange(newVal) {
      this.routeParams.startCityId = this.form.startCityId;
      this.getOpenedRouterList();
    },

    /**目的地改变 */
    destCityChange(newVal) {
      this.routeParams.destCityId = this.form.destCityId;
      this.getOpenedRouterList();
    },

     handleStatusChange(row) {
      updateProductPrice(row).then(() => {
        this.$modal.msgSuccess("修改成功");
      }).catch(function() {
        row.auditStatus = row.auditStatus === AuditStatusEnum.PASS ? AuditStatusEnum.NOT_PASS : AuditStatusEnum.PASS;
      });
    },

    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = {...this.queryParams};
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
      // 执行查询
      getProductPricePage(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        productId: undefined,
        warehouseLineId: undefined,
        transportPrice: undefined,
        transportPriceUnit: undefined,
        transportVolumeUnit: undefined,
        clearancePrice: undefined,
        clearancePriceUnit: undefined,
        clearanceVolumeUnit: undefined,
        status: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      return this.$router.push('../../lineProject/product-price/edit?' + (new URLSearchParams(this.$route.query)).toString())
      
    },
    // 批量修改单个商品的价格（一条或者多条，后者全部路线）
    batchSetSingleProductPrice(){
        this.$router.push('../../lineProject/product-price/edit?action=batchUpdate&product_id=' + this.$route.query.product_id + '&ids=' + this.ids)
    },
    // 批量设置路线
    handleBatchEdit() {
      this.$router.push('../../lineProject/batch-edit')
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      return this.$router.push('../../lineProject/product-price/edit?action=update&id=' + row.id)
    },

    updateStatus(row, type) {
      if(type == 'blacklist') {
        row.blacklist=row.blacklist == 0 ? 1 : 0;
      } else if(type == 'auditStatus') {
        row.auditStatus=row.auditStatus === AuditStatusEnum.PASS ? AuditStatusEnum.NOT_PASS : AuditStatusEnum.PASS;
      }
      updateProductPrice(row).then(() => {
        this.$modal.msgSuccess("修改成功");
      }).catch(function() {
        if(statusType == 'blacklist') {
          row.blacklist = row.blacklist === 1 ? 0 : 1;
        } else {
          row.auditStatus = row.auditStatus === AuditStatusEnum.PASS ? AuditStatusEnum.NOT_PASS : AuditStatusEnum.PASS;
        }
        
      });
    },

    
    checkSelectable() {
      return !this.isUpdate;
    },


    setDefaultSelect() {
      let vm = this;
      setTimeout(() => {
         // 修改线路价格，选中已经选择的
        if(vm.isUpdate && vm.routedList && vm.routedList.length) {
            vm.$refs.routeTable.toggleRowSelection(vm.routedList[0]);
        }
      }, 300);
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }

        if(!this.lineList || !this.lineList.length) {
            this.$message.error('请选择线路');
            return;
        }
        let lineChannelList = [];
        //TODO  ，lineChannelList实体空运的时候需要传出货渠道ID--shippingChannelId
        this.lineList.map((item) => {
            lineChannelList.push({lineId: item.id});
            return item;
        });
        this.form.lineChannelList = lineChannelList;

        // 修改的提交
        if (this.form.id != null) {
          updateProductPrice(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
          return;
        }
        // 添加的提交
        this.form.productId = this.product.id;
        createProductPrice(this.form).then(response => {
          this.$modal.msgSuccess("请求成功");
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除产品价格编号为"' + id + '"的数据项?').then(function() {
          return deleteProductPrice(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = {...this.queryParams};
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
      // 执行导出
      this.$modal.confirm('是否确认导出所有产品价格数据项?').then(() => {
          this.exportLoading = true;
          return exportProductPriceExcel(params);
        }).then(response => {
          this.$download.excel(response, '${table.classComment}.xls');
          this.exportLoading = false;
        }).catch(() => {});
    },
    // 表格多选
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    batchBlock(){
      batchBlock({ids: this.ids.join(',')}).then(res => {
        this.$message.success(res.msg || '操作成功')
        this.handleQuery()
      })
    },
    batchOff(){
      batchOff({ids: this.ids.join(',')}).then(res => {
        this.$message.success(res.msg || '操作成功')
        this.handleQuery()
      })
    },
    
  }
};
</script>

