<template>
  <el-container>
    <el-footer
      style="height: 40px;line-height: 40px;padding:0px;"
      v-if="inputWriteable && permission_sub != 'n'"
    >
      <el-button
        type="primary"
        size="small"
        @click="flowSelected"
        icon="el-icon-plus"
        plain
        round
        style="margin-left:0"
        >添加</el-button
      >
    </el-footer>
    <el-input
      :name="inputName"
      v-validate="inputValidate"
      v-model="inputVal"
      style="display: none;"
    ></el-input>
    <el-table
      v-if="dataTable.length > 0 && permission_sub != 'n'"
      :data="dataTable"
      border
      style="width: 100%"
      row-key="subject"
    >
      <el-table-column
        type="index"
        width="70"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column label="流程主题" align="center">
        <template slot-scope="scope">
          <span class="subject" @click="handleRowClick(scope.row)">{{
            scope.row.subject
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        align="center"
        label="发起人"
        width="110"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        width="160"
        label="发起时间"
      ></el-table-column>
      <el-table-column
        prop
        label="操作"
        align="center"
        width="200"
        v-if="inputWriteable"
      >
        <template slot-scope="scope">
          <el-button
            @click="up(scope.$index)"
            size="small"
            icon="el-icon-arrow-up"
            plain
          ></el-button>
          <el-button
            @click="down(scope.$index)"
            size="small"
            icon="el-icon-arrow-down"
            plain
          ></el-button>
          <el-button
            @click="remove(scope.row)"
            type="danger"
            size="small"
            icon="el-icon-delete"
            plain
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加相关流程"
      :visible.sync="relatedInformationDialog"
      :close-on-click-modal="false"
      width="60%"
    >
      <el-col :span="24" class="searchStyle">
        <el-col :span="2">
          流程标题：
        </el-col>
        <el-col :span="6">
          <el-input
            size="small"
            style="width:30%;"
            clearable
            placeholder="请输入流程标题"
            prefix-icon="el-icon-search"
            v-model="subject"
          ></el-input>
        </el-col>
        <el-col :span="2">
          &emsp;创建时间：
        </el-col>
        <el-col :span="6">
          <el-date-picker
            size="small"
            style="width:30%"
            clearable
            placeholder="创建时间"
            prefix-icon="el-icon-search"
            v-model="createTime"
            format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
        <el-button
          style="margin-left: 20px"
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search()"
          >查询</el-button
        >
        <el-button size="small" icon="el-icon-refresh" @click="reset"
          >重置</el-button
        > </el-col
      ><br /><br />
      <div style="padding-top: 10px;">
        <div class="record-content">
          <el-table
            :data="rows"
            style="width: 100%;"
            stripe
            border
            header-cell-class-name="todo-header-row"
            row-class-name="todo-row"
            size="medium"
            :default-sort="{prop: 'createTime', order: 'descending'}"
            @selection-change="handleChecked"
            @select="onTableSelect"
            ref="flowTable"
            @row-click="RowClick"
          >
            <el-table-column
              type="selection"
              width="60"
              align="center"
              sortable
            ></el-table-column>
            <el-table-column
              type="index"
              align="center"
              width="70"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="creator"
              width="120"
              label="创建人"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="subject"
              width="400"
              label="流程标题"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="procDefName"
              width="280"
              label="流程名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
            ></el-table-column>
          </el-table>
          <el-footer style="padding-top:10px;" height="45px">
            <el-row type="flex" justify="end">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-sizes="[10, 20, 50, 100, 300, 500]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </el-row>
          </el-footer>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
        <el-button @click="cancel" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import utils from '@/utils.js'
import sub_pio_mixin from '@/sub-permission-mixin.js'
import hotentUiUtils from '@/hotent-ui-util.js'

export default {
  name: 'eip-rel-flow',
  props: ['modelName', 'validate', 'permission', 'searchConfig', 'value'],
  components: {},
  mixins: [sub_pio_mixin], //混入方式引入表单组件中公共属性，处理子表、孙表行内联动（切面修改permission_sub）
  data() {
    return {
      relatedInformationDialog: false,
      checked: true,
      subject: '',
      inputVal: '',
      createTime: '',
      checkBoxData: [],
      checkBoxDataAll: [],
      dataTable: [],
      writeable: true
    }
  },
  watch: {
    inputVal: function(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  },
  computed: mapState({
    rows: state => state.relatedProcess.rows,
    pagination: state => state.relatedProcess.pagination,
    total: state => state.relatedProcess.total,
    relatedInformation: state => state.relatedProcess.relatedInformation,
    inputWriteable: function() {
      if (!this.writeable) {
        return this.writeable
      }
      return utils.getWriteable(this.permission_sub)
    },
    inputName: function() {
      let labeldesc = ''
      if (
        this.$slots &&
        this.$slots.labeldesc &&
        this.$slots.labeldesc[0].children &&
        this.$slots.labeldesc[0].children[0].text
      ) {
        labeldesc = this.$slots.labeldesc[0].children[0].text
        return this.name ? this.name : utils.getName() + '-' + labeldesc
      } else {
        return this.name ? this.name : utils.getName()
      }
    },
    inputValidate: function() {
      return utils.addRequiredOrNot(this.permission, this.validate, this)
    }
  }),
  methods: {
    cancel() {
      this.relatedInformationDialog = false
    },
    //确认
    confirm() {
      const _me = this
      this.checkBoxData.forEach(row => {
        let res = _me.indexArray(_me.checkBoxDataAll, row)
        if (res == -1) {
          _me.checkBoxDataAll.push(row)
        }
      })
      this.dataTable = this.checkBoxDataAll
      this.relatedInformationDialog = false
      if (this.modelName) {
        // const pInst = utils.getOnlineFormInstance(_me);
        // utils.setValueByPath(pInst, this.modelName, JSON.stringify(this.dataTable));
        this.inputVal = JSON.stringify(this.dataTable)
      }
    },
    handleChecked(value) {
      this.checkBoxData = value
    },
    handleSizeChange: function(size) {
      //每页下拉显示数据
      this.$store.dispatch('relatedProcess/setPaginationSize', size)
      this.search()
    },
    handleCurrentChange: function(currentPage) {
      const this_ = this
      if (this.checkBoxData != undefined && this.checkBoxData.length > 0) {
        this.checkBoxData.forEach(row => {
          let res = this_.indexArray(this_.checkBoxDataAll, row)
          if (res == -1) {
            this_.checkBoxDataAll.push(row)
          }
        })
      }
      this_.checkBoxData = this_.checkBoxDataAll
      //点击第几页
      this.$store.dispatch('relatedProcess/setPaginationPageNum', currentPage)
      this.search()
    },
    RowClick(row, column, event) {
      this.$refs.flowTable.toggleRowSelection(row)
    },
    check() {
      const this_ = this
      setTimeout(() => {
        if (this_.checkBoxData == undefined || this_.checkBoxData.length == 0) {
          this_.checkBoxData = this_.checkBoxDataAll
        }
        this_.checkBoxData.forEach(row => {
          let res = this_.indexArray(this_.rows, row)
          if (res != -1) {
            this_.$refs.flowTable.toggleRowSelection(this_.rows[res])
          }
        })
      }, 250)
    },
    onTableSelect(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1
      if (!selected) {
        let res = this.indexArray(this.checkBoxDataAll, row)
        this.checkBoxDataAll.splice(res, 1)
        if (this.checkBoxDataAll.length == 0) {
          this.checkBoxData = []
        }
      }
    },
    search() {
      let querys = [] //查询条件
      let queryFilter = {}
      let pageBean = {pageBean: this.pagination}
      if (this.subject != '') {
        querys.push({
          property: 'SUBJECT_',
          value: this.subject,
          group: 'main',
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      if (this.createTime != '') {
        querys.push({
          property: 'CREATE_TIME_',
          value: utils.formatDateYear(this.createTime),
          group: 'main',
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      if (querys.length > 0) {
        if (this.searchConfig.isPaging) {
          queryFilter = {
            pageBean: {
              page: '1',
              pageSize: this.searchConfig.pageSize,
              showTotal: 'true'
            },
            querys
          }
        } else {
          queryFilter = {pageBean: {}}
        }
        this.$store.dispatch('relatedProcess/getlistJson', queryFilter)
      } else {
        this.$store.dispatch('relatedProcess/getlistJson', pageBean)
      }
      this.check()
    },
    flowSelected: function() {
      if (this.checkBoxData == undefined || this.checkBoxData.length == 0) {
        this.checkBoxData = this.dataTable
      }
      this.relatedInformationDialog = true
      var pageBean = {}
      if (this.searchConfig.isPaging) {
        pageBean = {
          page: 1,
          pageSize: this.searchConfig.pageSize,
          showTotal: true
        }
      }
      let pagination = {pageBean: pageBean}
      this.$store.dispatch('relatedProcess/getlistJson', pagination)
      setTimeout(() => {
        this.check()
      }, 500)
    }, //重置
    reset() {
      this.subject = ''
      this.createTime = ''
      this.search()
    },
    remove(row) {
      this.dataTable.remove(row)
      if (this.modelName) {
        // const pInst = utils.getOnlineFormInstance(this);
        // utils.setValueByPath(pInst, this.modelName, JSON.stringify(this.dataTable));
        if (this.dataTable.length < 1) {
          this.inputVal = ''
        } else {
          this.inputVal = JSON.stringify(this.dataTable)
        }
      }
    }, //上移按钮
    up(idx) {
      idx = Number.parseInt(idx)
      if (idx < 1) {
        return
      }
      var t = this.dataTable[idx - 1]
      this.$set(this.dataTable, idx - 1, this.dataTable[idx])
      this.$set(this.dataTable, idx, t)
      if (this.modelName) {
        // const pInst = utils.getOnlineFormInstance(this);
        // utils.setValueByPath(pInst, this.modelName, JSON.stringify(this.dataTable));
        this.inputVal = JSON.stringify(this.dataTable)
      }
    },
    //下移按钮
    down(idx) {
      idx = Number.parseInt(idx)
      if (idx >= this.dataTable.length - 1) {
        return
      }

      var t = this.dataTable[idx + 1]
      this.$set(this.dataTable, idx + 1, this.dataTable[idx])
      this.$set(this.dataTable, idx, t)

      if (this.modelName) {
        // const pInst = utils.getOnlineFormInstance(this);
        // utils.setValueByPath(pInst, this.modelName, JSON.stringify(this.dataTable));
        this.inputVal = JSON.stringify(this.dataTable)
      }
    },
    handleRowClick(row) {
      window.open(this.$router.resolve('/inst/' + row.id).href, '_blank')
    },
    //去重json数组重复数据
    uniqueArray(array, key) {
      var result = [array[0]]
      for (var i = 1; i < array.length; i++) {
        var item = array[i]
        var repeat = false
        for (var j = 0; j < result.length; j++) {
          if (item[key] == result[j][key]) {
            repeat = true
            break
          }
        }
        if (!repeat) {
          result.push(item)
        }
      }
      return result
    },
    indexArray(array, item) {
      for (var i = 0; i < array.length; i++) {
        if (array[i].id == item.id) {
          return i
        }
      }
      return -1
    }
  },

  created() {
    this.$validator = this.$root.$validator
  },
  mounted() {
    const _me = this
    if (this.modelName) {
      // const pInst = utils.getOnlineFormInstance(_me);
      // const oldVal = utils.getValueByPath(pInst, this.modelName);
      if (this.value) {
        this.dataTable = JSON.parse(this.value)
      }
    }
    const {subScopeEl, index} = hotentUiUtils.getSubScopeElAndIndex(this.$el)
    if (
      subScopeEl &&
      (subScopeEl.getAttribute('row_readonly') == 'true' ||
        subScopeEl.getAttribute('row_readonly') === true)
    ) {
      this.writeable = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

::v-deep .el-dialog__body {
  padding: 0px 20px;
  color: $--color-text-regular;
  font-size: 14px;
  word-break: break-all;
}
.form-table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

.form-table th {
  color: #666;
}

.form-table th > span {
  color: #f00;
}

.form-table th,
.form-table td {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.recordInformation {
  width: 15%;
}

.overstriking {
  font-weight: 700;
}

.searchStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.subject {
  cursor: pointer;
  color: $--theme-color;
}
</style>
