<template>
    <div class="app-container" v-loading="mydata.loading">
      <el-row :gutter="10">
        <el-col :span="4" class="tree">
          <div class="columnBox">
             <div class="is_node">栏目列表</div>
          </div>
          <el-tree class="filter-tree" highlight-current :data="mydata.treeData" :props="mydata.defaultProps" node-key="tremId" ref="myTree" @node-click="nodeClick"> </el-tree>
        </el-col>
        <el-col :span="20" class="table">
          <FilterList v-if="mydata.tableData" :pagination="mydata.pagination" :options="mydata.options" :operation="mydata.operation" :filed="mydata.listFileds" :tableData="mydata.tableData" :total="mydata.total" @itemadd="itemadd" @query="query" @edit="listEdit" @delete="listDel" @add="add"></FilterList>
        </el-col>
      </el-row>
      <el-dialog :title="mydata.dialogInfo.title" :visible.sync="mydata.dialogInfo.dialogVisible" :width="mydata.dialogInfo.width">
        <dynamicForm ref="dynamicForm" v-if="mydata.formFiled && mydata.dialogInfo.dialogVisible" :filed="mydata.formFiled" :data="mydata.formData" @save="formSave"></dynamicForm>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { cmsAdd, cmsUpdate, cmsDel, cmsQuery, cmsFetch } from "@/api/cms/index";
  export default {
    name: "Info",
    dicts: ['term_type'],
    data() {
      return {
        mydata: {
          pagination: true,
          tableData: [],
          total: 0,
          listFileds: [],
          dialogInfo: {
            title: "",
            dialogVisible: false,
            width: "50%",
          },
          formFiled: [],
          formData: {},
          type: '',
          classify: '',
          loading: false,
          operation: [],
          options: {},
          // 树
          treeData: [],
          defaultProps: {
            children: 'children',
            label: 'name'
          },
          alias: '',
          termId: ''
        }
      };
    },
    async created() {
      this.mydata.type = this.$route.query.type;
      this.mydata.classify = this.$route.query.classify;
      const models = require(`./${this.$route.query.classify}config/${this.mydata.type}.js`);
      this.$data.mydata = { ...this.$data.mydata, ...models.default }
      await this.getCatalog();
      if (this.mydata.alias) await this.query();
    },
    methods: {
      setType() {
        this.mydata.formData.type = this.mydata.type;
        this.mydata.formFiled = this.mydata.formFiled.map(e => ({ ...e, disabled: e.name == 'type' }))
      },
      async getCatalog() {
        this.mydata.loading = true;
        const res = await cmsQuery({ paging: false }, 'wxAppMenu');
        if (res.code == 200) {
          this.$set(this.mydata, 'treeData', this.handleTree(res.rows, 'termId'))
          if (this.mydata.treeData[0]) {
            this.mydata.alias = this.mydata.treeData[0].alias;
            this.mydata.termId = this.mydata.treeData[0].termId;
          }
        }
        this.mydata.loading = false;
      },
      // 列表查询
      async query(e) {
        this.mydata.loading = true;
        const res = await cmsQuery({ pageNum: 1, pageSize: 10, paging: this.mydata.pagination, ...e }, this.mydata.type, this.mydata.alias);
        if (res.code == 200) {
          this.$set(this.mydata, 'tableData', res.rows)
          this.$set(this.mydata, 'total', res.total)
        }
        this.mydata.loading = false;
      },
      // 列表添加
      async itemadd(e) {
        this.mydata.formData = {};
        this.mydata.formData.parentId = e[`${this.mydata.classify}Id`];
        const dict = this.dict.type.term_type.find(j => j.value == this.mydata.type);
        this.mydata.dialogInfo.title = `添加${dict.label}`;
        this.mydata.dialogInfo.dialogVisible = true;
      },
      // 列表修改
      async listEdit(e) {
        this.mydata.loading = true;
        this.setType();
        const res = await cmsFetch('_' + e[`${this.mydata.classify}Id`], this.mydata.type);
        if (res.code == 200) {
          this.mydata.formData = res.data;
          const dict = this.dict.type.term_type.find(j => j.value == this.mydata.type);
          this.mydata.dialogInfo.title = `修改${dict.label}`;
          this.mydata.dialogInfo.dialogVisible = true;
        }
        this.mydata.loading = false;
      },
      // 列表删除
      async listDel(e) {
        this.mydata.loading = true;
        const id = e[`${this.mydata.classify}Id`]
        const res = await cmsDel(this.mydata.type, id);
        if (res.code == 200) {
          this.$modal.msgSuccess('删除成功');
          this.query();
        }
        this.mydata.loading = false;
      },
      // 添加
      add() {
        this.mydata.formData = {
          type: this.mydata.type
        };
        this.setType();
        const dict = this.dict.type.term_type.find(j => j.value == this.mydata.type);
        this.mydata.dialogInfo.title = `添加${dict.label}`;
        this.mydata.dialogInfo.dialogVisible = true;
      },
      // 表单保存
      async formSave(e) {
        this.mydata.loading = true;
        let res;
        // 修改
        if(e[`${this.mydata.classify}Id`]) res = await cmsUpdate(e, this.mydata.type);
          // 新增
        if(!e[`${this.mydata.classify}Id`]) res = await cmsAdd({ ...e, contentType: this.mydata.type, catalogIds: [this.mydata.termId]  }, this.mydata.type);
        if (res.code == 200) {
          this.$modal.msgSuccess(`${e[`${this.mydata.classify}Id`] ? '修改' : '新增'}成功`);
          this.mydata.dialogInfo.dialogVisible = false;
          this.query();
        }
        this.mydata.loading = false;
      },
      // 节点点击
      async nodeClick(e) {
        this.mydata.alias = e.alias;
        this.mydata.termId = e.termId;
        this.query();
      }
    },
  };
  </script>