<template>
  <div>
    <a-card>
      审批列表
      <a-collapse :activeKey="defaultExpands">
        <a-collapse-panel
          v-for="item in templateGroups"
          v-show="item.items.length > 0"
          :key="item.id"
          :header="item.name"
        >
          <div class="template-list">
            <a-card
              v-for="template in item.items"
              :key="template.templateId"
              class="template-card"
              @click="handleClick(template)"
              hoverable
            >
              <div class="template-header">
                <a-avatar :style="{ backgroundColor: stringToColor(template.templateName) }">
                  {{ template.templateName.slice(0, 1) }}
                </a-avatar>
                <div class="template-info">
                  <p class="template-name">{{ template.templateName }}</p>
                  <div class="template-action">发起申请</div>
                </div>
              </div>
            </a-card>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </a-card>

    <a-drawer
      :visible="isShow"
      :width="500"
      placement="right"
      @close="isShow = false"
    >
      <FlowStart
        v-if="isShow"
        ref="flowStartRef"
        :template-id="clickItem.templateId"
      />

      <div class="drawer-footer">
        <a-button @click="isShow = false">关闭</a-button>
        <a-button type="primary" style="margin-left: 5px" @click="submitApproval">提交</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import FlowStart from '@/views/workFlow/workspace/approval/FlowStart.vue';
import { getAction, postAction } from '@api/manage'

export default {
  name: 'Approval',
  components: {
    FlowStart
  },
  data() {
    return {
      templateGroups: [],
      isShow: false,
      clickItem: {},
    };
  },
  computed: {
    defaultExpands() {
      return this.templateGroups.map(item => item.id);
    }
  },
  methods: {
    stringToColor(str) {
      let hash = 0;
      for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
      }
      const color = `#${Math.floor(Math.abs(Math.sin(hash) * 16777215) % 16777215).toString(16)}`;
      return color;
    },
    handleClick(template) {
      this.clickItem = template;
      this.isShow = true;
    },
    submitApproval() {
      this.$refs.flowStartRef.validate(valid => {
        if (valid) {
          postAction('/workflow/workspace/process/start',{
            templateId: this.clickItem.templateId,
            variable: this.$refs.flowStartRef.formData
          }).then(() => {
            this.isShow = false;
            this.$message.success('提交成功');
          });
        } else {
          this.$message.warning('请完善表单');
        }
      });
    }
  },
  mounted() {
    getAction('/workflow/group').then(res => {
      this.templateGroups = res.result;
    });
  }
};
</script>

<style scoped>
.template-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
}

.template-card {
  width: 300px;
  margin-left: 8px;
  cursor: pointer;
}

.template-header {
  display: flex;
  align-items: center;
}

.template-info {
  display: flex;
  align-items: center;
  margin-left: 12px;
  width: 100%;
  justify-content: space-between;
}

.template-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin: 0;
}

.template-action {
  color: #1890ff;
  min-width: 56px;
  margin-left: 3px;
}

.drawer-footer {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
