<template>
  <div style="width:854px" 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='getPriceException("search")'
              clearable
            />
          </div>
          <div class="itemContent">
            <div class="itemLabel">
              商品编码
            </div>
            <Input
              v-model="selectGoodsData.PRODUCTCODE"
              @on-enter='getPriceException("search")'
              clearable
            />
          </div>
          <div class="itemContent">
            <div class="itemLabel">
              SKU
            </div>
            <Input
              v-model="selectGoodsData.SKU"
              @on-enter='getPriceException("search")'
              clearable
            ></Input>
          </div>
        </div>
        <ShrinkOrExtend
          :form-data="originalOrderData"
          :height="shrinkHeight"
          :current-value="currentValue"
          @click="upOrDown(shrinkHeight)"
          @on-reset="resetGoodsData"
          @on-query="getPriceException('search')"
        />
        <Table 
        :height="tableHeight" 
        :columns="SKUColumns" 
        :data="GoodsData"
        @on-select="selectException"
        @on-select-cancel="selectExceptionCancel"
        @on-select-all="selectExceptionAll"
        @on-select-all-cancel="selectExceptionCancel"
        ></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 {
        shrinkHeight: '58px',
        currentValue: false,//默认收缩
        idarray: [],
        selectGoodsData:{//选择商品搜索条件
          PLATFORMSKU:'',//平台sku编码
          SHOPID:[],//店铺
          SHOPNAME: [], //
          PRODUCTCODE:'',//商品编码
          SKU:''//商品名称
        },
        submitArrException:[],//选择商品表格选中项
        tableHeight: '200',
        SKUColumns:[
          {
            type: 'selection',
            width: 60,
            align: 'center'
          }, 
          {
            type: 'index',
            title: '序号',
            align: 'center',
            // render: (h, params) => h('span', params.index + 1 + ((this.GoodsCurrentPage - 1) * this.pageSizeGoods))
          },
          {
            title: '店铺名称',
            key: 'SHOPNAME',
            width: '150',
            tooltip: true,
          },
          {
            title: '平台商品编码',
            key: 'PLATFORMPLATFORMCODE',
            width: '120',
            tooltip: true,
          },
          {
            title: '平台SKU编码',
            key: 'PLATFORMSKUCODE',
            width: '120',
            tooltip: true,
          },
          {
            title: '平台商品名称',
            key: 'TITLE',
            width: '150',
            tooltip: true,
          },
          {
            title: '成交单价',
            key: 'PRICE'
          },
          {
            title: '商品编码',
            key: 'PRODUCTCODE',
            width: '120',
            tooltip: true,
          },
          
          {
            title: 'SKU',
            key: 'SKU',
          },
        ],
        GoodsData:[],//选择商品数据

        SKUData: {},
        dataEmptyMessage: '数据加载中...', // 无数据的提示
        columns:['name','value'],// 展现的组
        AutoData:[],//模糊搜索
        defaultSelected:[],//默认数据
        currentIndex: 0, // 默认初始索引值
        
        // 换货商品page
        totalGoods: 0, // 总条数
        currentGoodsPage:0, // 页码
        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.getPriceException();
    },
    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编码
          SHOPID:[],//店铺
          SHOPNAME: [], //
          PRODUCTCODE:'',//商品编码
          SKU:''//商品名称
        }
        this.defaultSelectedshopID = [];
        this.submitArrException=[]
        this.getPriceException()
      },
      // 单选下拉分页改变
      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: 198185,
              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: 198185,
            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: 198185,
            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 = []
        if(type == 'shopID'){
          val.forEach(item => {
            this.selectGoodsData.SHOPID.push(item.ID)
            this.getPriceException("search")
          })
        }
      },
      clearDataShop(type) {
        if(type == 'shopID'){
          this.selectGoodsData.SHOPID = '';
          this.getPriceException("search")
        }
      },

      // 获取异常SKU数据
      getPriceException(type) {
        if(type=='search'){
          this.GoodsCurrentPage = 1
        }
        this.GoodsData = [];
        let params = {
          // extskuid: this.selectGoodsData.PLATFORMSKU, //平台sku编码	
          page: this.GoodsCurrentPage, 
          pageSize: this.pageSizeGoods,
          // productcode: this.selectGoodsData.PRODUCTCODE, //商品编码	
          // shopids: this.selectGoodsData.SHOPID, //店铺         
          // sku: this.selectGoodsData.SKU, // sku
        }
        params.extskuid = this.selectGoodsData.PLATFORMSKU?this.selectGoodsData.PLATFORMSKU:null;
        params.productcode = this.selectGoodsData.PRODUCTCODE?this.selectGoodsData.PRODUCTCODE:null;
        params.shopids = this.selectGoodsData.SHOPID?this.selectGoodsData.SHOPID:null;
        params.sku = this.selectGoodsData.SKU?this.selectGoodsData.SKU:null;
        network.post('/p/cs/skuprice/approve/pagelist',params).then(res => {
          if(res.data.code == 0){
            this.totalGoods =res.data.data.total
            if(res.data.data.resultList.length>0){
              let data = [];
              res.data.data.resultList.forEach(item => {
                let obj = {
                  ID: item.id,
                  SHOPNAME: item.shopname,
                  PLATFORMPLATFORMCODE: item.numiid,
                  PLATFORMSKUCODE: item.extskuid,
                  PRODUCTCODE: item.productcode,
                  TITLE: item.producename,
                  PRICE: item.actualprice,
                  SKU: item.sku
                }
                data.push(obj);
              })
              this.GoodsData = data;
            }
          }
        })
      },
      // 选择商品页码改变时触发
      changePageGoods(val) {
        // 1=>0 2=>10 3=>20 
        this.GoodsCurrentPage = val;
        this.getPriceException();
      },
      // 选择商品页数改变时触发
      changeSizeGoods(val) {
        this.pageSizeGoods = val;
        this.GoodsCurrentPage = 1;
        this.getPriceException();
      },

      selectException(selection) {
        this.submitArrException = selection;
      },
      selectExceptionCancel(selection) {
        this.submitArrException = selection;
      },
      selectExceptionAll(selection) {
        this.submitArrException = selection;
      },
      selectExceptionCancel(selection) {
        this.submitArrException = selection;
      },

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

      okSelectGoods(){
        if(this.submitArrException.length == 0){
          return this.$Message.warning('请选择需要审批的数据!')
        }
        let ids = []
        this.submitArrException.forEach(item => {
          ids.push(item.ID)
        })
        let params = {
          ids:ids
        }
        network.post('/p/cs/skuprice/approve',params).then(res => {
          if(res.data.code == 0){
            this.cancelSelectGoods()
            this.$Message.success('异常价格审批成功！')
          }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: 70px;
        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>
