<template>
  <div>
    <dee-table ref="historyTable" selection-row :options="options" :columns="columns" :data="tableData" @selection-change="selectionChange">
      <div slot="header" style="display: flex;width: 100%;justify-content: space-between;">
        <dee-tools :tools="tools" mode="normal" :permissions="permissions" :perm-enable="true" />
      </div>
    </dee-table>
    <dee-dialog :title="dialogTitle" :dialog-visible="dialogVisible" width="45%" @handleClose="cancel">
      <div style="display: flex;font-size: 14px">
        <div>
          <span>路线用于:</span>
        </div>
        <div style="margin-left: 15px">
          <div>{{ form.router }}</div>
          <div style="margin:30px 0 20px 50px">{{ form.router1 }}</div>
        </div>
      </div>
      <dee-table ref="historyTable" selection-row :options="options" :columns="dialogColumns" :data="dialogTableData" @cell-data-change="cellDataChange" @selection-change="dialogSelectionChange">
        <div v-if="dialogTitle==='添加'" slot="header" style="display: flex;width: 100%;justify-content: space-between;">
          <dee-tools :tools="dialogTools" mode="normal" />
        </div>
      </dee-table>
      <div class="flexCenter" style="margin-top: 20px">
        <el-button type="primary" size="small" @click="save">保存</el-button>
        <el-button size="small" @click="cancel">取消</el-button>
      </div>
    </dee-dialog>
  </div>
</template>

<script>

