<template>
  <div
    :style="{'paddingTop':marginTop,'paddingBottom':marginBottom,'paddingLeft':marginLeft,'paddingRight':marginRight}">
    <el-card class="box-card" shadow="always"
             :body-style="{'paddingTop':bodyPaddingTop,'paddingBottom': '80px','paddingLeft':bodyPaddingLeft,'paddingRight':bodyPaddingRight,'height':cardHeight,'min-height':minHeight}">
      <div slot="header" class="clearfix" v-if="showHeader" style="margin-top: 0">
        <ButtonTitle :label="$t(label) " >
          <CustomButton v-if="showSave"    icon="el-icon-circle-check" type="primary"  :label="$t('common.confirm')"  @handleClick="$emit('Confirm')"/>
          <CustomButton  v-if="showCancel"  icon="el-icon-remove-outline" :label="$t('common.cancel')"   @handleClick="$emit('cancel')" />
        </ButtonTitle>
        <span class="audit" v-if="showAudit">
          <img style="width: 24px;height: 25px;vertical-align: middle" :src="imgSelect(auditStatus)">
          <a :class="binClass(auditStatus)" style="vertical-align: middle">{{ dictFormatter(auditStatus) }}</a></span>
        <slot name="otherHeader"/>
      </div>
      <slot name="default"/>
    </el-card>
  </div>

</template>

<script>
import {mapGetters} from "vuex";
import auditImg from '../../assets/audit/shenhe.png'
import auditSecondImg from '@/assets/audit/shenhesecond.png'
import ButtonTitle from "./ButtonTitle.vue";
import CustomButton from "./CustomButton.vue";

export default {
  name: "CustomCard",
  components: {CustomButton, ButtonTitle},
  props: {
    //卡片标题
    label: {
      type: String,
      default: '',
    },
    auditStatus: {
      type: String,
      default: '',
    },
    showAudit: {
      type: Boolean,
      default: false
    },
    marginTop: {
      type: String,
      default: '0px'
    },
    marginBottom: {
      type: String,
      default: '0px'
    },
    marginLeft: {
      type: String,
      default: '0px'
    },
    marginRight: {
      type: String,
      default: '0px'
    },
    bodyPaddingTop: {
      type: String,
      default: '0'
    },
    //textArea类型的input框 43px
    bodyPaddingBottom: {
      type: String,
      default: '16px'
    },
    bodyPaddingLeft: {
      type: String,
      default: '5px'
    },
    bodyPaddingRight: {
      type: String,
      default: '5px'
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    cardHeight: {
      type: String,
      default: '150px'
    },
    minHeight:{
      type: String,
      default: '0'
    },
    shadow: {
      type: String,
      default: 'hover'
    },
    showSave:{
      type : Boolean,
      default :false,
    },
    showCancel:{
      type : Boolean,
      default :false,
    }
  },
  data() {
    return {
      auditImg: auditImg,
      auditSecondImg: auditSecondImg,
    };
  },
  computed: {
    ...mapGetters(["dict"]),
  },
  methods: {
    imgSelect(cellValue) {
      const dicts = this.dict['audit_status'] || [];
      const target = dicts.filter(
        ({value}) => String(value) === String(cellValue)
      );

      if (target.length > 0 && target[0].value === this.AuditStatus.AUDITOR_ONE.toString()) {
        return this.auditImg
      } else {
        return this.auditSecondImg
      }
    },
    binClass(cellValue) {
      const dicts = this.dict['audit_status'] || [];
      const target = dicts.filter(
        ({value}) => String(value) === String(cellValue)
      );
      if (target.length > 0) {
        if (target[0].value === this.AuditStatus.AUDITOR_ONE.toString()) {
          return 'colorOne'
        } else if (target[0].value === this.AuditStatus.AUDITOR_TWO.toString()) {
          return 'colorTwo'
        } else {
          return 'colorNormal'
        }
      }
    },
    dictFormatter(cellValue) {
      const dicts = this.dict['audit_status'] || [];
      const target = dicts.filter(
        ({value}) => String(value) === String(cellValue)
      );

      return target && target.length > 0 ? target[0].label : "";
    },
  }
}
</script>

<style scoped>
::v-deep .el-card__header {
  padding-top: 16px;
  border-bottom: none !important;
  padding-bottom: 1px !important;
}



.colorOne {
  color: #DE9314;
}

.colorTwo {
  color: #3592EB;
}

.colorNormal {
  color: #000;
}

.audit {
  font-size: 20px;
  font-weight: 550;
  margin-right: 11px;
  float: right;
}

</style>
