<template>
  <div class="include-control">
    <template
      v-if="field.displayType == Constant.PermissionType_HIDDEN"
    >
      <div class="component-o-calctext" v-if="field.hiddenValue">{{field.hiddenValue}}</div>
      <!-- 闅愯棌 TODO:娉ㄦ剰锛岄殣钘忔椂涓嶅簲璇ユ湁hidden鐨刦ield瀛樺湪锛屾湁瀹夊叏闂锛屼互鍚庤鏀硅繃鏉ワ細Jarod -->
      <!-- <input type="hidden" v-model="field.value" />
      <a class="mint-cell mint-field" v-if="field.mobile&&field.hiddenValue">
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text">{{field.discript?field.discript:field.name}}</span> 
          </div> 
          <div class="mint-cell-value readOnly">
            <span>{{field.hiddenValue}}</span>
          </div> 
        </div>
      </a> -->
    </template>

    <template v-else-if="field.textType == 'readonly' || field.displayType == Constant.PermissionType_READONLY || field.displayType == Constant.PermissionType_DISABLED">
      <template v-if="field.readOnlyShowValOnly">
        <!-- 鍙锛堟枃鏈ā寮忥級 -->
        
      </template>
      <template v-else>
        <!-- 鍙锛堟帶浠舵ā寮忥級 -->
        <button class="include-viewBtn mint-button mint-button--normal" @click="showView">
          <div class="btn-con">
            <div class="lf">
              <img calss="containing" src="../assets/images/containing.png" />
              {{includeViewDescript?includeViewDescript:field.name}}
            </div>
            <div class="rg">
              <span class="rg-lf">{{row_count}}</span>
              <span class="rg-rg">
                <i class="fa fa-angle-right fa-lg"></i>
              </span>
            </div>
          </div>
        </button>
        <comm_dialog
          :modal="false"
          :title="$t('select_dept')"
          :visible.sync="dialogVisible"
          v-bind="$attrs"
          v-on="$listeners"
          position="right"
          style="height: 100%;"
          class="dept-tree"
        >
          <view_delegate
            :openParams="{appId: field.application, 
              actionContent: field.viewId, 
              parentId:field.docId, 
              isRelate:field.relate, 
              showtype:'include',
              formId:field.formId
            }"
            :includeDisplayType="field.displayType"
            v-bind="$attrs"
            v-on="$listeners"
            @onAction="doCreate"
            @event="closeDialog"
            @getRowCount="setRowCount"
            @getIncludeViewDescript="setIncludeViewDescript"
            @refreshForm="refreshForm"
            :showtype="'include'"
          ></view_delegate>
        </comm_dialog>
      </template>
    </template>

    <template v-else-if="field.displayType == Constant.PermissionType_MODIFY">
      <button class="include-viewBtn mint-button mint-button--normal" @click="showView">
        <div class="btn-con">
          <div class="lf">
            <img calss="containing" src="../assets/images/containing.png" />
            {{includeViewDescript?includeViewDescript:field.name}}
          </div>
          <div class="rg">
            <span class="rg-lf">{{row_count}}</span>
            <span class="rg-rg">
              <i class="fa fa-angle-right fa-lg"></i>
            </span>
          </div>
        </div>
      </button>
      <div class="some-list-view">
        <view_delegate
          :openParams="{appId: field.application, 
            actionContent: field.viewId, 
            parentId:field.docId, 
            isRelate:field.relate, 
            showtype:'include',
            formId:field.formId
          }"
          v-bind="$attrs"
          v-on="$listeners"
          :showtype = "'include'"
          :isCurrentPageDisplay="true"
          @action="showView"
          v-if="isRouterAlive"
        ></view_delegate>
      </div>
      <comm_dialog
        :title="$t('select_dept')"
        :visible.sync="dialogVisible"
        v-bind="$attrs"
        v-on="$listeners"
        :modal="false"
        position="right"
        style="height: 100%;"
        class="dept-tree"
        :id="id"
      >
        <view_delegate
          :openParams="{appId: field.application, 
            actionContent: field.viewId, 
            parentId:field.docId, 
            isRelate:field.relate, 
            showtype:'include',
            formId:field.formId
          }"
          :id="id+'_1'"
          v-bind="$attrs"
          v-on="$listeners"
          @onAction="doCreate"
          @event="closeDialog"
          @getRowCount="setRowCount"
          @getIncludeViewDescript="setIncludeViewDescript"
          @refreshForm="refreshForm"
          :showtype = "'include'"
          v-if="isRouterAlive"
        ></view_delegate>
      </comm_dialog>
    </template>
  </div>
