<template>
  <div style="width:950px" class='ProductSKUException'>
    <div>
      <div class="conditionContent">
          <div class="itemContent">
            <div class="itemLabel">
              店铺名称
            </div>
            <DropMultiSelectFilter
                  ref="shopID"
                  class="input_box"
                  :data="shopIDList"
                  :default-selected="defaultSelectedshopID"
                  :total-row-count="shopIDtotalRowCount"
                  :show-colname-key="'isak'"
                  :columns="columnsshopID"
                  :auto-data="shopIDAutoData"
                  @on-page-change="changePageShop($event,'shopID')"
                  @on-input-value-change="InputValueChangeShop($event,'shopID')"
                  @on-popper-show="searchShopData('shopID')"
                  @on-fkrp-selected="checkDataShop($event,'shopID')"
                  @on-focus="focusInputValueChangeShop($event,'shopID')"
                  @on-clear="clearDataShop('shopID')"
                />
          </div>
          <div class="itemContent">
            <div class="itemLabel"  style='min-width:84px;'>
              平台SKU编码
            </div>
            <Input
              style="width:240px"
              v-model="selectGoodsData.PLATFORMSKU"
              @on-enter='getSKUException("search")'
              clearable
            />
          </div>
          <div class="itemContent">
            <div class="itemLabel"  style='min-width:84px;'>
              平台SKU
            </div>
            <Input
              style="width:240px"
              v-model="selectGoodsData.PSKUCODE"
              @on-enter='getSKUException("search")'
              clearable
            />
          </div>
          <div class="itemContent">
            <div class="itemLabel">
              商品编码
            </div>
            <Input
              v-model="selectGoodsData.PRODUCTCODE"
              @on-enter='getSKUException("search")'
              clearable
            />
          </div>
          <div class="itemContent">
            <div class="itemLabel">
              {{ PLATFORM[$route.params.tableName].colid=='194865'?'商品标题/规格':'商品标题' }}
            </div>
            <Input
              v-model="selectGoodsData.TITLE"
              @on-enter='getSKUException("search")'
              clearable
            ></Input>
          </div>
          <div class="itemContent" v-if="PLATFORM[$route.params.tableName].colid=='194859' || PLATFORM[$route.params.tableName].colid=='194828'">
            <div class="itemLabel">
              平台SKU属性
            </div>
            <Input
              v-model="selectGoodsData.SKUPROPERTIES"
              @on-enter='getSKUException("search")'
              clearable
            />
          </div>
        </div>
        <ShrinkOrExtend
          :form-data="originalOrderData"
          :height="shrinkHeight"
          :current-value="currentValue"
          @click="upOrDown(shrinkHeight)"
          @on-reset="resetGoodsData"
          @on-query="getSKUException('search')"
        />
        <Table
        :height="tableHeight"
        :columns="SKUColumns"
        :data="GoodsData"
        highlight-row
        @on-select="selectExceptionData"
        @on-select-cancel="selectExceptionCancel"
        @on-select-all="selectExceptionDataAll"
        @on-select-all-cancel="selectExceptionDataCancel"
        ></Table>
        <div class="pageContent">
          <Page
            size="small"
            :current="GoodsCurrentPage"
            show-elevator
            :total="totalGoods"
            show-total
            show-sizer
            @on-change="changePageGoods"
            @on-page-size-change="changeSizeGoods"
          />
        </div>
      <footer style="display: flex; justify-content: center; margin-top: 12px;padding-top: 16px;border-top: 1px solid #DEDEDE;;">
        <Button
          type="fcdefault"
          @click="cancelSelectGoods"
        >
          取消
        </Button>
        <Button
          type="posdefault"
          style="margin-left: 16px"
          @click="okSelectGoods"
        >
          确认
        </Button>
      </footer>
    </div>
  </div>
</template>

