<template>
  <div class="right-list-panel-card layout-no-cols">
    <div>
      <el-form :model.sync="params" label-width="120px" label-suffix=": " ref="params" >
        <div class="panel-card">
          <h4 class="panel-legend">迁移信息</h4>
          <el-form-item label="数据源" prop="dataSourceName">
            <el-input v-model="params.dataSourceName" class="form-item" :disabled="true"></el-input>
            <el-button @click="selectDatabaseClick">选择</el-button>
          </el-form-item>
          <el-form-item label="数据表前缀" prop="tablePrefix">
             <el-input v-model="params.tablePrefix" class="form-item"></el-input>
             <el-button @click="checkDB">检测</el-button>
          </el-form-item>
          <el-form-item label="数据库状态" >
             <span v-show='isMatch===true'> 匹配</span>
          </el-form-item>
          <el-form-item label="目标站点" prop="importSiteType" :disabled='!isMatch'>
            <el-radio :disabled='!isMatch' v-model="params.importSiteType" label="new">新站点</el-radio>
            <el-radio :disabled='!isMatch' v-model="params.importSiteType" label="custom">指定站点</el-radio>
          </el-form-item>
          <el-form-item label="" v-if="!(!isMatch || isMatch && params.importSiteType!=='custom')">
            <tree-select :value.sync="params.customSiteID" :items="sites" placeholder="选择站点" width="40%"></tree-select>
          </el-form-item>
          <!--
          <el-form-item label="目标栏目" prop="importCatalogType" :disabled='!isMatch'>
            <el-radio :disabled='!isMatch'  v-model="params.importCatalogType" label="root">根栏目</el-radio>
            <el-radio :disabled='!isMatch' v-model="params.importCatalogType" label="custom">指定栏目</el-radio>
            <el-input  v-model="params.customCatalogName" disabled calss="form-item" style="width:150px"></el-input>
            <el-button  :disabled="!isMatch || isMatch && params.importCatalogType!=='custom'">选择</el-button>
          </el-form-item>
          -->
          <el-form-item>
            <el-button type="primary" :disabled='!isMatch' @click="importData" >开始</el-button>
          </el-form-item>
        </div>
      </el-form>

      <databaseList-dialog :show.sync="databaseListModal" @callback="databaseListCallback"></databaseList-dialog>

    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import databaseListDialog from '../dbgather/databaseListDialog.vue'
import TreeSelect from '@src/components/TreeSelect.vue'

export default {
  components: {
    'databaseList-dialog': databaseListDialog,
    'tree-select': TreeSelect
  },
  data() {
    return {
      params: {
        dataSourceID: 0,
        dataSourceName: '',
        tablePrefix: 'cmstop',
        importSiteType: 'new', // new, custom
        customSiteID: 0,
        customSiteName: '',
        importCatalogType: 'root', // root, custom
        customCatalogID: 0,
        customCatalogName: ''
      },
      databaseListModal: false,
      taskInfo: '',
      isMatch: false,
      catalogCount: 0,
      contentCount: 0,
      sites: []
    }
  },
  async created() {
    let res = await axios.get('/ui/sites')
    if (res.data.status === 1){
      this.sites = res.data.data
    }
  },
  methods: {
    databaseListCallback(database) {
      this.params.dataSourceID = database.ID
      this.params.dataSourceName = database.name
    },
    selectDatabaseClick() {
      this.databaseListModal = true
    },
    async checkDB(){
      let res = await axios.get(`/ui/transfer/cmstop/verify?databaseID=${this.params.dataSourceID}&tablePrefix=${this.params.tablePrefix}`)
      if (res.data.status === 1){
        this.isMatch = true
      } else {
        this.isMatch = false
        util.showErrorMessageBox(res.data.message || '检测失败！')
      }
    },
    async importData(){
      try {
        let res = await axios.put(`/ui/transfer/cmstop`, this.params)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          util.showProgress(res.data.taskID)
        }
      } catch (e) {
        util.showErrorNotification(e)
      }
    }
  }
}
</script>
<style scoped>
.content-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 0 40px;
}

.form-item{
  max-width:300px;
  width:80%;
}
textarea {
  height: calc(100vh - 133px);
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  line-height: 1.5;
}
</style>
