<template>
  <el-button @click="open=true"  :disabled="!contentIds" :type="buttonType" :priv="'com.zving.cms.Catalog.Content.Copy.'+ catalogId">
    <i class="fa fa-window-restore"></i>网站群推送
  <el-dialog title="选择网站群栏目" :append-to-body="true" :visible.sync="open">
  <div>
    <el-col>
      <div class="tool-btn">
        <el-button @click="add">
          <i class="fa fa-plus"></i>添加</el-button>
        <el-button @click="edit">
          <i class="fa fa-edit"></i>编辑</el-button>
        <el-button @click="del">
          <i class="fa fa-remove"></i>删除</el-button>
      </div>
      <!-- 目标栏目列表表格 -->
      <el-table ref="multipleTable" :data-read-url="deployDatas" 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="open = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="handleLoading">确 定</el-button>
      </div>
    <add-catalog-dialog :show.sync="show" :target-catalog="tmpTargetCatalog" type="Deploy" from="ContentList" :content-type="contentType" :edit-mode="editMode" :catalogID="catalogId" @callback="addCatalogCallback"></add-catalog-dialog>
  </div>
  </el-dialog>
  </el-button>
</template>
<script>
import addCatalogDialog from '../../sitegroup/addCatalogDialog.vue'
import util from '@src/common/util.js'
export default {
  components: {
    addCatalogDialog
  },
  props: [
    'contentIds',
    'siteId',
    'catalogId',
    'contentType',
    'buttonType'
  ],
  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,
      open: false,
      handleLoading: false
    }
  },
  methods: {
    // 添加目标栏目按钮
    add() {
      this.editMode = 0
      this.tmpTargetCatalog = {
        serverAddr: '',
        siteID: '-1',
        siteName: '',
        catalogID: '-1',
        catalogName: '',
        password: '',
        lastTime: '',
        srcCatalogID: this.catalogId,
        contentType: this.contentType
      }
      this.show = true
    },
    // 编辑目标栏目按钮
    edit() {
      // 判断是否有选中的栏目数据
      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 del() {
      // 判断是否有选中的栏目数据
      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 confirm() {
      this.handleLoading = true
      let ids = []
      this.selectedRows.forEach(function(row) {
        ids.push(row.ID)
      })

      if (!ids || !ids.length) {
        await util.showResponseMessage({message: '请至少选择一条数据'})
        this.handleLoading = false
        return
      }

      let res = await axios.post('/ui/sitegroupdeploy/contentinnerdeploy', {
        dIDs: ids.join(','),
        contentIDs: this.contentIds,
        contentType: this.contentType,
        sourceCatalog: this.catalogId
      })
      this.handleLoading = false
      if (res.data.status === 1) {
        this.open = false
        await util.showProgress(res.data.taskID, '正在分发数据...')
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    },
    deployDatas() {
      return [
        '/ui/groupcatalog',
        { params: { catalogID: this.catalogId } }
      ]
    },
    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)
      }
    }
  }
}
</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>
