<!--
 * @Description : 重构 - 新增SPU
 * @Author      : jinxin
 * @Date        : 2022-10-15 22:18:07
-->

<template>
  <el-main class="wrap_box bg_white">
    <el-row class="title_box head_box">
      <el-col :span="24">
        <el-button type="primary" @click="clickCom">保存</el-button>
      </el-col>
    </el-row>
    <div class="content">
      <el-tabs model-value="spuInfoM" type="card" class="demo-tabs" @tab-click="tabsChange" :key="data.reRresh">
        <el-tab-pane label="SPU信息" name="spuInfoM" >
          <SpuInfo v-model:getspuinfo="data.spuinfodata" @transmitAddSpuInfo="transmitAddSpuInfo"></SpuInfo>
        </el-tab-pane>
        <el-tab-pane label="PC详情" name="pcDetails" >
          <PcDetails v-model:getspuinfo="data.spuinfodata" @transmitPc="transmitPc"></PcDetails>
        </el-tab-pane>
        <el-tab-pane label="H5/移动端详情" name="h5Details" >
          <H5Details v-model:getspuinfo="data.spuinfodata" @transmitH5="transmitH5"></H5Details>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 语言选择 -->
    <!-- <LanguageSelect v-model:isShow="data.isLanguageShow" @getLanguageId="getLanguageId"></LanguageSelect> -->
    <!-- 语言提示 -->
    <LanguageTiptool v-model:isShowLanguageTipTool="data.isLanguageShow" @noticeShowBatch="noticeShowBatch" @closeCurrentPage="closeCurrentPage"></LanguageTiptool>
  </el-main>
</template>

