<template>
  <el-dialog title="移动到" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="moveDialog">
    <div>
      <el-cascader v-model="value" :options="treeData" :props="defaultProps" size="small" style="width: 100%"></el-cascader>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateDraftsGraph, updatePubGraph } from "@/api/home"
import { mapState } from "vuex";
export default {
  props: {
    isPub: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'categoryList',
        label: 'name',
        value: 'code'
      },
      dialogVisible: false,
      value: [],
      treeData: [],
      data: []
    };
  },
  computed: {
    ...mapState(["categoryGraph"]),
  },
  mounted() {
    this.init()
  },
  watch: {
    categoryGraph: {
      handler: function(v) {
        this.treeData = v;
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      // queryCategoryGraph({ switch: true }).then(res => {
      //   this.treeData = res.content;
      // })
    },
    showDialog(data) {
      this.dialogVisible = true;
      this.data = data;
    },
    // 确认修改
    confirm() {
      if (!this.value.length || !this.data.length) {
        return
      }
      const categoryId = this.value[this.value.length - 1]
      const pa = {
        content: [],
        projection: ['categoryId']
      }
      pa.content = this.data.map(t => {
        return {
          id: t.id,
          graphId: t.graphId,
          categoryId: categoryId
        }
      })
      if (this.isPub) { // 已发布
        updatePubGraph(pa).then(res => {
          this.updateCall(res)
        })
      } else { // 未发布
        updateDraftsGraph(pa).then(res => {
          this.updateCall(res)
        })
      }
    },
    // 更新成功回调
    updateCall(res) {
      this.value = [];
      if (res.result == "success") {
        this.dialogVisible = false;
        this.$message.success('移动成功');
        this.$emit("moveSuc")
      } else {
        this.$message(res.message)
      }
    }
  }
};
</script>
<style lang="less">
.moveDialog {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #f0f1f2ff;
  }
  /deep/ .el-dialog__body {
    padding: 16px 60px;
  }
  .el-dialog__footer {
    padding: 14px 20px 20px;
    .el-button {
      padding: 0;
      width: 80px;
      height: 32px;
      text-align: center;
      line-height: 1;
    }
  }
}
</style>