<template>
  <div :class="$style.content">
    <a-table
      :columns="columns"
      :pagination="false"
      :data-source="formatRollbackSteps"
      :row-key="(record, index) => index"
      :row-selection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: selectChange }"
      size="small"
    >
      <template slot="users" slot-scope="text, record, index">
        <a-checkbox-group
          v-model="dealers"
          :options="record.users"
          @change="
            (e) => {
              dealerChange(e, index)
            }
          "
        />
      </template>
    </a-table>
  </div>
</template>

<script>
import Vue from 'vue'
import { Modal, Radio } from 'ant-design-vue'
Vue.use(Modal)
Vue.use(Radio)
const columns = [
  {
    title: '环节名称',
    dataIndex: 'historyStepName',
  },
  {
    title: '处理人',
    dataIndex: 'users',
    scopedSlots: { customRender: 'users' },
  },
]
export default {
  name: 'SdWebflowRollback',
  components: {},
  props: {
    rollbackSteps: {
      type: Array,
      default: (_) => [],
    },
  },
  data() {
    return {
      columns,
      dealers: [],
      selectedRowKeys: [],
    }
  },
  computed: {
    formatRollbackSteps() {
      const steps = []
      this.rollbackSteps.forEach((step) => {
        const stepTmp = steps.find((item) => item.historyStepId === step.historyStepId)
        if (stepTmp) {
          stepTmp.users.push({
            value: step.historyStepId + '_' + step.userAccount,
            label: step.userName,
            userAccount: step.userAccount,
            userName: step.userName,
          })
        } else {
          steps.push({
            historyStepId: step.historyStepId,
            historyStepName: step.historyStepName,
            // value使用环节id+用户account，避免多个环节都有同一用户的情况
            users: [
              {
                value: step.historyStepId + '_' + step.userAccount,
                label: step.userName,
                userAccount: step.userAccount,
                userName: step.userName,
              },
            ],
          })
        }
      })
      return steps
    },
  },
  created() {
    this.selectedRowKeys = [0]
    this.dealers = this.formatRollbackSteps?.[0].users.map((user) => user.value)
  },
  methods: {
    selectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      if (selectedRows[0]) {
        this.dealers = selectedRows[0].users.map((user) => user.value)
      }
    },
    dealerChange(e, index) {
      // 判断当前行未选中，则更改选中行为当前行
      if (this.selectedRowKeys[0] !== index) {
        this.selectedRowKeys = [index]
      }
    },
    // 返回选中的环节信息，父组件可调用
    getSelectedStepInfo() {
      if (this.selectedRowKeys.length > 0) {
        const selectedKey = this.selectedRowKeys[0]
        const step = this.formatRollbackSteps[selectedKey]
        return {
          historyStepId: step.historyStepId,
          historyStepName: step.historyStepName,
          users: this.dealers.map((value) => {
            const user = step.users.find((item) => item.value === value)
            return {
              userAccount: user.userAccount,
              userName: user.userName,
            }
          }),
        }
      }
      return {}
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.content {
  margin-top: -20px;
}
.step {
  display: block;
  line-height: $input-height-base;
}
.divider {
  margin-bottom: 5px;
  line-height: $dropdown-line-height;
}
</style>
