<template>
  <div class="ibps-cell-wrapper">
    <approval-opinion
      v-model="inputValue"
      :label="label"
      :name="name"
      :size="size"
      :border="border"
      :disabled="disabled"
      :readonly="readonly"
      :required="required"
      :clearable="clearable"
      :clickable="clickable"
      :is-link="isLink"
      :error="error"
      :error-message="errorMessage"
      :placeholder="placeholder"

      :arrow-direction="arrowDirection"
      :label-class="labelClass"
      :label-width="labelWidth"
      :label-align="labelAlign"
      :input-align="inputAlign"
      :error-message-align="errorMessageAlign"
      :autosize="autosize"
      :left-icon="leftIcon"
      :right-icon="rightIcon"
      :icon-prefix="iconPrefix"
      :rules="rules"
      :has-common-statment="hasCommonStatment"
    />
    <van-cell v-if="data && data.length >0" class="table-wrapper">
      <div class="table-responsive">
        <table v-if="layout==='horizontal'" class="table">
          <tbody>
            <tr v-for="(item,i) in data" :key="item.id+i">
              <!-- 水平可回撤下面代码 -->
              <!-- <template v-for="(option,j) in options">
                <td v-if="option.checked" :key="j">
                  {{ option.label }}:  {{ item[option.value]|filterData(option,item) }}
                </td>
              </template> -->
              <td class="table-flex">
                <template v-for="(option,j) in options">
                  <div
                    v-if="option.checked"
                    :key="j"
                    :style="{'order':ordByText(option.value),'color':ordByText(option.value)===-4?item.nodeColor:''}"
                    :class="{'table-flex-status':ordByText(option.value)===-4}"
                  >
                    {{ option.label }}:  {{ item[option.value]|filterData(option,item) }}
                  </div>
                </template>
              </td>
            </tr>
          </tbody>
        </table>
        <template v-else>
          <!-- <table v-for="(item,i) in data" :key="item.id+i" class="table" style="border-bottom: 1px solid #eee;">
            <tr v-for="(option,j) in options" :key="j">
              <td v-if="option.checked">
                {{ option.label }}: {{ item[option.value]|filterData(option,item) }}
              </td>
            </tr>
          </table> -->
          <table class="table" style="border-bottom: 1px solid #eee;">
            <tr v-for="(item,i) in data" :key="item.id+i">
              <td class="table-flex">
                <template v-for="(option,j) in options">
                  <div
                    v-if="option.checked"
                    :key="j"
                    :style="{'order':ordByText(option.value),'color':ordByText(option.value)===-4?item.nodeColor:''}"
                    :class="{'table-flex-status':ordByText(option.value)===-4}"
                  >
                    {{ option.label }}:  {{ item[option.value]|filterData(option,item) }}
                  </div>
                </template>
              </td>
            </tr>
          </table>
        </template>
      </div>
    </van-cell>
  </div>
</template>
<script>
import Utils from '@/utils/util'
import { format, dateDealFmt } from '@/utils/fecha'
import FieldMixin from '@/mixins/field'
import ApprovalOpinion from '@/business/platform/bpmn/components/approval-opinion'

export default {
  components: {
    ApprovalOpinion
  },
  filters: {
    filterData(val, config, data) {
      if (config.value === 'auditorName') {
        if (Utils.isEmpty(data.auditor) &&
          Utils.isNotEmpty(data.qualifiedExecutor)) {
          // 会签  审批人处理
          const name = []
          for (var i = 0; i < data.qualifiedExecutor.length; i++) {
            name.push(data.qualifiedExecutor[i].executor)
          }
          val = name.join(' ')
        }
      } else if (config.value === 'completeTime') { // 审批时间
        if (Utils.isNotEmpty(val)) {
          let dateObj = val
          const dateFormat = 'yyyy-MM-dd HH:mm:ss'
          try {
            if (typeof dateObj === 'number') {
              dateObj = new Date(dateObj)
            }
            if (Object.prototype.toString.call(dateObj) !== '[object Date]' || isNaN(dateObj.getTime())) {
              // 需要把字符串转换日期格式
              dateObj = dateDealFmt.dealFmt(dateObj, dateFormat)
            }
            val = format(dateObj, dateFormat)
          } catch (error) {
            console.error('转换日期格式错误：', error)
            val = ''
          }
        }
      }
      return val
    }
  },
  mixins: [FieldMixin],
  props: {
    inputAlign: {
      type: String,
      default: 'left'
    },
    data: {
      type: Array
    },
    hasCommonStatment: {
      type: Boolean,
      default: true
    },
    layout: {
      type: String,
      default: 'horizontal'
    },
    options: {
      type: Array,
      default: () => {
        return [{
          checked: true,
          value: 'statusName',
          label: '审批状态'
        }, {
          checked: true,
          value: 'auditorName',
          label: '审批人'
        }, {
          checked: true,
          value: 'opinion',
          label: '审批意见'
        }, {
          checked: true,
          value: 'completeTime',
          label: '审批时间'
        }]
      }
    }
  },
  watch: {
    value: {
      handler(val, oldVal) {
        this._setInputValue()
      },
      immediate: true
    },
    inputValue(val, oldVal) {
      if (val !== oldVal) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    ordByText(val) {
      if (val === 'statusName') return -4
      else if (val === 'auditorName') return -3
      else if (val === 'opinion') return -2
      else if (val === 'completeTime') return -1
      else return 0
    }
  }
}
</script>
<style lang="scss" scoped>
  .ibps-cell-wrapper{
    .table-wrapper{
      padding-top: 0;
      .table{
        .table-flex{
          display: flex;
          flex-direction: column;
          color: #666666;
          border-bottom: 1px solid #E6E6E6;
          font-size: 12px;
          .table-flex-status{
            font-size: 14px;
            padding: 8px 0;
          }
          &>div,&>td{
            padding: 2px 0;
          }
        }
        tr:last-child {
          .table-flex{
            border-bottom:0;
          }
        }
      }
    }
  }
</style>
