<template>
  <el-dialog :title=this.msg :visible.sync="myDialogVisible" width="30%" center>

      <span style="cursor: pointer" v-if="clickType == 'category'">
        <div v-for="(item,index) in items"
             :key="index">
          <el-input v-model="item.meta_name" style="width:50%;"></el-input>
          <el-button  @click="add(index)"> + </el-button>
          <el-button  @click="del(index)"> - </el-button>
        </div>
      </span>

    <span style="cursor: pointer" v-if="clickType == 'unit'">
          <div v-for="(item,index) in items"
               :key="index">
            <el-input v-model="item.meta_name" style="width:50%;"></el-input>
            <el-button  @click="add(index)"> + </el-button>
            <el-button  @click="del(index)"> - </el-button>
          </div>
    </span>

    <!--<span style="cursor: pointer" v-if="clickType == 'season'">-->
          <!--<div v-for="(item,index) in items"-->
               <!--:key="index">-->
            <!--<el-input v-model="item.meta_name" style="width:50%;"></el-input>-->
            <!--<el-button  @click="add(index)"> + </el-button>-->
            <!--<el-button  @click="del(index)"> - </el-button>-->
          <!--</div>-->
    <!--</span>-->

    <!--<span style="cursor: pointer" v-if="clickType == 'source'">-->
          <!--<div v-for="(item,index) in items"-->
               <!--:key="index">-->
            <!--<el-input v-model="item.meta_name" style="width:50%;"></el-input>-->
            <!--<el-button  @click="add(index)"> + </el-button>-->
            <!--<el-button  @click="del(index)"> - </el-button>-->
          <!--</div>-->
    <!--</span>-->

    <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogConfirm()">确 定</el-button>
          <el-button @click="myDialogVisible = false">取 消</el-button>
        </span>
  </el-dialog>
</template>

<script>
  export default {
    name: 'style_edit_dialog',
    components: {
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      // category 类型，unit 单位，season 季节，source 样品来源
      clickType: {
        type: String,
        default: 'category'
      },
      msg: {
        type: String,
        default: '品牌'
      }
    },
    data() {
      return {
        items: [],
        addItems: {
          meta_id: '',
          meta_name: '',
          meta_code: ''
        },
        // props副本
        myDialogVisible: this.dialogVisible
      }
    },
    watch: {
      // 监听props属性
      // 监听外部对props属性dialogVisible的变更，并同步到组件内的data属性dialogStatus副本属性中
      dialogVisible(val) {
      // console.log('dialogVisible发生了变化', val)
        this.myDialogVisible = val
      },
      // 监听副本属性
      // 组件内对myDialogVisible变更后向外部发送事件通知
      myDialogVisible(val) {
      // console.log('向外发送事件通知..', val)
        this.$emit('changeVisible', val)
      }
    },
    methods: {
      add(index) {
        console.log(this.addItems, 'addItems')
        this.items.push(this.addItems)
//        this.addItems = ''
        console.log(this.items, 'items')
      },
      dialogConfirm() {
        this.myDialogVisible = false
        if (this.clickType === 'category') {
          this.addCategory()
        }
        if (this.clickType === 'unit') {
          this.addUnit()
        }
//        if (this.clickType === 'season') {
//          this.getAllSeason()
//        }
//        if (this.clickType === 'source') {
//          this.getSource()
//        }
      },
      // 删除分类
      del(index) {
        this.items.splice(index, 1)
      },
      getCategory() {
        this.$api.getCategory().then(res => {
          console.log(res.data.garment_type)
          this.items = res.data.garment_type
        })
      },
      addCategory() {
        console.log(this.addItems)
        this.$api.addCategory(this.addItems).then(res => {
        })
      },
      getAllSeason() {
        this.$api.getAllSeason().then(res => {
          this.items = res.data.season
        })
      },
      getSource() {
        this.$api.getSource().then(res => {
          this.items = res.data.source
//          console.log(res.data.source)
        })
      },
      // 获取所有单位
      getUnit() {
        this.$api.getUnit().then((res) => {
          this.items = res.data.unit
        })
      },
      // 更新单位
      addUnit() {
        console.log(this.addItems)
        this.$api.addUnit(this.addItems).then((res) => {
          console.log(res.data)
        })
      }
    },
    mounted() {
      if (this.clickType === 'category') {
        this.getCategory()
      }
      if (this.clickType === 'unit') {
        this.getUnit()
      }
      if (this.clickType === 'season') {
        this.getAllSeason()
      }
      if (this.clickType === 'source') {
        this.getSource()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
