<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form"  label-width="250px" class="form-page">
        <el-form-item label="商品名称">
          <el-input v-model="form.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品来源">
            <el-select v-model="form.type" placeholder="请选择商品来源">
                <el-option v-for="(item,index) in goodsType" :key="index" :label="item.name" :value="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="会员折扣">
            <el-input v-model="form.sellDiscount"></el-input>
        </el-form-item>
<!--                <el-form-item label="商品类型">-->
<!--                    <el-checkbox  v-for="(value,key) in GiftTypeArr" v-model="form.giftType[key-1]" :key="key" >{{value.name}}</el-checkbox>-->
<!--                </el-form-item>-->
        <el-form-item label="商品类型">
          <el-checkbox  v-for="(value,index) in GiftTypeArr" v-model="form.giftType[index-1]" :key="index" v-show="(index-1)%2!=0">{{value.name}}</el-checkbox>
        </el-form-item>
        <el-form-item label="报单类型">
          <el-radio-group v-model="form.reconsumeType">
              <el-radio v-for="(value,index) in GiftTypeArr" :label="index" :key="index" v-show="(index-1)%2==0">{{value.name}}</el-radio>
              <el-radio :label="null">无</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="复消购买方式">
              <el-checkbox  v-for="(value,key) in sellType" v-model="form.sellType[key-1]" :key="key" >{{value.name}}</el-checkbox>
          </el-form-item> -->
          <el-form-item label="PV分期">
<!--                    <el-checkbox v-model="form.pvSplit"></el-checkbox>-->
            <el-select v-model="form.pvSplit" placeholder="">
              <el-option
                v-for="item in pvSplitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品编号">
              <el-input v-model="form.goodsNo"></el-input>
          </el-form-item>
          <el-form-item label="单位">
              <el-input v-model="form.unit"></el-input>
          </el-form-item>
          <el-form-item label="市场价格">
              <el-input v-model="form.marketPrice"></el-input>
          </el-form-item>
          <el-form-item label="销售价格">
              <el-input v-model="form.sellPrice"></el-input>
          </el-form-item>
          <el-form-item label="价格PV	">
              <el-input v-model="form.pricePv"></el-input>
          </el-form-item>
          <!-- <el-form-item label="兑换积分">
              <el-input v-model="form.point"></el-input>
          </el-form-item> -->
          <el-form-item label="库存">
              <el-input v-model="form.storeNums"></el-input>
          </el-form-item>
          <el-form-item label="商品详情">
            <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="form.content">
            </el-input>
          </el-form-item>
          <el-form-item label="排序">
              <el-input v-model="form.sort"></el-input>
          </el-form-item>
          <el-form-item label="上传图片">
              <div class='up_load'>
                  <leo-uploader
                      @on-success='upLoadSuccess'
                      :request-route="'shop/upload'"
                  ></leo-uploader>
              </div>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="addSubmit" :loading="submitButtonStat">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>

<script>
import store from '@/utils/vuexStore'
import network from '@/utils/network'
import tool from '@/utils/tool'
import baseInfo from '../../utils/baseInfo'
import LeoUploader from '@/components/Uploader';
export default {
  name: 'goods-add',
  components: {LeoUploader},
  mounted () {
    this.getData()
    this.getFileToken()
  },
  data(){
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      loading: false,
      file: null,
      uploadToken: '',
      pvSplitOptions: [
        {
          value: '0',
          label: 'No'
        },
        {
          value: '1',
          label: 'Yes'
        }],
      form: {
        goodsName: '',
        type: '',
        giftType: [false, false, false, false],
        sellType: [false, false],
        goodsNo: '',
        unit: '',
        marketPrice: '',
        sellPrice: '',
        pvSplit: '0',
        pricePv: '',
        point: '',
        storeNums: '',
        content: '',
        sort: '',
        discount: '',
        cover: '',
        textarea: '',
        sellDiscount: '',
        reconsumeType: null
      },
      submitButtonStat: false,
      goodsType: [],
      GiftTypeArr: [],
      sellType: null,
      width: '100px',
      height: '100px'
    }
  },
  watch: {
    dialogVisible (newVal, oldVal) {
      console.log(newVal, oldVal)
    }
  },
  methods: {
    handleRemove (file) {
      console.log(file)
    },
    upLoadSuccess (file) {
      this.form.cover = file
      this.form.cover = tool.getLocaleLink(file, '/files/')
      this.form.coverOrigin = file
      this.img_show = false
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      this.file = file
      // console.log(file);
    },
    handleDownload (file) {
      console.log(file)
    },
    getFile () {
      let data = {
        uploadToken: this.uploadToken,
        file: this.file
      }
      if (this.uploadToken) {
        network.postData('shop/upload', data)
          .then(response => {
            console.log(response)
          })
      }
    },
    getFileToken () {
      network.getData('shop/upload').then(response => {
        this.uploadToken = response
      })
    },
    getData (page, pageSize) {
      network.getPageData(this, 'shop/goods-add', page, pageSize, this.filterModel, response => {
        this.goodsType = response.goodsType
        this.GiftTypeArr = response.giftType
        this.sellType = response.sellType
        this.form.sellType = this.form.sellType.map((item, index) => {
          return response.sellType.some(val => (index + 1).toString() == val)
        })
      })
    },
    addSubmit () {
      this.submitButtonStat = true
      let path = 'shop/goods-add'

      let sellType = []
      this.form.sellType.map((item, index) => {
        if (item) {
          sellType.push((index + 1).toString())
        }
      })

      let sen_gift = []
      this.form.giftType.map((item, index) => {
        if (item) {
          sen_gift.push((index + 1).toString())
        }
      })
      if (this.form.reconsumeType == 0 || this.form.reconsumeType == 2) { // 复消类型，单选
        sen_gift.push((this.form.reconsumeType + 1).toString())
      }

      let postData = {
        goodsName: this.form.goodsName,
        sellDiscount: this.form.sellDiscount,
        discount: this.form.type.discount,
        type: this.form.type,
        giftType: sen_gift,
        sellType: sellType,
        pvSplit: this.form.pvSplit,
        goodsNo: this.form.goodsNo,
        unit: this.form.unit,
        marketPrice: this.form.marketPrice,
        sellPrice: this.form.sellPrice,
        pricePv: this.form.pricePv,
        // point: this.form.point,
        storeNums: this.form.storeNums,
        content: this.form.content,
        sort: this.form.sort,
        cover: this.form.cover
      }

      return network.postData(path, postData).then(response => {
        console.log(response)
        this.$message({
          message: response,
          type: 'success'
        })
        this.submitButtonStat = false
        this.$router.go(-1)
      }).catch(() => {
        this.submitButtonStat = false
      })
    }
    /*
    handleEdit() {
        this.dialogEditFormVisible = false
        this.$message({
            message: '正在修改数据',
            type: 'info'
        })
        let path = 'finance/deal-type-edit'
        network.postData(path, this.form).then(response => {
            this.$message({
                message: response,
                type: 'success'
            })
            this.getData(this.currentPage, this.pageSize)
        }).catch(response => {
        })
    }, */
  }
}
</script>

<style scoped>
.up_load{
    width: 100px;
}
</style>
