<!--
 * @Description : 重构
 * @Author      : jinxin
 * @Date        : 2022-10-12 14:26:54
-->

<template>
  <el-main class="bg_white" style="min-height: calc( 100% - 80px )">
    <!--搜索-->
    <CommonSeach v-model:diySerach="data.diySerach" v-model:noticeClear="data.noticedata" v-model:options="data.options"
      @getSeachData="getSeachData" @getChangeValue="getChangeValue" @getSeachTopSeachVal="getSeachTopSeachVal">
    </CommonSeach>
    <!--按扭-->
    <ProductBtnList @getClickBtnType="getClickBtnType"></ProductBtnList>
    <!---产品列表-->
    <ProductListCom v-model:prolist="data.prolist" v-model:getlistSearch="data.list"
      v-model:searchComVal="data.searchComVal" v-model:searchChangeVal="data.searchChangeVal"
      v-model:noticedata="data.noticedata" @clearParaBtn="clearParaBtn" @getSizeValue="getSizeValue"
      @getPageValue="getPageValue">
    </ProductListCom>
  </el-main>
</template>
<script>
import { reactive, onMounted, ref, onActivated, watch, provide, getCurrentInstance, onUpdated } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
import Request from '@/utils/request.js'
import CommonSeach from '@/views/components/CommonSeach/CommonSeach.vue'
import ProductBtnList from '@/views/components/ProductBtnList/ProductBtnList.vue'
import ProductListCom from '@/views/components/ProductListCom/ProductListCom.vue'
export default {
  name: 'goodsEdit',
  components: {
    CommonSeach,
    ProductBtnList,
    ProductListCom,
  },
  setup () {
    let data = reactive({
      diySerach: [],
      prolist: {},
      page: 1,
      size: 50,
      count: 0,
      language_id: 1,
      noticedata: 1,
      cdn: '',
      options: [],
      list: [],
      searchComVal: {},
      searchChangeVal: {}
    })
    //实例化请求
    const request = new Request()
    let router = useRouter()
    let store = useStore()
    const { proxy } = getCurrentInstance()
    // 生命周期
    onMounted(() => {
      data.language_id = store.state.user.language.id || 1
      data.prolist = { language_id: store.state.user.language.id || 1 }
      data.cdn = store.state.user.cdn
      data.diySerach = [
        [
          { label: 'SPU', value: '', placeholder: '请输入SPU', type: 'ipt', queryValue: 'spu' },
          { label: '规格型号（sku）', value: '', placeholder: '请输入规格型号（sku）', type: 'ipt', queryValue: 'sku' },
          { label: '产品分类', value: '', placeholder: '请输入产品分类', type: 'cas', queryValue: 'category_id', list: [] },
          { label: '名称', value: '', placeholder: '请输入名称', type: 'ipt', queryValue: 'name' },
          { label: 'OPD团队', value: '', placeholder: '请输入OPD团队', type: 'sel', queryValue: 'opd_team_id', list: [] },
        ],
        [
          { label: '默认供应商', value: '', placeholder: '请输入默认供应商', type: 'sel', queryValue: 'supplier', list: [] },
          { label: '默认供应组织', value: '', placeholder: '请输入默认供应组织', type: 'sel', queryValue: 'FUseOrgId', list: [] },
          { label: '规格参数', value: '', placeholder: '请输入规格参数', type: 'ipt', queryValue: 'spec' },
          // { label: '所属系列', value: '', placeholder: '请输入所属系列', type: 'ipt', queryValue: 'series' },
          {
            type: "checkboxcontainer",
            otherComponent: { type: 'checkbox', name: '显示禁用SKU', value: '0', queryValue: 'status' },
            otherchekbox: { type: 'checkbox', name: '仅显示价格战产品', value: '0', queryValue: 'is_war_for_price' },
          },
          {
            type: 'searchReset',
            url: 'v1/product',
            // otherComponent: { type: 'checkbox', name: '显示禁用SKU', value: '0', queryValue: 'status' },
            // otherchekbox: { type: 'checkbox', name: '仅显示价格战产品', value: '0', queryValue: 'is_war_for_price' },
            otherValue: { language_id: data.language_id, page: data.page, size: data.size }
          }
        ],
        [
          { label: '所属系列', value: '', placeholder: '请输入所属系列', type: 'ipt', queryValue: 'series' },
          { label: '特价开始时间', value: '', placeholder: '请选择', type: 'date', queryValue: 'discount_begin_time' },
          { label: '特价结束时间', value: '', placeholder: '请选择', type: 'date', queryValue: 'discount_end_time' },
          { label: '69码', value: '', placeholder: '请输入69码', type: 'ipt', queryValue: '69code' },
          { type: 'spec' },
        ],
        sessionStorage.setItem("isResh", false)
      ]
      // 获取产品分类数据 - 传递子组件
      let query = {
        language_id: store.state.user.language.id || 1
      }
      // 产品分类 - 集合
      proxy.$http.get('v1/category', query).then(res => {
        if (res.status == 200) {
          data.options = res.data
        }
      })
      data.noticedata = data.noticedata + 1
    })
    // 页面激活 判断是否是 addspu 添加成功过来
    onActivated(() => {
      // console.log('spu list spubacklist',store.state.skuBaseData.spubacklist)
      // store.dispatch('skuBaseData/setspubacklist',true)
      if (store.state.skuBaseData.spubacklist) {
        store.state.skuBaseData.spubacklist = false
        data.noticedata = data.noticedata + 1
      }
    })
    onUpdated(() => { })
    // 获取 搜索 - 重置
    const getSeachData = (val) => {
      console.log('search reset', val)
      data.list = val
    }
    // 获取 点击按钮组
    const getClickBtnType = (type) => {
      //   console.log('type',type)
      if (type == 'info') {
        router.push({ path: '/index/logInfo' })
      } else {
        data.prolist.clickType = type
      }
    }
    // 获取size
    const getSizeValue = (val) => {
      console.log('size', val)
      data.size = val
    }
    // 获取page
    const getPageValue = (val) => {
      // console.log('size',val)
    }
    // 清空 clickType
    const clearParaBtn = () => {
      data.prolist.clickType = ''
    }
    // 获取 搜索数据
    const getSeachTopSeachVal = (val) => {
      console.log('获取搜索数据 -- >', val)
      data.searchComVal = val
    }
    // 获取 搜索输入值
    const getChangeValue = (val) => {
      console.log('获取输入数据 -->', val)
      data.searchChangeVal = val
    }
    // 监听
    watch(() => router.currentRoute.value.path, (v1, v2) => {
      if (v1 == '/index/productList') {
        let templist = store.state.topNavTag.tags.filter(it => it.name == 'ProductList')
        // 新增进入 清空顶部搜索
        if (templist.length > 0 && templist[0].currType == 'productlistcre') {
          data.noticedata = data.noticedata + 1
        }
      }
    })
    return {
      data,
      getSeachData,
      getClickBtnType,
      clearParaBtn,
      getSeachTopSeachVal,
      getChangeValue,
      getSizeValue,
      getPageValue
    }
  }
}
</script>
<style scoped>
::v-deep(.el-form-item) {
  margin-bottom: 15px;
}
::v-deep(.el-button) {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}
::v-deep(.el-button--text) {
  padding: 0 !important;
}
.table {
  padding: 20px 24px 24px 24px;
}
::v-deep(.el-cascader)  {
  line-height: 40px !important;
  height: 40px;
}
::v-deep(.el-form-item__label) {
  font-size: 12px;
}
::v-deep(.vxe-header--column) {
  padding: 5px 0 !important;
}
::v-deep(.vxe-body--column) {
  padding: 0 !important;
}
::v-deep(.vxe-table--render-default .vxe-cell) {
  padding-left: 4px;
  padding-right: 4px;
}
::v-deep(.vxe-table--render-default .vxe-cell--radio) {
  padding-left: 1.4em !important;
}
::v-deep(.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--title) {
  white-space: normal;
  text-align: center;
}
</style>
