<template>
  <div class="order_detail">
    <el-row :gutter="20">
      <el-col :md="24" class="order_detail_body">
        <el-card shadow="hover">
          <el-col :md="21">
            <h1 class="title">
              <svg-icon class="title_icon" icon-class="hongqi" />待办信息
            </h1>
            <p class="title_sub">
              <span class="green">{{ type }}</span> 足力健
            </p>
          </el-col>
          <el-col :md="24" class="order_detail_content">
            <el-col :md="6" class="order_detail_item">类型：{{ type }}</el-col>
            <el-col :md="6" class="order_detail_item">标题：{{ title }}</el-col>
            <el-col :md="6" class="order_detail_item">内容：{{ content }}</el-col>
            <el-col :md="6" class="order_detail_item">待联系人：{{ name }}</el-col>
            <el-col :md="6" class="order_detail_item">待联系人电话：{{ phone }}</el-col>
            <el-col :md="6" class="order_detail_item">是否提醒：{{ isRemind }}</el-col>
            <el-col :md="6" class="order_detail_item">提醒时间：{{ remindDate }}</el-col>
            <el-col :md="6" class="order_detail_item">状态：{{ state }}</el-col>
          </el-col>
        </el-card>
      </el-col>
      <!-- <el-col :md="24">
        <el-card shadow="hover" class="order_record">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="催单记录(2)" name="first">
              <div class="tab_body">
                催单记录
              </div>
            </el-tab-pane>
            <el-tab-pane label="录音记录(3)" name="second">
              <div class="tab_body">
                录音记录
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import { getTodo } from '@/api/todoManagement/todoList'
import { mapGetters } from 'vuex'
import { filterContent } from '@/utils'

export default {
  name: 'Detail',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeName: 0,
      type: '',
      state: '',
      isRemind: '',
      remindDate: '',
      title: '',
      content: '',
      name: '',
      phone: '',
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  created () {
    if (this.rowid) {
      this.getDetail(this.rowid)
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 获取详情
    getDetail (rid) {
      getTodo(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          console.log(res.F_Type == 0)
          if (res.F_Type == 0) {
            this.type = '日程'
          } else {
            this.type = '待联系人'
          }
          if (res.F_State == 0) {
            this.state = '未完成'
          } else {
            this.state = '已完成'
          }
          if (res.F_IsRemind == 0) {
            this.isRemind = '否'
          } else {
            this.isRemind = '是'
          }
          this.remindDate = res.F_Remindertime;
          this.title = res.F_Name;
          this.content = res.F_Content;
          this.name = res.F_PeopleName;
          this.phone = res.F_Tel;
        }
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.order_detail {
  .el-col {
    margin-bottom: 20px;
  }
  .el-icon-time {
    color: #d81e06;
  }
  .el-card__header {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #f5f5f6;
  }
  .order_file {
    .el-card__body {
      padding: 22px 0 0 0;
      text-align: center;
    }
  }
  .order_steps {
    .el-step__icon-inner {
      display: none;
    }
  }
  .order_record {
    .el-card__body {
      padding: 0;
    }
    .el-tabs__header {
      padding: 0px 20px;
      background-color: #f5f5f6;
      .el-tabs__item {
        font-size: 16px;
        height: 47px;
        line-height: 47px;
      }
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.order_detail {
  .order_detail_body {
    margin-bottom: 20px;
    .round_img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      overflow: hidden;
      margin: 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-size: 20px;
      .title_icon {
        color: #d81e06;
        font-size: 16px;
        margin-right: 20px;
      }
    }
    .title_sub {
      font-size: 14px;
      color: #666666;
    }
    .order_detail_content {
      background-color: #f5f5f6;
      padding-top: 20px;
      color: #4c4c4c;
      font-size: 14px;
      .order_detail_item {
        margin-bottom: 10px;
        .order_content {
          margin-top: 10px;
        }
        .order_file {
          position: relative;
          cursor: pointer;
          .img_mask {
            display: none;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 22px;
            text-align: right;
            z-index: 1;
            i {
              font-size: 20px;
              line-height: 22px;
              display: inline-block;
              margin-right: 15px;
              color: #fff;
            }
          }
          p {
            margin-top: 5px;
            padding-left: 14px;
            padding-right: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .file_icon {
            height: 68px;
            line-height: 68px;
            font-size: 68px;
            color: #409eff;
          }
        }
        .order_file:hover .img_mask {
          display: block;
        }
      }
    }
  }
  .green {
    color: #00c1de;
  }
  .done {
    color: #198120;
  }
  .red {
    color: #d81e06;
  }
  .yellow {
    color: #e6a23c;
  }
  .order_steps {
    // height: 240px;
    .el-step__icon-inner {
      display: none;
    }
  }

  .tab_body {
    padding: 0 20px 20px 20px;
  }
}
</style>
