<template>
  <a-modal
      class="parameterDialog"
      :visible="parameterVisible"
      :maskClosable="false"
      @cancel="close"
      :keyboard="false"
      width="100%"
      destroy-on-close
      :footer="false"
      @afterClose="close">
      <template slot="title">
        <span>{{ this.$t('structural-analysis.p-chart') }}</span>
        <!-- 导出图片 -->
        <a-tooltip>
          <template slot="title">
            <span>{{ this.$t('global-btn.export.picture') }}</span>
          </template>
          <a-icon type="export" class="exportImage" @click="exportImage" />
        </a-tooltip>
      </template>
    <splitPane :default-percent='percent' :min-percent='1' split='vertical' v-on:resize='resize'>
      <template slot='paneL'>
        <div class='leftTree'>
          <ParameterLeftTree
              ref='parameterLeftTree'
              :showPasteBtn='showPasteBtn'
              @keyListenerChange='keyListenerChange'
              @initParameterData="getInitData"
          />
        </div>
      </template>
      <template slot='paneR' class='over-hide'>
        <div id="content" class='content pr' style='padding: 20px;'
             v-if='this.$store.getters.parameterCheckedNode'>
          <a-row :gutter="[15, 30]" type="flex" justify="space-between" align='top'>
            <a-col :span="5" v-for='p in this.$store.getters.parameterList.slice(0, 5)'>
              <a-card :id='p.key' :hoverable='true' v-if='p.color' type='inner' :bordered="false"
                      :title="$t('' + p.label + '') + (p.count?' (' + pData[p.count] + ') ':'')"
                      :headStyle="{
                                        backgroundColor: p.color,
                                        color: '#ffffff',
                                        fontWeight: 'bold',
                                        margin: '0 auto'
                                    }">
                <a-list v-if='pData[p.dataList]' item-layout="horizontal" :data-source="pData[p.dataList]">
                  <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-list-item-meta>
                      <a slot="title">{{ item.name }}</a>
                      <a-checkbox slot="avatar" disabled></a-checkbox>
                    </a-list-item-meta>
                  </a-list-item>
                </a-list>
                <template slot="actions" class="ant-card-actions">
                  <a-icon key="edit" type="edit" @click='openModel(p)'/>
                </template>
              </a-card>
            </a-col>
          </a-row>
          <a-row :gutter="[15, 30]" type="flex" justify="space-between" align='middle'>
            <a-col :span="5" v-for='p in this.$store.getters.parameterList.slice(5, 10)' :style='p.title?row2Title:{}'>
              <a-card :id='p.key' :hoverable='true' v-if='p.color' type='inner'
                      :title="$t('' + p.label + '') + (p.count?' (' + pData[p.count] + ') ':'')"
                      :headStyle="{
                                        backgroundColor: p.color,
                                        color: '#ffffff',
                                        fontWeight: 'bold',
                                        margin: '0 auto'
                                    }">
                <a-list v-if='pData[p.dataList]' item-layout="horizontal" :data-source="pData[p.dataList]">
                  <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-list-item-meta>
                      <a slot="title">{{ item.name }}</a>
                      <a-checkbox slot="avatar" disabled></a-checkbox>
                    </a-list-item-meta>
                  </a-list-item>
                </a-list>
                <template slot="actions" class="ant-card-actions">
                  <a-icon key="edit" type="edit" @click='openModel(p)'/>
                </template>
              </a-card>
              <div v-else-if='p.title' class='nodeTitle'>
                <p>{{ $store.getters.parameterCheckedNode.name }}</p>
              </div>
              <div v-else style='text-align: center; border: 0;'>
                <p class="iconfont iconyoujiantou core-arrow"></p>
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="[15, 30]" type="flex" justify="space-between" align='top'>
            <a-col :span="5" v-for='p in this.$store.getters.parameterList.slice(10, 15)'>
              <a-card :id='p.key' :hoverable='true' v-if='p.color' type='inner'
                      :title="$t('' + p.label + '') + (p.count?' (' + pData[p.count] + ') ':'')"
                      :headStyle="{
                                        backgroundColor: p.color,
                                        color: '#ffffff',
                                        fontWeight: 'bold',
                                        margin: '0 auto'
                                    }">
                <a-list v-if='pData[p.dataList]' item-layout="horizontal" :data-source="pData[p.dataList]">
                  <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-list-item-meta>
                      <a slot="title">{{ item.name }}</a>
                      <a-checkbox :default-checked="item.checkFlag == '0'" slot="avatar" disabled></a-checkbox>
                    </a-list-item-meta>
                  </a-list-item>
                </a-list>
                <template slot="actions" class="ant-card-actions">
                  <a-icon key="edit" type="edit" @click='openModel(p)'/>
                </template>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </template>
    </splitPane>
    <!-- 添加 -->
    <AddParameter
        ref='addParameter'
        @closeModal='closeModel'
        @getInitData='getInitData'
    />
  </a-modal>
