<template>
  <div class="list">
    <div class="list-content">
      <flexbox class="header">
        <div v-photo="data.createUser"
             v-lazy:background-image="$options.filters.filterUserLazyImg(data.createUser.img)"
             class="div-photo head-img"></div>
        <div class="name-time">
          <span class="name">{{data.createUser.realname}}</span>
          <span class="time">{{data.createtime}}</span>
        </div>
        <div class="rt-setting">
          <span class="bg-color"
                :style="{ 'background-color': getStatusColor(data.examineStatus) }"></span>
          <span class="dep">
            <span>{{data.categoryTitle}} - </span>
            <span>{{getStatusName(data.examineStatus)}}</span>
          </span>
          <!-- 编辑 -->
          <el-dropdown v-if="data.permission && (data.permission.isChecked || data.permission.isUpdate || data.permission.isDelete)"
                       @command="handleCommand"
                       trigger="click">
            <i style="color:#CDCDCD; cursor: pointer;"
               class="el-icon-arrow-down el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="data.permission && data.permission.isChecked"
                                command="withdraw">撤回</el-dropdown-item>
              <el-dropdown-item v-if="data.permission && data.permission.isUpdate"
                                command="edit">编辑</el-dropdown-item>
              <el-dropdown-item v-if="data.permission && data.permission.isDelete"
                                command="delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </flexbox>
      <div class="row"
           @click="checkDetail(data)">
        <p v-if="data.content"
           class="text">{{data.content}}</p>
        <p v-if="data.causeTitle"
           class="title">{{data.causeTitle}}</p>
      </div>
      <div class="accessory"
           v-if="data.file.length > 0 || data.img.length > 0">
        <!-- 图片 -->
        <div class="upload-img-box">
          <div v-for="(imgItem, k) in data.img"
               :key="k"
               class="img-list"
               @click="imgZoom(data.img, k)">
            <img v-lazy="imgItem.filePath">
          </div>
        </div>
        <!-- 附件 -->
        <div class="accessory-box">
          <file-cell v-for="(file, fileIndex) in data.file"
                     :key="fileIndex"
                     :data="file"
                     :cellIndex="fileIndex"></file-cell>
        </div>
      </div>
      <!-- 关联业务 -->
      <div class="related-business"
           v-if="relatedListData.contacts.length > 0 || relatedListData.customer.length > 0 || relatedListData.business.length > 0 || relatedListData.contract.length > 0">
        <div class="label">关联业务</div>
        <div v-for="(items, key) in relatedListData"
             :key="key">
          <related-business-cell v-for="(item, itemIndex) in items"
                                 :data="item"
                                 :cellIndex="itemIndex"
                                 :type="key"
                                 :key="itemIndex"
                                 :showFoot="false"
                                 @click.native="checkRelatedDetail(key, item)">
          </related-business-cell>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import RelatedBusinessCell from '@/views/OAManagement/components/relatedBusinessCell'
import FileCell from '@/views/OAManagement/components/fileCell'

export default {
  name: 'examine-cell', // 审批cell
  components: {
    RelatedBusinessCell,
    FileCell
  },
  mixins: [],
  computed: {
    relatedListData() {
      return {
        contacts: this.data.contactsList || [],
        customer: this.data.customerList || [],
        business: this.data.businessList || [],
        contract: this.data.contractList || []
      }
    }
  },
  watch: {},
  data() {
    return {}
  },
  props: {
    data: Object
  },
  mounted() {},
  methods: {
    // 获取状态名称  0 未审核 1 审核通过 2 审核拒绝 3 审核中 4 已撤回
    getStatusName(status) {
      if (status == 0) {
        return '待审'
      } else if (status == 1) {
        return '审核通过'
      } else if (status == 2) {
        return '审核拒绝'
      } else if (status == 3) {
        return '审核中'
      } else if (status == 4) {
        return '撤回'
      }
      return ''
    },
    getStatusColor(status) {
      if (status == 0) {
        return '#F3A633'
      } else if (status == 1) {
        return '#93E06D'
      } else if (status == 2) {
        return '#FF0000'
      } else if (status == 3) {
        return '#F3A633'
      } else if (status == 4) {
        return '#FF0000'
      }
      return ''
    },
    // 放大图片
    imgZoom(images, k) {
      this.$bus.emit('preview-image-bus', {
        index: k,
        data: images.map(function(item, index, array) {
          return {
            url: item.filePath,
            name: item.name
          }
        })
      })
    },
    // 编辑 删除 撤回
    handleCommand(command) {
      this.$emit('on-handle', { type: command, data: { item: this.data } })
    },
    // 查看详情
    checkDetail(data) {
      this.$emit('on-handle', { type: 'view', data: { item: this.data } })
    },
    // 关联详情
    checkRelatedDetail(type, data) {
      this.$emit('on-handle', {
        type: 'related-detail',
        data: { type: type, item: data }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../styles/content.scss';

.list {
  margin-bottom: 20px;
  vertical-align: middle;
  .list-content {
    padding: 0 10px 10px 0;
    .header {
      margin-bottom: 15px;
      @include color9;
      font-size: 12px;
      .head-img {
        width: 35px;
        height: 35px;
        border-radius: 17.5px;
      }
      .name-time {
        display: inline-block;
        margin-left: 13px;
        flex: 1;
        .name {
          font-size: 15px;
          color: #333333;
          display: block;
          margin-bottom: 5px;
        }
      }
      .rt-setting {
        float: right;
        line-height: 30px;
        .dep {
          color: #333333;
          margin-right: 20px;
        }
        img {
          width: 16px;
          @include cursor;
          @include v-align;
        }
        .bg-color {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
    }
    .row {
      white-space: pre-wrap;
      word-wrap: break-word;
      letter-spacing: 0.5px;
      line-height: 18px;
      cursor: pointer;
      color: #3e84e9;
      .text {
        padding-bottom: 10px;
      }
      .title {
        @include color9;
        font-size: 13px;
        padding-bottom: 10px;
      }
    }
    .accessory {
      .upload-img-box {
        margin: 10px 0;
        .img-list {
          display: inline-block;
          position: relative;
          margin-right: 10px;
          width: 80px;
          height: 60px;
          line-height: 60px;
          cursor: pointer;
          img {
            width: 80px;
            height: 60px;
          }
          .img-hover {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            text-align: center;
            font-size: 12px;
            color: #fff;
            display: none;
            span {
              @include cursor;
              display: inline-block;
            }
          }
        }
        .img-list:hover {
          .img-hover {
            display: inline-block;
          }
        }
      }
    }
    .related-business {
      margin: 15px 0;
      .label {
        font-size: 13px;
        margin-bottom: 7px;
        color: #666;
      }
    }
  }
}
.list:not(:last-child) {
  .list-content {
    border-bottom: 1px solid #e6e6e6;
  }
}
</style>
