<template>
  <div class="el-card box-card is-always-shadow" ref="col" v-show="canDisplay">
    <div class="el-card__header" v-if="!isTab">
      <div class="clearfix">
        <span>{{column.name}}</span>
        <div style="float:right;">
          <el-button
            style="padding: 3px 0"
            type="text"
            v-if="column.colUrl"
            @click="openMore(column.colUrl)"
            title="更多"
          >
            <i class="el-icon-more" style="font-weight:bold;"></i>
          </el-button>
          <el-button style="padding: 3px 0" type="text" @click="refresh" title="刷新">
            <i class="el-icon-refresh" style="font-weight:bold;"></i>
          </el-button>
          <el-button style="padding: 3px 0" type="text" @click="close" title="移除">
            <i class="el-icon-close" style="font-weight:bold;"></i>
          </el-button>
        </div>
      </div>
    </div>
    <div class="column-body" ref="colBody" v-loading="loading">
      <v-runtime-template
        :template="column.html?column.html:html"
        v-if="isCommon"
        ref="homeHtmlTemplate"
      />
      <eip-chart :id="chartId" v-if="isChart" />
      <chart :option="reportOption" :index="1" v-if="isReport" />
      <custom-dialog-show-detail
        v-if="isCustomDialog"
        ref="customDialogShowDetail"
        :alias="customDialog.alias"
        :custom-dialog="customDialog"
      />
      <template-preview :templateKey="templateKey" single="true" v-if="isTemplate"></template-preview>
    </div>
    <div class="column-footer">
      <el-pagination
        v-if="column.needPage==1"
        :current-page.sync="pageBean.page"
        :page-size="pageBean.pageSize"
        :total="pageBean.total"
        layout="prev, pager, next,total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import req from "@/request.js";
import VRuntimeTemplate from "v-runtime-template";
import { mapState } from "vuex";
import homeTodo from "@/components/home/homeTodo.vue";
import todayMeeting from "@/components/home/todayMeeting.vue";
import oftenFlow from "@/components/home/oftenFlow.vue";
import oftenFlowList from "@/components/home/oftenFlowList.vue";
import homeNotice from "@/components/home/homeNotice.vue";
import homeNews from "@/components/home/homeNews.vue";
import homeCarousel from "@/components/home/homeCarousel.vue";
import homeNewsList from "@/components/home/homeNewsList.vue";
import oftenSystem from "@/components/home/oftenSystem.vue";
import customChart from "@/components/home/customChart.vue";
const chart = () => import("@/components/form/chart/Chart.vue");
import CustomDialogShowDetail from "@/components/dialog/CustomDialogShowDetail.vue";
import homeInst from "@/components/home/homeInst.vue";
let Base64 = require("js-base64").Base64;
import hotentUiUtils from "@/hotent-ui-util.js";

const STATUS = {
  NORMAL: "待办",
  TRANSFORMED: "流转",
  TRANSFORMEDINQU: "征询",
  DELIVERTO: "转办",
  FOLLOW: "跟踪",
  COMMU: "沟通",
  BACK: "驳回",
  ADDSIGN: "会签加签",
  AGENT: "委托",
  SHARE: "共享",
  BACKSHARE: "驳回共享",
  APPROVELINEED: "并行审批",
  SIGNSEQUENCEED: "顺序签署",
  SIGNLINEED: "并行签署",
  USERADDSIGN:"用户加签",
};

