<template>
  <div class="height_100 custom-analyse">
    <el-container>
      <el-aside width="350px">
        <TabItem :active-item="activeItem" :treeList="treeList" @edit="handleEdit" @delete="handleDelete" @select="handleSelect" @handleAdd3="handleAdd3"></TabItem>
      </el-aside>
      <el-main>
        <el-header>
          <template>
            <div class="custom-analyse-options">
                <div>
                    <el-button type="text" size="small" @click="openDrawer(1)">分析栏位</el-button>
                    <el-button type="text" size="small" @click="openDrawer(2)">图形配置</el-button>
                </div>
                <div>
                    <span class="text">专利数量<span class="number">{{ patentNum }} 件</span></span>
                    
                    <el-dropdown size="small">
                        <el-button size="small" type="text">
                        更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="handleScreenshot">截图</el-dropdown-item>
                        <el-dropdown-item @click.native="handleAdd1(0)">保存修改</el-dropdown-item>
                        <el-dropdown-item @click.native="handleAdd1(1)">另存为</el-dropdown-item>
                        <el-dropdown-item @click.native="handleExport">导出数据</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
          </template>
        </el-header>
        <el-main class="custom-analyse-chart-img-box">
          <div v-if="showChart">
            <chart ref="chartDom" :width="form.setting.width + form.setting.widthUnit" :height="form.setting.height + form.setting.heightUnit" />
          </div>
        </el-main>
      </el-main>
    </el-container>
    <addAnalyseGroup ref="addAnalyseGroup" :projectId="projectId" @save="queryAnalyseGroup"></addAnalyseGroup>
    <el-drawer
        :title="title"
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleClose"
        size="500px">
        <div style="width:500px">
            <component :is='components'></component> 
        </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import html2canvas from "html2canvas";
import { downLoad, findChildren, getTreeLastChildren, getTreeDataList, downLoadBase64 } from "@/utils";
import { customPage } from "./mixins";

