<template>
  <el-dialog :title="topTitle"
             :visible.sync="show"
             :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="specName"
                    :initDropDownBox="initDropDownBox">
        <avue-select v-model="form.specName" @change="getSpecValue" placeholder="选择规格名称" type="tree" :dic="dic" ></avue-select>
      </el-form-item>

      <el-form-item label="选择规格值" prop="specValueStr">
        <el-checkbox-group v-model="specValueStr" size="medium">
          <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="loading" @click="onSubmit" style="width: 200px; height: 40px;display:block;margin:0 auto;" >确认添加</el-button>
    </span>

  </el-dialog>
</template>

<script>
  import {ZmMixin} from '@/mixins/ZmMixin.js'


  export default {
    props: {
      show: Boolean,
    },
    mixins: [ZmMixin],
    components: {
    },
    computed: {
      topTitle() {
        return '添加规格'
      },
      initDropDownBox(){
        this.$axios.get("/general/mallGoodsSpec/dropDownBox").then(e =>{
          this.dic=Object.values(e.data)
        })
      }
    },
    watch: {},
    data() {
      return {
        dic:[],
        value:'选择规格名称',//下拉
        specValueStr: [],
        cities: [],
        inputVisible: false,
        inputValue: '',
        loading: false,
        form: {
          specName: '',
          specValueStr:'',
        },
        rules: {},
      }
    },

    methods: {
      // 下拉框值变更事件：获取规格值
      getSpecValue(val){
        if(val!==undefined && val!==''){
          this.$axios.get("/general/mallGoodsSpecValue/multiSelectButton",{
            params:{specId:val}
          }).then(response => {
            this.cities=Object.values(response.data)
            return response.data
          }, error => {
            console.log('错误', error.message)
          })
        }
      },

      handleClose() {
        this.$emit('close')
      },
      handleCloseTag(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      onSubmit() {
        this.$refs.elTable.style.display='none'
        this.handleClose()
      }

    },

  }
</script>

<style>

  .el-tag + .el-tag {
    margin-left: 10px;
  }
</style>
