<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
         <li class="flex-h">
          <span>选择案场：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="Case" placeholder="请选择">
                <el-option
                  v-for="item in cases"
                  :key="item.CaseId"
                  :label="item.CaseName"
                  :value="item.CaseId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品名称：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入商品名称"
                v-model="detail.GoodsName"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品图片：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-upload
                :action="$api.file.image.url"
                :limit='limit'
                list-type="picture-card"
                :file-list='imgsArr'
                :on-success="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-exceed="exceed">
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品价格：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入商品价格"
                v-model="detail.Price"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品规格：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="detailSpecs" multiple placeholder="请选择" style="width:100%;">
                <el-option
                  v-for="item in specs.list"
                  :key="item.SpecId"
                  :label="item.SpecName"
                  :value="item.SpecId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品类别：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="detail.TypeId" placeholder="请选择商品类型">
                <el-option
                  v-for="item in types.list"
                  :key="item.TypeId"
                  :label="item.TypeName"
                  :value="item.TypeId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click='submit'>保存</el-button>
          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

const { mapState: mapGoodsState, mapActions: mapGoodsActions } = createNamespacedHelpers('goods')
export default {
  name: '',
  data () {
    return {
      limit: 2,
      dialogVisible: false,
      infoSpecs: null,
    }
  },
  components: {},
  computed: {
    ...mapGoodsState({
      detail: x => x.goodsInfo,
      types: x => x.goodsTypes,
      specs: x => x.goodsSpecs,
    }),
    ...mapState({
      cases: x => x.app.cases.list,
      caseid: x => x.app.cases.default,
      orgid: x => x.app.user.OrgId,
    }),
    Case: {
      get () {
        return this.detail.CaseId || this.caseid
      },
      set (val) {
        this.UpdateInfo({...this.detail, CaseId: val})
        this.GetGoodTypes({ pagesize: 1000, caseid: this.Case })
        this.GetGoodSpecs({ pagesize: 1000, caseid: this.Case })
      }
    },
    detailSpecs: {
      get () {
        return this.infoSpecs || (this.detail.Specs || []).map(x => x.SpecId)
      },
      set (val) {
        this.infoSpecs = val
      },
    },
    imgsArr () {
      return (this.detail.Images || []).map(x => {
        return {...x, url: x.url || x.ImgUrl}
      })
    },
  },
  methods: {
    ...mapGoodsActions([
      'GetGoodTypes',
      'GetGoodsByID',
      'AddGoods',
      'UpdateGoods',
      'SetNull',
      'UpdateInfo',
      'GetGoodSpecs',
    ]),
    submit () {
      this.detail.specs = JSON.stringify(this.detailSpecs.map(x => ({SpecId: x, GoodsPrice: this.detail.Price})))
      this.detail.images = this.detail.Images.map(x => {
        if (x.response) {
          return x.response.result.url
        } else {
          return x.ImgUrl
        }
      }).join(',')
      if ((this.detail.GoodsId || '') === '') {
        this.detail.OrgId = this.orgid
        if (!this.detail.CaseId || this.detail.CaseId === '') {
          this.detail.CaseId = this.caseid
        }
        this.AddGoods(this.detail)
      } else {
        this.UpdateGoods(this.detail)
      }
      this.$message({
        type: 'success',
        message: '操作成功'
      })
      this.$router.push({ name: 'goodsInfo' })
    },
    cancel () {
      this.$router.go(-1)
    },
    handlePictureCardPreview (res, file, fileList) {
      this.detail.Images = fileList
    },
    handleRemove (file, fileList) {
      this.detail.Images = fileList
    },
    exceed () {
      this.$message({
        message: '超过可传的图片上限',
        type: 'info',
        duration: 1000
      })
    }
  },
  created () {
    this.GetGoodTypes({ pagesize: 1000, caseid: this.Case })
    this.GetGoodSpecs({ pagesize: 1000, caseid: this.Case })
    const { id } = this.$route.query
    if (id && id !== '') {
      this.GetGoodsByID({ id: id })
    } else {
      this.SetNull()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