export default {
  name: "ht-column",
  components: {
    VRuntimeTemplate,
    homeTodo,
    todayMeeting,
    oftenFlow,
    oftenFlowList,
    homeNotice,
    homeNews,
    homeCarousel,
    oftenSystem,
    customChart,
    chart,
    homeNewsList,
    CustomDialogShowDetail,
    homeInst,
  
  },
  props: {
    columnAlias: {
      type: String,
      required: true
    },
    // 是否来自于预览页面
    fromPreview:{
      type:Boolean,
      default:false
    }//是否存在tab标签中
    ,isTab:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      status:STATUS,
      loading: true,
      html: "<span>本栏目无模板</span>",
      data: {},
      column: {},
      isCommon: false,
      isChart: false,
      isReport: false,
      isCustomDialog: false,
      customDialog: { alias: "" },
      pageBean: { page: 1, pageSize: 20, total: 0, showTotal: false },
      canDisplay:true,
      isTemplate:false,
      templateKey:"",
    };
  },
  computed: mapState({
    columnDataLoadedAliases: state => state.menu.columnDataLoadedAliases
  }),
  watch: {
    "column.colHeight": function(val) {
      if (val && val > 0) {
        this.$refs.colBody.style.height = val + "px";
      }
    },
    "pageBean.page": function(val) {
      if (val && val > 0 && this.column.needPage == 1) {
        this.load();
      }
    },
    columnDataLoadedAliases: {
      handler: function(v) {
        v &&
          this.handleColumnData(
            this.$store.getters["menu/getColumnDataWithAlias"](this.columnAlias)
          );
      },
      immediate: true
    }
  },
  created() {
    this.load(true);
  },
  methods: {
    handleTodoListClick(item){
      this.$router.push("/v-flow/v-todo/"+item.orgName+"/"+item.orgId);
    },
    openMore(url) {
      this.$router.push({ path: url });
    },
    refresh() {
      this.load();
    },
    close() {
      this.$refs.col.remove();
    },
    load(batch) {
      // 多个栏目一起请求时，合并为一次请求后台
      if (batch) {
        // 不需要回调处理数据，通过vuex监听数据更新
        this.$store.dispatch("menu/getColumnByAliasBatch", this.columnAlias);
      } else {
        this.loading = true;
        this.$store
          .dispatch("menu/getColumnByAlias", this.columnAlias)
          .then(data => {
            this.handleColumnData(data);
          });
      }
    },
    handleColumnData(data) {
      if (!data) {
        this.loading = false;
        this.canDisplay= false;
        return;
      }
      this.column = data;
      //计算该栏目是否展示
      if(this.fromPreview){
        this.canDisplay=true;
      }else{
        this.canDisplay=this.column.displayRights;
      }
      //如果无展示权限，则不进行栏目数据渲染了，并隐藏整个组件
      if(!this.canDisplay){
        this.loading = false;
        return;
      }
      if (
        this.column &&
        (this.column.colType == 1 || this.column.colType == 4)
      ) {
        let dataParam = JSON.parse(this.column.dataParam);
        if (dataParam.chartType == 2) {
          this.chartId = dataParam.id;
          this.isChart = true;
          this.loading = false;
        } else {
          this.isReport = true;
          this.getChartsData(dataParam.id);
        }
      } else {
        //自定义对话框
        if (this.column.dataMode === 1) {
          this.getCustomDialogData();
        }
        //restful查询
        else if (this.column.dataMode === 3) {
          this.isCommon = true;
          this.getDataToParse();
        }else if(this.column.dataMode === 4){
          //数据报表
          if(this.column.dataFrom){
            let dataFrom = JSON.parse(this.column.dataFrom);
            this.templateKey = dataFrom.alias;
          }
          this.isTemplate = true;
          this.loading = false;
        } else {
          this.isCommon = true;
          this.dencodeHtml();
          this.loading = false;
        }
      }
    },
    //图标
    getChartsData(id) {
      this.$store.dispatch("storeProcess/getEchartData", id).then(response => {
        this.data = response.options;
        this.loading = false;
        this.dencodeHtml();
      });
    },
    getDataToParse() {
      let column = this.column;
      if (!column.dataFrom) {
        this.dencodeHtml();
        this.loading = false;
        return;
      }
      if (column.colType != 1) {
        //post请求参数
        let queryParams = {};
        //如果需要分页
        if (column.needPage === 1) {
          queryParams.pageBean = this.pageBean;
        }
        //get请求参数
        let urlParam = "";
        if (column.dataParam) {
          let ctx = {};
          const  curUserDetail= this.$store.state.user.currentUserDetail;
          if (curUserDetail && curUserDetail.user) {
            ctx.curUserAccount = curUserDetail.user.account;
            ctx.curUserId = curUserDetail.user.id;
          }
          column.dataParam =  hotentUiUtils.parseExp(column.dataParam, ctx);
        }
        let dataParam = JSON.parse((typeof(column.dataParam)!='undefined' && column.dataParam != "")?column.dataParam.replace(/\\\\/g,'\\'):"[]");
        if (dataParam) {
          for (var i = 0; i < dataParam.length; i++) {
            var value = dataParam[i]["value"];
            var name = dataParam[i]["name"];
            if (column.requestType == "POST") {
              try {
                value = JSON.parse(value);
              } catch (e) {}
              queryParams[name] = value;
              //如果参数中也设置了分页
              if (name === "pageBean") {
                this.pageBean = value;
              }
            } else {
              urlParam =
                i > 0
                  ? urlParam + "&" + name + "=" + value
                  : "?" + name + "=" + value;
            }
          }
        }
        //请求获取数据
        if (column.requestType && column.requestType == "POST") {
          req.post(column.dataFrom, queryParams).then(
            response => {
              this.data = response.data;
              this.loading = false;
              if (this.column.needPage === 1) {
                this.pageBean.page = this.data.page || 1;
                this.pageBean.pageSize = this.data.pageSize || 10;
                this.pageBean.total = this.data.total || 0;
              }
              this.dencodeHtml();
            },
            err => {
              this.loading = false;
              this.html = `<span style='color:red;'>${err}</span>`;
            }
          );
        } else {
          req.get(column.dataFrom + urlParam).then(
            response => {
              this.data = response.data;
              this.loading = false;
              this.dencodeHtml();
            },
            err => {
              this.loading = false;
              this.html = `<span style='color:red;'>${err}</span>`;
            }
          );
        }
      }
    },
    getCustomDialogData() {
      let this_ = this;
      let dataFrom = JSON.parse(this.column.dataFrom || "{}");
      if (!dataFrom.alias) {
        this_.loading = false;
        this_.isCommon = true;
        this.dencodeHtml();
        return;
      }
      let url =
        "${form}/form/customDialog/v1/getByAlias?alias=" + dataFrom.alias;
      req.get(url).then(function(customDialog) {
        customDialog = customDialog.data;
        //格式化对话框的显示字段、返回字段、条件字段、排序字段
        customDialog.displayfield = JSON.parse(customDialog.displayfield);
        for (let i = 0; i < customDialog.displayfield.length; i++) {
          customDialog.displayfield[i].field = customDialog.displayfield[
            i
          ].field.toUpperCase();
        }
        customDialog.resultfield = JSON.parse(customDialog.resultfield);
        customDialog.sortfield = JSON.parse(customDialog.sortfield);
        customDialog.conditionfield = JSON.parse(customDialog.conditionfield);
        //列表
        if (customDialog.style == 0) {
          this_.customDialog = customDialog;
          this_.isCustomDialog = true;
          this_.loading = false;
          setTimeout(() => {
            this_.$refs.customDialogShowDetail.initData(); //显示自定义对话框列表预览弹框
          });
        }
      });
    },
    dencodeHtml() {
      if (this.column.templateHtml) {
        this.column.html = Base64.decode(this.column.templateHtml);
      } else {
        if (Array.isArray(this.data)) {
          this.reportOption = this.data[0];
        }
      }
    },
    handleRowClick(url,newWin) {
      if(url && (url.startsWith("/inst/") || url.startsWith("/start/"))){
        this.handleOpenUrl(url,newWin);
        return ;
      }
      this.$router.push(url);
    },
    handleTodoClick(row,newWin) {
      if (row.status == "SHARE" || row.status == "BACKSHARE") {
        if (row.identityList && row.identityList.length == 1) {
          this.handleOpenUrl("/task/" + row.id + "/" + row.identityList[0].id,newWin);
        } else {
          let html =
            "<select ref=" +
            Math.random() +
            ' id="approvalLeaderSelect" style="width: 200px;height: 30px;border-radius: 4px;margin: 20px 70px;" ><option value="">请选择</option>';
          row.identityList.forEach(identity => {
            html +=
              '<option value="' +
              identity.id +
              '">' +
              identity.name +
              "</option>";
          });
          html += "</select>";
          let this_ = this;
          this.$alert(html, "请选择一个领导代为审批", {
            dangerouslyUseHTMLString: true,
            beforeClose: function(action, instance, done) {
              if (action == "confirm") {
                let se = document.getElementById("approvalLeaderSelect");
                if (se.selectedIndex == 0) {
                  this.$message.warning("请选择代为审批的领导");
                } else {
                  instance.close();
                  this_.handleOpenUrl(
                    "/task/" + row.id + "/" + se[se.selectedIndex].value,newWin
                  );
                }
              } else {
                instance.close();
              }
            }
          });
        }
      } else if (
        row.status == "AGENT" &&
        row.ownerId != row.assigneeId &&
        row.ownerId == this.$store.state.login.currentUser.userId
      ) {
        //委托任务
        this.handleOpenUrl("/instRead/" + row.procInstId + "/agent",newWin);
      } else {
        this.handleOpenUrl("/task/" + row.id + "/0",newWin);
      }
    },
    handleOpenUrl(url,newWin){
      if(!newWin){
        this.$router.push(url);
        return;
      }
      if(!url){
        return ;
      }
      let token = this.$store.state.login.currentUser.token;
      if(!url.toLowerCase().startsWith("http")){
        url = window.context.front + url;
      }
      if(url.indexOf('?') == -1){
        url = url + "?token=" + token;
      }else{
        url = url + "&token=" + token;
      }
      window.open(url,"_blank");
    },
    clickApp(app){
      //1常规应用 2数据报表 3自定义视图 4图表
      if (app.type==4){
        let content = JSON.parse(app.content);
        this.$router.push({path: 'appContent',query:{id: content.id,type: app.type}})
      }else if (app.type===2){
        let content = JSON.parse(app.content);
        this.$router.push({path: 'appContent',query:{key: content.key,type: app.type}});
      }else if (app.type===3){
        let content = JSON.parse(app.content);
        this.$router.push({path: 'appContent',query:{alias: content.alias, sqlAlias: content.sqlAlias, type: app.type}});
      }else if (app.type===1){
        this.$router.push({path: "appContent", query:{id: app.id,type: app.type}});
      }else if (app.type===6){
        let content = JSON.parse(app.content);
        this.$router.push({path: 'appContent',query:{id: content.id,type: app.type}})
      }else if (app.type===7){
        this.$router.push({path: 'appContent',query:{path: app.content,type: app.type}})
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
.el-card {
  margin-bottom: 20px;
}
.el-card__header{
  padding-top: 13px;
  padding-bottom: 13px;
}
.el-card__header span{
  font-size: 15px;
  font-weight: 800;
  border-left:5px solid #2761ff;
  padding-left: 5px;
}
.el-card__header .el-button{
  color: #2761ff;
}
.column-body {
  padding: 0 10px 0 20px;
  height: 100%;
  overflow-y: auto;
}

.column-footer {
  text-align: center;
  color: grey;
}

/deep/ .todo-subject {
  cursor: pointer;
}

/deep/ .todo-subject {
  color: $--theme-color;
}
</style>