<script>
import { reactive,onMounted, onActivated, defineComponent, getCurrentInstance,watch } from 'vue'
import SpuInfo from '../components/SetComponents/SpuInfo.vue'
import SkuComponents from '@/views/components/SetComponents/SkuComponents.vue'
import LanguageSelect from '@/views/components/LanguageSelect/LanguageSelect.vue'
import H5Details from '@/views/components/SetComponents/H5Details.vue'
import PcDetails from '@/views/components/SetComponents/PcDetails.vue'
import LanguageTiptool from '@/views/components/ProductListCom/LanguageTiptool.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: "setSpu",
  components: {
    SpuInfo,
    H5Details,
    PcDetails,
    SkuComponents,
    LanguageSelect,
    LanguageTiptool
  },
  setup () {
    // 生命周期
    onMounted(() => {
      data.isLanguageShow = true
      data.editSpuId = route.currentRoute.value.query.id + '|' + Math.random() * 30
      data.proId = route.currentRoute.value.query.id
      data.reRresh = data.reRresh + 1
      getSpuInfoData()
    });
    onActivated(() => {});
    // 获取实例
    const { proxy } = getCurrentInstance();
    let route = useRouter()
    let store = useStore()
    // 变量
    let data = reactive({
      refresh: false,
      isLanguageShow:false,
      editSpuId:0,
      proId:0,
      reRresh:0,
      spuinfodata:{},
      requestData:{
        language_id:store.state.user.language.id || 1,       // 语言
        product_id:'',
        spu:[{
          category_id:'',   // 分类
          brand_id:'',      // 品牌
          opd_team_id:'',   // OPD团队
          spu: '',           // spu
          unit: '',// 产品单位
          enable_lot_number: null,// 启用批号
          tax_category_code:'',// 税收分类编码
        }],
        spu_image_album:[],   // 画册图 0,1,2 ... 5 string
        spu_params:[{
            language_id:store.state.user.language.id || 1,   // 语言
            id:'',
            product_id:'',    // 产品ID
            image:'' ,        // 主图
            cover:'',         // 封面图
            title:'',         // 产品主标题 
            s_title:'',       // 产品副标题
            spec:'',          // 规格参数
            series:'',        // 所属系列
            name:'',          // 品名
            pc_desc:'',       // pc描述
            h5_desc:'',       // h5描述
            // status:0,         // 状态0=禁用1=正常
        }],
      },
      
    });
    // Tabs切换管理
    const tabsChange = (val) => {
      // console.log('tabs change name',val)
    };
    // 获取语言
    const getLanguageId = (val) => {
      if(store.state.user.language.id !== val){
        store.state.user.language.id = val
        // console.log('inner')
        // 重新获取数据
        getSpuInfoData()
        // 全局刷新
      }
    }
    // 关闭当前页
    const closeCurrentPage = () => {
      // 关闭页签
      let index = null
      store.state.topNavTag.tags.forEach((el,inde) => {
          el.fullPath == route.currentRoute.value.fullPath ? index = inde : false
      });
      store.dispatch('topNavTag/removeNavTag',index)
    }
    // 语言提示
    const noticeShowBatch = (val) => {}
    // 获取spuinfo 信息
    const transmitAddSpuInfo = (val) => {
      console.log('spu info val',val)
      // console.log('spu info val -- >',val[0].spu[0].category_id)
      data.requestData.spu[0].category_id = val[0].spu[0].category_id
      data.requestData.spu[0].brand_id = val[0].spu[0].brand_id
      data.requestData.spu[0].opd_team_id = val[0].spu[0].opd_team_id
      data.requestData.spu[0].spu = val[0].spu[0].spu
      //1.8新增加字段
      data.requestData.spu[0].tax_category_code = val[0].spu[0].tax_category_code
      data.requestData.spu[0].enable_lot_number = val[0].spu[0].enable_lot_number
      data.requestData.spu[0].unit = val[0].spu[0].unit
      //1.8新增加字段
      data.requestData.product_id = val[0].spu_params[0].product_id
      data.requestData.spu_image_album = val[0].spu_image_album
      data.requestData.spu_params[0].product_id = val[0].spu_params[0].product_id
      data.requestData.spu_params[0].image = val[0].spu_params[0].image
      data.requestData.spu_params[0].cover = val[0].spu_params[0].cover
      data.requestData.spu_params[0].title = val[0].spu_params[0].title
      data.requestData.spu_params[0].spec = val[0].spu_params[0].spec
      data.requestData.spu_params[0].series = val[0].spu_params[0].series
      data.requestData.spu_params[0].name = val[0].spu_params[0].name
      data.requestData.spu_params[0].s_title = val[0].spu_params[0].s_title
      // data.requestData = val
    }
    // 获取pc详情
    const transmitPc = (val) => {
      // console.log('pc info val',val)
      data.requestData.spu_params[0].pc_desc = val.value
    }
    // 获取h5详情
    const transmitH5 = (val) => {
      // console.log('h5 info val',val)
      data.requestData.spu_params[0].h5_desc = val.value
    }
    // 获取详情数据
    const getSpuInfoData = () => {
      // console.log('点击编辑进入')
      proxy.$http.get('v1/product/get_spu_detail',{language_id:store.state.user.language.id || 1,product_id:data.proId}).then(res=>{
        if(res.status == 200){
        //   console.log('get spu page details res data',res.data)
          data.storeData = res.data
          data.spuinfodata = res.data
          data.requestData.spu[0].category_id = res.data.category_id
          data.requestData.spu[0].brand_id = res.data.brand_id
          data.requestData.spu[0].opd_team_id = res.data.opd_team_id
          data.requestData.spu[0].spu = res.data.spu
          //1.8新增字段
          data.requestData.spu[0].enable_lot_number = res.data.enable_lot_number
          data.requestData.spu[0].tax_category_code = res.data.tax_category_code
          data.requestData.spu[0].unit = res.data.unit
           //1.8新增字段
          data.requestData.product_id = res.data.product_id
          data.requestData.spu_image_album = res.data.images
          data.requestData.spu_params[0].id = res.data.id
          data.requestData.spu_params[0].product_id = res.data.product_id
          data.requestData.spu_params[0].image = res.data.image
          data.requestData.spu_params[0].cover = res.data.cover
          data.requestData.spu_params[0].title = res.data.title
          data.requestData.spu_params[0].spec = res.data.spec
          data.requestData.spu_params[0].series = res.data.series
          data.requestData.spu_params[0].name = res.data.name
          data.requestData.spu_params[0].pc_desc = res.data.pc_desc
          data.requestData.spu_params[0].h5_desc = res.data.h5_desc
        }
      })
    }
    // 保存数据
    const clickCom = () => {
      // console.log('edit spu page click save',data.requestData)
      proxy.$http.post('v1/product/save_spu',data.requestData).then(res=>{
        if(res.status == 200){
          proxy.$message.success('保存成功')
          data.spuinfodata.is_temp = 0
        //   console.log('save success 200',res.data)
        }
      })
    }
    // 监听
    watch(()=>route.currentRoute.value.path,(v1,v2)=>{
      // console.log('spu 路由监听 -- > ',v1)
      if(v1 == '/index/editSpu' && v2 == '/index/productList'){
        let templist = store.state.topNavTag.tags.filter(it => it.name == 'EditSpu')
        if(templist.length > 0 && templist[0].currType == 'editspucre'){
          data.isLanguageShow = true
          data.editSpuId = route.currentRoute.value.query.id + '|' + Math.random() * 30
          data.proId = route.currentRoute.value.query.id
          data.reRresh = data.reRresh + 1
          getSpuInfoData()
        }
      }
    })
    return {
      data,
      tabsChange,
      getLanguageId,
      transmitAddSpuInfo,
      transmitPc,
      transmitH5,
      getSpuInfoData,
      clickCom,
      noticeShowBatch,
      closeCurrentPage
    };
  }
})
</script>
<style scoped>
.content {
  margin: 24px 24px 0 24px;
}
.bg_white {
  background-color: #fff;
  height: 100%;
}
.input-w {
  width: 50%;
}
.table {
  width: 100% !important;
}
</style>