import list from '@/mixins/list'
import routerUserMenu from '@/mixins/router-user-menu'
import breadcrumbComponent from '@/components/breadcrumb.vue'
import tableComponent from '@/components/table.vue'
import picUploaderComponent from '@/components/picuploader.vue'
// import {copyObjByJson,randomStr} from '@/utils/tools'
import QRCode from "qrcode"

/**
 * 列表页管理
 *
 *  version = "1.0.0";
 *  author = "徐飞";
 *  email = "xu.fei@data-u.com";
 * */
export default {
  name: 'chart',
  components: { breadcrumbComponent, tableComponent, picUploaderComponent, QRCode },
  mixins: [list,routerUserMenu],
  data () {
    return {
      // 下拉项
      reportIfFinishOptions: [],
      chartTypeOptions: [],
      chartsType: '',
      videoUrl: '',
      imgSrc: '',
      richText: '',
      showDialog: false,
      baiduPoints: [],
      chartJson:{},
      // 搜索表单信息
      searchForm: {
        chartType: '',
        chartName: '',
        pageSize: 10,
        page: 1,
      },

      // 列表数据
      tableData: {
        data: [],
        total: 0
      },
      // 预览列表数据
      viewTableData: {
        data: [],
        total: 0
      },
      // 列表设置
      tableOption: {
        // 是否显示序号
        index: true,
        // 是否显示勾选框
        select: false,
        // 默认排序
        defaultSort: { prop: 'updateTime' ,order: 'descending' },
        // 列
        tableLabel: [
          {prop: 'chartName', title: '图表名称', sort: false},
          {prop: 'chartTypeValue', title: '图表类型', sort: true},
          {prop: 'chartClassName', title: '图表分类', sort: true},
          {prop: 'dml', title: 'DML'},
          {prop: 'updateTime', title: '修改时间', sort: true},
        ],
        // 操作
        tableOperate: {
          width: '245',
          buttons: [
            {label: '预览', methods: 'view'},
            {label: '修改', methods: 'edit',color: 'safe'},
            {label: '查看', methods: 'showEdit',color: 'link'},
            {label: '元素编辑', methods: 'editDom',color: 'safe', show: {chartType: 2}},
            {label: '元素编辑', methods: 'editDom',color: 'safe', show: {chartType: 3}},
            {label: '元素编辑', methods: 'editDom',color: 'safe', show: {chartType: 8}},
            {label: '删除', methods: 'del',color: 'warn'},
          ]
        },
      },
      // 预览table展示
      viewTableOption: {
        // 是否显示序号
        index: true,
        // 是否显示勾选框
        select: false,
        // 默认排序
        defaultSort: { prop: 'updateTime', order: 'descending' },
        // 列
        tableLabel: [],
        tableOperate: false,
        pageParam: false,
        height: 400
      }
    }
  },
  created () {
  },
  mounted () {
    // 获取客户列表
    this.init()
  },
  methods: {
    init () {
      /* 图表类型 */
      this.$api.chart.chartType().then( res => {
        if (res.code === '1') {
          this.chartTypeOptions = res.data
        }
      })
    },
    /* 元素编辑 */
    editDom (obj) {
      this.go('ChartSet', {id: obj.id})
    },
    /* 查看详情 */
    detail (obj) {},
    // 获取列表页列表
    getList () {
      let params = this.searchForm
      this.$api.chart.list(params)
        .then(res => {
          if (res.code == 1) {
            this.tableData.data = res.data
            this.tableData.total = res.totalNumber
          }
        })
    },

    // 执行删除
    delAction (obj) {
      let params = {id: obj.id}
      this.$api.chart.delChartInfo(params)
        .then(res => {
          if (res.code == 1) {
            this.$message.success(res.msg)
            this.getList()
          }
        })
    },
    // 删除
    del (obj) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delAction(obj)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 修改
    edit (obj) {
      this.go('ChartEdit', {id: obj.id})
    },
    /* 查看 */
    showEdit (obj) {
      this.go('ChartView', {id: obj.id, readonly: true})
    },
    // 预览
    view (obj) {
      this.showDialog = true
      let params = {id: obj.id}
      this.$api.chart.chartView(params)
        .then(res => {
          if (res.code == 1) {
            this.chartsType = res.data.chartType
            if (res.data.chartType == 3 || res.data.chartType == 2 || res.data.chartType == 8) { // 2: 柱折图"}3: "饼图"}8：条形图
              this.chartJson  = res.data.chartJson
              // this.showCharts(chartJson)
            } else if (res.data.chartType == 1) { // 1: "数据表格"
              let header = res.data.header
              for (let i = 0, len = header.length; i < len; i++ ) {
                this.viewTableOption.tableLabel.push({prop: header[i], title: header[i], sort: false})
              }
              this.viewTableData.data = res.data.data
            } else if (res.data.chartType == 4) { // 4:"富文本"
              this.richText = res.data.richText
            } else if (res.data.chartType == 5) { // 5:"图片"}
              this.imgSrc = res.data.filePath
            } else if (res.data.chartType == 6) { // 6:"视频"}
              this.videoUrl = res.data.filePath
            } else if (res.data.chartType == 7) { // 7:"百度地图"}
              this.baiduPoints = res.data.data
            }
          }
        })
    },
    // dialog 打开时
    openedDlg () {
      let obj = document.getElementsByTagName("embed")
      if (obj.length > 0) {
        obj = obj[0]
        let src = obj.getAttribute("src")
        let width = obj.getAttribute("width")
        let height = obj.getAttribute("height")
        let parentNode = obj.parentNode
        let video = document.createElement('video')
        video.setAttribute("width", width)
        video.setAttribute("height", height)
        video.setAttribute("controls", "controls")
        video.setAttribute("autoplay", "autoplay")
        video.setAttribute("src", src)
        parentNode.insertBefore(video, obj)
        parentNode.removeChild(obj)
        // '<video width = "' + width + '" height ="' + height + '" controls  autoplay="autoplay"><source src="' + src + '" type="video/mp4" > </video>'
      } else if (this.chartsType == 7) {
        let map = new BMap.Map("baiduMapDiv")         // 创建地图实例
        let point = new BMap.Point(104.067923463,30.6799428454)
        // let point = new BMap.Point(116.418261, 39.921984)
        map.centerAndZoom(point, 15)             // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom()// 允许滚轮缩放

        let heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20})
      	map.addOverlay(heatmapOverlay)
        heatmapOverlay.setDataSet({data:this.baiduPoints,max:100})
        heatmapOverlay.show()
      } else if (this.chartsType == 3 || this.chartsType == 2 || this.chartsType == 8) { // 2: 柱折图"}3: "饼图"}8：条形图
        this.showCharts(this.chartJson)
      }
      // console.log(obj)
    },
    // 图表展示
    showCharts (optionData) {
      let myChart = this.$echarts.init(document.getElementById("previewCharts"))
      // 绘制图表
      optionData = optionData ? JSON.parse(optionData) : {}
      myChart.setOption(optionData)
    },
    // 关闭对话框
    closeDialog () {
      this.showDialog = false
      let previewVedio = document.getElementById("previewVedio")
      if (previewVedio) {
        previewVedio.pause()
      }
    }
  }
}