<script>
import ShrinkOrExtend from '../customizedContent/shrinkOrExtend' //收缩伸展搜索条件组件
  const R3 = window.R3;
  const { network, urlSearchParams, store } = R3;
  export default {
    components:{
      ShrinkOrExtend
    },
    data() {
      return {
        PLATFORM: {
          // 淘宝订单
          T_V_OMSTAOBAOORDER:{colid:'194859',platNum: 2}, // 2
          // 京东订单
          T_OMSJINGDONGORDER: {colid:'194865',platNum: 4}, // 4
          // 淘宝分销订单
          T_V_OMSFENXIAOORDER: {colid:'194824',platNum: 3}, // 3
          // 通用订单
          T_V_OMSSTANDPLATORDER: {colid:'194828',platNum: 0}, //0
        },
        shrinkHeight: '58px',
        currentValue: false,//默认收缩
        idarray: [],
        selectGoodsData:{//选择商品搜索条件
          PLATFORMSKU:'',//平台sku编码
          PSKUCODE: '', // 平台sku
          SHOPID:[],//店铺
          SHOPNAME: [], //
          PRODUCTCODE:'',//商品编码
          TITLE:'',//商品名称
          SKUPROPERTIES: '', //平台sku属性
        },
        selectArrExceptions:[],//选择商品表格选中项
        tableHeight: '200',
        SKUColumns:[
          // {
          //   type: 'selection',
          //   width: 60,
          //   align: 'center'
          // },
          {
            type: 'index',
            title: '序号',
          },
          {
            title: '店铺名称',
            key: 'SHOPNAME',
            width: '150',
            tooltip: true,
          },
          {
            title: '平台SKU编码',
            key: 'PLATFORMSKUCODE',
            width: '100',
            tooltip: true,
          },
          {
            title: '平台SKU',
            key: 'PSKUCODE',
            width: '100',
            tooltip: true,
          },
          {
            title: '商品编码',
            key: 'PRODUCTCODE',
            width: '100',
            ellipsis: true,
            tooltip: true,
          },
          {
            title: '商品标题',
            key: 'TITLE',
            width: '150',
            tooltip: true,
          },
          {
            title: '平台SKU属性',
            key: 'SKUPROPERTIES',
            width: '120',
            tooltip: true,
          },
          {
            title: 'SKU编码',
            width: '250',
            key: 'SKU',
            render: (h, params) => {
                  const vm = this;
                  return h('DropDownSelectFilter', {
                    style: {
                      zIndex: 999,
                    },
                    props: {
                      transfer: true,
                      value: params.row.SKU, // 获取选择的下拉框的值
                      single: true,
                      data: this.SKUData,
                      totalRowCount: this.SKUData.totalRowCount,
                      showColnameKey: 'isak',
                      dataEmptyMessage: this.dataEmptyMessage,
                      columns: this.columns,
                      AutoData: this.AutoData,
                      isBackRowItem: true,
                    },
                    on: {
                      'on-popper-show': (e) => {
                        this.searchSKUData(e,params)
                      },
                      'on-page-change': (e) => {
                        this.changePageSKU(e)
                      },
                      'on-input-value-change': (e) => {
                        this.GoodsData[params.index] = {
                          ...this.GoodsData[params.index],
                          SKU: e,
                          SKUNew: e,
                        }
                        this.focusInputValueChangeSKU(e)
                      },
                      'on-fkrp-selected': (e) => {
                        this.checkDataSKU(e, params)
                      },
                      'on-focus':(e) => {
                        this.focusInputValueChangeSKU(e)
                      },
                      'on-clear':(e) => {
                        this.clearDataSKU(params)
                      },
                    }
                  },);
                }
          },
          {
            title: '系统SKU名称',
            key: 'SKUNAME'
          },
        ],
        GoodsData:[],//选择商品数据

        SKUData: {},
        dataEmptyMessage: '数据加载中...', // 无数据的提示
        columns:['name','value'],// 展现的组
        AutoData:[],//模糊搜索
        defaultSelected:[],//默认数据
        currentIndex: 0, // 默认初始索引值

        // 换货商品page
        totalGoods: 0, // 总条数
        currentGoodsPage:1, // 页码
        pageSizeGoods: 10, // 每页的条数
        GoodsCurrentPage: 1,


         // 平台商品选择商品弹框店铺参数
        shopIDList: {}, // 店铺下拉展示数据
        shopIDtotalRowCount: 0,
        shopIDcurrentIndex: 0, // 店铺搜索初始index
        shopIDAutoData: [], // 店铺模糊搜索的结果组
        columnsshopID: ['name', 'value'], // 展现的组
        defaultSelectedshopID: [],
      };
    },
    created() {
      let modelName = R3.getModuleName();
      this.idarray = this.$store.state[modelName].buttons.selectIdArr;
      this.getSKUException();
      if(this.PLATFORM[this.$route.params.tableName].colid!='194859' && this.PLATFORM[this.$route.params.tableName].colid!='194828'){
        this.SKUColumns.splice(6,1)
      }
      if(this.PLATFORM[this.$route.params.tableName].colid=='194865'){
        this.SKUColumns[5].title= '商品标题/规格'
      }
    },
    methods: {
      upOrDown(height) {
        this.currentValue = !this.currentValue;
        document.getElementsByClassName('conditionContent')[0].style.maxHeight = this.currentValue ? height : '';
        this.tableHeight = this.currentValue ? '250' : '200';
      },
      // 重置选择商品搜索条件
      resetGoodsData(){
        this.selectGoodsData={
          PLATFORMSKU:'',//平台sku编码
          PSKUCODE: '', // 平台sku
          SHOPID:[],//店铺
          SHOPNAME: [], //
          PRODUCTCODE:'',//商品编码
          TITLE:'',//商品名称
          SKUPROPERTIES: '',//平台sku属性
        }
        this.defaultSelectedshopID = [];
        this.selectArrExceptions=[]
        this.getSKUException()
      },
      // 单选下拉分页改变
      changePageShop(e,type) {
        if(type == 'shopID') {
          this.shopIDcurrentIndex = (e - 1) * 10;
          this.searchShopData('shopID');
        }
      },
      // 外键下拉框1234
      searchShopData(type) {
        if(type == 'shopID'){
          let virtual = {
            searchdata: {
              isdroplistsearch: true,
              refcolid: this.PLATFORM[this.$route.params.tableName].colid,
              startindex: this.shopIDcurrentIndex,
              range: 10,
            }
          }
          network.post('/p/cs/QueryList', urlSearchParams(virtual)).then((res) => {
            if (res.data.code == 0) {
              this.shopIDtotalRowCount = res.data.data.totalRowCount;
              this.shopIDList = res.data.data;
              this.shopIDcurrentIndex = 0;
            }
          });
        }
      },
      // 单选下拉模糊搜索数据
      InputValueChangeShop(e,type) {
        if(type == 'shopID'){
          let virtual = {
            ak: e,
            colid: this.PLATFORM[this.$route.params.tableName].colid,
            fixedcolumns: {}
          };
          network.post('/p/cs/fuzzyquerybyak', urlSearchParams(virtual)).then((res) => {
            if (res.data.code == 0) {
              let list = [];
              res.data.data.forEach(item => {
                let obj = {
                  value: item.value,
                  id: item.id
                };
                list.push(obj);
              });
              this.shopIDAutoData = list;
            }
          });
        }
      },
      // 外键下拉框搜索
      focusInputValueChangeShop(e,type) {
        if(type == 'shopID'){
          let virtual = {
            ak: e.target.value,
            colid: this.PLATFORM[this.$route.params.tableName].colid,
            fixedcolumns: {}
          };
          network.post('/p/cs/fuzzyquerybyak', urlSearchParams(virtual)).then((res) => {
            if (res.data.code == 0) {
              let list = [];
              res.data.data.forEach(item => {
                let obj = {
                  value: item.value,
                  id: item.id
                };
                list.push(obj);
              });
              this.shopIDAutoData = list;
            }
          });
        }
      },
      // 单选下拉选中
      checkDataShop(val,type) {
        this.selectGoodsData.SHOPID = []
        this.getSKUException("search")
        if(type == 'shopID'){
          val.forEach(item => {
            this.selectGoodsData.SHOPID.push(item.ID)
          })
        }
      },
      clearDataShop(type) {
        if(type == 'shopID'){
          this.selectGoodsData.SHOPID = '';
          this.getSKUException("search")
        }
      },

      // 获取异常SKU数据
      getSKUException(type) {
        if(type == 'search'){
          this.currentGoodsPage = 1;
        }
        let params = {
          page: this.currentGoodsPage,
          limit: this.pageSizeGoods,
          psku: this.selectGoodsData.PLATFORMSKU,
          pskucode: this.selectGoodsData.PSKUCODE,
          title: this.selectGoodsData.TITLE,
          skuProperties: this.selectGoodsData.SKUPROPERTIES,
          pcode: this.selectGoodsData.PRODUCTCODE,
          sellerIds: this.selectGoodsData.SHOPID,
          platform: this.PLATFORM[this.$route.params.tableName].platNum
        }
        network.post('/p/cs/order/abnormal/sku/list',params).then(res => {
          if(res.data.code == 0){
            let data = res.data.data.list;
            let list = [];
            data.forEach(item => {
              if(item){
                let obj = {
                sellerId: item.sellerId?item.sellerId:'',
                SHOPNAME: item.sellernick?item.sellernick:'',
                PLATFORMSKUCODE: item.psku?item.psku:'',
                PSKUCODE: item.pskucode?item.pskucode:'',
                PRODUCTCODE: item.pcode?item.pcode:'',
                TITLE: item.title?item.title:'',
                SKUPROPERTIES:item.skuProperties?item.skuProperties:'',
                SKUNew: '',
                SKU: '',
                SKUNAME: '',
                }
                list.push(obj)
              }
            })
            this.totalGoods = res.data.data.total; // 总数量
            this.GoodsData = list;
          }
        })
      },

      // 选择商品 在单选下有效，选中某一项时触发
      selectGoods(selection){
        this.selectArrExceptions=[selection]
      },

      // 选择商品页码改变时触发
      changePageGoods(val) {
        // 1=>0 2=>10 3=>20
        this.currentGoodsPage = val;
        this.getSKUException();
      },
      // 选择商品页数改变时触发
      changeSizeGoods(val) {
        this.pageSizeGoods = val;
        this.currentGoodsPage = 1;
        this.getSKUException();
      },

      // 外键下拉框
      searchSKUData(e,param){
        let virtual={
          searchdata:{
            "isdroplistsearch":true,
            "refcolid":199343,
            "startindex":this.currentIndex,
            "range":10,
          }
        }
        network.post('/p/cs/QueryList',urlSearchParams(virtual)).then((res) => {
          if(res.data.code==0){
            this.SKUData=res.data.data
            this.currentIndex=0
          }
        })
      },
      changePageSKU(e,param){
        this.currentIndex=(e-1)*10
        this.searchSKUData()
      },
      focusInputValueChangeSKU(e){
        let virtual={
          ak: e,
          colid: 199343,
          fixedcolumns: {}
        }
        network.post('/p/cs/fuzzyquerybyak',urlSearchParams(virtual)).then((res) => {
          if(res.data.code==0){
            this.AutoData=res.data.data
          }
        })
      },
      // 单选下拉模糊搜索数据
      InputValueChangeSKU(e){
        let virtual={
          ak: e,
          colid: 199343,
          fixedcolumns: {}
        }
        network.post('/p/cs/fuzzyquerybyak',urlSearchParams(virtual)).then((res) => {
          if(res.data.code==0){
            this.AutoData=res.data.data
          }
        })
      },
      // 单选下拉选中
      checkDataSKU(val,params) {
        params.row.SKUNew = val[0].Label
        if(val[0].rowItem.ID){
          params.row.SKUNAME = val[0].rowItem.TITLE?val[0].rowItem.TITLE.val:'';
        }else {
          params.row.SKUNAME = val[0].rowItem.TITLE?val[0].rowItem.TITLE:'';
        }
        this.GoodsData[params.index] = params.row
      },
      clearDataSKU(params) {
        params.row.SKU = '';
        params.row.SKUNAME = '';
      },

      cancelSelectGoods() {
        this.$emit('closeActionDialog', true);
      },

      // 换货表格选中某项时触发
      selectExceptionData(selection, row) {
        this.selectArrExceptions = selection;
      },
      // 换货表格取消某项时触发
      selectExceptionCancel(selection, row) {
        this.selectArrExceptions = selection;
      // console.log("取消某项后要提交的数组",  this.submitArr)
      },
      // 换货表格全选
      selectExceptionDataAll(selection) {
        this.selectArrExceptions = selection;
      // console.log("全选时提交的数组",  this.submitArr)
      },
      // 换货表格取消全选
      selectExceptionDataCancel(selection) {
        this.selectArrExceptions = selection;
      // console.log("取消全选时提交的数组",  this.submitArr)
      },

      okSelectGoods(){
        let list = [];
        this.GoodsData.forEach(item => {
          if(item.SKUNew){
            let obj = {
              sellerId: item.sellerId,
              src: item.PLATFORMSKUCODE,
              sku: item.SKUNew,
              pSkuCode: item.PSKUCODE,
              productCode: item.PRODUCTCODE,
              skuProperties: item.SKUPROPERTIES,
            }
            list.push(obj)
          }
        })
        let params = {
          platform: this.PLATFORM[this.$route.params.tableName].platNum,
          list: list
        }
        network.post('/p/cs/order/abnormal/sku/modify',params).then(res => {
          if(res.data.code == 0){
            this.cancelSelectGoods();
            this.$Message.success('异常SKU修改成功')
          }else{
            this.$Message.error(res.data.msg)
          }
        })
      }
    }
  };
</script>
<style lang = 'less'>
  .ProductSKUException .conditionContent .ark-input-innerWrap {
    height: 32px;
    line-height: 30px;
  }
  .ProductSKUException .conditionContent .ark-fkrp-select-icon {
    top: 8px;
  }
  .ProductSKUException .ark-table-cell span {
    line-height: 1.4;
  }
  .ProductSKUException .ark-table th, .ProductSKUException .ark-table td {
    height: 30px;
    line-height: 30px;
  }
</style>
<style lang="less" scoped>
  .ProductSKUException .conditionContent {
    width: 100%;
    display: flex;
    max-height: 3000px;
    overflow: hidden;
    flex-wrap: wrap;
    padding-top: 8px;
    // padding-right: 51px;
    // justify-content: space-between;
    .itemContent {
      width: calc((100% - 120px) / 3);
      display: flex;
      align-items: center;
      margin:0 20px 12px;
      .itemLabel {
        min-width: 84px;
        font-size: 12px;
        font-weight: 500;
        color: #4C4C4C;
        line-height: 17px;
        margin-right: 8px;
        text-align: right;
      }
      .posterType {
        width: calc(100% - 84px);
      }
    }
  }
  .pageContent {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
  }
</style>
