<template>
  <a-modal v-if="visible" destroy-on-close :visible="visible" :width="800" title="流程修改">
    <div slot="footer">
      <a-button type="primary" :disabled="finishStatus === 0" @click="handleOk">确定</a-button>
    </div>
    <div v-if="finishStatus === 1" :class="$style.numText"
      >修改成功<span :class="[$style.sucNum, $style.num]">{{ successNum }}</span
      >个,失败<span :class="[$style.failNum, $style.num]">{{ failList.length }}</span
      >个</div
    >
    <div v-else-if="finishStatus === 2" :class="$style.numText">
      <a-icon :class="$style.abnormal" type="info-circle" />
      修改异常
    </div>
    <div v-else :class="$style.numText">
      <a-spin>
        <a-icon slot="indicator" type="loading" spin />
      </a-spin>
      修改中
    </div>
    <a-table
      v-if="failList.length"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
    >
      <div slot="status">
        <a-icon :class="$style.failIcon" type="close-circle" />
        <span :class="$style.statusText">修改失败</span>
      </div>
    </a-table>
  </a-modal>
</template>

<script>
import FlowamendService from './flowamend-service'
import components from './_import-components/sd-flowamend-status-import'
const columns = [
  {
    title: '流程名称',
    dataIndex: 'flowName',
    key: 'flowName',
  },
  {
    title: '修改状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '说明',
    dataIndex: 'explain',
    key: 'explain',
  },
]
export default {
  name: 'SdFlowamendStatus',
  metaInfo: {
    title: 'SdFlowamendStatus',
  },
  components,
  data() {
    return {
      visible: false,
      columns,
      dataSource: [],
      finishStatus: 0,
      paramsList: [],
      successNum: 0,
      failList: [],
    }
  },
  mounted() {},
  methods: {
    open() {
      this.visible = true
      this.handleArr()
    },
    handleOk() {
      this.visible = false
      this.clearData()
      this.$emit('ok')
    },
    clearData() {
      this.dataSource = []
      this.finishStatus = 0
    },
    handleArr() {
      Promise.all(
        this.paramsList
          .filter((param) => param.elements.length)
          .map((item) => FlowamendService.amendAttr(item))
      )
        .then((res) => {
          this.finishStatus = 1
          this.successNum = res.filter((r) => r.data?.success).length
          this.failList = res.filter((r) => !r.data?.success)
          if (this.failList.length) {
            this.dataSource = this.failList.map((f) => {
              return {
                flowName: f.data.flowName,
                explain: f.data.message,
              }
            })
          }
        })
        .catch((e) => {
          this.finishStatus = 2
        })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$text-size: 18px;
$num-size: 22px;
.num-text {
  margin-bottom: 10px;
  font-size: $text-size;
  .num {
    margin: 0 5px;
    font-size: $num-size;
    font-weight: bold;
    &.suc-num {
      color: $success-color;
    }
    &.fail-num {
      color: $error-color;
    }
  }

  .fail-num {
    color: $error-color;
  }
}
.status-text {
  margin-left: 5px;
}
.fail-icon {
  color: $error-color;
}
.abnormal {
  color: $warning-color;
}
</style>