import addAnalyseGroup from './components/dialog/addAnalyseGroup.vue'
import Chart from "./components/Charts/index.vue";
import TabItem from "./components/Tabs/Item";
import TabData from "./components/Tabs/Data";
import TabStyle from "./components/Tabs/Style";
export default {
  components: {
    addAnalyseGroup,
    Chart,
    TabItem,
    TabData,
    TabStyle
  },
  mixins: [customPage],
  props: {},
  data() {
    return {
        activeItem:[],
        // treeList:[],
        showChart:false,
        title:'',
        drawer:false,
        components:'',
        saveType: 1,
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['userinfo']),
    search(){
        var a = this.$route.query.search
        if(a){
            a = JSON.parse(a)
        }
        return a
    },
    projectId(){
        return this.$route.query.projectId
    },
    patentNum(){
        return this.$route.query.patentNum || 0
    },
  },
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    //初始化
    async init(){
        await this.queryAnalyseGroup()
        if(this.treeList && this.treeList.length>0 && this.treeList[0].children.length > 0){
            this.activeItem=[this.treeList[0].id]
            this.queryAnalyseDetail = (this.treeList[0].children[0].id)
        }else{
            this.handleAdd()
            this.saveType = 1
        }
    },
    //添加空数据
    handleAdd() {
      let table = []
      for (let i = 0; i < 10; i++) {
        table.push({
          min: 0,
          max: 0,
          color: null
        })
      }
      let form = {
        setting: {
          type: 1,
          showType: 0,
          tableType: 0,
          theme: "customed",
          titleSize: 14,
          dataSize: 14,
          axisSize: 14,
          dataLabel: false,
          dataLabel2: false,
          dataLabel3: false,
          title1Dir: 0,
          title1: "",
          title2: "",
          dataPosition: "top",
          fontFamily: "sans-serif",
          fontFamily2: "sans-serif",
          fontFamily3: "sans-serif",
          fontFamily4: "sans-serif",
          fontWeight: false,
          fontWeight2: false,
          nameLocation: "end",
          nameLocation2: "end",
          width: "100",
          height: "650",
          widthUnit: "%",
          heightUnit: "px",
          splitLine: false,
          splitLine2: false,
          legend: true,
          gridTop: "0",
          gridLeft: "0",
          gridBottom: "0",
          gridRight: "0",
          labelColor: "#000000",
          legendColor: "#000000",
          legendLocation: "top",
          legendFontSize: "13",
          fontSize: "13",
          fontSize2: "13",
          fontColor: "#000000",
          fontColor2: "#000000",
          show: true,
          show2: true,
          interval: true,
          interval2: true,
          rotate: "0",
          rotate2: "0",
          paddingTop: 0,
          paddingBottom: 0,
          paddingRight: 0,
          paddingLeft: 0,
          paddingTop2: 0,
          paddingLeft2: 0,
          paddingBottom2: 0,
          paddingRight2: 0,
          type2: "scroll",
          barWidth: "",
          scatterSize: "0",
          config: {
            color: [],
            line: {
              name: "",
              first: "",
              second: "",
              operator: 0,
              enable: false
            },
            table: table
          }
        },
        schema: {
          x: {
            num: 10
          },
          y: {
            num: 10
          },
        },
        source: {
          x: [],
          y: []
        },
      }
    //   this.form = form
      this.$store.commit('SET_CHART_FORM', form)
    },
    //查询分析项详情
    queryAnalyseDetail(id){
        var params = {
            id : id
        }
        this.$api.queryAnalyseDetail().then(response=>{
            if(response.code == 200){

            }
        })
    },
    //查询分析组
    queryAnalyseGroup(){
        var params = {
            projectId:this.projectId,
        }
        this.$api.queryAnalyseGroup(params).then(response=>{
            if(response.code == 200){
                // this.treeList = response.data
                this.$store.commit('SET_CHART_TREE', response.data)
            }
        }).catch(error=>{
            this.$store.commit('SET_CHART_TREE', [])
        })
    },
    //添加组
    handleAdd3(){
        var form = {
            type:1,
            permissions: 2,
            parentId: 0,
            sort: this.treeList.length + 1,
            name: '',
        }
        var title = '添加组'
        this.$refs.addAnalyseGroup.open(title,form)
    },
    //编辑组
    handleEdit(value,type) {
      var title = '编辑组'
      var form = { ...value }
      form.type = type
      this.$refs.addAnalyseGroup.open(title,form)
    },
    //删除组
    handleDelete(value,type) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        var params = {
            id:value
        }
        this.$api.delAnalyseGroup(params).then(response=>{
            if(response.code == 200){
                this.$message.success('删除成功'),
                this.queryAnalyseGroup()
            }
        }).catch(error=>{
            this.$message.error('删除失败')
        })
      })
    },
    //查看图示
    handleSelect() {
      
    },
    //0是保存，1是另存为
    handleAdd1(type){

    },
    //截图
    async handleScreenshot() {
      const canvas = await html2canvas(this.$refs.chartDom.$el)
      const base64 = canvas.toDataURL('image/jpg')
      downLoadBase64(base64, '图片.png')
    },
    //导出数据
    async handleExport() {
    //   const { count, type, xAxis } = this.getExportParams()
    //   this.$api.exportCustomItem(count, type, xAxis).then(response => {
    //     downLoad(response, moment().format('YYYYMMDDHHmmss') + '.xls')
    //   }).catch(error => {
    //   })
    },
    //打开抽屉
    openDrawer(type){
        var components = {
            1:'tabData',
            2:'tabStyle'
        }
        this.title = type == 1?'数据':'样式配置'
        this.components = components[type]
        this.drawer = true
    },
    //关闭抽屉
    handleClose(){
        this.drawer = false
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-analyse {
  .custom-analyse-chart-img-box {
    background: #ffffff;
  }
  .custom-analyse-chart-title {
    padding: 20px;
    span {
      font-weight: bold;
      font-size: 16px;
    }
  }
  .custom-analyse-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    .number {
      padding-left: 10px;
      color: #409EFF;
    }
    .text {
      font-size: 13px;
      padding-right: 20px;
    }
  }
}
</style>