</template>
<script>
import ParameterLeftTree from './components/ParameterLeftTree/index.vue'; //结构树
import AddParameter from './components/AddParameterModal/AddParameter.vue';
import splitPane from 'vue-splitpane';
import {checkDataPermission} from '@/utils/permission';
import html2canvas from 'html2canvas';

export default {
  name: 'Parameter',
  components: {
    ParameterLeftTree,
    splitPane,
    AddParameter
  },
  props: {
    attrTabs: {
      type: Array,
      default: undefined
    },
    attrStruId: {
      type: String,
      default: undefined
    },
    fmeaId: {
      type: String,
      default: undefined
    },
    /*title: {
        type: String,
        default: undefined
    }*/
  },
  data() {
    return {
      checkDataPermission: !checkDataPermission(),
      attrLoading: undefined, //加载
      initData: {},
      formData: {
        struName: '',
        w: '',
        h: '',
        c: '',
        x: '',
        y: ''
      },
      struId: '',
      parameterVisible: false,
      addParameterVisible: false,
      modelTitle: '',
      percent: 28,
      pData: {},
      addTitle: '',
      row2Title: {
        fontSize: 40,
        backgroundColor: '#1890FF'
      }
    };
  },
  watch: {
    /*attrTabs(v) {
      this.tabs = v
      this.tabName = this.tabs[0].name
    },*/
    '$store.getters.parameterCheckedNode'(parameterCheckedNode) {
      this.$store.dispatch('fmeaTree/set', {
        key: 'lastCheckedNode',
        value: parameterCheckedNode,
      });
      if (parameterCheckedNode) {
        this.getInitData(parameterCheckedNode);
      }
    },
    parameterVisible(v) {
      // 打开P图弹出框时，禁用快捷键
      this.$emit('keyListenerChange', v);
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 关闭属性弹窗
    closeModel() {
      this.$refs.addParameter.addParameterVisible = false;
    },
    openModel(data) {
      this.$refs.addParameter.addTitle = this.$t('' + data.label + '');
      this.$refs.addParameter.addParameterVisible = true;
      this.$refs.addParameter.pdCode = data.code;
    },
    // 获取属性相关数据
    getInitData(checkedNode) {
      let param = {};
      param.fmeaId = this.$store.getters.rfmeaId;
      param.struId = checkedNode.id;
      this.$api.rdfmPdInit(param).then(res => {
        if (res.flag) {
          this.pData = res.data;
        }
      });
    },
    showPasteBtn(data, deep) {
      var nodeTypeDict = this.$store.getters.nodeTypeDict;
      var b = undefined;
      for (var i in data) {
        i = parseInt(i);
        if (deep === 1 && false) {
          //如果 粘贴对象是第一层
          //deep ==1 的结构下没有 当前措施 优化措施 预防措施 探测措施
          if (
              data[i].struTypeCode === nodeTypeDict.cMeas.key ||
              data[i].struTypeCode === nodeTypeDict.optMeas.key ||
              data[i].struTypeCode === nodeTypeDict.preMeas.key ||
              data[i].struTypeCode === nodeTypeDict.findMeas.key
          ) {
            b = true;
          }
        } else if (deep === 2 && false) {
          //粘贴的对象是第二层
          //deep ==2 的结构下没有 当前措施 优化措施 预防措施 探测措施
          if (
              data[i].struTypeCode === nodeTypeDict.cMeas.key ||
              data[i].struTypeCode === nodeTypeDict.optMeas.key ||
              data[i].struTypeCode === nodeTypeDict.preMeas.key ||
              data[i].struTypeCode === nodeTypeDict.findMeas.key
          ) {
            b = true;
          }
        } else {
          if (data[i].struTypeCode === nodeTypeDict.line.key && false) {
            //当复制或剪切的节点下有连线，则不允许复制剪切
            b = true;
          }
        }

        if (data[i].children && data[i].children.length > 0 && !b) {
          b = this.showPasteBtn(data[i].children, deep);
        }
      }
      return b;
    },
    close() {
      this.parameterVisible = false;
      this.$store.dispatch("fmeaTree/set", {
        key: "parameterCheckedNode",
        value: undefined
      });
    },
    resize(percent) {
      this.percent = percent;
    },
    // 监听键盘，快捷键
    keyListenerChange(v) {
      if (v) {
        window.removeEventListener('keydown', this.keyCodeForEvent);
      } else {
        window.addEventListener('keydown', this.keyCodeForEvent);
      }
    },
    /**
     * 导出图片
     */
    exportImage() {
      let element = document.getElementById('content');
      html2canvas(element).then(canvas => {
        // 将canvas转换为图片URL
        var imgData = canvas.toDataURL('image/png');
        
        // 创建一个链接元素
        var link = document.createElement('a');
        link.href = imgData;
        link.download = 'parameter.png';
        link.click();
      });
    }
  },
};
</script>
<style lang='less' scoped>
.content {
  width: 100% !important;
  height: 100% !important;
  background-color: #ffffff; //gk 没有 自加，用来拖拽时能遮盖住左边区域
  overflow: scroll;
}

// 设置model 全屏
/deep/ .ant-modal {
  top: 0 !important;
}

// 设置model 全屏
/deep/ .ant-modal-content {
  height: calc(100vh);
}

// 不加上弹窗就会有滚动条;
/deep/ .ant-modal-wrap {
  overflow: hidden !important
}

/deep/ .ant-modal-body {
  height: 100%;
}

.parameterDialog {
  height: 100%;
  width: 100%;
}

.ant-col-5 {
  width: 20%;
}

.core-arrow {
  font-size: 50px;
  vertical-align: middle;
  color: #08c;
}

.nodeTitle {
  text-align: center;
  font-size: 40px;
  background-color: #1890FF;
  border: 0;
  verticle-align: middle;

  p {
    margin: 0;
  }
}

.ant-col {
  p {
    margin: 0;
  }
}

/deep/ .ant-modal-body {
  padding: 0px 24px 30px 24px !important;
}

/deep/ .ant-card {
  height: 28vh;
  border: 2px #e8e8e8 solid;
  background-color: #eefeff;
  overflow: hidden;
}

/deep/ .ant-card-head {
  min-height: 4vh !important;
}

/deep/ .ant-card-body {
  height: 17.5vh !important;
  overflow-y: auto;
}

/deep/ .ant-card-actions {
  background-color: #eefeff;
  min-height: 4vh !important;
}

/deep/ .ant-empty-normal {
  margin: 0;
}

/deep/ .vue-splitter-container {
  height: calc(100vh - 60px) !important;
}

.leftTree {
  overflow-x: hidden;
  overflow-y: auto;
}

.exportImage {
  cursor: pointer;
  position: absolute;
  right: 0;
  color: gray;
  margin-top: 3px;
  margin-right: 60px;
}
</style>
