<template>
  <div class="data-info">
    <el-card>
      <el-form :model="dataForm" label-width="120px">
        <el-form-item label="所属分类:">
          <el-select v-model="dataForm.parent_id"  placeholder="请选择所属分类" size="large" style="width:100%;">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="分类名称:">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>

        <el-form-item label="分类状态:">
          <el-select v-model="dataForm.status"  placeholder="请选择分类状态" size="large" @change="onChangeStatus" style="width:100%;">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="分类属性:">
            <div class="attr" style="margin-bottom: 10px;" v-for="(it,index) in dataForm.attrs"><span>属性名称{{index+1}}:</span><el-input v-model="it.name"  style="width:100px;" placeholder="请填写属性名称"></el-input></div>


            <div class="btn" style="margin-top:10px;"><el-button type="primary" @click="onAddAttr">新增属性</el-button></div>
        </el-form-item>
      </el-form>
    </el-card>
    <div style="text-align:right; margin-top:20px;">
        <el-button type="warning" @click="btnSave">确认保存</el-button>
    </div>
  </div>
</template>

<script>
  import {searchProductCategory,createProductCategory,updateProductCategory,getProductCategoryInfo} from'@/api/product'
  export default{
    emits:['onClose'],
    props:{
      id:{
        type:Number,
        default:0
      },
    },
    watch:{
      id:{
        handler(v){
            let _this=this;
            if(v==null || v<=0)return;
            _this.getInfo(v);
        },
        immediate: true,
        deep: true
      }
    },
    data(){
      return{
        activeName:'base',
        categoryList:[],
        dataForm:{
           id:0,
           parent_id:"",
           name:'',
           attrs:[],
           status:'',
        },
        statusOptions:[
         {
           value:'',
           label:"请选择状态"
         },
         {
           value:5,
           label:'启用'
         },
         {
           value:6,
           label:"停用"
         },
        ],
      }
    },

    mounted() {
      let _this=this;
      _this.initAllCategory();
    },
    methods:{

      onAddAttr(e){
        let _this=this;
        _this.dataForm.attrs.push({name:""})
      },
      //保存更新
      btnSave(e){
          let _this=this;

        let data={..._this.dataForm};
        data.attrs=JSON.stringify(data.attrs);
        if(_this.dataForm.id>0){
          updateProductCategory(data).then(res=>{
            if(res.status!=200)return;
            _this.$alert("更新产品分类成功");
            _this.$emit("onClose")
          })
        }else{
          createProductCategory(data).then(res=>{
            if(res.status!=200)return;
            _this.$alert("创建产品分类成功");
            _this.$emit("onClose")
          })
        }

      },

      //产品详情
      getInfo(id){
          let _this=this;
          let par={
            id:id,
          };
          getProductCategoryInfo(par).then(res=>{
              if(!res)return;
              if(res.status!=200)return;
              _this.dataForm=res.data;
              _this.dataForm.attrs=JSON.parse(_this.dataForm.attrs);

          })
      },

      onChangeStatus(e){
          this.dataForm.status=e;
      },
      //修改分类信息
      onChangeCategory(e){
         let _this=this;
         _this.dataForm.categoryId=e;
      },
      //初始化所有分类
      initAllCategory(){
          let _this=this;
          let par={
            page:1,
            pageSize:9999,
            status:5,
            parent_id:0,
          };
          searchProductCategory(par).then(res=>{
            if(!res)return;
            if(res.status!=200)return;
            _this.categoryList=res.data.dataList;
            _this.categoryList.unshift({id:0,name:"请选择父级分类"});
          })
      }

    }
  }
</script>

<style lang="scss">
 @import './dataInfo.scss'
</style>
