<template>
  <div>
    <!-- 添加/编辑栏目弹框 -->
    <el-dialog :title="editMode === 1 ? '修改栏目' : '添加栏目'" size="tiny" :visible.sync="isShow" @open="dialogOpen" append-to-body class="add-catalog-dialog">
      <el-form :model="targetCatalog" :rules="targetCatalogRules" ref="targetCatalogForm" label-width="120px">
        <el-form-item label="服务器地址：" prop="serverAddr" :verify="['NotNull']">
          <el-input v-model="targetCatalog.serverAddr" class="form-item" @change="serverChange"></el-input>
          <el-tooltip class="item" effect="dark" content="服务器地址为（IP+端口）或者域名，默认为localhost" placement="right">
            <i class="fa fa-lightbulb-o" style="color:#FFC125; margin-left:5px"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="选择站点：" prop="siteID">
          <tree-select :value.sync="targetCatalog.siteID" :inputName="targetCatalog.siteName" :items="siteTree" :site="true" @click-change="clickSiteChange" width="80%" :loading="siteTreeLoading">
          </tree-select>
        </el-form-item>
        <el-form-item label="选择栏目：" prop="catalogID">
          <tree-select :value.sync="targetCatalog.catalogID" :items="catalogTree" :site="false" @click-change="clickCatalogChange" :disabled="targetCatalog.siteID < 0" width="80%">
          </tree-select>
        </el-form-item>
        <el-form-item v-if="from==='ContentList'" label="分发后状态：" prop="afterSyncStatus">
          <el-select v-model="targetCatalog.afterSyncStatus" class="form-item">
            <el-option v-for="str in afterSyncStatusOptions" :key="str.key" :label="str.value" :value="str.key">
            </el-option>
          </el-select>
          <el-tooltip class="item" effect="dark" content="分发目标栏目有工作流时只能是初稿状态" placement="right">
            <i class="fa fa-lightbulb-o" style="color:#FFC125; margin-left:5px"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="密钥：" prop="password" :verify="['NotNull']">
          <el-input type="password" v-model="targetCatalog.password" class="form-item"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'

import TreeSelect from '@src/components/TreeSelect.vue'

export default {
  data() {
    var checkTree = (rule, value, callback) => {
      if (value < 0) {
        return callback(new Error('不能为空'))
      } else {
        callback()
      }
    }
    return {
      siteTreeLoading: false,
      siteID: '',
      catalogTree: [],
      siteTree: [],
      afterSyncStatusOptions: [],
      targetCatalogRules: {
        siteID: [
          {
            required: true,
            validator: checkTree,
            trigger: 'blur,change'
          }
        ],
        catalogID: [
          {
            required: true,
            validator: checkTree,
            trigger: 'blur,change'
          }
        ]
      } // 目标栏目列表数据匹配规则
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    async init() {
      let res = await axios.get('/ui/sitegroup/init')
      this.siteID = res.data.data.siteID
      this.getSiteTree()
      if (this.editMode === 1) {
        this.getCatalogTree()
      }
      if (this.from === 'ContentList') {
        let contentStatus = await axios.get('/ui/sitegroup/getstatus', {
          params: {
            first: true
          }
        })
        this.afterSyncStatusOptions = contentStatus.data.data
      }
    },
    async getSiteTree() {
      let res = await axios.get('/ui/sitegroup/bindsitetree', {
        params: {
          URL: this.targetCatalog.serverAddr,
          type: this.type
        }
      })
      this.siteTree = res.data.data
    },
    async getCatalogTree() {
      let treeProps = {
        siteID: this.targetCatalog.siteID,
        URL: this.targetCatalog.URL,
        contentType: this.contentType,
        srcCatalogID: this.srcCatalogID,
        type: this.type || 'Deploy'
      }
      let res = await axios.get('/ui/sitegroup/bindcatalogtree', {
        params: treeProps
      })
      this.catalogTree = res.data.data
    },
    async serverChange() {
      this.siteTreeLoading = true
      await this.getSiteTree()
      this.siteTreeLoading = false
    },
    dialogOpen() {
      this.init()
    },
    clickSiteChange(val) {
      this.targetCatalog.siteID = val.ID
      this.targetCatalog.siteName = val.name
      this.getCatalogTree()
    },
    clickCatalogChange(val) {
      if (val.ID <= 0) {
        return
      }
      this.targetCatalog.catalogID = val.ID
      this.targetCatalog.catalogName = val.name
    },
    async confirm() {
      try {
        await util.validateForm(this.$refs['targetCatalogForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      if (
        this.siteID === this.targetCatalog.siteID &&
        this.catalogId === this.targetCatalog.catalogID &&
        this.targetCatalog.serverAddr === 'localhost'
      ) {
        this.$alert('不能分发到自身', '提示', {
          type: 'warning'
        })
        return
      }
      let props = {
        siteID: this.targetCatalog.siteID,
        catalogID: this.targetCatalog.catalogID,
        password: this.targetCatalog.password
      }
      if (this.from === 'ContentList') {
        this.$emit('callback', this.targetCatalog)
        this.isShow = false
      } else {
        let res = await axios.put(`/ui/sitegroupgather/verifypassword`, props)
        if (res.data.status === 1) {
          this.$emit('callback', this.targetCatalog)
          this.isShow = false
        } else {
          util.showErrorMessageBox(res.data.message)
        }
      }
    }
  },
  props: ['targetCatalog', 'show', 'editMode', 'type', 'contentType', 'srcCatalogID', 'catalogId', 'from'],
  components: {
    'tree-select': TreeSelect
  }
}
</script>
<style>
/* 在一般情况下dialog宽为450像素，在逻辑分辨率480像素以下dialog宽为96% */
.add-catalog-dialog .el-dialog {
  width: 450px;
}
@media (max-width: 480px) {
  .add-catalog-dialog .el-dialog {
    width: 96%;
  }
}
</style>

<style scoped>
.form-item {
  width: 80%;
}
</style>
