<style>
.enable-button-class:hover{
  color: rgb(8, 165, 87);
  border-color: transparent;
  background-color: transparent;
}
.table-operate-icon{
  color: #606266;
}
</style>

<template>
  <div>
    <div v-loading="dataLoading">
      <el-toolbar>
        <el-button :loading="submitLoading" v-if="catalogBasicInfo.catalogUndoEnable" @click="catalogTakeEffectClickHandler" :disabled="!catalogId" :priv="'com.zving.cms.Catalog.Edit.'+catalogId">
          <i class="fa fa-check"></i>生效
        </el-button>
        <el-button :loading="submitLoading" v-if="catalogBasicInfo.catalogUndoEnable" @click="catalogRollBackClickHandler" :disabled="!catalogId" :priv="'com.zving.cms.Catalog.Edit.'+catalogId">
          <i class="fa fa-share"></i>撤销
        </el-button>
        <el-button :loading="submitLoading" @click="catalogSaveClickHandler" :disabled="!catalogId" :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" @callback="afterPublishCallBack"></c-publish-dropdown>
        <c-scan-preview-dropdown :catalog-id="catalogId" :link="catalogBasicInfo.link"></c-scan-preview-dropdown>
        <c-content-export-import-dropdown :catalog-id="catalogId" :content-type="contentType" :catalog-name="catalogBasicInfo.name"></c-content-export-import-dropdown>
        <c-privilege-dropdown :catalog-id="catalogId"></c-privilege-dropdown>
        <c-del-button @callback="loadCatalogTree" :disabled="!catalogId" :catalog-id="catalogId" ></c-del-button>
        <el-button v-if="catalogId" type="text" @click.stop="visible()" :title="catalogBasicInfo.visibleFlag!=='Y'?'启用':'禁用'"  :priv="'com.zving.cms.Catalog.StartOrStop.'+catalogId">
          <i class="fa fa-power-off icon-success f14 enable-button-class" v-if="catalogBasicInfo.visibleFlag!=='Y'"> 启用</i>
          <i class="fa fa-ban icon-danger f14 enable-button-class"  v-else> 禁用</i>
        </el-button>
        <c-similar-add-button  @callback="loadCatalogTree" :dimension-id="dimensionId" :parent-id="catalogBasicInfo.parentID" :disabled="!catalogId" :catalog-id="catalogId"></c-similar-add-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="merge" >
              <c-merge-button :disabled="!catalogBasicInfo.canMerge" :content-type="contentType" :dimension-id="dimensionId" :type="type" :catalog-id="catalogId" @dialog="dialog" @callback="mergeCallBack" button-type="text"></c-merge-button>
            </el-dropdown-item>
            <el-dropdown-item command="clean" >
              <c-clean-button :catalog-id="catalogId" @callback="cleanCallBack" button-type="text" ></c-clean-button>
            </el-dropdown-item>
            <el-dropdown-item command="move" >
              <c-move-button  @callback="loadCatalogTree" :disabled="!catalogId" :dimension-id="dimensionId" :inner-code="catalogBasicInfo.innerCode" :catalog-id="catalogId" button-type="text"></c-move-button>
            </el-dropdown-item>
            <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="import" >
              <c-import-button :content-type="contentType" :dimension-id="dimensionId" :site-id="siteId" :catalog-id="catalogId" @dialog="dialog" :disabled="!catalogBasicInfo.canHasChild" @callback="catalogImportCallBack" button-type="text" ></c-import-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 class="margin-top-8">
        <el-form label-position="right" ref="catalog-basic-info" class="catalog-form" :disabled="!catalogId"  label-width="180px" :model="catalogBasicInfo">
            <div class="panel-fieldset">
              <h4 class="panel-legend">基本属性</h4>
                <el-form-item label="栏目ID：">
                    {{catalogBasicInfo.ID}} (内部编码：{{catalogBasicInfo.innerCode}})
                </el-form-item>
                <el-form-item label="状态：">
                    <span v-if="catalogBasicInfo.visibleFlag==='Y'">启用</span>
                    <span v-else>禁用</span>
                </el-form-item>
                <el-form-item label="栏目名称：" prop="name" :verify="['NotNull','LengthEX<=100|栏目名称不能超过33个汉字或100个英文字符']">
                    <el-input v-model="catalogBasicInfo.name" style="width: 240px;" :disabled="!catalogId"></el-input>
                </el-form-item>
                <el-form-item label="栏目别名：" prop="alias" :verify="['NotNull','Regex=^[a-zA-Z0-9_\.\/-]+$','Length<100']">
                    <el-input v-model="catalogBasicInfo.alias" style="width: 240px;" :disabled="!catalogId"></el-input>
                </el-form-item>
                <el-form-item label="所在目录：" prop="path" :verify="['NotNull','Regex=^[a-zA-Z0-9_\.\/-]+$','Length<100']">
                  <path-picker
                  :path.sync="catalogBasicInfo.path"
                  select-title="选择栏目路径" style="width: 240px;"
                  :disabled="!catalogId"
                  ></path-picker>
                </el-form-item>
                <el-form-item label="所属机构：" prop="branchInnerCode" :verify="['NotNull']">
                    <tree-select :value.sync="catalogBasicInfo.branchInnerCode" :disabled="!catalogId" :items="branchTree" :itemsOptions="treeItemsOptions" placeholder="请选择" :style="{width:'240px','display':'inline-block'}">
                    </tree-select>
                </el-form-item>
                <el-form-item label="栏目类型：">
                    <el-select v-model="catalogBasicInfo.type" placeholder="请选择" style="width: 240px;" @change="catalogTypeChangeHandler" :disabled="!catalogId">
                        <el-option  v-for="item in types" v-if="item.value!=='Virtual'" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="生成静态文件：">
                    <el-switch v-model="catalogBasicInfo.generateFlag" active-value="Y" inactive-value="N" :disabled="!catalogId"></el-switch>
                </el-form-item>
                <el-form-item label="详细页存储规则：">
                    <el-select v-model="catalogBasicInfo.detailNameRule" placeholder="请选择" style="width: 240px;" :disabled="!catalogId">
                        <el-option v-for="item in detailNameRules" :key="item.codeValue" :label="item.codeName" :value="item.codeValue">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="不在栏目循环列表中显示：">
                    <el-switch v-model="catalogBasicInfo.invisible" active-value="Y" inactive-value="N" :disabled="!catalogId"></el-switch>
                </el-form-item>
                <el-form-item label="内容类型：">
                    <el-select clearable v-model="catalogBasicInfo.contentType" placeholder="请选择" style="width: 240px;" :disabled="!catalogId">
                        <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 type="textarea" :rows="2" v-model="catalogBasicInfo.info" :style="{width:'280px'}" :disabled="!catalogId"></el-input>
                </el-form-item>
                <el-form-item label="Logo图片：" :style="{'margin-top':'5px;'}">
                  <div style="width:80px">
                    <logo-path
                      :path.sync="catalogBasicInfo.logoFile"
                      :preview-path.sync="catalogBasicInfo.logoSrc"
                      edit-position="right"
                      upload-title="上传栏目Logo图片"
                      :resource-dialog-props="resourceDialogProps"
                      :disabled="!catalogId"
                    ></logo-path>
                  </div>
                </el-form-item>
            </div>
            <pc-template :catalog-id="catalogBasicInfo.ID" :extends-data="catalogBasicInfo" :type="catalogBasicInfo.type" :content-types="contentTypes" :content-type="catalogBasicInfo.contentType" @turnToPlatformTabs="turnToPlatformTabs"></pc-template>
            <div class="panel-fieldset">
              <h4 class="panel-legend">SEO属性</h4>
                <el-form-item label="首页路径及文件名：">
                  <path-picker
                  :path.sync="catalogBasicInfo.indexFileName"
                  :parent-path="catalogBasicInfo.path"
                  select-title="选择首页文件"
                  select-type = "File"
                  extension = "htm,shtml,html"
                  style="width: 240px;"
                  :disabled="!catalogId"
                  ></path-picker>
                </el-form-item>
                <el-form-item label="SEO关键字：">
                    <el-input style="width: 240px;" v-model="catalogBasicInfo.SEOKeywords" :disabled="!catalogId"></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="catalogBasicInfo.SEODescription" :disabled="!catalogId"></el-input>
                </el-form-item>
                <el-form-item label="SEO标题：">
                    <el-input style="width: 240px;" v-model="catalogBasicInfo.SEOTitle" :disabled="!catalogId"></el-input>
                </el-form-item>
            </div>
            <catalog-basic-extends :extends-data.sync="catalogBasicInfo" :catalog-id="catalogBasicInfo.ID"></catalog-basic-extends>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script src="./catalogBasic.js"></script>
