<template>
  <div class="templateVal">
    <!--                如果有值-->
    <div v-if="row[column[data.propId]] || row[column[data.propId]] === 0">
      <!--                  判断类型-->
      <div v-if="data.jnpfKey === 'numInput'">
        {{ row[column[data.propId]] === 0 ? '0' : row[column[data.propId]] }}
      </div>
      <div v-else-if="data.jnpfKey === 'uploadImg' || data.jnpfKey === 'uploadFz'">
        <template v-if="data.jnpfKey === 'uploadFz'">
          <span style="color: #1890ff" v-for="(i, k) in getImgFun(row[column[data.propId]])" :key="k">{{ i.name }}</span>
        </template>
        <!--                    {{ getImgFun(scope.row[columnDict[item.propId]],item.jnpfKey) }}-->
        <template v-else-if="getImgFun(row[column[data.propId]])[0].url">
          <template v-for="(imgEle, imgKey) in getImgFun(row[column[data.propId]])">
            <el-image
              v-if="imgKey < 3"
              :key="imgKey"
              style="width: 50px; height: 50px; margin-right: 10px"
              :src="getImgUrl() + imgEle.url"
              @click="imgShowClick(getImgFunList(row[column[data.propId]]))"
            >
            </el-image>
          </template>
          <el-tag style="vertical-align: text-bottom" v-if="getImgFun(row[column[data.propId]]).length > 3" type="info"> + {{ getImgFun(row[column[data.propId]]).length - 3 }}</el-tag>
        </template>
        <span v-else>{{ row[column[data.propId]] }}</span>
      </div>
      <div v-else-if="data.jnpfKey === 'switch'">
        <el-switch disabled v-model="row[column[data.propId]]" active-value="1" inactive-value="0"></el-switch>
      </div>
      <div :class="[tableSpacing === 1 ? 'table_cell_clamp' : '']" v-else-if="data.jnpfKey === 'radio' || data.jnpfKey === 'select' || data.jnpfKey === 'checkbox'">
        {{ getOptionData(row[column[data.propId]], data.propId) }}
      </div>
      <div v-else-if="data.jnpfKey === 'date' || data.jnpfKey === 'datetime'">
        {{ getSetData(row[column[data.propId]], data.propId, 'format') }}
      </div>
      <div :class="[tableSpacing === 1 ? 'table_cell_clamp' : '']" v-else>
        {{ row[column[data.propId]] }}
      </div>
    </div>
    <div v-else>
      <div v-if="data.jnpfKey === 'numInput'">
        {{ row[column[data.propId]] === 0 ? '0' : row[column[data.propId]] }}
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment/moment'

export default {
  name: 'tableColumn',
  props: {
    row: {
      type: Object,
      require: true
    },
    column: {
      type: Object,
      require: true
    },
    data: {
      type: Object,
      require: true
    },
    comForm: {
      type: Object,
      require: true
    },
    tableSpacing: {
      type: Number,
      require: true
    }
  },
  data() {
    return {}
  },
  methods: {
    //图片类型处理
    getImgFun(value) {
      try {
        const toObj = JSON.parse(value)
        if (Array.isArray(toObj) && toObj[0].url) {
          return toObj
        }
      } catch {}
      return value
    },
    getImgUrl() {
      let ImgUrl
      if (process.env.NODE_ENV === 'development') {
        ImgUrl = this.define.comUrl
      } else {
        ImgUrl = document.location.origin
      }
      return ImgUrl + '/'
    },
    getImgFunList(val) {
      const list = this.getImgFun(val)
      if (Array.isArray(list) && list.length)
        return list.map((i) => {
          let ImgUrl
          if (process.env.NODE_ENV === 'development') {
            ImgUrl = this.define.comUrl
          } else {
            ImgUrl = document.location.origin
          }
          return ImgUrl + '/' + i.url
        })
    },
    imgShowClick(list) {
      this.imgShowVisible = true
      this.$nextTick(() => {
        this.$refs.imgShowView.init(list)
      })
    },
    //下拉属性的组件  如果key和value值不相同 查询title
    getOptionData(v, id) {
      let list = []
      let str = v
      this.comForm.fields.forEach((item) => {
        if (item.__vModel__ === id) {
          list = item.__slot__.options
        }
      })
      if (list.length) {
        let obj = list.find((i) => i.id == v)
        if (obj) str = obj.fullName
      }
      return str
    },
    //获取下拉框值
    getOption(key, id) {
      let list = []
      if (key === 'radio' || key === 'select' || key === 'checkbox') {
        this.comForm.fields.forEach((item) => {
          if (item.__vModel__ === id) {
            list = item.__slot__.options
          }
        })
      }
      if (key === 'cascader') {
        this.comForm.fields.forEach((item) => {
          if (item.__vModel__ === id) {
            list = item.options
          }
        })
      }
      return list
    },
    getSetData(val, propId, type) {
      let str = this.getFormat(propId, type)
      if (str === 'yyyy-MM-dd') {
        str = 'yyyy-MM-DD'
      } else if (str === 'yyyy-MM-dd HH:mm:ss') {
        str = 'yyyy-MM-DD HH:mm:ss'
      }
      return moment(val).format(str)
    },
    //获取时间值类型
    getFormat(id, type) {
      let str
      this.comForm.fields.forEach((item) => {
        if (item.__vModel__ === id) {
          if (type === 'format') {
            str = item.format
          }
        }
      })
      return str
    }
  }
}
</script>

<style scoped></style>
