<template>
  <div class="doc-attr">
    <el-form>
      <el-form-item label="标题:">
        <el-input
          v-model="attrs.title"
          style="width: 100%"
          class="input-item"
          placeholder="请填写模版名称"
          :disabled="articleId"
        />
      </el-form-item>

      <!--<el-form-item label="选择分类:">
        <el-select v-model="attrs.category_id" style="width:100%;" placeholder="请选择所属分类">
          <el-option
                v-for="(item,index) in articleCategoryList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
        </el-select>
      </el-form-item>
       <el-form-item label="适用产品:">
        <el-select v-model="attrs.linkProduct" :multiple="true" style="width:100%;" @change="onChangeProduct"  placeholder="请选择适用产品">
          <el-option
                v-for="(item,index) in productList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
        </el-select>
      </el-form-item>

      <el-form-item label="适用项目:">
        <el-select v-model="attrs.linkProject" :multiple="true" style="width:100%;" @change="onChangeProject"  placeholder="请选择适用项目">
          <el-option
                v-for="(item,index) in projectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
        </el-select>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { searchDocumentCategory } from "@/api/document";
import { searchProduct } from "@/api/product";
import { searchProject } from "@/api/project";
export default {
  name: "docAttr",
  props: {
    attrs: {
      type: Object,
      default: () => {
        return {
          category_id: "",
          title: "",
          linkProduct: [],
          linkProject: [],
        };
      },
    },
  },
  watch: {
    attrs: {
      handler(val) {},
      immediate: true, //立即执行
      deep: true,
    },
  },
  data() {
    return {
      articleCategoryList: [],
      productList: [],
      projectList: [],
      articleId:0
    };
  },
  created() {
    this.initArticleCategoryList();
    this.initProjectList();
    this.initGoodsList();
    this.articleId=this.$route.query.articleId
  },
  methods: {
    onChangeProduct(e) {
      let _this = this;
    },

    onChangeProject(e) {},
    //初始化产品列表
    initProjectList() {
      let _this = this;
      searchProject({ page: 1, pageSize: 9999, status: 5 }).then((res) => {
        if (res.status != 200) return;
        _this.projectList = res.data.dataList;
      });
    },
    //初始化产品列表
    initGoodsList() {
      let _this = this;
      searchProduct({ page: 1, pageSize: 9999, status: 5 }).then((res) => {
        if (res.status != 200) return;
        _this.productList = res.data.dataList;
      });
    },
    //加载文档分类
    initArticleCategoryList() {
      let _this = this;
      searchDocumentCategory({ page: 1, pageSize: 99, status: 5 }).then(
        (res) => {
          if (res.status != 200) return;
          _this.articleCategoryList = res.data.dataList;
        }
      );
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
