<template>

  <el-dialog
    title="添加规格"
    :visible.sync="show"
    width="30%"
    :close-on-click-modal="false"
    :before-close="handleClose" append-to-body>

    <el-form ref="form" :model="form" :rules="rules" label-width="100px">

      <el-form-item label="选择规格" prop="class">
        <el-select
            v-model="form.class"
            filterable
            remote
            reserve-keyword
            placeholder="搜索规格名称"
            @change="onSelect"
            :remote-method="remoteMethod"
            :disabled="valuing"
            :loading="searching">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="选择规格值" prop="value">

        <el-checkbox-group v-model="form.value">
            <el-checkbox v-for="(item, index) in values" :key="index" :label="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>

      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 认</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import {
    ZmMixin
  } from '@/mixins/ZmMixin.js'

  import {
    searchSpecByName,
    getSpecValue
  } from './goods_api.js'

  export default {
    mixins: [ZmMixin],
    props: {
      show: Boolean,
      classifyId: [String, Number]
    },
    data() {
      return {
        loading: false,
        searching: false,
        valuing: false,
        options: [],
        values: [],
        form: {
          class: "",
          value: []
        },
        rules: {
          class: [{
            trigger: 'blur',
            message: "请选择规格",
            required: true
          }],
          value: [{
            trigger: 'blur',
            message: "请选择规格值",
            required: true
          }]
        }
      }
    },
    watch: {
      show(n, o) {
        if(n) {
          this.options = []
          this.values = []
          this.form.class = ""
          this.form.value = []
        }
      }
    },
    methods: {
      handleClose() {
        this.$emit('close')
      },
      remoteMethod(query) {
        this.options = []
        if(query !== '') {
          this.searching = true
          searchSpecByName({specName: query, classifyId: this.classifyId})
          .then(z => {
            this.searching = false
            let r = this.zmRes(z)
            if(r) {
              this.options = r.map(r => {
                return {
                  label: r.specName,
                  value: r.id
                }})
            }
          })
          .catch(e => {
            this.searching = false
          })
        }
      },
      onSelect(select) {
        if(select) {
          this.valuing = true
          getSpecValue({specId: select})
          .then(r => {
            this.valuing = false
            let z = this.zmRes(r)
            if(z) {
              this.values = z.map(r => {
                return {
                  id: r.id,
                  name: r.specValue
                }
              })
            }
          })
          .catch(e => {
            this.valuing = false
          })
        }
      },
      onSubmit() {
        this.$refs['form'].validate((valid) => {
          if(valid) {
            let spec = this.options.filter(r => { return r.value == this.form.class })[0]
            let out = {
              specId: this.form.class,
              specName: spec.label,
              values: this.form.value.map(id => {
                let find = undefined
                for(let i = 0; i < this.values.length; i++) {
                  let value = this.values[i]
                  if(value.id == id) {
                    find = value
                    break
                  }
                }
                return find
              })
            }
            this.$emit('chosen', out)
          }
        })
      }
    }
  }

</script>

<style scoped>

</style>
