<style>
.enable-button-class:hover{
  color: rgb(8, 165, 87);
  border-color: transparent;
  background-color: transparent;
}
</style>
<template>
  <div>
    <div v-loading="dataLoading">
      <el-toolbar>
        <el-button :loading="submitLoading" @click="catalogSaveClickHandler" :priv="`com.zving.cms.Catalog.Edit.${catalogId}`"><i class="fa fa-floppy-o"></i> 保存</el-button>
        <c-publish-dropdown :catalog-type="type" :catalog-id="catalogId" :mapping-flag="catalogVirtualInfo.mappingFlag" @callback="afterPublishCallBack"></c-publish-dropdown>
        <c-scan-preview-dropdown :catalog-id="catalogId" :link="catalogVirtualInfo.link"></c-scan-preview-dropdown>
        <c-privilege-dropdown :catalog-id="catalogId"></c-privilege-dropdown>
        <!-- <el-button @click="catalogTakeEffectClickHandler" :priv="`com.zving.cms.Catalog.Edit.${catalogId}`" v-if="catalogVirtualInfo.catalogUndoEnable">
          <i class="fa fa-check-square-o"></i>生效</el-button>
        <el-button @click="catalogRollBackClickHandler" :priv="`com.zving.cms.Catalog.Edit.${catalogId}`" v-if="catalogVirtualInfo.catalogUndoEnable">
          <i class="fa fa-share-square-o"></i>撤销</el-button> -->
        <c-del-button @callback="loadCatalogTree" :disabled="!catalogId" :catalog-id="catalogId"></c-del-button>
        <el-button type="text" @click.stop="visible()" :priv="'com.zving.cms.Catalog.StartOrStop.'+catalogId" :title="catalogVirtualInfo.visibleFlag!=='Y'?'启用':'禁用'">
          <i class="fa fa-power-off icon-success f16 enable-button-class" v-if="catalogVirtualInfo.visibleFlag!=='Y'"> 启用</i>
          <i class="fa fa-ban icon-danger f16 enable-button-class" v-else> 禁用</i>
        </el-button>
        <c-import-button :content-type="contentType" :catalog-id="catalogId" @dialog="dialog" :disabled="!catalogVirtualInfo.canHasChild" @callback="catalogImportCallBack" :dimension-id="dimensionId"></c-import-button>
        <c-move-button  @callback="loadCatalogTree" :disabled="!catalogId" :inner-code="catalogVirtualInfo.innerCode" :catalog-id="catalogId" button-type="text" :dimension-id="dimensionId"></c-move-button>
        <el-dropdown >
          <el-button>
            <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="button-dropdown">
            <el-dropdown-item command="sort" >
              <c-sort-button @callback="loadCatalogTree"  :disabled="!catalogId" :catalog-id="catalogId" button-type="text"></c-sort-button>
            </el-dropdown-item>
            <el-dropdown-item command="exportStructure">
              <c-export-structure-button  :disabled="!catalogId" :dimension-id="dimensionId" :catalog-id="catalogId" button-type="text"></c-export-structure-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-toolbar>
      <div>
        <el-form label-position="right" class="catalog-form" ref="catalog-virtual-info" label-width="180px" :model="catalogVirtualInfo">
            <div class="panel-fieldset">
              <h4 class="panel-legend">基本信息</h4>
                <el-form-item label="栏目ID：">
                    {{catalogVirtualInfo.ID}} (内部编码：{{catalogVirtualInfo.innerCode}})
                </el-form-item>
                <el-form-item label="状态：">
                    <span v-if="catalogVirtualInfo.visibleFlag==='Y'">启用</span>
                    <span v-else>禁用</span>
                </el-form-item>
                <el-form-item label="栏目名称：" prop="name" :verify="['NotNull','Length<30']">
                    <el-input v-model="catalogVirtualInfo.name" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="栏目别名：" prop="alias" :verify="['NotNull','Regex=^[a-zA-Z0-9_\.\-\/]+$','Length<100']">
                    <el-input v-model="catalogVirtualInfo.alias" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="所在目录：" prop="path" :verify="['NotNull','Regex=^[a-zA-Z0-9_\.\-\/]+$','Length<100']">
                  <path-picker
                  :path.sync="catalogVirtualInfo.path"
                  select-title="选择栏目路径" style="width: 240px;"
                  ></path-picker>
                </el-form-item>
                <el-form-item label="所属机构：" prop="branchInnerCode" :verify="['NotNull']">
                    <tree-select  :value.sync="catalogVirtualInfo.branchInnerCode" :items="branchTree" :itemsOptions="treeItemsOptions" placeholder="请选择" :style="{width:'240px','display':'inline-block'}">
                    </tree-select>
                </el-form-item>
                <el-form-item label="内容类型：">
                    <el-select clearable v-model="catalogVirtualInfo.contentType" placeholder="请选择" :style="{width:'120px'}" >
                        <el-option v-for="item in contentTypes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="来源栏目">
                    <el-input v-model="catalogVirtualInfo.conditions.fromCatalogName" :title="catalogVirtualInfo.conditions.fromCatalogName" style="width: 240px;" :disabled="true"></el-input>
                    <el-button @click="selectVirtualCatalogClickHandler" type="small">选择栏目</el-button>
                    <!-- <el-button @click="selectCommonCatalogClickHandler" type="small">选择公共站点栏目</el-button> -->
                </el-form-item>
                <el-form-item label="映射类型：">
                    <el-radio-group v-model="catalogVirtualInfo.mappingFlag">
                      <el-radio v-for="o in mappingFlags" :key="o.value" :label="o.value">{{o.label}}</el-radio>
                    </el-radio-group>
                    <el-button :style="{'margin-left':'10px'}" v-loading="checkMappingLoading[0]" @click="checkMapping" type="small">检查映射</el-button>
                    <el-button @click="checkMappingAll" v-loading="checkMappingLoading[1]" type="small">检查全部映射</el-button>
                </el-form-item>
                <el-form-item label="生成静态文件：">
                    <el-switch v-model="catalogVirtualInfo.generateFlag" active-value="Y" inactive-value="N" ></el-switch>
                </el-form-item>
                <el-form-item label="是否级联：">
                    <el-switch v-model="catalogVirtualInfo.conditions.isCascade" active-value="Y" inactive-value="N"></el-switch>
                </el-form-item>
                <el-form-item label="Logo图片：" :style="{'margin-top':'5px;'}">
                    <logo-path
                      :path.sync="catalogVirtualInfo.logoFile"
                      :preview-path.sync="catalogVirtualInfo.logoSrc"
                      edit-position="right"
                      upload-title="上传栏目Logo图片"
                      :resource-dialog-props="resourceDialogProps"
                      :disabled="!catalogId">
                    </logo-path>
                </el-form-item>
            </div>
            <div class='virtual-catalog-block panel-fieldset' v-show="hasLoadBasic">
              <virtual-condition
                :dataInitURL="conditionInitURL"
                :tmp-condition="tmpCondition">
              </virtual-condition>
            </div>
            <!-- pc模板属性 -->
            <pc-template
              :catalog-id="catalogVirtualInfo.ID"
              :extends-data="catalogVirtualInfo"
              :type="catalogVirtualInfo.type"
              :content-type="catalogVirtualInfo.contentType"
              @turnToPlatformTabs="turnToPlatformTabs">
            </pc-template>
            <div class="panel-fieldset">
              <h4 class="panel-legend">SEO属性</h4>
                <el-form-item label="首页路径及文件名：">
                  <path-picker
                  :path.sync="catalogVirtualInfo.indexFileName"
                  :parent-path="catalogVirtualInfo.path"
                  select-title="选择首页文件"
                  select-type = "File"
                  extension = "htm,shtml,html"
 style="width: 240px;"
                  ></path-picker>
                </el-form-item>
                <el-form-item label="SEO关键字：">
                    <el-input style="width: 240px;" v-model="catalogVirtualInfo.SEOKeywords" ></el-input>
                    <br/>
                    <span>注意：多个SEO关键字以逗号隔开</span>
                </el-form-item>
                <el-form-item label="SEO描述：">
                    <el-input :style="{width:'280px'}" type="textarea" :rows="2" v-model="catalogVirtualInfo.SEODescription" ></el-input>
                </el-form-item>
                <el-form-item label="SEO标题：">
                    <el-input style="width: 240px;" v-model="catalogVirtualInfo.SEOTitle" ></el-input>
                </el-form-item>
            </div>
        </el-form>
      </div>
    </div>
    <!-- 选择栏目 -->
    <catalog-selector
    :show.sync="catalogSelector.isShowModal"
    :checked-ids="catalogSelector.hasCheckedIds"
    :content-type="catalogVirtualInfo.contentType"
    :input-type="catalogSelector.showCheckBox"
    :catalog-id="catalogId"
    @callback="getCatalogIds">
    </catalog-selector>
    <!-- 选择公共栏目 -->
    <common-catalog-selector
      :show.sync="commonCatalogSelector.isShowModal"
      :checked-ids="commonCatalogSelector.hasCheckedIds"
      :content-type="catalogVirtualInfo.contentType"
      :input-type="commonCatalogSelector.showCheckBox"
      :catalog-id="catalogId"
      @callback="getCommonCatalogIds">
    </common-catalog-selector>
  </div>
</template>
<script src="./virtualCatalog.js"></script>
<style scoped>
.virtual-catalog-block {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 0px;
  border-radius: 3px;
}
</style>
