<script>
import {mapActions, mapMutations, mapState} from "vuex";

export default {
  name: "AppDutyInfo",
  appName: "值班信息",
  data() {
    return {
      list: [],
      show: false,
      columns: [
        {label: '值班人员', prop: 'dutyUserName'},
        {label: '开始时间', prop: 'dutyStartTime'},
        {label: '结束时间', prop: 'dutyEndTime'},
      ],
      typeList: [{value: '1', label: '陈锐-超管'}]
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onShow() {
    document.title = '值班信息'
    if (this.user.token) {
      this.getList()
    } else this.getCode().then(this.getToken).then(this.getList)
  },
  methods: {
    ...mapMutations(['setToken']),
    ...mapActions(['getCode']),
    getToken() {
      return this.$http.post("/node/wxtest/token", null, {withoutToken: 1}).then(res => {
        if (res?.data) {
          return this.setToken(res.data.data)
        }
      })
    },
    getList() {
      this.$http.post('/node/duty/list').then((res) => {
        if (res?.data) {
          this.list = res.data.records
        }
      })
    },
  },
}

</script>

<template>
  <section class="AppDutyInfo">
    <div v-text="user.token"/>
    <div class="select" @click="show=true">艾贤凌
      <u-icon name="arrow-down" color="#999" size="24"/>
    </div>
    <u-select v-model="show" :list="typeList"/>
    <u-table>
      <u-tr>
        <u-th width="33%" v-for="column in columns" :key="column.prop">{{ column.label }}</u-th>
      </u-tr>
      <u-tr v-for="(row, i) in list" :key="i">
        <u-th width="33%" v-for="column in columns" :key="column.prop">{{ row[column.prop] }}</u-th>
      </u-tr>
    </u-table>
  </section>
</template>

<style scoped lang="scss">
.AppDutyInfo {
  padding: 0 16px;

  .select {
    text-align: right;
    padding: 32px 0;
  }
}
</style>
