<template>
  <div class="mod-prod-info">
    <el-form :model="dataForm" ref="dataForm" label-width="100px">
      <el-form-item label="产品视频">
        <video-upload v-model="dataForm.video" />
      </el-form-item>
      <el-form-item label="产品图片">
        <imgs-upload v-model="dataForm.imgs" />
        <span>建议图片尺寸为800*800，可拖动排序，首图为主图，最多上传9张。</span>
      </el-form-item>

      <el-form-item label="平台分类" prop="categoryId">
        <el-col :span="8">
          <el-cascader
            expand-trigger="hover"
            :options="category.list"
            :props="category.props"
            v-model="category.selected"
            change-on-select
            @change="handleCategoryChange"
            disabled
          ></el-cascader>
        </el-col>
      </el-form-item>

      <el-form-item
        label="本店分类"
        prop="shopCategoryId"
        :rules="[{ required: true, message: '本店分类不能为空'}]"
      >
        <el-col :span="8">
          <el-select v-model="dataForm.shopCategoryId" placeholder="请选择">
            <el-option
              v-for="item in categoryList"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="产品名称" prop="prodName" :rules="[{ required: true, message: '产品名称不能为空'}]">
        <el-col :span="8">
          <el-input v-model="dataForm.prodName" placeholder="产品名称" maxlength="50" show-word-limit></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="所属品牌" prop="brandId">
        <!-- <el-input v-model="dataForm.brandId"></el-input> -->
        <el-button plain @click="brandSelectHandle()" style="float:left" v-if="!brandName">选择品牌</el-button>
        <el-tag :closable="true" v-if="brandName" @close="handleClose()">{{brandName}}</el-tag>
      </el-form-item>
      <el-form-item label="产品卖点" prop="brief">
        <el-col :span="8">
          <el-input
            v-model="dataForm.brief"
            type="textarea"
            :autosize="{minRows: 2, maxRows: 4}"
            placeholder="产品卖点"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="配送方式">
        <el-checkbox v-model="dataForm.deliveryMode.hasShopDelivery">商家配送</el-checkbox>
        <!-- <el-checkbox v-model="dataForm.deliveryMode.hasUserPickUp">用户自提</el-checkbox> -->
      </el-form-item>
      <prod-transport
        v-show="dataForm.deliveryMode.hasShopDelivery"
        v-model="dataForm.deliveryTemplateId"
      ></prod-transport>
      <sku-tag ref="skuTag" @change="skuTagChangeSkuHandler" :skuList="dataForm.skuList"></sku-tag>
      <sku-table ref="skuTable" v-model="dataForm.skuList" :prodName.sync="dataForm.prodName"></sku-table>

      <el-form-item label="产品详情" prop="content">
        <tiny-mce v-model="dataForm.content" ref="content" style="width:1000px"></tiny-mce>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </el-form-item>
    </el-form>
    <!-- 品牌选择弹窗-->
    <brand-select
      v-if="brandSelectVisible"
      ref="brandSelect"
      :isSingle="true"
      @refreshSelectBrand="selectBrand"
    ></brand-select>
  </div>
</template>

<script>
// import MulPicUpload from '@/components/mul-pic-upload'
import ImgsUpload from '@/components/imgs-upload'
import VideoUpload from '@/components/video-upload'
import ProdTransport from './prod-transport'
import SkuTag from './sku-tag'
import SkuTable from './sku-table'
import TinyMce from '@/components/tiny-mce'
import BrandSelect from '@/components/brand-select'
import { treeDataTranslate, idList } from '@/utils'

