<template>
  <div class="data-info">
    <el-card>
      <el-form :model="dataForm" label-width="120px">
        <el-form-item label="组件类型:">
          <el-select v-model="dataForm.type"  placeholder="请选择类型" size="large" @change="onChangeStatus" style="width:100%;">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="组件名称:">
          <el-input v-model="dataForm.title"></el-input>
        </el-form-item>
        <el-form-item label="产品状态:">
          <el-select v-model="dataForm.statusName"  placeholder="请选择状态" size="large" @change="onChangeStatus" style="width:100%;">
              <el-option
                v-for="item in statusOptions"
                :key="item.status"
                :label="item.name"
                :value="item.status"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="说明介绍:">
            <el-input type="textarea" v-model="dataForm.title"></el-input>
        </el-form-item>

        <el-form-item label="组件内容:" v-if="dataForm.type==1">
            <Tinymce></Tinymce>
        </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 Tinymce from "@/components/Tinymce";
  export default{
    components:{
      Tinymce
    },
    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',
        currentCategory:[],
        allCategories:[],
        typeList:[
          {
            value:1,
            text:'文本'
          },
          {
            value:2,
            text:"二维表"
          }
        ],
        dataForm:{
          type:1,
          prod:{
            items:[],
          }
        },
        statusOptions:[
          {
            status:5,
            name:'启用'
          },
          {
            status:6,
            name:'停用'
          },

        ],
      }
    },

    mounted() {
      let _this=this;
      _this.initAllCategory();
    },
    methods:{
      //保存更新
      btnSave(e){
          let _this=this;

          if(_this.dataForm.title==''){
            _this.$alert("产品标题不能为空");
              return;
          }

         let dataForm={
           id:_this.dataForm.id,
           title:_this.dataForm.title,
           status:_this.dataForm.status,
           categoryId:_this.dataForm.categoryId,
           sku:_this.dataForm.sku
         };

          // productUpdate(_this.dataForm).then(res=>{
          //   if(!res)return;
          //    _this.$alert("产品审核操作成功");
          //    _this.$emit("bindUpdate");
          // })
      },

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

      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:1
          };
          // searchGoodsCategory().then(res=>{
          //   if(!res)return;
          //   if(res.status!=200)return;
          //   _this.allCategories=res.data.data;
          // })
      }

    }
  }
</script>

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