<template>
  <div class="data-info">
    <el-card>
      <el-form :model="dataForm" label-width="120px">

        <el-form-item label="项目名称:">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>

        <el-form-item label="项目介绍:">
          <el-input
          rows="10"
          type="textarea"
          v-model="dataForm.intro"></el-input>

        </el-form-item>

        <el-form-item label="所属客户:">
          <el-select v-model="dataForm.customer_id"  placeholder="请选择客户" size="large"   style="width:100%;">
              <el-option
                v-for="item in customerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
        </el-form-item>
      <el-form-item label="关联文档:">
        <el-select v-model="dataForm.linkDoc" multiple  placeholder="请选择关联文档" size="large"   style="width:100%;">
            <el-option
              v-for="item in articleList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
      </el-form-item>
        <el-form-item label="所属分类:">
          <el-select v-model="dataForm.category_id"  placeholder="请选择所属分类" size="large"   style="width:100%;">
              <el-option
                v-for="item in allCategories"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
        </el-form-item>

        <el-form-item label="项目状态:">
          <el-select v-model="dataForm.status"  placeholder="请选择状态" size="large"   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>

    </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";
  import {searchCategory,createProject,updateProject,getProjectInfo} from'@/api/project'
  import {searchCustomer} from"@/api/customer"
  import {searchDocument} from "@/api/document"
  export default{
    components:{
      Tinymce
    },
    emits:['onClose'],
    props:{
      id:{
        type:Number,
        default:0
      },
    },
    watch:{
      id:{
        handler(v){
            let _this=this;
            if(v==null )return;
            if(v==0){

              this.dataForm={
                id:0,
                name:'',
                intro:'',
                customer_id:'',
                category_id:'',
                status:5,
                linkDoc:[],
              }
              return;
            }
            _this.getInfo(v);
        },
        immediate: true,
        deep: true
      }
    },
    data(){
      return{
        activeName:'base',
        currentCategory:[],
        allCategories:[],
        imageUrl:"",
        customerList:[],
        articleList:[],
        dataForm:{
          id:0,
          name:'',
          intro:'',
          customer_id:'',
          category_id:'',
          status:5,
          linkDoc:[],
        },
        statusOptions:[
          {
            status:5,
            name:'启用'
          },
          {
            status:6,
            name:'停用'
          }

        ],
      }
    },

    mounted() {
      let _this=this;
      _this.uploadUrl=process.env.VUE_APP_BASE_API+"/upload"
      _this.initAllCategory();
      this.initCustomer();
      this.initDocList();
    },
    methods:{
      initDocList(){
        let _this = this;
        searchDocument({
          page: 1,
          pageSize: 10
        }).then(res => {
          if (res.status != 200) return;
          _this.articleList = res.data.dataList;
        })
      },
      //图片上传成功
      onUploadSuccess(e){
        console.log("onUploadSuccess",e);
      },
      //保存更新
      btnSave(e){
          let _this=this;

          if(_this.dataForm.title==''){
            _this.$alert("产品标题不能为空");
              return;
          }
          _this.dataForm.links=JSON.stringify(_this.dataForm.linkDoc);
          if(_this.dataForm.id>0){
            updateProject(_this.dataForm).then(res=>{
              _this.$alert("项目信息更新成功");
              _this.$emit("onClose")
            })
          }else{
            createProject(_this.dataForm).then(res=>{
              _this.$alert("项目信息创建成功");
              _this.$emit("onClose");
            })
          }

      },

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

          })
      },

      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
          };
          searchCategory(par).then(res=>{
            _this.allCategories=res.data.dataList;
          })
      },
      initCustomer(){
        let _this=this;
        let par={
          page:1,
          pageSize:99,
        }
        searchCustomer(par).then(res=>{
          _this.customerList=res.data.dataList;
        })
      }

    }
  }
</script>

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