<template>
  <el-dialog title="选择网站群栏目" :visible.sync="myDeployDialogShow">
  <div>
    <el-col>
      <div class="tool-btn">
        <el-button @click="addTarget">
          <i class="fa fa-plus"></i>添加</el-button>
        <el-button @click="editTarget">
          <i class="fa fa-edit"></i>编辑</el-button>
        <el-button @click="deleteTarget">
          <i class="fa fa-remove"></i>删除</el-button>
      </div>
      <!-- 目标栏目列表表格 -->
      <el-table ref="multipleTable" :data-read-url="getDeployList" tooltip-effect="dark" @selection-change="targetSelectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="siteName" label="站点名称"></el-table-column>
        <el-table-column prop="catalogName" label="栏目名称"></el-table-column>
        <el-table-column prop="serverAddr" label="服务器地址"></el-table-column>
      </el-table>
  </el-col>
  <!-- 底部确认按钮 -->
      <div slot="footer" class="button-style-extend">
        <el-button @click="myDeployDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="confirmContent" :loading="handlerLoading">确 定</el-button>
      </div>
    <addCatalog-dialog :show.sync="show" :targetCatalog="tmpTargetCatalog" type="Deploy" from="ContentList" :contentType="contentType" :editMode="editMode" :catalogID="currentCatalogId" @callback="addCatalogCallback"></addCatalog-dialog>
  </div>
  </el-dialog>
</template>
<script>
import addCatalogDialog from '../../sitegroup/addCatalogDialog.vue'
import util from '@src/common/util.js'
export default {
  props: [
    'contentId',
    'siteId',
    'currentCatalogId',
    'deployDialogShow',
    'contentType'
  ],
  data() {
    return {
      sourceCatalog: '',
      tmpTargetCatalog: {},
      editMode: 0,
      tableHeight: 0,
      targetCatalogData: [],
      oldCatalogID: '',
      oldCatalogType: '',
      treeOptions: { key: 'ID', label: 'name', children: 'children' }, // 树选项
      catalogTree: [],
      selectedRows: [], // 选中的目标栏目行
      deployDataRules: {
        deployName: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        catalogID: [
          {
            required: true,
            trigger: 'blur,change'
          }
        ]
      },
      show: false,
      handlerLoading: false
    }
  },
  computed: {
    myDeployDialogShow: {
      get() {
        return this.deployDialogShow
      },
      set(val) {
        this.$emit('update:deployDialogShow', val)
      }
    }
  },
  methods: {
    // 添加目标栏目按钮
    addTarget() {
      this.editMode = 0
      this.tmpTargetCatalog = {
        serverAddr: '',
        siteID: '-1',
        siteName: '',
        catalogID: '-1',
        catalogName: '',
        password: '',
        lastTime: '',
        srcCatalogID: this.currentCatalogId,
        contentType: this.contentType
      }
      this.show = true
    },
    // 编辑目标栏目按钮
    editTarget() {
      // 判断是否有选中的栏目数据
      if (this.selectedRows.length < 1) {
        this.$alert('请先选择要编辑的行！', '提示', {
          confirmButtonText: '确定',
          type: 'info'
        })
        return
      }
      this.editMode = 1
      this.tmpTargetCatalog = Object.assign({}, this.selectedRows[0])
      this.show = true
    },
    // 删除目标栏目按钮
    async deleteTarget() {
      // 判断是否有选中的栏目数据
      if (this.selectedRows.length < 1) {
        this.$alert('请先选择要删除的记录！', '提示', {
          confirmButtonText: '确定',
          type: 'info'
        })
        return
      }
      let rowIds = []
      this.selectedRows.forEach(function(row) {
        rowIds.push(row.ID)
      }, this)
      let ids = rowIds.join(';')
      let res = await axios.delete(`/ui/groupcatalog/${ids}`)
      if (res.data.status === 1) {
        util.showSuccess(res.data.message)
        this.$refs.multipleTable.getData()
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    },
    async confirmContent() {
      this.handlerLoading = true
      let ids = []
      this.selectedRows.forEach(function(row) {
        ids.push(row.ID)
      })
      let res = await axios.post('/ui/sitegroupdeploy/contentinnerdeploy', {
        dIDs: ids.join(','),
        contentIDs: this.contentId,
        contentType: this.contentType,
        sourceCatalog: this.currentCatalogId
      })
      if (res.data.status === 1) {
        this.myDeployDialogShow = false
        this.mySortContentShow = false
        this.handlerLoading = false
        await util.showProgress(res.data.taskID, '正在分发数据...')
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    },
    getDeployList() {
      return [
        '/ui/groupcatalog',
        { params: { catalogID: this.currentCatalogId } }
      ]
    },
    targetSelectionChange(selection) {
      this.selectedRows = selection
    },
    async addCatalogCallback(val) {
      if (this.editMode === 1) {
        let index = this.targetCatalogData.findIndex(
          val => val === this.selectedRows[0]
        )
        this.targetCatalogData = [
          ...this.targetCatalogData.slice(0, index),
          Object.assign({}, val),
          ...this.targetCatalogData.slice(index + 1)
        ]
      } else {
        this.targetCatalogData = [
          ...this.targetCatalogData,
          Object.assign({}, val)
        ]
      }
      let res
      if (this.editMode === 0) {
        res = await axios.post('/ui/groupcatalog', val)
      } else {
        res = await axios.put(`/ui/groupcatalog/${val.ID}`, val)
      }
      if (res.data.status === 1) {
        util.showSuccess(res.data.message)
        this.$refs.multipleTable.getData()
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    }
  },
  components: {
    'addCatalog-dialog': addCatalogDialog
  }
}
</script>

<style scoped>
.content-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 0 30px;
}

.tool-btn {
  margin: 5px 0;
  background-color: aliceblue;
}
.button-style-extend {
  text-align: right;
}
</style>