</template>

<script>
import Constant from "@/Constant.js";
import view_delegate from "@/components/view_delegate.vue";
import comm_dialog from "@/components/comm_dialog.vue";

export default {
  name: "o-include",
  props: ["id"],
  components: {
    view_delegate,
    comm_dialog
  },
  computed: {
    field: function() {
      // let formData = this.$parent.findField(this.id);
      //formData.isRefresh = 'false'
      return this.$parent.findField(this.id);
    }
  },
  watch: {
    'field.isRefresh'() {
      this.reload();
    },
    'field.name'() {
      if(this.field.name.split(" ")[0]){
        this.reload();
        this.field.name = this.field.name.split(" ")[0];
      }
      
    },
  },
  mounted() {
  
  },
  beforeDestroy() {
    //鍖呭惈鍏冪礌鎵撳紑浜嗚鍥撅紝鎴栬€呰鍥炬墦寮€浜嗚〃鍗曪紝鐐瑰嚮鎵嬫満鐨勮繑鍥為敭闇€瑕佹妸DOM绉婚櫎鎵嶈兘闅愯棌寮圭獥妗�
    document.getElementById(this.id).remove();//style.display = 'none';
  },
  openParams() {
    var field = this.$parent.findField(this.id);
    return {
      appId: field.application,
      actionContent: field.viewId,
    };
  },

  data: function() {
    return {
      Constant,
      dialogVisible: false,
      view: {},
      isRouterAlive:true,
      row_count:'',
      includeViewDescript:'',
      
    };
  },

  methods: {
    refreshForm() {
      this.$parent.refresh(this.id);
    },
    setRowCount(value) {
      this.row_count = value;
    },
    setIncludeViewDescript(value) {
      this.includeViewDescript = value
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
    },
    doCreate(obj, showtype) {
      obj.showtype = showtype;
      this.$router.push({ name: "open", query: obj });
    },
    showView() {
      // sessionStorage.setItem("OIncudeControlId", this.id);
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  }
};
</script>

<style lang="scss">
  .o-include {
    margin-top:5px;
    margin-bottom: 5px;
    width:100%;
    height:40px;
    line-height: 40px;
    background: #FAFAFA;
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    .left-title {
      padding-left:10px;
      height:40px;
      height:40px;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      .icon {
        display: inline-block;
        display: -webkit-flex;
        height:40px;
        margin-right:8px;
        display: flex;
        align-items: center;
      }
    }
    .more {
      margin-right:15px;
      color:#888888;
      position: relative;
      width:40px;
      text-align: right;
      .popups {
        position: absolute;
        top:37px;
        right:-10px;
        width:130px;
        height:102px;
        z-index: 99;
        background: white;
        border-radius: 4px;
        -webkit-box-shadow: #cccccc 0px 0px 2px;
        -moz-box-shadow: #cccccc 0px 0px 2px;
        box-shadow: #cccccc 0px 0px 2px;
        &>div {
          height:34px;
          line-height: 34px;
          margin-left:15px;
          color:#000000;
          font-size: 14px;
          text-align: left;
        }
      }
      .popups::after {
        border: solid transparent;
        content: ' ';
        height: 0;
        top: -17px;
        left: 109px;
        position: absolute;
        width: 0;
        border-width: 8px;
        // border-bottom-color: white;
        border-color:transparent transparent #cccccc transparent 
      }
      .popups::before {
        border: solid transparent;
        content: ' ';
        height: 0;
        z-index: 100;
        top: -16px;
        left: 109px;
        position: absolute;
        width: 0;
        border-width: 8px;
        // border-bottom-color: white;
        border-color:transparent transparent white transparent 
      }
    }
  }
</style>