import { getProcessRouteByUsagelinkId, addProcessRoute, deleteRoute } from '@/api/parts'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},

  props: {
    basicData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    sandboxId: {
      type: [Number, String],
      default: () => 0
    },
    viewNode: {
      type: Object,
      default: () => {
        return {}
      }
    },
    permissions: {
      type: [Array, Object],
      default: () => null
    }
  },

  data() {
    // 这里存放数据
    return {
      index: 0,
      options: {},
      columns: [
        {
          title: '操作',
          key: 'operate',
          align: 'center',
          hideTip: true,
          width: '60px',
          component: {
            show: true,
            name: 'EditTableRow',
            props: {
              btns: [
                {
                  operation: '编辑',
                  handleClick: (row, index) => {
                    this.dialogTitle = '编辑'
                    this.dialogTableData = [row]
                    this.dialogVisible = true
                  },
                  icon: '/icons/c-edit.png',
                  showFun: (row) => {
                    if (row.permissions) {
                      const perm = row.permissions.find(p => p.keyName.includes('ProcessRoute-edit'))
                      if (perm && !perm.hadpage) {
                        return false
                      }
                    }
                    return true
                  }
                }
              ]
            }
          }
        },
        {
          title: '装配编号',
          key: 'assemblyNumber'
        },
        {
          title: '装配版本',
          key: 'assemblyVersion'
        },
        {
          title: '视图',
          key: 'view'
        },
        {
          title: '路线',
          key: 'path'
        },
        {
          title: '上次修改时间',
          key: 'modifyTime'
        }
      ],
      tableData: [],
      dialogColumns: [
        {
          title: '路线',
          key: 'path',
          component: {
            name: 'el-input',
            size: 'small'
          }
        }
      ],
      dialogTableData: [],
      tools: [
        {
          type: 'icon',
          name: '添加',
          icon: '/icons/c-add.png',
          key: 'ProcessRoute-add',
          handler: {
            click: () => {
              this.dialogTitle = '添加'
              this.dialogVisible = true
            }
          }
        },
        {
          type: 'icon',
          name: '移除',
          key: 'ProcessRoute-delete',
          icon: '/icons/c-delete.png',
          handler: {
            click: () => {
              if (!this.selection.length) return
              const id = this.selection.map(x => x.id)
              deleteRoute(id.join(',')).then(res => {
                this.getProcessRouteByUsagelinkId()
                this.$utils.showMessage('操作成功!', 'success')
              })
            }
          }
        }
      ],
      dialogTools: [
        {
          type: 'icon',
          name: '添加',
          icon: '/icons/c-add.png',
          handler: {
            click: () => {
              this.dialogTableData.push({
                path: '',
                id: this.index++,
                show: true
              })
            }
          }
        },
        {
          type: 'icon',
          name: '移除',
          icon: '/icons/c-delete.png',
          handler: {
            click: () => {
              this.dialogSelection.forEach(item => {
                this.dialogTableData = this.dialogTableData.filter(x => x.id !== item.id)
              })
            }
          }
        }
      ],
      dialogTitle: '添加',
      dialogVisible: false,
      form: {
        router: '',
        router1: ''
      },
      formData: [
        {
          title: '路线用于',
          split: 1,
          data: [
            {
              title: '',
              key: 'router',
              component: {
                name: 'readable'
              }
            },
            {
              title: '',
              key: 'router1',
              component: {
                name: 'readable'
              },
              handler: {
                change: (value) => {
                  this.formData[0].data = this.formData[0].data.filter(x => x.key !== 'newViewParentId')
                  this.$set(this.form, 'newViewParentId', '')
                  if (!value) {
                    this.formData[0].data.push(this.newViewItem)
                    this.$set(this.formData[0].data.find(x => x.key === 'newViewParentId').component, 'options', [{ label: this.viewNode.data.$label, value: this.viewNode.data.id }])
                    this.$set(this.form, 'newViewParentId', this.viewNode.data.id)
                  }
                }
              }
            }
          ]
        }
      ],
      selection: [],
      dialogSelection: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成(可以访问当前this实例)
  created() {

  },
  // 生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
    this.getProcessRouteByUsagelinkId()
    this.form = {
      router: `${this.viewNode.parent.data.number} ${this.viewNode.parent.data.name} ${this.viewNode.parent.data.displayVersion}(${this.viewNode.parent.data.dxView ? this.viewNode.parent.data.dxView.name : ''})  ${this.viewNode.parent.data.dxContext ? this.viewNode.parent.data.dxContext.name : ''}`,
      router1: ` ${this.viewNode.data.$targetUsage.target.number} ${this.viewNode.data.$targetUsage.target.name} ${this.viewNode.data.$targetUsage.target.displayVersion}(${this.viewNode.data.$targetUsage.target.dxView ? this.viewNode.data.$targetUsage.target.dxView.name : ''})  ${this.viewNode.data.$targetUsage.target.dxContext ? this.viewNode.data.$targetUsage.target.dxContext.name : ''}`
    }
  },
  activated() {
  },
  // 方法集合
  methods: {
    getProcessRouteByUsagelinkId() {
      getProcessRouteByUsagelinkId(this.viewNode.data.$targetUsage.id).then(res => {
        this.tableData = []
        if (res.items.length) {
          this.tableData = res.items.map(x => {
            x.assemblyNumber = this.viewNode.parent.data.number
            x.assemblyVersion = this.viewNode.parent.data.displayVersion
            x.view = this.viewNode.parent.data.dxView.name
            if (this.permissions) {
              x.permissions = this.permissions
            }
            x.show = true
            return x
          })
        }
      })
    },
    selectionChange(data) {
      this.selection = data
    },
    dialogSelectionChange(data) {
      this.dialogSelection = data
    },
    cellDataChange({ rowIndex, row }) {
      this.$set(this.dialogTableData, rowIndex, row)
    },
    save() {
      if (this.dialogTableData.length) {
        const list = []
        JSON.parse(JSON.stringify(this.dialogTableData)).map(x => {
          if (this.dialogTitle === '添加') {
            list.push({ path: x.path, sandboxId: this.sandboxId })
          } else {
            this.$delete(x, 'show')
            this.$delete(x, 'view')
            this.$delete(x, 'assemblyNumber')
            this.$delete(x, 'assemblyVersion')
            list.push(x)
          }
        })
        addProcessRoute({ list: list, usagelinkId: this.viewNode.data.$targetUsage.id }).then(res => {
          this.$utils.showMessage('操作成功!', 'success')
          this.getProcessRouteByUsagelinkId()
          this.cancel()
        })
      }
    },
    cancel() {
      this.dialogVisible = false
      this.dialogTableData = []
    }
  }
}
</script>
<style lang='scss'>
</style>