export default {
  data () {
    return {
      // 平台分类树展示与回显
      category: {
        list: [],
        selected: [],
        props: {
          value: 'categoryId',
          label: 'categoryName'
        }
      },
      // 本店分类
      categoryList: [],
      brandSelectVisible: false,
      // 规格列表
      dataForm: {
        prodName: '',
        brief: '',
        video: '',
        pic: '',
        imgs: '',
        categoryId: this.$route.query.categoryId ? parseInt(this.$route.query.categoryId) : null,
        shopCategoryId: null, // 店铺分类id
        prodId: 0,
        brandId: 0,
        skuList: [],
        content: '',
        brandName: '',
        deliveryMode: {
          hasShopDelivery: true,
          hasUserPickUp: false
        },
        deliveryTemplateId: null
      },
      brandName: '',
      resourcesUrl: window.SITE_CONFIG.resourcesUrl
    }
  },
  components: {
    ImgsUpload,
    BrandSelect,
    VideoUpload,
    ProdTransport,
    TinyMce,
    SkuTag,
    SkuTable
  },
  computed: {
    defalutSku () {
      return this.$store.state.prod.defalutSku
    }
  },
  activated () {
    this.dataForm.prodId = this.$route.query.prodId
    this.getCategoryList()
    this.getCategoryTree()
    this.getDataList()
  },
  methods: {
    // 获取分类数据
    getDataList () {
      if (this.dataForm.prodId) {
        // 获取产品数据
        this.$http({
          url: this.$http.adornUrl(`/prod/prod/info/${this.dataForm.prodId}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.dataForm = data
          this.dataForm.deliveryMode = JSON.parse(data.deliveryMode)
          this.category.selected = idList(this.category.list, this.dataForm.categoryId, 'categoryId', 'children').reverse()
          this.$refs.skuTag.init(data.skuList)
          if (data.brand) {
            this.dataForm.brandId = data.brand.brandId
            this.dataForm.brandName = data.brand.brandName
            this.brandName = data.brandName
          }
          this.$refs.skuTable.init()
        })
      } else {
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.$refs.skuTag.init()
          this.dataForm.pic = ''
          this.dataForm.imgs = ''
          this.dataForm.video = ''
        })
      }
    },
    // 获取分类信息
    getCategoryList () {
      return this.$http({
        url: this.$http.adornUrl('/prod/category/listCategory'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.categoryList = data
      })
    },
    // 获取分类信息
    getCategoryTree () {
      return this.$http({
        url: this.$http.adornUrl('/prod/category/platformCategory'),
        method: 'get',
        params: this.$http.adornParams({
          maxGrade: 2
        })
      }).then(({ data }) => {
        this.category.list = treeDataTranslate(data, 'categoryId', 'parentId')
        this.category.selected = idList(this.category.list, this.dataForm.categoryId, 'categoryId', 'children').reverse()
      })
    },
    // 选择平台分类改变事件
    handleCategoryChange (val) {
      this.dataForm.categoryId = val[val.length - 1]
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        if (!this.dataForm.imgs) {
          this.errorMsg('请选择图片上传')
          return
        }
        if (!this.dataForm.deliveryMode) {
          this.errorMsg('请选择配送方式')
          return
        }
        if (this.dataForm.deliveryMode.hasShopDelivery && !this.dataForm.deliveryTemplateId) {
          this.errorMsg('请选择运费模板')
          return
        }
        let param = Object.assign({}, this.dataForm)
        // 设置价格和库存
        this.paramSetPriceAndStocks(param)

        param.deliveryMode = undefined
        param.deliveryModeVo = this.dataForm.deliveryMode
        // 商品主图
        param.pic = this.dataForm.imgs.split(',')[0]
        this.$http({
          url: this.$http.adornUrl(`/prod/prod`),
          method: param.prodId ? 'put' : 'post',
          data: this.$http.adornData(param)
        }).then(({ data }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.$store.commit('common/removeMainActiveTab')
              this.$router.push({ name: 'prod-prodList' })
              this.$emit('refreshDataList')
            }
          })
        })
      })
    },
    /**
     * 品牌删除按钮
     */
    handleClose () {
      this.dataForm.brandId = null
      this.brandName = ''
      this.dataForm.brandName = this.brandName
    },
    /**
     * 显示添加指定品牌弹框
     */
    brandSelectHandle () {
      this.brandSelectVisible = true
      this.$nextTick(() => {
        this.$refs.brandSelect.init()
      })
    },
    /**
     * 添加指定品牌
     */
    selectBrand (brands) {
      if (brands) {
        this.brandName = brands[0].brandName
        this.dataForm.brandId = brands[0].brandId
        this.dataForm.brandName = this.brandName
      }
    },
    paramSetPriceAndStocks (param) {
      // 获取规格属性信息
      // param.skuList = this.$refs.prodSpec.getTableSpecData()
      // 商品库存
      param.totalStocks = 0
      // 商品价格
      param.price = 0
      // 商品原价
      param.oriPrice = 0
      // 商品实际库存
      for (let i = 0; i < param.skuList.length; i++) {
        const element = param.skuList[i]
        if (element.status !== 1) {
          continue
        }
        if (param.price === 0) {
          param.price = element.price ? Number.parseFloat(element.price) : 0
        }
        // 商品价格为最低价的那件商品的价格
        param.price = Math.min(param.price, element.price)
        if (param.price === element.price) {
          param.oriPrice = element.oriPrice ? Number.parseFloat(element.oriPrice) : 0
        }
        param.totalStocks += element.stocks ? Number.parseInt(element.stocks) : 0
      }
      // 如果sku没有商品名称，则使用商品的商品名称
      if (param.skuList.length === 1) {
        param.skuList[0].prodName = this.dataForm.prodName
      }
    },
    skuTagChangeSkuHandler (skuList) {
      const prodName = this.dataForm.prodName
      skuList.forEach(sku => {
        if (sku.properties) {
          sku.skuName = ''
          let properties = sku.properties.split(';')
          for (const propertiesKey in properties) {
            sku.skuName += properties[propertiesKey].split(':')[1] + ' '
          }
          sku.prodName = prodName + ' ' + sku.skuName
        }
      })
      this.dataForm.skuList = skuList
    },
    errorMsg (message) {
      this.$message({
        message: message,
        type: 'error',
        duration: 1500
      })
    }
  }
}
</script>
