<template>
  <div>
    <el-dialog
      title="详情"
      :visible.sync="dialogTableVisible"
      :before-close="cancel"
      width="1000"
    >
      <div class="user">
        <span>姓名：</span>
        <span>{{ detailsList.name }}</span>
      </div>
      <div class="user">
        <span> 手机号：</span>
        <span>{{ detailsList.phone }}</span>
      </div>
      <el-table
        class="table"
        ref="table_form"
        :data="detailsList.reservationRecordList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="申请时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="预约时段" align="center">
          <template slot-scope="scope">
            {{ scope.row.startTime }}-{{scope.row.endTime}}
          </template>
        </el-table-column>
        <template v-if="addCustomList.length>0">
          <el-table-column
            align="center"
            :label="item.customName"
            v-for="(item, index) in addCustomList"
            :key="index"
          >
            <template slot-scope="scope" v-if="scope.row.contents[index].customNameVal">
              <el-image
                v-if="item.customType === '图片'"
                style="width: 70px; height: 70px"
                :src="scope.row.contents[index].customNameVal"
                :preview-src-list="[scope.row.contents[index].customNameVal]"
              >
                <div slot="error" class="image-slot">暂无照片</div>
              </el-image>
              <p v-else>{{ scope.row.contents[index].customNameVal }}</p>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getContextById } from "@/api/user_manage";

export default {
  name: "",
  filters: {
    matchNull(str) {
      if (!str) {
        return "-";
      } else {
        return str;
      }
    },
  },
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: false,
    },
    detailsList: {
      type: Object,
    },
  },
  components: {},
  data() {
    return {
      addCustomList: [], //自定义字段模板
    };
  },
  methods: {
    cancel() {
      this.$emit("dialog", false);
    },
    // 获取自定义字段模板
    getContextById(adminId) {
      getContextById(adminId).then((res) => {
        this.addCustomList = res.data;
      });
    },
  },
  computed: {},
  watch: {
    detailsList(n){
      if(n.reservationRecordList.length>0){
        n.reservationRecordList.forEach(i=>{
        if(!i.contents[0] && this.addCustomList.length>0){
          i.contents=this.addCustomList
        }
      })
      }
    }
  },
  created() {
    this.getContextById(this.$store.getters.adminId);
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.user {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}
</style>
