<template>
    <div class='AbnormalPriceMonitoreStrategy'>
      <div class="quickOperation">
        快捷操作：
        <Button
          type="fcdefault"
          style="margin-right:8px"
          @click="saveAll"
        >
          保存
        </Button>
        <!-- <Button type="fcdefault" style="margin-right:8px" @click="refreshParams">刷新</Button> -->
        <Button
          type="fcdefault"
          @click="backToList"
        >
          返回
        </Button>
      </div>
      <div class="content">
        <div
          v-for="(item,tabId) in tabList"
          :key="tabId"
          class="block"
        >
          <foldPanel
            v-model="item.blockShow"
            :title="item.tabtext"
            :explain="item.explainText"
          >
            <div
              slot="content"
              class="block"
            >
              <div class="item">
                <Row>
                  <div
                    v-for="(i,cindex) in tabList[tabId].list"
                    :key="cindex"
                    class="form"
                  >
                    <Col
                      span="8"
                      v-if="i.standard"
                    >
                    <div
                      v-if="i.title"
                      :class="{'title':true,'order-setting-input-error':i.required}"
                    >{{ i.title }}
                      <Tooltip
                        max-width="200"
                        :content="i.explainContent"
                        placement="bottom"
                      >
                        <img
                          v-if="i.explain"
                          class="img-framelanflag"
                          src="../../../assets/icon/help.png"
                        >
                      </Tooltip>
                    </div>
                    <DatePicker
                      v-if='i.SKEY=="strategyTimeRange"'
                      type="datetimerange"
                      format="yyyy-MM-dd HH:mm:ss"
                      placeholder="请选择时间"
                      style="width: 100%;max-width:400px;min-width: 180px;"
                      transfer
                      clearable
                      @on-change="rangeDate"
                    ></DatePicker>
                    <arkDropMultiSelectFilter
                      ref="arkDropMultiSelectFilter"
                      class="shopDropMultiSelectFilter"
                      v-model="dropDownShopValue"
                      v-else-if="i.SKEY=='shop_name'"
                      :props-data="propsData"
                      :url="Url"
                      :table-request="TableRequest"
                      :http="network"
                      @on-change="DropShopvalueChange"
                    ></arkDropMultiSelectFilter>
                    <Select
                      v-model="i.VALUE"
                      :clearable='i.clearable'
                      :disabled="i.disabled"
                      class="input_box"
                      v-else-if="i.SKEY=='orderTimeType'"
                      @on-query-change="checkInputSKU($event,i)"
                    >
                      <Option
                        v-for="d in i.optionList"
                        :value="d.value"
                        :key="d.value"
                      >{{ d.label }}</Option>
                    </Select>
                    <Input
                      v-else-if="i.SKEY=='strategyName'"
                      class="input_box"
                      v-model="i.VALUE"
                      placeholder="请输入策略名称"
                      :disabled="i.disabled"
                      @on-keypress='noSpaces($event,i)'
                    />
                    <div v-else-if="i.SKEY=='maxrange'" style="display:flex;align-items: center;width:100%">
                        <Input
                        :regx='regx2'
                        v-model="i.VALUE"
                        ></Input><span style="position: absolute;right:8px;">%</span>
                    </div>
                    </Col>
                  </div>
                </Row>
              </div>
  
              <!-- <div style="min-width: 1348px;">
                <panel-form
                  tableName="EDITABNORMALPRICEMONITORESTRATEGY"
                  ref="objform"
                  class="strategy-panel"
                  @on-changeForm="onChangeForm"
                  :labelWidth="80"
                  :noResize="true"
                  display="flex"
                  :readonly="panelFormData.objreadonly"
                  :is-main-table="panelFormData.isMainTable"
                  :defaultData="panelFormData.data"
                >
                </panel-form>
              </div> -->
            </div>
          </foldpanel>
        </div>
      </div>
      <div
        class="tableArea priceMonitor"
        v-if="showDetailTable"
      >
        <Tabs
          type="card"
          :value='tabName'
          v-model='tabName'
        >
          <TabPane
            label="商品明细"
            name="name1"
          >
            <Row style="display: flex;
                  justify-content: space-around;
                  align-items: center;
                  height: 48px;
                  margin-bottom: 16px;
                  background: #F8F8F8;">
              <Col span="5">
              <div style="display: flex;align-items: center;">
                <!-- <Tooltip
                  max-width="200"
                  content="商品条码优于商品编码判断、商品编码优于商品品牌判断"
                  placement="bottom"
                >
                  <img
                    class="img-framelanflag"
                    src="../../../assets/icon/help.png"
                  >
                </Tooltip> -->
                <label style="width: 60px;text-align:right;margin-right:4px;">
                  <span style='color: red;'>*</span>监控维度</label>
                <Select
                  style="width:220px"
                  v-model="detail.PriceMonitoreDimension"
                  @on-change="selectPriceMonitoreDimension"
                  @on-enter="addReturnGoods"
                  filterable
                  clearable
                >
                  <Option
                    v-for="(option,index) in PriceMonitoreDimensionList"
                    :key="index"
                    :value="option.value"
                  >{{option.label}}</Option>
                </Select>
              </div>
              </Col>
              <Col span="5">
              <div
                style="display: flex;align-items: center;"
                v-if='detail.PriceMonitoreDimension'
              >
                <label style="width: 86px;text-align:right;margin-right:4px;"><span style='color: red;'>*</span>监控维度值</label>
                <DropDownSelectFilter
                  :single="true"
                  width='220px'
                  class="input_box"
                  :data="MonitorDimensionValue.shopData"
                  :totalRowCount="MonitorDimensionValue.shopData.totalRowCount"
                  :showColnameKey="'isak'"
                  :defaultSelected="MonitorDimensionValue.defaultSelected"
                  @on-page-change="changePageShop($event)"
                  @on-input-value-change="InputValueChangeShop($event)"
                  @on-popper-show="searchShopData()"
                  @on-fkrp-selected="checkDataShop($event)"
                  @on-focus="focusInputValueChangeShop($event)"
                  @on-blur="changeDataShop($event)"
                  @on-clear="clearDataShop()"
                  :dataEmptyMessage="MonitorDimensionValue.dataEmptyMessage"
                  :columns="MonitorDimensionValue.columns"
                  :AutoData="MonitorDimensionValue.AutoData"
                >
                </DropDownSelectFilter>
              </div>
              </Col>
              <Col span="2">
              <Button
                type="primary"
                icon="md-return-left"
                @click="addReturnGoods"
              >添加明细</Button>
              </Col>
            </Row>
            <div class="handleBtn">
              <div
                class="handleItem"
                @click="deleteReturnGoods"
              >【删除】</div>
              <!-- <div class="handleItem" @click="importGiftGoodsExcel">【导入】</div> -->
            </div>
            <Table
              height="300"
              :columns="returnColumns"
              :data="currentReturnData"
              @on-select="selectReturnData"
              @on-select-cancel="selectReturnCancel"
              @on-select-all="selectReturnDataAll"
              @on-select-all-cancel="selectReturnDataCancel"
            ></Table>
            <div class="pageContent">
              <Page
                size="small"
                :current="returnCurrentPage"
                show-elevator
                :total="totalReturn"
                show-total
                show-sizer
                @on-change="changePageReturn"
                @on-page-size-change="changeSizeReturn"
              />
            </div>
          </TabPane>
  
          <TabPane
            label="商品范围"
            name="name2"
          >
            <Row style="display: flex;padding: 0 16px;align-items: center;height: 48px;margin-bottom: 16px;background: #F8F8F8;">
              <Col
                span="4"
                class="form-item"
              >
              <label>
                <span class="form-label">品牌</span>
              </label>
              <Select
                class="value-width"
                v-model="detailForm.BRANDID"
                :label-in-value="true" 
                style="width:200px"
                filterable
                remote
                clearable
                @on-query-change="handleQueryChange"
                @on-change="changeBrand"
                :remote-method="handleFindBrand"
              >
                <Option
                  v-for="item in brandList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
              </Col>
              <Col
                span="4"
                class="form-item"
              >
              <!-- <Tooltip
                max-width="200"
                content="可以维护多个，多个分隔支持逗号、分号、空格"
                placement="bottom"
              >
                <img
                  class="img-framelanflag"
                  src="../../../assets/icon/help.png"
                >
              </Tooltip> -->
              <label>
                <span class="form-label">季节</span>
              </label>
              <Input
                class="value-width"
                v-model="detailForm.SEASON"
                placeholder="多个季节可用英文分号分隔"
              />
              </Col>
              <Col
                span="4"
                class="form-item"
              >
              <!-- <Tooltip
                max-width="200"
                content="可以维护多个，多个分隔支持逗号、分号、空格"
                placement="bottom"
              >
                <img
                  class="img-framelanflag"
                  src="../../../assets/icon/help.png"
                >
              </Tooltip> -->
              <label>
                <span class="form-label">年份</span>
              </label>
              <Input
                class="value-width"
                v-model="detailForm.YEAR"
                :regx="/^[0-9;]+$/i"
                placeholder="多个年份可用英文分号分隔"
              />
              </Col>
              <Col
                span="4"
                class="form-item"
              >
              <!-- <Tooltip
                max-width="200"
                content="可以维护多个，多个分隔支持逗号、分号、空格"
                placement="bottom"
              >
                <img
                  class="img-framelanflag"
                  src="../../../assets/icon/help.png"
                >
              </Tooltip> -->
              <label>
                <span class="form-label">大类</span>
              </label>
              <Input
                class="value-width"
                v-model="detailForm.CATEGORY"
                placeholder="多个大类可用英文分号分隔"
              />
              </Col>
              <!-- <Col
                span="7"
                class="form-item"
              >
                <span style='color: red;'>*</span>
                <Select
                  style="width:212px"
                  v-model="detailForm.MONITORTYPE"
                  @on-change="changeAlertType"
                >
                  <Option
                    v-for="item in alertList"
                    :value="item.value"
                    :key="item.value"
                  >{{ item.label }}</Option>
                </Select>
                <Input
                  style="width:100px"
                  v-model="detailForm.MONITORVALUE"
                  :regx="detailForm.MONITORTYPE === '1'? /^(?:100|[1-9]\d|\d)$/: /^\d+$/"
                />
                <span v-if="['1', '3'].includes(detailForm.MONITORTYPE)">%</span>
              </Col> -->
              <Col
                span="1"
                class="form-item"
              >
              <Button
                type="primary"
                @click="addMonitor"
              >添加</Button>
              </Col>
            </Row>
            <div class="handleBtn">
              <div
                class="handleItem"
                @click="deleteMonitor"
              >【删除】</div>
            </div>
            <div class="table-wrap">
              <arkCommonTableByAgGrid
                height="320px"
                :columns="monitorColumns"
                :data="monitorData"
                :options="{
                  onSelectionChanged
                }"
              >
              </arkCommonTableByAgGrid>
              <div class="pageContent">
                <Page
                  size="small"
                  :current="monitorCurrentPage"
                  show-elevator
                  :total="monitorTotalPage"
                  show-total
                  show-sizer
                  @on-change="onPageChange"
                  @on-page-size-change="onPageSize"
                />
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
      <Modal
        v-model="showTip"
        mask
        :mask-closable="maskClosable"
        title="警告"
        title-align="left"
        class-name="showTipModel"
        width="400px"
        @on-ok="closePage"
      >
        <p><i class="iconfont iconbj_doubt fcWarning " />修改的数据未保存，确定返回？</p>
      </Modal>
    </div>
  </template>
  <script>
  import foldPanel from '../../customizedContent/FoldPanel.vue'; // 折叠面板组件
  import ShrinkOrExtend from '../../customizedContent/shrinkOrExtend' //收缩伸展搜索条件组件
  import tableFaker from '../../customizedContent/tableFaker.vue'; //表格组件
  import strategyMixin from './mixins/skuPriceRangemonitorStrategy'
  
  const R3 = window.R3;
  const { network, urlSearchParams, store } = R3;
  export default {
    mixins: [strategyMixin],
  
    data() {
      return {
        tabName: 'name1',
        selectReturnSKUID: '',//策略明细sku下拉框双向数据绑定
  
        regx: /^(0|100|([1-9][0-9]?)|(0|[1-9][0-9]?)(?:\.\d{0,2}))?$/, // 0-100带两位小数的正数
        regx1: /^\d{0,15}(\.[0-9]{0,2})?$/, // 两位小数的正数
        regx2: /^\d{0,15}(\.[0-9]{0,10})?$/, // 正数
        tabList: [
          {
            tabId: '1',
            tabtext: '基本信息',
            blockShow: true,
            list: [
              {
                ID: '',
                SKEY: 'strategyName',
                title: '策略名称',
                VALUE: '',
                company: '',
                tips: '',
                disabled: false,
                standard: true,//标准输入框长度
                flag: true, // 控制必填校验样式展示
                required: true, // 是否为必填项
                explain: false, //是否有解释
              },
              {
                ID: 'T_V_IESSHOP',
                SKEY: 'shop_name',
                title: '参与店铺',
                VALUE: '',
                defaultvalue: '',
                company: '',
                tips: '',
                clearable: true,
                disabled: false,
                flag: true, // 控制必填校验样式展示
                required: true, // 是否为必填项
                standard: true,//标准输入框长度
                optionList: []
              },
              {
                SKEY: 'strategyTimeRange',
                title: '起止时间',
                VALUE: '',
                defaultvalue: '',
                company: '',
                tips: '',
                disabled: false,
                required: true, // 是否为必填项
                standard: true,//标准输入框长度
                flag: true, // 控制必填校验样式展示
              },
              {
                ID: '',
                SKEY: 'maxrange',
                title: '最大浮动范围≤',
                VALUE: '',
                company: '',
                tips: '',
                disabled: false,
                standard: true,//标准输入框长度
                flag: true, // 控制必填校验样式展示
                required: true, // 是否为必填项
                explain: true, //是否有解释
                explainContent: '手动审核订单时，若订单中有sku的成交单价，与策略参与店铺中、该sku当日第一笔成交单价的金额浮动，大于此处维护的最大浮动范围，则需要二次确认',//解释文字
              },
              // {
              //   // SKEY: 'orderTimeType',
              //   // title: '策略类型',
              //   VALUE: '1',
              //   defaultvalue: '1',
              //   company: '',
              //   tips: '',
              //   clearable: false,
              //   explain: true, //是否有解释
              //   disabled: false,
              //   required: true, // 是否为必填项
              //   standard: true,//标准输入框长度
              //   flag: true, // 控制必填校验样式展示
              //   explainContent: '大促类型策略优于日常类型先去执行',//解释文字
              //   optionList: [
              //     { label: '大促', value: '2' },
              //     { label: '日常', value: '1' }
              //   ]
              // },
            ]
          },
        ],
        returnColumns: [ //策略明细
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            type: 'index',
            align: 'center',
            title: '序号',
          },
          {
            title: '监控维度',
            align: 'center',
            key: 'PriceMonitoreDimension',
            render: (h, params) => {
              const vm = this;
              return h('Select', {
                style: {
                  width: '150px',
                  zIndex: 999,
                },
                props: {
                  transfer: true,
                  value: params.row.PriceMonitoreDimension, // 获取选择的下拉框的值
                },
                on: {
                  'on-change': (e) => {
                    let chengeData = vm.currentReturnData[params.index]
                    vm.returnData.forEach((item) => {
                      if ((item.MODIFYDISCERNID == chengeData.MODIFYDISCERNID)) {
                        item.PriceMonitoreDimension = e;
                        item.MonitorDimensionList.VALUE = '';
                        item.MonitorDimensionList.defaultSelected = [];
                        item.MonitorDimensionValue = '';
                        item.MonitorDimensionValueID = '';
                      }
                    })
                    vm.totalReturn = vm.returnData.length;
                    let startIndex = vm.pageSizeReturn * (vm.returnCurrentPage - 1)
                    let endIndex = startIndex + vm.pageSizeReturn
                    vm.currentReturnData = vm.returnData.slice(startIndex, endIndex) //当前页面显示明细
                    console.log(vm.currentReturnData)
                  }
                }
              },
                vm.PriceMonitoreDimensionList.map(item => h('Option', {
                  props: {
                    value: item.value, // 绑定的值
                  }
                }, item.label)
                ));
            }
          },
          {
            title: '监控维度值',
            align: 'center',
            key: 'MonitorDimensionValue',
            render: (h, params) => {
              const vm = this;
              return h('DropDownSelectFilter', {
                style: {
                  width: '240px',
                  margin: '0 auto',
                  zIndex: 999,
                },
                props: {
                  transfer: true,
                  // value: , // 获取选择的下拉框的值
                  single: true,
                  data: params.row.MonitorDimensionList.shopData,
                  totalRowCount: params.row.MonitorDimensionList.shopData.totalRowCount,
                  showColnameKey: 'isak',
                  dataEmptyMessage: params.row.MonitorDimensionList.dataEmptyMessage,
                  columns: params.row.MonitorDimensionList.columns,
                  AutoData: params.row.MonitorDimensionList.AutoData,
                  defaultSelected: params.row.MonitorDimensionList.defaultSelected,
                  isBackRowItem: true,
                },
                on: {
                  'on-popper-show': (e) => {
                    this.searchShopData(params, 'table')
                  },
                  'on-page-change': (e) => {
                    this.changePageShop(e, params, 'table')
                  },
                  'on-input-value-change': (e) => {
                    this.InputValueChangeShop(e, params, 'table')
                  },
                  'on-fkrp-selected': (e) => {
                    this.checkDataShop(e, params, 'table')
                    let chengeData = vm.currentReturnData[params.index]
                    vm.returnData.forEach((item) => {
                      if ((item.MODIFYDISCERNID == chengeData.MODIFYDISCERNID)) {
                        item.MonitorDimensionList.VALUE = e[0].Label;
                        item.MonitorDimensionList.defaultSelected = [{ ID: e[0].ID, Label: e[0].Label }];
                        item.MonitorDimensionValue = e[0].ID;
                        item.MonitorDimensionValueID = e[0].ID;
                      }
                    })
                    vm.totalReturn = vm.returnData.length;
                    let startIndex = vm.pageSizeReturn * (vm.returnCurrentPage - 1)
                    let endIndex = startIndex + vm.pageSizeReturn
                    vm.currentReturnData = vm.returnData.slice(startIndex, endIndex) //当前页面显示明细
                  },
                  'on-focus': (e) => {
                    this.focusInputValueChangeShop(e, params, 'table')
                  },
                  'on-clear': (e) => {
                    this.clearDataShop(params, 'table')
                  },
                }
              },);
            }
          },
        ],
        tableHeight: '200',//表格高度
  
        currentReturnData: [],//当前显示策略明细明细
        returnData: [],
        returnDataNoSame: [],//弹窗中没有的策略明细
        submitArrReturn: [],//选中的策略明细
        // 策略明细page
        returnCurrentPage: 1,
        totalReturn: 0, // 总条数
        currentPageReturn: 0, // 页码
        pageSizeReturn: 10, // 每页的条数
  
        // 选择商品
        mask: true,
        closable: true,
        maskClosable: false,
        hideFoot: true,
        shrinkHeight: '58px',
        currentValue: false,//默认收缩
  
        showTip: false,
        showDetailTable: true, // 展示商品明细
        startTime: '',  // 活动开始时间
        endTime: '', // 活动结束时间
  
        detail: {
          PriceMonitoreDimension: '', // 监控维度
          MonitorDimensionValue: '', // 监控维度值
        },
        PriceMonitoreDimensionList: [ // 监控维度
          {
            label: '商品品牌',
            value: 1
          },
          {
            label: '商品编码',
            value: 2
          },
          {
            label: '商品条码',
            value: 3
          },
        ],
        MonitoreTypeList: [ // 监控类型
          {
            label: '预警折扣（成交价/平台销售价）',
            value: 1
          },
          {
            label: '预警折扣（成交价/系统标准价）',
            value: 3
          },
          {
            label: '预警成交单价',
            value: 2
          },
        ],
        MonitorDimensionValue: {
          VALUE: '', //字段值
          clearable: true,
          tableName: 'T_IESBRAND',//表名
          currentIndex: 0,//当前页码
          dataEmptyMessage: '数据加载中...', // 无数据的提示
          columns: ['name', 'value'],// 展现的组
          AutoData: [],//模糊搜索
          defaultSelected: [],//默认数据
          shopData: {},
        },
        MonitorSetValueContent: '根据商品成交单价/平台售价和预警折扣做比对', // 监控设置值解释
  
        //编辑页面
        pageMsgId: '', // 当前策略id
        currentMonitorData: [],
  
        shopTrue: {
          shopData:{},//店铺下拉数据
          currentIndex:0,//当前也从第几条索引开始
          dataEmptyMessage: '数据加载中...', // 无数据的提示
          columnsShop:['name','value'],// 店铺数据展现的组
          AutoDataShop:[],//店铺模糊搜索数据
          defaultSelected:[],//编辑页面默认值
        },
        dropDownShopValue: '',
        network,
        propsData: {
          pageSize: 10,
          item: {}
        },
        TableRequest: {
          isdroplistsearch: true,
          refcolid: 202934,
        },
        eventFun: {
          'on-blur': (even) => {
            setTimeout(() => {
              if (!Array.isArray(this.dropDownShopValue)) {
                even.target.value = '';
                this.$emit('change', []);
              }
            }, 200);
          }
        },
        Url: {
          autoUrl: '/p/cs/fuzzyquerybyak',
          tableUrl: 'p/cs/QueryList',
          tableSearchUrl: '/p/cs/newQueryList'
        }
      };
    },
    components: {
      foldPanel,
      ShrinkOrExtend,
      tableFaker
    },
    created() {
      this.getQuery('T_V_IESSHOP', { isactive: ["=Y"] })// 初始查询店铺名称列表
    },
    methods: {
      DropShopvalueChange(value) {
        this.tabList[0].list[1].VALUE=''
        value.forEach(item=>{
            this.tabList[0].list[1].VALUE=this.tabList[0].list[1].VALUE==''?item.ID:this.tabList[0].list[1].VALUE+','+item.ID
        })
      },
        postTableData(url, message, vm) {
          // 表格数据展示
          return new Promise((resolve) => {
            vm.post(url, message, (data) => {
              data.data.tabth.forEach(item => {
                if (item.display === 'iconfontpicker') {
                  item.render = (h, params) => h('div', [
                    h('div', {
                      props: {//   type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '2px',
                        height: '15px',
                        width: '15px',
                        'background-color': JSON.parse(params.row[params.column.colname].val).color,
                      },
                    }),
                  ]);
                }
              });
              resolve(data);
            });
          });
        },
      // 添加监控数据
      addMonitor() {
        if(!this.validateMonitor()) {
          return
        }
        const data = {
          ID: -1,
          BRANDID: this.detailForm.BRANDID,
          BRANDNAME: this.detailForm.BRANDNAME,
          SEASON: this.detailForm.SEASON,
          YEAR: this.detailForm.YEAR,
          CATEGORY: this.detailForm.CATEGORY,
          TYPE: this.detailForm.MONITORTYPE,
          VALUE: this.detailForm.MONITORVALUE,
          MONITORTYPE: this.alertList.find(item => item.value === this.detailForm.MONITORTYPE).label,
          MONITORVALUE: ['1','3'].includes(this.detailForm.MONITORTYPE) && this.detailForm.MONITORVALUE? this.detailForm.MONITORVALUE + '%' : this.detailForm.MONITORVALUE
        }
        this.monitorData.push(data)
        this.clearMonitorForm()
  
        // 更新实际展示的表格
        this.updateMonitorList()
      },
  
      // 翻页
      onPageChange(val) {
        this.monitorCurrentPage = val;
        this.updateMonitorList()
      },
  
      // 每页条数
      onPageSize(val) {
        this.monitorPageSize = val;
        this.monitorCurrentPage = 1;
  
        this.updateMonitorList()
      },
  
  
      // 监控范围明显勾选
      onSelectionChanged(params) {
        const rows = []
        params.api.getSelectedRows().forEach(row => {
          rows.push(row.__ag_sequence_column_name__.val)
        })
        this._selectMonitorList = rows
      },
  
      // 保存监控数据
      async saveMonitor(objId, items) {
        let baseMsg = this.tabList[0]
        const data = this.monitorData.map(item => {
          return {
            ID: item.ID,
            BRANDID: item.BRANDID,
            SEASON: item.SEASON,
            YEAR: item.YEAR,
            CATEGORY: item.CATEGORY,
          }
        })
  
        network.post('/p/cs/objectSave', {
          fixedData: {
            T_GOODSPRICERANGESTRATEGY_SCOPE: data,
            T_GOODSPRICERANGESTRATEGY: {
              NAME: baseMsg.list[0].VALUE,
              IESSHOPID: baseMsg.list[1].VALUE ? baseMsg.list[1].VALUE : '', //.join(',')
              START_TIME: this.startTime,
              END_TIME: this.endTime,
              MAXRANGE: baseMsg.list[3].VALUE,
            },
          },
          objId,
          table: 'T_GOODSPRICERANGESTRATEGY'
        }).then(res => {
          if (res.data.code === 0) {
            this.$Message.success('新建策略成功！');
            this.closePage()
          }
        })
      },
  
      // 删除明细
      deleteMonitor() {
        this._selectMonitorList.forEach(rowIndex => {
          const index = this.monitorPageSize * (this.monitorCurrentPage - 1) + rowIndex - 1
          this.monitorData.splice(index, 1)
        })
        this.updateMonitorList()
      },
  
      // 更新表格明细
      updateMonitorList() {
        const startIndex = this.monitorPageSize * (this.monitorCurrentPage - 1)
        const endIndex = startIndex + this.monitorPageSize
        this.currentMonitorData = this.monitorData.slice(startIndex, endIndex)
        this.monitorTotalPage = this.monitorData.length // 表格行总条数
      },
  
      backToList() { // 返回策略列表页面
        let flag = true;
        console.log(this.tabList[0])
        for (let i = 0; i < this.tabList[0].list.length; i++) {
          if (this.tabList[0].list[i].VALUE) {
            flag = false;
            break;
          }
        }
        if (this.currentReturnData.length > 0) {
          flag = false
        }
        if (!flag) {
          this.showTip = true;
        } else {
          this.closePage();
        }
      },
      rangeDate(e) {
        this.startTime = e[0];
        this.endTime = e[1];
      },
      limitStartDate(e) {
        this.limitStartDate = e
      },
      limitEndDate(e) {
        this.limitEndDate = e
      },
      // 重置数据
      resetData() {
        this.tabList.forEach(item => {
          item.list.forEach(i => {
            if (i.TYPEONE == 'checkbox') {
              i.VALUE = false
            } else {
              i.VALUE = ''
            }
          })
        })
        this.tabName = 'name1';
        this.showDetailTable = true;
        this.returnData = []; // 策略明细置空
        this.currentReturnData = []; // 策略明细置空
  
        // 策略明细搜索栏重置
        if (this.$refs.returnSelect) {
          this.detail = {
            PriceMonitoreDimension: '', // 监控维度
            MonitorDimensionValue: '', // 监控维度值
          }
          // this.$refs.returnSelect.clearSingleSelect()
        }
      },
      // 关闭当前页面
      closePage() {
        const { fullPath } = this.$route;
        const {
          keepAliveModuleName, tableName
        } = this.$store.state.global.activeTab;
        this.$store.commit('global/tabCloseAppoint', {
          tableName,
          routeFullPath: fullPath,
          keepAliveModuleName,
          stopRouterPush: true,
        });
        // 跳转
        setTimeout(() => {
          R3.store.commit('global/tabOpen', {
            type: 'S',
            tableName: 'T_GOODSPRICERANGESTRATEGY',
            tableId: '12104',
            back: true
          });
        }, 0)
      },
  
      // 获取监控维度值
      // 外键下拉框
      searchShopData(params, type) {
        let virtual = {}
        if (this.detail.PriceMonitoreDimension == '1' || (type == 'table' && params.row.PriceMonitoreDimension == '1')) { // 商品品牌
          virtual = {
            searchdata: {
              "isdroplistsearch": true,
              "refcolid": 202944,
              "startindex": type !== 'table' ? this.MonitorDimensionValue.currentIndex : params.row.MonitorDimensionList.currentIndex,
              "range": 10,
              "fixedcolumns": {},
            }
          }
        } else if (this.detail.PriceMonitoreDimension == '2' || (type == 'table' && params.row.PriceMonitoreDimension == '2')) { // 商品编码
          virtual = {
            searchdata: {
              "isdroplistsearch": true,
              "refcolid": 202940,
              "startindex": type !== 'table' ? this.MonitorDimensionValue.currentIndex : params.row.MonitorDimensionList.currentIndex,
              "range": 10,
              "fixedcolumns": {},
              "fkdrplist": {
                searchcols: ["PRODUCTCODE"]
              },
            }
          }
        } else if (this.detail.PriceMonitoreDimension == '3' || (type == 'table' && params.row.PriceMonitoreDimension == '3')) { // 商品编码
          virtual = {
            searchdata: {
              "isdroplistsearch": true,
              "refcolid": 202943,
              "startindex": type !== 'table' ? this.MonitorDimensionValue.currentIndex : params.row.MonitorDimensionList.currentIndex,
              "range": 10,
              "fixedcolumns": {},
            }
          }
        }
        network.post('/p/cs/QueryList', urlSearchParams(virtual)).then((res) => {
          if (res.data.code == 0) {
            if (type == 'table') {
              params.row.MonitorDimensionList.shopData = res.data.data
              params.row.MonitorDimensionList.currentIndex = 0
            } else {
              this.MonitorDimensionValue.shopData = res.data.data
              this.MonitorDimensionValue.currentIndex = 0
            }
          }
        })
      },
      // 单选下拉选中
      checkDataShop(val, params, type) {
        if (type == 'table') {
          params.row.MonitorDimensionList.VALUE = val[0].ID
          params.row.MonitorDimensionList.NAME = val[0].Label
          params.row.MonitorDimensionList.defaultSelected = [{ ID: val[0].ID, Label: val[0].Label }]
        } else {
          this.MonitorDimensionValue.VALUE = val[0].ID
          this.MonitorDimensionValue.NAME = val[0].Label
        }
      },
      // 单选框失去焦点事件
      changeDataShop(e, params, type) {
        if (!e.target.value) {
          if (type == 'table') {
            params.row.MonitorDimensionList.VALUE = ''
            params.row.MonitorDimensionList.NAME = ''
          } else {
            this.MonitorDimensionValue.VALUE = ''
            this.MonitorDimensionValue.NAME = ''
          }
        } else {
          if (type == 'table') {
            if (params.row.MonitorDimensionList.AutoData.length) {
              params.row.MonitorDimensionList.AutoData.forEach(v => {
                if (e.target.value == v.value) {
                  params.row.MonitorDimensionList.VALUE = v.id
                  params.row.MonitorDimensionList.NAME = v.value
                }
              })
            }
            e.target.value = params.row.MonitorDimensionList.NAME ? params.row.MonitorDimensionList.NAME : ''
          } else {
            if (this.MonitorDimensionValue.AutoData.length) {
              this.MonitorDimensionValue.AutoData.forEach(v => {
                if (e.target.value == v.value) {
                  this.MonitorDimensionValue.VALUE = v.id
                  this.MonitorDimensionValue.NAME = v.value
                }
              })
            }
            e.target.value = this.MonitorDimensionValue.NAME ? this.MonitorDimensionValue.NAME : ''
          }
        }
      },
      // 清空选中项
      clearDataShop(params, type) {
        if (type == 'table') {
          params.row.MonitorDimensionList.VALUE = ''
          params.row.MonitorDimensionList.NAME = ''
        } else {
          this.MonitorDimensionValue.VALUE = ''
          this.MonitorDimensionValue.NAME = ''
        }
      },
      // 单选下拉分页改变
      changePageShop(e, params, type) {
        if (type == 'table') {
          params.row.MonitorDimensionList.currentIndex = (e - 1) * 10
          this.searchShopData(params, type)
        } else {
          this.MonitorDimensionValue.currentIndex = (e - 1) * 10
          this.searchShopData()
        }
      },
      focusInputValueChangeShop(e, params, type) {
        let virtual = {}
        if (this.detail.PriceMonitoreDimension == '1' || (type == 'table' && params.row.PriceMonitoreDimension == '1')) { // 商品品牌
          virtual = {
            ak: e.target.value,
            colid: 202944,
            fixedcolumns: {}
          }
        } else if (this.detail.PriceMonitoreDimension == '2' || (type == 'table' && params.row.PriceMonitoreDimension == '2')) { // 商品编码
          virtual = {
            ak: e.target.value,
            colid: 202940,
            fixedcolumns: {},
          }
        } else if (this.detail.PriceMonitoreDimension == '3' || (type == 'table' && params.row.PriceMonitoreDimension == '3')) { // 商品条码
          virtual = {
            ak: e.target.value,
            colid: 202943,
            fixedcolumns: {},
          }
        }
        network.post('/p/cs/fuzzyquerybyak', urlSearchParams(virtual)).then((res) => {
          if (res.data.code == 0) {
            if (type == 'table') {
              params.row.MonitorDimensionList.AutoData = res.data.data
            } else {
              this.MonitorDimensionValue.AutoData = res.data.data
            }
          }
        })
      },
      // 单选下拉模糊搜索数据
      InputValueChangeShop(e, params, type) {
        let virtual = {}
        if (this.detail.PriceMonitoreDimension == '1' || (type == 'table' && params.row.PriceMonitoreDimension == '1')) { // 商品品牌
          virtual = {
            ak: e,
            colid: 202944,
            fixedcolumns: {}
          }
        } else if (this.detail.PriceMonitoreDimension == '2' || (type == 'table' && params.row.PriceMonitoreDimension == '2')) { // 商品编码
          virtual = {
            ak: e,
            colid: 202940,
            fixedcolumns: {},
          }
        } else if (this.detail.PriceMonitoreDimension == '3' || (type == 'table' && params.row.PriceMonitoreDimension == '3')) { // 商品条码
          virtual = {
            ak: e,
            colid: 202943,
            fixedcolumns: {},
          }
        }
        network.post('/p/cs/fuzzyquerybyak', urlSearchParams(virtual)).then((res) => {
          if (res.data.code == 0) {
            if (type == 'table') {
              params.row.MonitorDimensionList.AutoData = res.data.data
            } else {
              this.MonitorDimensionValue.AutoData = res.data.data
            }
          }
        })
      },
  
      // 店铺下拉气泡打开时
      searchTrueShopData(){
        let virtual={
          searchdata:{
            "isdroplistsearch":true,
            "refcolid":194851,
            "startindex":this.shopTrue.currentIndex,
            "range":10,
          }
        }
        network.post('/p/cs/QueryList',urlSearchParams(virtual)).then((res) => {
          if(res.data.code==0){
            this.shopTrue.shopData=res.data.data
            this.shopTrue.currentIndex=0
          }         
        })
      },
      // 店铺分页改变
      changePageTrueShop(val){
        this.shopTrue.currentIndex=(val-1)*10
        this.searchTrueShopData()
      },
      // 模糊搜索店铺数据
      InputValueChangeTrueShop(val){
        let virtual={
          ak: val,
          colid: 194851,
          fixedcolumns: {}
        }
        network.post('/p/cs/fuzzyquerybyak',urlSearchParams(virtual)).then((res) => {
          if(res.data.code==0){
            this.shopTrue.AutoDataShop=res.data.data  
          }        
        })
      },
      // 选中店铺项 拼接数据
      checkDataTrueShop(val){
        this.tabList[0].list[1].VALUE=''
        val.forEach(item=>{
            this.tabList[0].list[1].VALUE=this.tabList[0].list[1].VALUE==''?item.ID:this.tabList[0].list[1].VALUE+','+item.ID
        })
        console.log(this.tabList[0].list[1].VALUE)
      },
      // 清空选中店铺项
      clearTrueShop(){
        this.tabList[0].list[1].VALUE=''
      },
  
  
      // 监控维度option选中
      selectPriceMonitoreDimension(val) {
        this.MonitorDimensionValue.VALUE = ''
        this.MonitorDimensionValue.NAME = ''
        this.MonitorDimensionValue.defaultSelected = []//默认数据
      },
      // 监控类型option选中
      selectMonitoreType(val) {
        if (val == '1') {
          this.MonitorSetValueContent = '根据商品成交单价/平台售价和预警折扣做比对'
        } else if (val == '2') {
          this.MonitorSetValueContent = '根据商品成交单价和预警成交单价做比对'
        }
      },
  
      // 添加策略明细到表格
      addReturnGoods() {
        if (this.detail.PriceMonitoreDimension == '') {
          this.$Message.warning('监控维度不能为空');
          return
        } else if (this.MonitorDimensionValue.VALUE == '') {
          this.$Message.warning('监控维度值不能为空');
          return
        }
        let obj = this.detail
        if (obj) {
          let addData = {
            MODIFYDISCERNID: (Math.random() * 9 + 1) * 100000,
            PriceMonitoreDimension: obj.PriceMonitoreDimension,
            MonitorDimensionValue: this.MonitorDimensionValue.VALUE,
            MonitorDimensionValueID: this.MonitorDimensionValue.VALUE,
            MonitorDimensionList: { // 表格数据的监控维度值
              VALUE: this.MonitorDimensionValue.VALUE, //字段值
              clearable: true,
              tableName: 'T_IESBRAND',//表名
              currentIndex: 0,//当前页码
              dataEmptyMessage: '数据加载中...', // 无数据的提示
              columns: ['name', 'value'],// 展现的组
              AutoData: [],//模糊搜索
              defaultSelected: [{ "ID": this.MonitorDimensionValue.VALUE, "Label": this.MonitorDimensionValue.NAME }],//默认数据
              shopData: {},
            }
          }
          this.returnData.push(addData)
          this.detail = {
            PriceMonitoreDimension: '', // 监控维度
            MonitorDimensionValue: '', // 监控维度值
          },
            this.totalReturn = this.returnData.length
          if (this.totalReturn) { //翻页
            this.returnCurrentPage = parseInt((this.totalReturn - 1) / this.pageSizeReturn) + 1
          }
          // 截取数组
          let startIndex = this.pageSizeReturn * (this.returnCurrentPage - 1)
          let endIndex = startIndex + this.pageSizeReturn
          this.currentReturnData = this.returnData.slice(startIndex, endIndex) //当前页面显示明细
        }
      },
      //初始查询标准下拉框数据
      getQuery(tableName, fixed) {
        let virtual = {
          fixedcolumns: fixed ? fixed : {},
          range: 2000,
          startindex: 0,
          table: tableName
        }
        if (tableName == 'T_V_IESSHOP') {
          virtual.isdroplistsearch = true
        }
        network.post('/p/cs/list/query', virtual).then((res) => {
          this.tabList[0].list.forEach(item => {
            if (item.ID == tableName) {
              if (tableName == 'T_V_IESSHOP') {
                item.optionList = res.data.rows.map(i => {
                  return {
                    label: i.SHOPTITLE.val,
                    value: i.ID.val
                  }
                })
              } else {
                item.optionList = res.data.rows.map(i => {
                  return {
                    label: i.NAME.val,
                    value: i.ID.val
                  }
                })
              }
            }
          })
        })
      },
  
      // 策略明细表删除
      deleteReturnGoods() {
        let idArray = this.submitArrReturn.map(item => item.MODIFYDISCERNID)
        this.returnData = this.returnData.filter(i => {
          return !idArray.includes(i.MODIFYDISCERNID)
        });
        this.totalReturn = this.returnData.length //总条数
        // 截取数组
        let startIndex = this.pageSizeReturn * (this.returnCurrentPage - 1)
        let endIndex = startIndex + this.pageSizeReturn
        this.currentReturnData = this.returnData.slice(startIndex, endIndex) //当前页面显示明细
      },
  
      // 策略明细页码改变时触发
      changePageReturn(val) {
        // 1=>0 2=>10 3=>20
        this.returnCurrentPage = val
        // 截取数组
        let startIndex = this.pageSizeReturn * (this.returnCurrentPage - 1)
        let endIndex = startIndex + this.pageSizeReturn
        this.currentReturnData = this.returnData.slice(startIndex, endIndex)
      },
      // 策略明细页数改变时触发
      changeSizeReturn(val) {
        this.pageSizeReturn = val;
        this.returnCurrentPage = 1;
        // this.currentReturnPage = 0;
        // 截取数组
        let startIndex = this.pageSizeReturn * (this.returnCurrentPage - 1)
        let endIndex = startIndex + this.pageSizeReturn
        this.currentReturnData = this.returnData.slice(startIndex, endIndex)
      },
      // 策略明细表格选中某项时触发
      selectReturnData(selection, row) {
        this.submitArrReturn = selection;
      },
      // 策略明细表格取消某项时触发
      selectReturnCancel(selection, row) {
        this.submitArrReturn = selection;
      },
      // 策略明细表格全选
      selectReturnDataAll(selection) {
        this.submitArrReturn = selection;
      },
      // 策略明细表格取消全选
      selectReturnDataCancel(selection) {
        this.submitArrReturn = selection;
      },
  
      parser(value) {
        if ((typeof value == 'string')) {
          return parseFloat(value.replace(/[^\d\.-]/g, ''));
        } else {
          return value
        }
  
      },
  
      checkInputSKU(e, i) {
        if (i.SKEY == 'activegoodstype') {
          if (e == '限制商品') {
            this.tabName = 'name2'
          } else if (e == '排除商品') {
            this.tabName = 'name3'
          } else {
            this.tabName = 'name1'
          }
        } else if (i.SKEY == 'gift_method') {
          if (e == '随机分组赠送') {
            if (!this.tabList[1].list[3].VALUE) {
              this.tabList[1].list[3].VALUE = true;
            }
            this.tabList[1].list[3].disabled = true;
          } else {
            this.tabList[1].list[3].disabled = false;
          }
        } else {
          let tableName = i.ID
          if (tableName == 'T_V_IESSHOP') {
            this.getQuery(tableName, { SHOPTITLE: e })
          }
        }
      },
      // 平台单号，退款单号(换货单没有)，退回物流单号禁止输入空格
      noSpaces(e, i) {
        if (i.SKEY == 'satisfied_amount' || i.SKEY == 'satisfied_pieces') {
          if (e.keyCode == 32) e.returnValue = false
        }
      },
      // 保存
      saveAll() {
        let baseMsg = this.tabList[0]; //基本设置
        if (!baseMsg.list[0].VALUE) {
          return this.$Message.warning('策略名称不能为空！');
        }
        if (!baseMsg.list[1].VALUE) {
          return this.$Message.warning('参与店铺不能为空！');
        }
        if (!this.startTime || !this.endTime) {
          return this.$Message.warning('起止时间不能为空！');
        }
        if ((new Date(this.endTime).getTime()) < (new Date().getTime())) {
          return this.$Message.warning('结束时间必须大于当前系统时间！');
        }
        if (!baseMsg.list[3].VALUE) {
          return this.$Message.warning('最大浮动范围不能为空！');
        }
        // 策略明细
        let DIMENSIONLIST = []
        this.returnData.forEach(item => {
          let obj = {
            "monitorType": item.PriceMonitoreDimension,
            "monitorValue": item.PriceMonitoreDimension == 1 ? item.MonitorDimensionValue : item.MonitorDimensionList.defaultSelected[0].Label,
          }
          DIMENSIONLIST.push(obj)
        })
        const monitorData = this.monitorData.map(item => {
          return {
            brandid: item.BRANDID,
            season: item.SEASON,
            year: item.YEAR,
            category: item.CATEGORY,
          }
        })
  
        let params = { // 保存接口参数
          name: baseMsg.list[0].VALUE,
          iesshopid: baseMsg.list[1].VALUE ? baseMsg.list[1].VALUE : '',   //.join(',')
          startTime: this.startTime,
          endTime: this.endTime,
          maxrange: baseMsg.list[3].VALUE,
          items: DIMENSIONLIST,
          scopes: monitorData,
        }
  
        // this.saveMonitor(DIMENSIONLIST)
        this.saveSubmit(params)
      },
      saveSubmit(params) {
        network.post('/p/cs/strategy/skupricerange/add', params).then(async res => {
          if (res.data.code == 0) {
            // this.saveMonitor(res.data.data.objId)
            this.$Message.success('新建策略成功！');
            this.closePage();
          }
        })
      },
      getTime(date) {
        let time = new Date(date).getTime();
      }
    }
  };
  </script>
  <style lang="less">
  .quickOperation {
    height: 64px;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .content {
    .block {
      padding-top: 24px;
    }
    .ark-col {
      display: flex;
      align-items: center;
      // justify-content: flex-end;
      margin-bottom: 16px;
      .input_box {
        max-width: 400px;
        min-width: 180px;
      }
  
      .ark-input-wrapper /deep/ textarea {
        resize: none;
        min-height: 36px !important;
      }
      .title {
        min-width:120px;
        display: flex;
        justify-content: flex-end;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #575757;
        display: flex;
        align-items: center;
        margin-right: 4px;
        img {
          margin-left: 5px;
          width: 16px;
        }
      }
    }
  }
  .refund-content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  
    .count-part {
      height: 60px;
      margin-bottom: 16px;
      border-bottom: 1px solid #d8d8d8;
      .item {
        display: flex;
        align-items: center;
        .text {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
      .img-framelanflag {
        cursor: pointer;
        vertical-align: middle;
        margin-top: -3px;
        margin-left: 5px;
        width: 16px;
      }
      .input-money {
        width: 80px;
        margin: 0 8px;
      }
      .plus {
        margin: 0 16px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #979797;
      }
    }
    .total-part {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
  
  .AbnormalPriceMonitoreStrategy .ark-upload-drag {
    border: none;
  }
  .AbnormalPriceMonitoreStrategy
    .ark-select-multiple
    .ark-select-item.ark-select-item-all {
    display: none;
  }
  .priceMonitor .img-framelanflag {
    cursor: pointer;
    vertical-align: middle;
    margin-top: 0px;
    margin-left: 0px;
    width: 16px;
  }
  .AbnormalPriceMonitoreStrategy .priceMonitor .input_box.ark-fkrp-select {
    width: 220px;
  }
  .AbnormalPriceMonitoreStrategy .shopDropMultiSelectFilter {
    width:100%;
  }
  </style>
  <style lang="less" scoped>
  .AbnormalPriceMonitoreStrategy {
    min-width: 1380px;
  }
  .pageContent {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
  }
  .order-setting-input-error:before {
    content: '*';
    color: red;
  }
  .conditionContent,
  .conditionContentOne {
    width: 100%;
    display: flex;
    max-height: 3000px;
    overflow: hidden;
    flex-wrap: wrap;
    padding-top: 8px;
    justify-content: space-between;
    .itemContent {
      width: calc((100% - 120px) / 3);
      display: flex;
      align-items: center;
      margin: 0 20px 24px;
      .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);
      }
    }
  }
  .tableArea /deep/ .ark-tabs-bar {
    margin-bottom: 0px;
    .ark-tabs-tab {
      line-height: 22px !important;
    }
  }
  .tableArea {
    padding-top: 24px;
    .handleBtn {
      height: 16px;
      margin-bottom: 16px;
      display: flex;
      .handleItem {
        width: 48px;
        height: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: var(--primary-color);
        line-height: 16px;
        margin: 0 2px;
        cursor: pointer;
      }
    }
  }
  .content /deep/ .ark-select-input[disabled] {
    color: #575757;
  }
  
  .strategy-panel {
    width: 100%;
    /deep/.ark-collapse-item {
      padding: 0;
    }
    /deep/.ark-collapse > .ark-collapse-item > .ark-collapse-content {
      padding: 0;
    }
  }
  
  .form-item {
    display: flex;
    align-items: center;
    .form-label {
      margin-right: 4px;
    }
    .value-width {
      width: 166px !important;
    }
  }
  /deep/ #syncpltstock .ItemComponentRoot .itemLabel{
    flex: 0 0 210px!important;
  }
  </style>
  