<template>
  <Modal
    :options="getModalOptions"
    :on-negative-click="handleClose"
    :on-close="handleClose"
  >
    <template #Context>
      <div class="history_list">
        <div v-for="(item, index) in historyList" :key="index" class="history_item">
          <div class="item_title">审核时间：{{ item.checkTime }}</div>
          <div class="item_body">
            <div class="check_user">审核人：{{ item.checkUserName }}</div>
            <div class="check_status">审核状态：{{ item.status == 1 ? '审核通过' : '审核不通过' }}</div>
            <div class="check_note">备注：{{ item.note }}</div>
          </div>
        </div>
      </div>
    </template>
  </Modal>
</template>
<script>
import Modal from '@/components/Modal/index.vue'
import { defineComponent, computed, ref, reactive, toRefs, watch } from 'vue'
export default defineComponent({
  name: 'TaskApprove',
  components: { Modal },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null,
    'reload': null
  },
  setup(props, { emit }) {
    const data = reactive({
      historyList: props.data
    })

    const formRef = ref(null)

    const getModalOptions = computed(() => {
      return {
        title: '历史记录',
        show: props.visible,
        negativeText: '关闭'
      }
    })

    watch(() => props.visible, (value) => {
      console.log(value)
    })

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    return {
      ...toRefs(data),
      formRef,
      getModalOptions,
      handleClose
    }
  }
})
</script>
<style scoped>
.history_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.history_item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
.item_body {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}
</style>
