<template>
  <div class="box">
    <el-card class="tree-box" shadow="always" :body-style="{ padding: '5px' }" ref="cardTree">
      <div slot="header" class="clearfix">
        <span v-show="!status">选择档案门类</span>
        <el-button style="float: right; padding:  0" type="text" @click='btns'>
          <el-tooltip class="item" effect="dark" v-if="!status" content="折叠" placement="right">
            <svg-icon icon-class="leftzd" v-if="!status" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" v-if="status" content="展开" placement="left">
            <svg-icon icon-class="rightzd" v-if="status" />
          </el-tooltip>
        </el-button>
      </div>
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 170px)">
          <el-tree v-loading='loading' highlight-current :data="treeData" :props="defaultProps" default-expand-all
            @node-click="handleNodeClick">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <!--可以根据情况，以数据类型来显示不同的图标或图片-->
              <svg-icon icon-class="wjj" style="margin-right: 5px; color: rgb(255, 207, 92)"
                v-if="data.childClass.length" class="iconfont icon-folder-open-fill" />
              <svg-icon icon-class="wj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-else
                class="iconfont icon-wenjian" />
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </el-scrollbar>

    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref='cardForm' :body-style="{ padding: '10px' }">
      <!--<div slot="header" class="rightCard">
        <div class="titles">全宗号统计</div>
        <div>
          <el-radio-group v-model="search.type" style="padding-right:20px" @change="searchClicks(1)">
            <el-radio size="mini" label="0">未入库</el-radio>
            <el-radio size="mini" label="1">已入库</el-radio>
          </el-radio-group>
          <el-button type="primary" size="mini" :disabled=" JSON.stringify(treerow.childClass)!='[]' "
            @click="searchClick">查询</el-button>
          <el-button type="success" size="mini" :disabled=" JSON.stringify(tableData)==='[]' " @click="exportExcl">导出
          </el-button>
        </div>
      </div>
      -->
      <div slot="header" class="rightCard">
        <!-- <div class="titles">全宗号统计</div> -->
        <el-form inline size="mini" :model="search">
        <el-row>
          <el-col :span="7">
            <el-form-item label="题名:">
              <el-input size="mini" v-model="search.maintitle" placeholder="请输入题名" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
              <el-form-item label="文件形成时间:">
                <el-date-picker style="width:220px" size="mini" v-model="search.time" type="daterange" unlink-panels range-separator="至"
                  start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item>
                <el-radio-group size="mini" v-model="search.type"  @change="searchClicks(1)">
                  <el-radio  label="0">未入库</el-radio>
                  <el-radio  label="1">已入库</el-radio>
                </el-radio-group>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row> 
          <el-col :span="6" :offset="18">
            <el-button type="primary" size="mini" :disabled=" JSON.stringify(treerow.childClass)!='[]' "
              @click="searchClicks(1)">查询</el-button>
            <el-button type="success" size="mini" :disabled=" JSON.stringify(treerow.childClass)!='[]' " @click="exportExcl">导出
            </el-button>
          </el-col>
        </el-row>
        </el-form>
      </div>

      <el-table border size="mini" max-height="200px" :data="tableData">
        <el-table-column align="center" prop="fonds_no" label="全宗号">
          <template slot-scope="scope">
            {{ (fondsList.filter(f => f.fondscode === scope.row.fonds_no)[0] || {}).codeName }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="num" label="统计个数"></el-table-column>
      </el-table>
      <div style="padding:15px 0">
        <el-radio-group v-model="radio" style="padding-right:20px" @change="changeRadio">
          <el-radio size="mini" label="1">柱状图</el-radio>
          <el-radio size="mini" label="2">折线图</el-radio>
          <el-radio size="mini" label="3">饼状图</el-radio>
        </el-radio-group>
      </div>

      <div v-if="radio==='1'">
        <div id="columnar" ref="columnar" key="1" style="width: 100%; height: 400px;"></div>
      </div>
      <div v-if="radio==='2'">
        <div id="broken" ref="broken" key="2" style="width: 100%; height: 400px;"></div>
      </div>
      <div v-if="radio==='3'">
        <div id="cake" ref="cake" key="3" style="width: 100%; height: 400px;"></div>
      </div>
    </el-card>
    <el-dialog v-dialogDrag ref="diaFrom" title="查询条件" :close-on-click-modal="false" :visible.sync="diaStatus"
      width="40%" top="10px" :before-close="cancel">
      <el-form label-width="120px">
        <el-form-item label="题名：">
          <el-input style="width:100%" size="mini" v-model="search.maintitle" placeholder="请输入题名" clearable></el-input>
        </el-form-item>
        <el-form-item label="文件形成时间：">
          <el-date-picker style="width:100%" size="mini" v-model="search.time" type="daterange" range-separator="至"
            start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="searchClicks(1)" type="primary" size="mini">查询</el-button>
          <el-button @click="searchClicks(2)" type="info" size="mini">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import {
    selectTree
  } from "@/api/archives-management/fileManagement/notRecycleBin.js";
  import {
    fondsNoApi,
    downloadExcel
  } from "@/api/archives-management/collection/quanzong.js"
  import {
    getFondWithPage
  } from "@/api/system-management/allAdministration";
  import {
    URL_PREFIX
  } from "@/utils/url-prefix";
  import {
    clearObjValue,
    message,
    downlaodxls,
    getCurrentTimes,
    dragControllerDiv
  } from '@/utils/common';
  const animationDuration = 4000
  export default {
    data() {
      return {
        search: {
          type: "1",
          maintitle: "",
          time: ''
        },
        radio: "1",
        pieList: [],
        treeData: [],
        treerow: {},
        tableData: [],
        fondsList: [],
        diaStatus: false,
        loading: false,
        status: false,
        // 树形结构数据
        defaultProps: {
          children: "childClass",
          label: "className",
        },
        loading: false,
        temperatureEChart: {
          retention: [],
          num: [],
        }
      }
    },
    watch: {
      'status': {
        handler(val, oldVal) {
          const cardTree = this.$refs.cardTree.$el.style
          const cardForm = this.$refs.cardForm.$el.style
          if (val) {
            cardTree.width = '5%'
            cardForm.width = '94%'
          } else {
            cardTree.width = '22%';
            cardForm.width = '77%';
          }
        }
      }
    },
    methods: {
      exportExcl() {
        let params = {
          entityId: this.treerow.id,
          maintitle: this.search.maintitle,
          type: this.search.type,
          startDate: this.search.time ? this.search.time[0].replace(/-/g, "") : "",
          endDate: this.search.time ? this.search.time[1].replace(/-/g, "") : "",
        }
        let str = ""
        for (let key in params) {
          if (params[key]) {
            str = str + key + "=" + params[key] + "&"
          }
        }
        window.location.href = URL_PREFIX + "/point-strategy/v/applySearch/downloadFondsNoExcel?" + str
        // downloadExcel(params).then(res => {
        //   downlaodxls(res, `全宗号统计文件${getCurrentTimes()}`)
        // })
      },
      changeRadio(val) {
        if (val === "1" && !this.temperatureEChart.retention.length) {
          echarts.init(this.$refs.columnar).dispose()
        }
        if (val === "1" && this.temperatureEChart.retention.length) {
          let EChart = echarts.init(this.$refs.columnar)
          // 配置参数
          let config = {
            tooltip: {},
            xAxis: {
              type: 'category',
              data: this.temperatureEChart.retention
            },
            yAxis: {},
            series: [{
              type: 'bar',
              barWidth: '20%',
              data: this.temperatureEChart.num,
              animationDuration,
              color: "#D87A80",
              label: {
                show: false,
                position: 'center',
                // offset: [30, 40],
              },
            }]
          }
          EChart.setOption(config)
        }
        if (val === "2" && !this.temperatureEChart.retention.length) {
          echarts.init(this.$refs.broken).dispose()
        }
        if (val === "2" && this.temperatureEChart.retention.length) {
          let EChart2 = echarts.init(this.$refs.broken)
          // 配置参数
          let config2 = {
            tooltip: {},
            xAxis: {
              data: this.temperatureEChart.retention
            },
            yAxis: {},
            series: [{
              color: "#D87A80",
              type: 'line',
              data: this.temperatureEChart.num
            }]
          }
          EChart2.setOption(config2)
        }
        if (val === "3" && !this.pieList.length) {
          echarts.init(this.$refs.cake).dispose()
        }
        if (val === "3" && this.pieList.length) {
          let EChart3 = echarts.init(this.$refs.cake)
          // 配置参数
          let config3 = {
            legend: {
              bottom: '5%',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',

            },
            series: [{
              type: 'pie',
              data: this.pieList,
              animationDuration,
              label: {
                show: false,
                position: 'center',
                // offset: [30, 40],
              },
            }]
          }
          EChart3.setOption(config3)
        }
      },
      getData() {
        this.pieList = []
        let params = {
          entityId: this.treerow.id,
          maintitle: this.search.maintitle,
          type: this.search.type,
          startDate: this.search.time ? this.search.time[0].replace(/-/g, "") : "",
          endDate: this.search.time ? this.search.time[1].replace(/-/g, "") : "",
        }
        fondsNoApi(params).then(res => {
          this.tableData = res.body.data
          this.diaStatus = false
          this.temperatureEChart.num = []
          this.temperatureEChart.retention = []
          this.tableData.map(item => {
            this.temperatureEChart.num.push(item.num)
            this.temperatureEChart.retention.push(item.fonds_no)
            this.pieList.push({
              name: item.fonds_no,
              value: item.num
            })
          })
          this.changeRadio(this.radio)

        })
      },
      searchClicks(val) {
        if (JSON.stringify(this.treerow) === "{}") {
          return
        }
        if (val === 1) {
          this.getData()
        } else {
          this.search.maintitle = ""
          this.search.time = ''
          this.diaStatus = false
        }
      },
      searchClick() {
        this.diaStatus = true
      },
      cancel() {
        this.diaStatus = false
      },
      btns() {
        this.status = !this.status
      },
      getFonds() {
        getFondWithPage({
          limit: 1000
        }).then(res => {
          this.fondsList = res.body.list;
        });
      },
      handleNodeClick(data) {
        if (this.treerow && this.treerow.id != data.id) {
          this.tableData = []
          if (this.radio === '1') {
            echarts.init(this.$refs.columnar).dispose()
          }
          if (this.radio === '2') {
            echarts.init(this.$refs.broken).dispose()
          }
          if (this.radio === '3') {
            echarts.init(this.$refs.cake).dispose()
          }
        }
        this.treerow = data
      },
      getTreeData() {
        this.loading = true
        selectTree({
          className: '档案'
        }).then(res => {
          this.treeData = res.body.list
          this.loading = false
        }).catch(err => {
          this.loading = false
        })

      }
    },
    mounted() {
      dragControllerDiv()
    },
    created() {
      this.getFonds()
      this.getTreeData()
    }
  }

</script>
<style lang='scss' scoped>
  .box {
    display: flex;
    justify-content: space-around;
    height: 100%;

    .tree-box {
      width: 22%;
      // height: 770px;
      background-color: #fff;
      padding: 5px 10px;


      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }
    }

    .form-box {
      width: 77%;
      height: calc(100vh - 95px);
      overflow-y: auto;

      .rightCard {
        .titles {
          font-weight: 600;
          font-size: 17px;
          letter-spacing: 3px;
          line-height: 29px;
          margin-bottom: 8px;
        }
        ::v-deep {
          .el-form-item {
            margin-bottom: 5px;
          }
          .el-radio{
            margin-right: 10px;
          }
        }

        // display: flex;
        // justify-content: space-between;
      }
    }

  }

</style>
