<!--
 * @Description : 产品目录清单 -- 新增SPU -- SPU信息
 * @Author      : jinxin
 * @Date        : 2022-10-14 19:18:07
-->

<template>
  <el-form
    :rules="data.rules"
    :model="data"
    class="base_info"
    label-width="110px"
    label-position="left"
  >
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="SPU:" required class="el-form-diy">
          <el-input
            :disabled="data.isDisabled"
            v-model="data.createSpuInfo.spu[0].spu"
            @input="spuinput(data.createSpuInfo.spu[0].spu, 'spu', 'spu')"
            maxlength="80"
            class="input-w"
          />
          <span v-if="data.spuIsSure" :style="{ color: 'red', float: 'left' }">
            spu由-、.、数字、字母组成，开始、结束必须数字或字母
          </span>
        </el-form-item>
      </el-col>

      <el-col :span="10">
        <el-form-item label="产品标题:">
          <el-input
            v-model="data.createSpuInfo.spu_params[0].title"
            class="input-w"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="品名:" required>
          <el-input
            v-model="data.createSpuInfo.spu_params[0].name"
            maxlength="200"
            class="input-w"
          />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="产品副标题:">
          <el-input
            v-model="data.createSpuInfo.spu_params[0].s_title"
            class="input-w"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="产品分类:" required>
          <el-cascader
            :disabled="data.isDisabled"
            v-model="data.createSpuInfo.spu[0].category_id"
            show-all-levels
            ref="getDom"
            @change="selectProdcut($event, data.options)"
            :options="data.options"
            :props="data.props"
            style="width: 410px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="OPD团队">
          <el-select
            :disabled="data.isDisabled"
            v-model="data.createSpuInfo.spu[0].opd_team_id"
            filterable
            placeholder="请选择OPD团队"
            style="width: 410px"
          >
            <el-option
              v-for="(item, index) in data.opdList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="品牌:">
          <el-select
            :disabled="data.isDisabled"
            v-model="data.createSpuInfo.spu[0].brand_id"
            filterable
            placeholder="请选择品牌"
            style="width: 410px"
          >
            <el-option
              v-for="(item, index) in data.brandList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="所属系列:">
          <el-input
            :disabled="data.isDisabled"
            v-model="data.createSpuInfo.spu_params[0].series"
            maxlength="100"
            class="input-w"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="data.optionlevel == 3">
      <el-col :span="10">
        <el-form-item label="产品单位:">
          <el-select
            v-model="data.createSpuInfo.spu[0].unit"
            style="width: 70%"
            :disabled="data.is_temp == 0"
          >
            <el-option
              :label="item.unit_name"
              :value="item.id"
              :key="index"
              v-for="(item, index) in data.utillist"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="税收分类编码:">
          <el-input
            :disabled="true"
            v-model="data.createSpuInfo.spu[0].tax_category_code"
            class="input-w"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="启用批号管理:">
          <el-switch
            v-model="data.createSpuInfo.spu[0].enable_lot_numberBoolean"
            active-color="#409EFF"
            inactive-color="#DCDFE6"
            @change="enablelotBoolchange"
            :disabled="data.is_temp == 0"
          ></el-switch>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-form-item label="规格参数">
          <el-input
            v-model="data.createSpuInfo.spu_params[0].spec"
            maxlength="500"
            type="textarea"
            :rows="5"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="主图:">
          <ImgUpload
            v-model:queryPara="data.mainImgPara"
            v-model:getimglist="data.mainImgParaUrls"
            @transmitImgParameter="transmitImgParameter"
            @removeImgParameter="removeImgParameter"
          ></ImgUpload>
          <div class="el-upload__tip f_12">图片尺寸800*800，大小不超过1M</div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="封面图:">
          <ImgUpload
            v-model:queryPara="data.coverImgPara"
            v-model:getimglist="data.coverImgParaUrls"
            @transmitImgParameter="transmitImgParameter"
            @removeImgParameter="removeImgParameter"
          ></ImgUpload>
          <div class="el-upload__tip f_12">图片尺寸800*800，大小不超过1M</div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="画册图：">
          <ImgUpload
            v-model:queryPara="data.albumImgPara"
            v-model:getimglist="data.albumImgParaUrls"
            @transmitImgParameter="transmitImgParameter"
            @removeImgParameter="removeImgParameter"
          ></ImgUpload>
          <div class="el-upload__tip f_12">
            最多可上传6张，图片尺寸800*800，大小不超过1M
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  getCurrentInstance,
  onActivated,
  watch,
  ref,
} from 'vue'
import ImgUpload from '@/views/components/SetComponents/ImgUpload.vue'
import { useStore } from 'vuex'
import { findDetailsById } from '../../../utils/cpmlPublic'
export default defineComponent({
  name: 'createSpuInfo',
  components: {
    ImgUpload,
  },
  props: {
    getspuinfo: Object,
  },
  emits: ['transmitAddSpuInfo', 'update:getspuinfo'],
  setup(props, context) {
    onActivated(() => {
      data.mainImgPara = {
        width: 800,
        height: 800,
        size: 1,
        limit: 1,
        type: 'main',
      }
      data.coverImgPara = {
        width: 800,
        height: 800,
        size: 1,
        limit: 1,
        type: 'cover',
      }
      data.albumImgPara = {
        width: 800,
        height: 800,
        size: 1,
        limit: 6,
        type: 'album',
      }
    })
    let getDom = ref(null)
    onMounted(() => {
      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
          setTimeout(() => {
            //  selectProdcut(props.getspuinfo.category_id, res.data)
            if (!props.getspuinfo.category_id) return
            let obs = findDetailsById(res.data, props.getspuinfo.category_id, [
              'level',
              'tax_category_code',
            ])
            data.optionlevel = obs.level
            data.createSpuInfo.spu[0].tax_category_code = obs.tax_category_code
            // getDom.value.togglePopperVisible()
          }, 1000)
        }
      })
      let queryPara = {
        status: 1,
      }
      // OPD团队 - 集合
      proxy.$http.get('v1/opd_team', queryPara).then((res) => {
        if (res.status == 200) {
          data.opdList = res.data
        }
      })
      // 品牌 - 集合
      proxy.$http.get('v1/brand/select_list').then((res) => {
        if (res.status == 200) {
          data.brandList = res.data
        }
      })
      proxy.$http.get('v1/unit/list').then((res) => {
        if (res.status == 200) {
          data.utillist = res.data
        }
      })
      data.isDisabled = store.state.user.language.id == 1 ? false : true
    })
    // 获取实例
    const { proxy } = getCurrentInstance()
    const store = useStore()
    // 变量
    let data = reactive({
      is_temp: 'add', //是否暂存0为否，1为是  新增为add
      optionlevel: null, //选择的分类的分类层级 1  2 3等
      spuIsSure: false,
      isDisabled: false,
      rules: [],
      utillist: [],
      createSpuInfo: {
        // 保存
        language_id: store.state.user.language.id || 1, // 语言
        spu: [
          {
            category_id: '', // 分类
            brand_id: '', // 品牌
            opd_team_id: '', // OPD团队
            spu: '', // spu
            enable_lot_numberBoolean: false, //启用批号管理---只有分类是三级分类的时候显示
            enable_lot_number: null, //启用批号管理 0为否，1为是
            tax_category_code: '', // 税收分类编码--只有分类是三级分类的时候显示
            unit: '', //产品单位
          },
        ],
        spu_image_album: [], // 画册图 0,1,2 ... 5 string
        spu_params: [
          {
            language_id: store.state.user.language.id || 1, // 语言
            product_id: '', // 产品ID
            image: '', // 主图
            cover: '', // 封面图
            title: '', // 产品主标题
            s_title: '', // 产品副标题
            spec: '', // 规格参数
            series: '', // 所属系列
            name: '', // 品名
            pc_desc: '', // pc描述
            h5_desc: '', // h5描述
            // status:0,         // 状态0=禁用1=正常
          },
        ],
      },
      props: {
        expandTrigger: 'hover',
        value: 'id',
        label: 'name',
        children: 'children',
        emitPath: false,
      },
      options: [],
      opdList: [],
      brandList: [],
      mainImgPara: {},
      coverImgPara: {},
      albumImgPara: {},
      mainImgParaUrls: [],
      coverImgParaUrls: [],
      albumImgParaUrls: [],
    })
    // 获取图片地址
    const transmitImgParameter = (val) => {
      if (val.type == undefined && val[0].type == 'main') {
        data.createSpuInfo.spu_params[0].image = val[0].r_path
      }
      if (val.type == undefined && val[0].type == 'cover') {
        data.createSpuInfo.spu_params[0].cover = val[0].r_path
      }
      if (val.type && val.type == 'album') {
        data.createSpuInfo.spu_image_album = val.list
      }
    }
    // 删除图片地址
    const removeImgParameter = (val) => {
      if (val.type == 'main') {
        data.createSpuInfo.spu_params[0].image = ''
      }
      if (val.type == 'cover') {
        data.createSpuInfo.spu_params[0].cover = ''
      }
      if (val.type == 'album') {
        data.createSpuInfo.spu_image_album = val.list
      }
    }
    const spuinput = (value, obj, key) => {
      if (key == 'spu') {
        const trimmedValue = value.trim(); // 去除首尾空格  
        if (trimmedValue !== data.createSpuInfo.spu[0].spu) { // 如果处理后的值不同，则更新  
          data.createSpuInfo.spu[0].spu = trimmedValue;  
        } 
        if (data.createSpuInfo.spu[0].spu) {
          if (!/^[a-zA-Z0-9]([a-zA-Z0-9\s.-]*[a-zA-Z0-9])?$/.test(data.createSpuInfo.spu[0].spu)) {
            data.spuIsSure = true
          } else {
            data.spuIsSure = false
          }
        } else {
          data.spuIsSure = false
        }
      }
    }
    // 清除空格
    const clearNull = (value, obj, key) => {
      data.createSpuInfo[obj][0][key] = value.replace(/\s/g, '')
    }
    // 产品分类
    const selectProdcut = (event, list) => {
      if (!event) return
      let obs = findDetailsById(list, event, [
        'level',
        'tax_category_code',
        'enable_lot_number',
        'unit',
      ])
      data.optionlevel = obs.level
      //is_temp是否暂存，0为否，1为是
      console.log(111, data.is_temp)
      if (data.is_temp == 'add' || data.is_temp == 1) {
        data.createSpuInfo.spu[0].enable_lot_number = obs.enable_lot_number
        data.createSpuInfo.spu[0].unit = obs.unit
        data.createSpuInfo.spu[0].enable_lot_numberBoolean =
          obs.enable_lot_number == 0
            ? false
            : obs.enable_lot_number == 1
            ? true
            : ''
      }
      data.createSpuInfo.spu[0].tax_category_code = obs.tax_category_code
      // getDom.value.togglePopperVisible()
    }
    const enablelotBoolchange = (event) => {
      data.createSpuInfo.spu[0].enable_lot_number = event ? 1 : 0
    }
    watch(
      () => [data.createSpuInfo],
      (v1, v2) => {
        // console.log('详情变动 ---> ',v1)
        context.emit('transmitAddSpuInfo', v1)
      },
      {
        deep: true,
      }
    )
    watch(
      () => props.getspuinfo,
      (v1, v2) => {
        // console.log('v1 data',v1)
        // 监听获取值后 触发 图片组件限制
        data.mainImgPara = {
          width: 800,
          height: 800,
          size: 1,
          limit: 1,
          type: 'main',
        }
        data.coverImgPara = {
          width: 800,
          height: 800,
          size: 1,
          limit: 1,
          type: 'cover',
        }
        data.albumImgPara = {
          width: 800,
          height: 800,
          size: 1,
          limit: 6,
          type: 'album',
        }

        // 获取spu详情信息
        data.is_temp = v1.is_temp
        console.log('getspuinfo', v1.is_temp, v1)
        data.createSpuInfo.spu[0].category_id = v1.category_id
        data.createSpuInfo.spu[0].opd_team_id =
          v1.opd_team_id == 0 ? '' : v1.opd_team_id
        data.createSpuInfo.spu[0].spu = v1.spu
        data.createSpuInfo.spu[0].brand_id = v1.brand_id == 0 ? '' : v1.brand_id
        //1.8新增字段
        data.createSpuInfo.spu[0].unit = v1.unit
        data.createSpuInfo.spu[0].enable_lot_number = v1.enable_lot_number
        data.createSpuInfo.spu[0].enable_lot_numberBoolean =
          v1.enable_lot_number == 0
            ? false
            : v1.enable_lot_number == 1
            ? true
            : ''
        data.createSpuInfo.spu[0].tax_category_code = v1.tax_category_code
        //1.8新增字段
        data.createSpuInfo.spu_params[0].name = v1.name
        data.createSpuInfo.spu_params[0].image = v1.image
        data.mainImgParaUrls = [{ url: v1.image }]
        data.createSpuInfo.spu_params[0].cover = v1.cover
        data.coverImgParaUrls = [{ url: v1.cover }]
        data.createSpuInfo.spu_image_album = v1.images
        let tempimglist = []
        v1.images.forEach((el) => {
          tempimglist.push({ url: el })
        })
        data.albumImgParaUrls = tempimglist
        data.createSpuInfo.spu_params[0].product_id = v1.product_id
        data.createSpuInfo.spu_params[0].title = v1.title
        data.createSpuInfo.spu_params[0].s_title = v1.s_title
        data.createSpuInfo.spu_params[0].spec = v1.spec
        data.createSpuInfo.spu_params[0].series = v1.series
      },
      {
        deep: true,
      }
    )
    return {
      data,
      props,
      getDom,
      transmitImgParameter,
      removeImgParameter,
      selectProdcut,
      clearNull,
      spuinput,
      enablelotBoolchange,
    }
  },
})
</script>
<style scoped>
.input-w {
  width: 70%;
}
::deep(.el-form-diy .el-form-item__content) {
  display: flex;
  flex-direction: column;
}
</style>
