<template>
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="680px" :before-close="dialogBeforeClose">
    <div style="height: 550px;padding: 20px;">
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in timelist" :key="index" :icon="activity.icon" :type="activity.type"
          :color="activity.color" :size="activity.size" :hollow="activity.hollow">
          <div class="time-top">
            <div>
              <span class="name-box" :class="stateObj[activity.state] && stateObj[activity.state].color">{{ activity.desc
                }}</span>
            </div>
            <!-- <span class="time-state" :class="stateObj[activity.state]&&stateObj[activity.state].color">
              <span>{{ stateObj[activity.state] && stateObj[activity.state].text }}</span>
            </span> -->
          </div>
          <div class="time-user-name" >
            <p :class="stateObj[activity.state] && stateObj[activity.state].color">{{ activity.username }}</p>

          </div>
          <!-- <el-card v-if="activity.username">
          </el-card> -->
        </el-timeline-item>
      </el-timeline>
    </div>
    <div slot="footer">
      <div style="display: flex;justify-content: center;">
        <el-button @click.native="closeDialog">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue';
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getItem, setItem } from "@/utils/storage"
const props = defineProps({
  title: {
    type: String,
    default: 'Audit Timeline'
  },
  years: {
    type: String,
    default: ''
  },
  row: {
    type: Object,
    default: {}
  }
});
const emits = defineEmits(['close']);
const dialogTitle = ref('审核进度');
const stateObj = {
  0: {
    text: '未执行',
    color: 'gray'
  },
  1: {
    text: '进行中',
    color: 'green'
  },
  2: {
    text: '已执行',
    color: 'blue'
  }
}
const timelist = ref([
  // {
  //   czbz: "新增责任书",
  //   czrname: getItem('USERNAME'),
  //   state: 0,
  //   xh: 0
  // },
  // // {
  // //   czbz: "发起签订责任书",
  // //   czrname: getItem('USERNAME'),
  // //   state: 0,
  // //   xh: 0
  // // },
  // {
  //   czbz: "领导审批责任书",
  //   czrname: '张三',
  //   state: 0,
  //   xh: 0
  // }, {
  //   czbz: "签订人签订",
  //   czrname: '李四',
  //   state: 0,
  //   xh: 0
  // },
  // {
  //   czrname: '结束归档',
  //   state: '0',
  //   lx: 'end',
  //   size: 'large',
  //   hollow: true
  // }
]);
const dialogVisible = ref(true)

const dialogBeforeClose = () => {
  emits('close')
}
const closeDialog = () => {
  emits('close')
}
onMounted(() => {
  // dialogTitle.value = props.title
  const rowData = props.row
  getApi({ years: props.years, orgid: rowData.orgid, id: rowData.id }, '/mosty-jcgl/ys/getTimer').then((res) => {
    timelist.value = Array.isArray(res) ? res : []
  })
})
</script>

<style scoped>
.time-top {
  display: flex;

}
.time-top ,.time-user-name {
  .gray {
    border-color: gray;
    color: gray;
  }

  .green {
    border-color: green;
    color: green;
  }

  .blue {
    border-color: rgb(6, 90, 187);
    color: rgb(6, 90, 187);
  }
}
.time-state {
  border: 1px solid #ccc;
  padding: 1px 8px;
  border-radius: 6px;
  margin-left: 20px;

}

.time-user-name {
  color: #999;


}
</style>
