<template>
  <div>
    <el-form ref="form"
             v-if="examineInfo.examineType == 2"
             :model="form"
             :rules="rules"
             label-position="top"
             class="crm-create-box">
      <el-form-item prop="name"
                    class='crm-create-item'>
        <div slot="label"
             style="display: inline-block;">
          <div style="margin:5px 0;font-size:12px;word-wrap:break-word;word-break:break-all;">
            审核人
            <span style="color:#999;">
            </span>
          </div>
        </div>
        <xh-user-cell :infoType="types"
                      @value-change="fieldValueChange"></xh-user-cell>
      </el-form-item>
    </el-form>
    <flexbox v-else-if="examineInfo.examineType == 1"
             class="fixed-examine"
             wrap="wrap">
      <el-popover v-for="(item, index) in examineInfo.examineSteps"
                  :key="index"
                  placement="bottom"
                  :disabled="item.userList.length==0"
                  trigger="hover"
                  :content="item.userList|contentFilters">
        <div slot="reference"
             class="fixed-examine-item">
          <img src="@/assets/img/examine_head.png" />
          <div class="detail">{{item|detail}}</div>
          <div class="step">{{(index+1)|step}}</div>
        </div>
      </el-popover>
    </flexbox>

  </div>
</template>
<script type="text/javascript">
import { crmCreateExamineFlow } from '@/api/customermanagement/common'
import { oaCreateExamineFlow } from '@/api/oamanagement/examine'

import { XhUserCell } from '@/components/CreateCom'
import Nzhcn from 'nzh/cn'

export default {
  name: 'create-examine-info',
  components: {
    XhUserCell
  },
  computed: {},
  filters: {
    detail: function(data) {
      if (data.stepType == 2) {
        return data.userList.length + '人或签'
      } else if (data.stepType == 3) {
        return data.userList.length + '人会签'
      } else if (data.stepType == 1) {
        return '负责人主管'
      } else if (data.stepType == 4) {
        return '上一级审批人主管'
      }
    },
    step: function(index) {
      return '第' + Nzhcn.encodeS(index) + '级'
    },
    contentFilters: function(array) {
      return array
        .map(item => {
          return item.realname
        })
        .join('、')
    }
  },
  data() {
    return {
      form: {
        name: ''
      },
      rules: {
        name: [{ required: true, message: '审批人不能为空', trigger: 'blur' }]
      },
      // 审核信息 examineType 1 固定审批 2 授权审批
      examineInfo: {}
    }
  },
  props: {
    // CRM类型
    types: {
      type: String,
      default: ''
    },
    // 办公审批 传ID
    typesId: {
      type: [String, Number],
      default: ''
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      let reqeust = {
        oa_examine : oaCreateExamineFlow,
        crm_contract : crmCreateExamineFlow,
        crm_receivables : crmCreateExamineFlow,
      }[this.types]

      let params = {}
      if (this.types == 'oa_examine') {
        params.categoryId = this.typesId
      } else {
        params.categoryType = this.types == 'crm_contract' ? 1 : 2 // 1 合同 2 回款
      }
      reqeust(params)
        .then(res => {
          this.examineInfo = res.data
          this.$emit('value-change', {
            examineType: res.data.examineType, // 审批类型
            value: [] // 审批信息
          })
        })
        .catch(() => {})
    },
    validateField(result) {
      if (this.examineInfo.examineType == 2) {
        // 授权审批人 需要验证关联人
        this.$refs.form.validate(valid => {
          if (valid) {
            result() // 成功回调
          } else {
            return false
          }
        })
      } else {
        result() // 成功回调
      }
    },
    // 字段的值更新
    fieldValueChange(data) {
      this.form.name = data
      this.$emit('value-change', {
        examineType: this.examineInfo.examineType, // 审批类型
        value: data.value // 审批信息
      })
      this.$refs.form.validateField('name')
    }
  }
}
</script>
<style lang="scss" scoped>
/** 将其改变为flex布局 */
.crm-create-box {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}

.crm-create-item {
  flex: 0 0 50%;
  flex-shrink: 0;
  // overflow: hidden;
  padding-bottom: 10px;
}

.el-form-item /deep/ .el-form-item__label {
  line-height: normal;
  font-size: 13px;
  color: #333333;
  position: relative;
  padding-left: 8px;
  padding-bottom: 0;
}

.el-form /deep/ .el-form-item {
  margin-bottom: 0px;
}

.el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
  position: absolute;
  left: 0;
  top: 5px;
}

// 固定审批信息
.fixed-examine {
  padding: 0px 10px;
  text-align: center;
  .fixed-examine-item {
    padding: 10px 20px;
    img {
      width: 40px;
      height: 40px;
    }
    .detail {
      color: #777777;
      font-size: 12px;
      padding: 2px 0;
      transform: scale(0.8, 0.8);
    }
    .step {
      color: #333333;
      font-size: 12px;
    }
  }
}
</style>
