<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" :loading="confirmLoading"
        @click="confirm" :priv="!!ID?'ContentCore.SiteMenu.SimilarAdd':'ContentCore.SiteMenu.Add'"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel block-line-panel">
        <div class="panel-header">
          <span class="title">{{title}}</span>
        </div>
        <el-form :model="tmpSite" ref="siteForm" :rules="siteRules" label-width="168px" label-suffix="：">
          <el-form-item label="上级站点" prop="parentID">
            <tree-select :value.sync="tmpSite.parentID" :items="sites" placeholder="请选择上级站点" width="30%"></tree-select>
          </el-form-item>
          <el-form-item label="站点名称" prop="name">
            <el-input auto-complete="off" v-model="tmpSite.name" @blur="setPath" class="form-item"></el-input>
          </el-form-item>
          <el-form-item label="站点目录名" prop="path">
            <el-input auto-complete="off" v-model="tmpSite.path" class="form-item"></el-input>
          </el-form-item>
          <el-form-item label="所属机构" prop="branchInnerCode">
            <tree-select :value.sync="tmpSite.branchInnerCode" :items="branchs" :itemsOptions="branchTreeOptions" width="30%"></tree-select>
          </el-form-item>
          <el-form-item label="语言" prop="language">
            <el-select v-model="tmpSite.language" style="width:30%;">
              <el-option v-for="item in langs" :key="item.key" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="站点URL" prop="URL">
            <el-input v-model="tmpSite.URL" auto-complete="off" placeholder="http://" class="form-item"></el-input>
          </el-form-item>
          <el-form-item label="站点描述" prop="info">
            <el-input v-model="tmpSite.info" type="textarea" :rows="2" auto-complete="off" class="form-item"></el-input>
          </el-form-item>
          <el-form-item label="复制栏目" prop="copyCatalogYesOrNo" v-if="tmpSite.isSimilarCreate === 'Y'">
            <el-switch v-model="tmpSite.copyCatalogYesOrNo" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
          <el-form-item label="复制模板数据" prop="copyTemplateYesOrNo" v-if="tmpSite.isSimilarCreate === 'Y'">
            <el-switch v-model="tmpSite.copyTemplateYesOrNo" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  components: {
    'tree-select': TreeSelect
  },
  props: {
    ID: {
      type: [String, Number]
    }
  },
  data() {
    return {
      title: '新建站点',
      confirmLoading: false,
      sites: [],
      branchs: [],
      langs: [],
      branchTreeOptions: {
        children: 'children',
        label: 'name',
        key: 'branchInnerCode'
      },
      siteRules: {
        name: [
          { required: true, message: '不能为空', trugger: 'blur,change' },
          {
            pattern: /^.{1,100}$/,
            message: '字符串长度不能超过100',
            trigger: 'blur,change'
          }],
        path: [
          { required: true, message: '不能为空', trigger: 'blur,change' },
          {
            pattern: /^[-._\w]+$/,
            message: '只允许大小写字母、数字、英文句号、下划线及英文破折线',
            trigger: 'blur,change'
          },
          {
            pattern: /^.{1,100}$/,
            message: '字符串长度不能超过100',
            trigger: 'blur,change'
          }
        ],
        URL: [
          { required: true, message: 'URL不能为空', trugger: 'blur,change' },
          {
            pattern: /^.{1,100}$/,
            message: '字符串长度不能超过100',
            trigger: 'blur,change'
          }]
      },
      tmpSite: {
        name: '',
        branchInnerCode: '0001',
        parentID: 0,
        path: '',
        language: 'zh-cn',
        info: '',
        URL: ''
      }
    }
  },
  async mounted() {
    let datas = await Promise.all([
      axios.get('/ui/branches'),
      axios.get('/ui/sites'),
      axios.get('/ui/application/lang')
    ])
    this.branchs = datas[0].data.data
    this.sites = datas[1].data.data
    for (let i in datas[2].data.data) {
      this.langs.push({ key: i, value: datas[2].data.data[i] })
    }
    try {
      if (this.ID) {
        let res = await axios.get(`/ui/sites/${this.ID}`)
        this.tmpSite = Object.assign({}, this.tmpSite, res.data.data, {
          isSimilarCreate: 'Y',
          copyTemplateYesOrNo: 'Y',
          copyCatalogYesOrNo: 'Y'
        })
        this.title = '类似新建站点'
      } else {
        this.$refs.siteForm.resetFields()
      }
    } catch (e) {
      this.$router.replace('/ui/settings/site/new')
      this.$refs.siteForm.resetFields()
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async confirm() {
      this.confirmLoading = true
      try {
        await util.validateForm(this.$refs.siteForm)
      } catch (e) {
        this.confirmLoading = false
        return
      }
      let res = await axios.post('/ui/sites', this.tmpSite)
      this.confirmLoading = false
      if (res.data.status === 1) {
        if (this.tmpSite.isSimilarCreate !== 'Y') {
          util.showResponseMessage(res.data)
          this.goBack()
          return
        }
        try {
          await util.showProgress(res.data.taskID, '正在复制. . .')
          this.goBack()
        } catch (e) {

        }
      } else {
        util.showResponseMessage(res.data)
      }
    },
    setPath() {
      this.tmpSite.path = window.util.getSpell(
        this.tmpSite.name,
        true
      )
    }
  }
}
</script>
<style scoped>
  .form-item {
    width: 80%;
  }
</style>

<style>
  .site-dialog .el-dialog {
    width: 600px;
  }

  @media (max-width: 480px) {
    .site-dialog .el-dialog {
      width: 96%;
    }
  }
</style>
