<template>
  <div>
    <div v-loading="dataLoading">
      <el-toolbar>
        <el-button :loading="submitLoading" @click="catalogSaveClickHandler" >
          <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="catalogLinkInfo.link"></c-scan-preview-dropdown>
        <c-privilege-dropdown :catalog-id="catalogId"></c-privilege-dropdown>
        <c-clean-button :catalog-id="catalogId" @callback="cleanCallBack"></c-clean-button>
        <c-del-button @callback="loadCatalogTree" :disabled="!catalogId" :catalog-id="catalogId"></c-del-button>
        <el-button type="text" @click.stop="visible()" :title="catalogLinkInfo.visibleFlag!=='Y'?'启用':'禁用'">
          <i class="fa fa-power-off icon-success f16" v-if="catalogLinkInfo.visibleFlag!=='Y'"> 启用</i>
          <i class="fa fa-ban icon-danger f16" v-else> 禁用</i>
        </el-button>
        <c-import-button :content-type="contentType" :catalog-id="catalogId" @dialog="dialog" :disabled="!catalogLinkInfo.canHasChild" @callback="catalogImportCallBack" :dimension-id="dimensionId"></c-import-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="move" >
              <c-move-button  @callback="loadCatalogTree" :disabled="!catalogId" :inner-code="catalogLinkInfo.innerCode" :catalog-id="catalogId" button-type="text" :dimension-id="dimensionId"></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="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" ref="catalog-link-info" class="catalog-form" label-width="180px" :model="catalogLinkInfo">
          <div class="panel-fieldset">
            <h4 class="panel-legend">基本信息</h4>
            <el-form-item label="栏目ID：">
              {{catalogLinkInfo.ID}} (内部编码：{{catalogLinkInfo.innerCode}})
            </el-form-item>
            <el-form-item label="状态：">
              <span v-if="catalogLinkInfo.visibleFlag==='Y'">启用</span>
              <span v-else>禁用</span>
            </el-form-item>
            <el-form-item label="栏目名称：" prop="name" :verify="['NotNull','Length<30']">
              <el-input v-model="catalogLinkInfo.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="catalogLinkInfo.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="catalogLinkInfo.path"
              select-title="选择栏目路径" style="width: 240px;"
              ></path-picker>
            </el-form-item>
            <el-form-item label="所属机构：" prop="branchInnerCode" :verify="['NotNull']">
              <tree-select  :value.sync="catalogLinkInfo.branchInnerCode" :items="branchTree" :itemsOptions="treeItemsOptions" placeholder="请选择" :style="{width:'240px','display':'inline-block'}">
              </tree-select>
            </el-form-item>
            <el-form-item label="栏目类型：">
              <el-select v-model="catalogLinkInfo.type" placeholder="请选择" :style="{width:'120px'}"  @change="catalogTypeChangeHandler">
                <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="catalogLinkInfo.generateFlag" active-value="Y" inactive-value="N" ></el-switch>
            </el-form-item>
            <el-form-item label="栏目URL：">
              <el-checkbox v-model="catalogLinkInfo.linkToFirstContent">链接到本栏目下的第一篇内容 </el-checkbox>
              <br>
              <div v-show="!catalogLinkInfo.linkToFirstContent">
                <el-input :title="catalogLinkInfo.cName" v-model="catalogLinkInfo.cName" :style="{width:'300px'}" :disabled="true"></el-input>
                <br>
                <el-button @click="selectContentClickHandler" type="small">链接到内容</el-button>
                <el-button @click="selectCatalogClickHandler" type="small">链接到栏目</el-button>
                <el-button @click="inputUrlClickHandler" type="small">外部地址</el-button>
              </div>
            </el-form-item>
            <el-form-item label="Logo图片：" :style="{'margin-top':'5px;'}">
              <logo-path
                :path.sync="catalogLinkInfo.logoFile"
                :preview-path.sync="catalogLinkInfo.logoSrc"
                edit-position="right"
                upload-title="上传栏目Logo图片"
                :resource-dialog-props="resourceDialogProps"
                :disabled="!catalogId">
              </logo-path>
            </el-form-item>
          </div>
          <pc-template :catalog-id="catalogLinkInfo.ID" :extends-data="catalogLinkInfo" :type="catalogLinkInfo.type" :content-type="catalogLinkInfo.contentType" :content-types="contentTypes" @turnToPlatformTabs="turnToPlatformTabs"></pc-template>
          <div class="panel-fieldset">
            <h4 class="panel-legend">SEO属性</h4>
            <el-form-item label="首页路径及文件名：">
              <path-picker
              :path.sync="catalogLinkInfo.indexFileName"
              :parent-path="catalogLinkInfo.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="catalogLinkInfo.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="catalogLinkInfo.SEODescription" ></el-input>
            </el-form-item>
            <el-form-item label="SEO标题：">
              <el-input style="width: 240px;" v-model="catalogLinkInfo.SEOTitle" ></el-input>
            </el-form-item>
          </div>
          <catalog-basic-extends :extends-data.sync="catalogLinkInfo" :catalog-id="catalogLinkInfo.ID"></catalog-basic-extends>
        </el-form>
      </div>
    </div>
    <!-- 链接到内容弹框 -->
    <link-content
      :show.sync="linkContentChoice.isShowModal"
      :title="linkContentChoice.title"
      @callback="getChoiceLinkContent"
      @dialog="dialog">
    </link-content>
    <!-- 链接到栏目弹框 -->
    <link-catalog
      :show.sync="linkCatalogChoice.isShowModal"
      :title="linkCatalogChoice.title"
      :catalog-id="linkCatalogChoice.ID"
      :input-type="linkCatalogChoice.inputType"
      @callback="getChoiceLinkCatalog"
      @dialog="dialog">
    </link-catalog>
    <!-- 外部地址 -->
    <input-link
      :show.sync="linkURL.isShowModal"
      @callback="getInputURL">
    </input-link>
  </div>
</template>
<script src="./linkCatalog.js">
</script>
