<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/acupointManagement' }"
        >穴位管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top:20px; width: 600px">
      <el-form ref="form" :model="form" label-width="80px" :rules="formRule">
        <el-form-item label="穴位名称" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入穴位名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="穴位别名" prop="alias">
          <el-input
            v-model="form.alias"
            placeholder="请输入穴位别名"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分类" prop="pointCategoryId">
            <el-cascader
              :options="treeList"
              :props="cateProps"
              :emitPath= "false"
              
              @change="handleChange1"
            >
            </el-cascader>
          </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" type="number"></el-input>
        </el-form-item>
        <el-form-item label="封面图">
          <el-upload
            :limit="3"
            class="el-uploadfeng noneBtnImg"
            :action="baseUrl + '/oss/fileoss'"
            list-type="picture-card"
            multiple
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="handleSuccess"
            accept=".jpeg,.jpg,.gif,.png"
            :on-remove="handleRemoveNovel"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="所属经络" prop="meridian">
          <el-input
            type="textarea"
            v-model="form.meridian"
            placeholder="请输入所属经络"
          ></el-input>
        </el-form-item>
        <el-form-item label="解剖" prop="anatomy">
          <el-input
            type="textarea"
            v-model="form.anatomy"
            placeholder="请输入解剖"
          ></el-input>
        </el-form-item>
        <el-form-item label="定位" prop="position">
          <el-input
            type="textarea"
            v-model="form.position"
            placeholder="请输入定位"
          ></el-input>
        </el-form-item>
        <el-form-item label="主治" prop="indication">
          <el-input
            type="textarea"
            v-model="form.indication"
            placeholder="请输入主治"
          ></el-input>
        </el-form-item>
        <el-form-item label="配伍" prop="compatibility">
          <el-input
            type="textarea"
            v-model="form.compatibility"
            placeholder="请输入配伍"
          ></el-input>
        </el-form-item>
        <el-form-item label="文献" prop="literature">
          <el-input
            type="textarea"
            v-model="form.literature"
            placeholder="请输入文献"
          ></el-input>
        </el-form-item>
        <div style="text-align:center">
          <el-button type="primary" @click="submit">保 存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
// const bc = new BroadcastChannel("myChannel");
import global from "../../common/common.vue"; //引入共用组间
export default {
  data() {
    return {
      baseUrl: global.baseUrl,
      pageTitle: this.$route.query.title,
      form: {
        id: this.$route.query.cid, // 穴位内容id
        title: "",
        pointCategoryId: this.$route.query.pid, // 父级的分类id
        alias: "", //别名
        meridian: "", //所属经络
        position: "", //定位
        anatomy: "", //解剖
        indication: "", //主治
        compatibility: "", //配伍
        literature: "", //文献
        sort: 0,
        imageList: []
      },
      treeList:[],
      cateProps: {
        value: "id",
        label: "title"
      },
      fileList: [],
      formRule: {
        title: [{ required: true, message: "穴位名称不能为空" }],
        // alias: [{ required: true, message: "穴位别名不能为空" }],
        meridian: [{ required: true, message: "所属经络不能为空" }],
        // anatomy: [{ required: true, message: "解剖不能为空" }],
        position: [{ required: true, message: "定位不能为空" }],
        indication: [{ required: true, message: "主治不能为空" }],
        // compatibility: [{ required: true, message: "配伍不能为空" }],
        // literature: [{ required: true, message: "文献不能为空" }]
      }
    };
  },
  created() {
    this.getCatTreeList()
    this.getDetail();
    
  },  
  methods: {
    handleChange1(e){
      // console.log(e,'e')
    },
    getCatTreeList() {
      this.loading = true;
      this.$http({    
        url: this.$http.adornUrl("/book/point/getPointCategoryList"),
        method: "post"       
      })
        .then(({ data }) => {
          // console.log(data, "树形结构");
          if (data.code == 0 && data.categorys.length > 0) {
            this.treeList = data.categorys;            
            // console.log("执行后的结果", this.cateList);
            //
          } else {
            this.treeList = [];           
          }          
        })
        .catch(({ e }) => {         
          console.log(e, "e");
        });
    },
    // 获取穴位详情
    getDetail() {
      if (this.form.id) {
        // 编辑
        this.$http({
          url: this.$http.adornUrl("/book/point/getPointDetail"),
          method: "post",
          data: this.$http.adornData({
            pointId: this.form.id
          })
        })
          .then(({ data }) => {
            if (data.code == 0) {
              // console.log("内容详情", data);
              this.form.alias = data.point.alias;
              this.form.anatomy = data.point.anatomy;
              this.form.compatibility = data.point.compatibility;
              this.form.imageList = data.point.imageList;
              this.form.indication = data.point.indication;
              this.form.literature = data.point.literature;
              this.form.meridian = data.point.meridian;
              this.form.pointCategoryId = data.point.pointCategoryId;
              this.form.position = data.point.position;
              this.form.sort = data.point.sort;
              this.form.title = data.point.title;
              if (data.point.imageList.length > 0) {
                data.point.imageList.forEach((element, index) => {
                  this.fileList.push({
                    name: index,
                    url: element
                  });
                });
                // console.log("图片列表格式", this.fileList);
              }
            } else {
            }
          })
          .catch(({ e }) => {
            // console.log(e, "e");
          });
      } else {
        
      }
    },
    handleRemoveNovel(file) {
      // console.log(file, this.fileList);
      if (this.form.imageList.length > 0) {
        this.form.imageList.forEach((element, index) => {
          {
            if (element == file.url) {
              this.form.imageList.splice(index, 1);
            }
          }
        });
        // console.log("删除后", this.form.imageList);
      }
      //   this.dataForm.images = [];
    },
    handleSuccess(file, fileList) {
      // console.log(file, fileList);
      //   this.fileList.push();
      this.form.imageList.push(file.url);
      //   console.log(this.fileList, 66);
      // this.dataForm.novel = file.url
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件`);
    },
    // 提交保存
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let url = "";
          this.form.id
            ? (url = "/book/point/editPoint")
            : (url = "/book/point/addPoint");
          // console.log()
          this.$http({
            url: this.$http.adornUrl(url),
            method: "post",
            data: this.$http.adornData({
              id: this.form.id,
              title: this.form.title,
              pointCategoryId: this.form.pointCategoryId,
              alias: this.form.alias, //别名
              meridian: this.form.meridian, //所属经络
              position: this.form.position, //定位
              anatomy: this.form.anatomy, //解剖
              indication: this.form.indication, //主治
              compatibility: this.form.compatibility, //配伍
              literature: this.form.literature, //文献
              sort: this.form.sort,
              imageList: this.form.imageList
            })
          })
            .then(({ data }) => {
              if (data.code == 0) {
                this.$message.success("操作成功");
                // bc.postMessage("updateList");               
                  this.$nextTick(() => {
                    this.$refs["form"].resetFields();
                  });
                  this.fileList = [];                
                // this.getCatTreeList();
              }
            })
            .catch(({ e }) => {
              console.log(e, "e");
            });
        }
      });
    }
  }
};
</script>

<style lang="less" scope>
.el-uploadfeng li,
.el-uploadfeng .el-upload {
  width: 80px !important;
  height: 80px !important;
}
.el-uploadfeng .el-icon-plus {
  line-height: 80px;
}
.el-uploadfeng .el-upload--picture-card{line-height: 80px;}
.flexbox {
  display: flex;
}
</style>
