import routerUserMenu from '@/mixins/router-user-menu'
import breadcrumbComponent from '@/components/breadcrumb.vue'
import multipleSelectTree from '@/components/multiple-select-tree.vue'
// import {toTree} from '@/utils/util'
import simpleSelectTree from '@/components/simple-select-tree.vue'
// import {echartsThemes} from '../../echarts-color-themes'
// import {pieOptionData, lineAndBarOptionData} from '../../../Report/ReportManagement/echarts-demo'
// 引入 vue-kikindeditor 需要的文件
// import 'kindeditor/kindeditor-all-min.js'
// import 'kindeditor/themes/default/default.css'
/**
 * KPI创建
 *
 *  version = "1.0.0";
 *  author = "liucui";
 *  email = "liu.cui@data-u.com";
 * */
export default {
  name: 'chartAdd',
  components: {
    breadcrumbComponent, multipleSelectTree, simpleSelectTree
  },
  mixins: [routerUserMenu],
  data () {
    return {
      // 关联字段互斥ID
      mutexTableId: '',
      // 预览
      visible: false,
      previewData: '',
      // 组件id（修改和查看）
      id: false,
      // 新建对象
      formInfo: {
        // 唯一标识
        id: '',
        // 图表名称
        chartName: '',
        // 图表json
        chartJson: '',
        // 图表分类
        chartClassCode: '',
        // 图表类型
        chartType: '',
        // 数据库id
        databaseId: '',
        // dml
        dml: '',
        // 文件路径，图表类型为：图片、视频
        filePath: '',
        // 富文本文档，图表类型为：富文本
        richText: '',
        // 数据表id
        tableId: '',
        columnId: ''
      },
      // 页面打开类型，false可编辑 true不可编辑
      readStatus: false,
      // 0新建 2修改
      dialogState: 0
    }
  },
  computed: {
    // 组件设置是否只读
    readonly: {
      // getter
      get: function () {
        return this.readStatus
      },
      // setter
      set: function (newValue) {}
    }
  },
  mounted () {
    // 初始化
    this.init()
  },
  methods: {
    init () {
      // 获取url参数
      let params = this.$route.params
      if (params.hasOwnProperty('readonly')) {
        this.readStatus = true
      }
      if (params.hasOwnProperty('id')) {
        // 如果有id，则加载组件对象
        this.id = params.id
        this.formInfo.id = params.id
        // 如果有id，则获取id对应的部门信息赋值给formInfo
        this.getDetail()
      }
      // 根据页面参数设置当前页面类型
    },
    // 获取组件对象
    getDetail () {
      let params = { id: this.id }
      this.$api.chart.getChartById(params)
        .then(res => {
          if (res.code == 1) {
            if (res.data) {
              let data = res.data
              data.chartJson = JSON.stringify(JSON.parse(data.chartJson), undefined, 4)
              this.formInfo = data
              this.showChartDom(res.data.chartJson)
            }
          }
        })
    },
    /**
     * 设置chart 展示
     */
    showChartDom (optionData) {
      let myChart = this.$echarts.init(document.getElementById("prviewCharts"))
      // 绘制图表
      optionData = optionData ? JSON.parse(optionData) : {}
      myChart.setOption(optionData)
    },
    /**
     * 参数改变变化
     * @param {} obj
     */
    changeChartCode (obj) {
      this.showChartDom(obj.chartJson)
    },
    /* 更新操作 */
    update () {
      let _this = this
      // 判断组件设置是否通过验证
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          // 提交后台并在成功后回到上一页
          let params = _this.formInfo
          params.chartJson = params.chartJson ? JSON.parse(params.chartJson) : {}
          params.chartJson = JSON.stringify(params.chartJson)
          _this.$api.chart.updateChartJson(params)
            .then(res => {
              if (res.code == 1) {
                _this.$message.success(res.msg)
                _this.goBack()
              }
            })
        } else {
          return false
        }
      })
    },
    /* 返回 */
    goBack () {
      this.go("ChartManage") // 返回上一层
    }
  }
}
