<template>
  <div>
    <!-- 普通卡片布局 -->
    <div v-if="cardInfo.value == 1" class="flex-card" :style="cardBoxStyle">
      <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
        <el-card :style="cardStyle">
          <div slot="header" :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}" class="clearfix">
            <div class="titleLeft" :style="titleStyle">
              <span v-if="cardInfo.title.text != ''">
                {{ cardInfo.title.text + ':' }}
              </span>
              <el-tooltip v-if="cardInfo.title.model != ''" effect="dark" placement="right-start">
                <div slot="content">
                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
                </div>
                <span>
                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
                </span>
              </el-tooltip>
            </div>
            <div class="titleRight" :style="subTitleStyle">
              <span v-if="cardInfo.subTitle.text != ''">
                {{ cardInfo.subTitle.text + ':' }}
              </span>
              <el-tooltip v-if="cardInfo.subTitle.model != ''" effect="dark" placement="right-start">
                <div slot="content">
                  {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
                </div>
                <span>
                  {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
                </span>
              </el-tooltip>
            </div>
          </div>
          <div v-if="cardInfo.info.data.length > 0" style="padding: 15px" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
            <el-row :gutter="10">
              <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
                <div class="flex-row" :style="infoStyle">
                  <div class="left" v-if="item.text != ''">{{ item.text + ':' }}</div>
                  <div class="right">
                    <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                      <div slot="content">
                        {{ getModelName(item, dataInfo, 'info') }}
                      </div>
                      <span>
                        {{ getModelName(item, dataInfo, 'info') }}
                      </span>
                    </el-tooltip>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="footer" v-if="btnList.length > 0">
              <div class="btns">
                <template v-for="(item, i) in btnList">
                  <template v-if="item.value == 'edit'">
                    <el-button size="mini" type="text" :key="i" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
                      >{{ item.label }}
                    </el-button>
                  </template>
                  <template v-if="item.value == 'remove'">
                    <el-button
                      size="mini"
                      type="text"
                      :key="i"
                      class="JNPF-table-delBtn"
                      :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1"
                      @click="columnBtnsHandel(item.value, dataInfo, item)"
                      >{{ item.label }}
                    </el-button>
                  </template>
                  <template v-if="item.value == 'detail'">
                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">
                      {{ item.label }}
                    </el-button>
                  </template>
                  <template v-if="item.value == 'rowJournal'">
                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">
                      {{ item.label }}
                    </el-button>
                  </template>
                </template>
              </div>
              <div class="check">
                <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 图文卡片布局(上下) -->
    <div v-else-if="cardInfo.value == 2" class="flex-card" :style="cardBoxStyle">
      <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
        <el-card :style="cardStyle">
          <div :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}">
            <div :style="titleStyle">
              <span v-if="cardInfo.title.text != ''">
                {{ cardInfo.title.text + ':' }}
              </span>
              <el-tooltip v-if="cardInfo.title.model != ''" effect="dark" placement="right-start">
                <div slot="content">
                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
                </div>
                <span>
                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
                </span>
              </el-tooltip>
            </div>
          </div>
          <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px', width: '94%', marginLeft: '3%' }" :src="imgVal(dataInfo)" alt="">
            <div slot="error" class="image-slot">暂无图片</div>
          </el-image>
          <div v-if="cardInfo.info.data.length > 0" style="padding: 15px" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
            <el-row :gutter="10">
              <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
                <div class="flex-row" :style="infoStyle">
                  <div class="left" v-if="item.text != ''">{{ item.text + ':' }}</div>
                  <div class="right">
                    <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                      <div slot="content">
                        {{ getModelName(item, dataInfo, 'info') }}
                      </div>
                      <div>
                        {{ getModelName(item, dataInfo, 'info') }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="footer" v-if="btnList.length > 0">
              <div class="btns">
                <template v-for="(item, i) in btnList">
                  <template v-if="item.value == 'edit'">
                    <el-button size="mini" type="text" :key="i" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
                      >{{ item.label }}
                    </el-button>
                  </template>
                  <template v-if="item.value == 'remove'">
                    <el-button
                      size="mini"
                      type="text"
                      :key="i"
                      class="JNPF-table-delBtn"
                      :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1"
                      @click="columnBtnsHandel(item.value, dataInfo, item)"
                      >{{ item.label }}
                    </el-button>
                  </template>
                  <template v-if="item.value == 'detail'">
                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">
                      {{ item.label }}
                    </el-button>
                  </template>
                  <template v-if="item.value == 'rowJournal'">
                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">
                      {{ item.label }}
                    </el-button>
                  </template>
                </template>
              </div>
              <div class="check">
                <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 图文卡片布局(左右) -->
    <div v-else-if="cardInfo.value == 3" class="flex-card" :style="cardBoxStyle">
      <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
        <el-card :style="cardStyle">
          <div class="flex">
            <div class="flex-left">
              <div style="width: 100%; height: 180px">
                <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(dataInfo)" alt="">
                  <div slot="error" class="image-slot">暂无图片</div>
                </el-image>
              </div>
            </div>
            <div class="flex-right">
              <div class="item-left" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
                <div v-if="cardInfo.info.data.length > 0" :style="infoStyle" style="width: 100%">
                  <div class="item-row" v-for="(item, index) in cardInfo.info.data" :key="index">
                    <div class="left" v-if="item.text != ''">{{ item.text + ':' }}</div>
                    <div class="right">
                      <!--                      {{ getModelName(item, dataInfo, "info") }}-->
                      <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                        <div slot="content">
                          {{ getModelName(item, dataInfo, 'info') }}
                        </div>
                        <span>
                          {{ getModelName(item, dataInfo, 'info') }}
                        </span>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item-right">
                <div class="item-footer" v-if="btnList.length > 0">
                  <div class="item-btns" v-for="(item, i) in btnList" :key="i">
                    <div v-if="item.value == 'edit'">
                      <el-button size="mini" type="primary" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
                        >{{ item.label }}
                      </el-button>
                    </div>
                    <div v-if="item.value == 'remove'">
                      <el-button size="mini" type="danger" :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo, item)"
                        >{{ item.label }}
                      </el-button>
                    </div>
                    <div v-if="item.value == 'detail'">
                      <el-button size="mini" type="warning" @click="columnBtnsHandel(item.value, dataInfo)">
                        {{ item.label }}
                      </el-button>
                    </div>
                    <div v-if="item.value == 'rowJournal'">
                      <el-button size="mini" type="success" @click="columnBtnsHandel(item.value, dataInfo)">
                        {{ item.label }}
                      </el-button>
                    </div>
                  </div>
                  <div class="check">
                    <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 状态卡片 -->
    <div v-else-if="cardInfo.value == 4" class="flex-card" :style="cardBoxStyle">
      <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
        <el-card :style="cardStyle2(cardInfo.subTitle, dataInfo)">
          <div slot="header" :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}" class="clearfix">
            <div class="titleLeft" :style="titleStyle">
              <span v-if="cardInfo.title.text != ''">
                {{ cardInfo.title.text + ':' }}
              </span>
              <el-tooltip v-if="cardInfo.title.model != ''" effect="dark" placement="right-start">
                <div slot="content">
                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
                </div>
                <span>
                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
                </span>
              </el-tooltip>
            </div>
            <div class="titleRight">
              <!-- <span v-if="cardInfo.subTitle.text != ''">
                {{ cardInfo.subTitle.text + ':' }}
              </span> -->
              <!-- <el-tooltip v-if="cardInfo.subTitle.model != ''" effect="dark" placement="right-start">
                <div slot="content">
                  {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
                </div>
                <span>
                  {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
                </span>
              </el-tooltip> -->
            </div>
          </div>
          <div v-if="cardInfo.info.data.length > 0" style="padding: 15px" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
            <el-row :gutter="10">
              <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
                <div class="flex-row" :style="infoStyle">
                  <div class="left" v-if="item.text != ''">{{ item.text + ':' }}</div>
                  <div class="right">
                    <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                      <div slot="content">
                        {{ getModelName(item, dataInfo, 'info') }}
                      </div>
                      <span>
                        {{ getModelName(item, dataInfo, 'info') }}
                      </span>
                    </el-tooltip>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="footer" v-if="btnList.length > 0">
              <div class="btns">
                <template v-for="(item, i) in btnList">
                  <template v-if="item.value == 'edit'">
                    <el-button size="mini" :key="i" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
                      >{{ item.label }}
                    </el-button>
                  </template>
                  <template v-if="item.value == 'remove'">
                    <el-button
                      size="mini"
                      :key="i"
                      class="JNPF-table-delBtn"
                      :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1"
                      @click="columnBtnsHandel(item.value, dataInfo, item)"
                      >{{ item.label }}
                    </el-button>
                  </template>
                  <template v-if="item.value == 'detail'">
                    <el-button size="mini" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">
                      {{ item.label }}
                    </el-button>
                  </template>
                  <!-- <template v-if="item.value == 'rowJournal'">
                    <el-button size="mini" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">{{ item.label }}</el-button>
                  </template> -->
                </template>
              </div>
              <div class="check">
                <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
              </div>
            </div>
            <!-- <div v-else>
              <el-button size="mini">编辑 </el-button>
              <el-button size="mini">删除 </el-button>
              <el-button size="mini">详情 </el-button>
            </div> -->
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { dataapiDetail, dataapiUrl } from '@/api/systemData/dataInterface'
import { comUrl } from '@/utils/define'

export default {
  props: {
    cardInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    modelList: {
      type: Array,
      default: () => {
        return []
      }
    },
    cardData: {
      type: Array,
      default: () => {
        return []
      }
    },
    columnList: {
      type: Array,
      default: () => {
        return []
      }
    },
    columnDict: {
      type: Object,
      default: () => {
        return {}
      }
    },
    btnList: {
      type: Array,
      default: () => {
        return []
      }
    },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    cardStyle() {
      let style = {
        border: `1px solid ${this.cardInfo.borderColor}`,
        boxShadow: `0 2px ${this.cardInfo.shadowPx}px 0 ${this.cardInfo.shadowColor} !important`,
        backgroundColor: `${this.cardInfo.bgColor} !important`
      }

      return { ...style }
    },
    cardBoxStyle() {
      let style = {
        '--gridTemplateColumns': this.cardInfo.rowNum,
        gap: `${this.cardInfo.gap}px`
      }
      return { ...style }
    },
    infoStyle() {
      let style = {
        fontSize: this.cardInfo.info.size + 'px',
        color: this.cardInfo.info.color
      }
      return { ...style }
    },
    titleStyle() {
      let style = {
        fontSize: this.cardInfo.title.size + 'px',
        color: this.cardInfo.title.color
      }
      return { ...style }
    },
    subTitleStyle() {
      let style = {
        fontSize: this.cardInfo.subTitle.size + 'px',
        color: this.cardInfo.subTitle.color
      }
      return { ...style }
    }
  },
  data() {
    return {
      cardList: []
    }
  },
  async created() {
    await this.columnList.forEach((item) => {
      if (item.propsUrl && item.propsUrl.length) {
        dataapiDetail(item.params.propsUrl).then((res) => {
          let { data, code } = res.data
          if (code == 200) {
            dataapiUrl(data.apiUrl).then((result) => {
              // console.log(result)
              if (this.cardInfo.title.model == item.propId) {
                this.cardInfo.title.apiData = result.data.data
                this.cardInfo.title.apiProps = item.params.apiProps
              }
              if (this.cardInfo.subTitle.model == item.propId) {
                this.cardInfo.title.apiData = result.data.data
                this.cardInfo.title.apiProps = item.params.apiProps
              }
              if (this.cardInfo.info.data.length > 0) {
                this.cardInfo.info.data.map((val) => {
                  if (val.model == item.propId) {
                    val.apiData = result.data.data
                    val.apiProps = item.params.apiProps
                    return val
                  }
                })
              }
            })
          }
          // if(res.)
        })
      }
      if (this.cardInfo.title.model == item.propId) {
        this.cardInfo.title.field = item.field
      }
      if (this.cardInfo.subTitle.model == item.propId) {
        this.cardInfo.subTitle.field = item.field
      }
      if (this.cardInfo.info.data.length > 0) {
        this.cardInfo.info.data.map((val) => {
          if (val.model == item.propId) {
            val.field = item.field
            return val
          }
        })
      }
    })

    setTimeout(() => {
      if (this.modelList.length > 0) {
        this.cardList = 10
      } else {
        if (this.cardData.length > 0) {
          this.cardList = this.cardData.map((item) => {
            return {
              ...item,
              checked: false
            }
          })
          console.log(this.cardData)
        }
      }
    }, 1000)
  },
  methods: {
    cardStyle2(model, item) {
      let style = {
        border: `1px solid ${this.cardInfo.borderColor}`,
        boxShadow: `0 2px ${this.cardInfo.shadowPx}px 0 ${this.cardInfo.shadowColor} !important`,
        background: `linear-gradient(to bottom, ${this.cardInfo.bgColor} 0%, #ffffff 80%)`
      }
      if (this.cardInfo.termInfo.length > 0) {
        this.cardInfo.termInfo.forEach((val) => {
          if (val.string == '==' && val.val == item[this.cardInfo.subTitle.field]) {
            style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `
          }
          if (val.string == '>' && item[this.cardInfo.subTitle.field] > val.val) {
            style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `
          }
          if (val.string == '<' && item[this.cardInfo.subTitle.field] < val.val) {
            style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `
          }
        })
      }
      return { ...style }
    },
    checkChange() {
      let records = this.cardList.filter((item) => item.checked == true)
      this.$parent.handleSelectionChange({ records: records })
    },
    imgVal(data) {
      if (this.modelList.length > 0) {
        return 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
      } else {
        if (this.cardInfo.imgModel && this.cardInfo.imgModel !== '') {
          let imgFiledId = this.columnList.find((val) => val.propId == this.cardInfo.imgModel)?.propId
          if (imgFiledId && data[this.columnDict[imgFiledId]] !== '' && data[this.columnDict[imgFiledId]] != null && data[this.columnDict[imgFiledId]] !== undefined) {
            let url = data[this.columnDict[imgFiledId]].split(',')[0]
            return comUrl + '/api/file/getFileInputStreamById/' + url
          }
        }
      }
    },
    columnBtnsHandel(value, data) {
      this.$parent.columnBtnsHandel(value, data)
    },
    getModelName(model, item, type) {
      if (this.modelList.length > 0) {
        let name = this.modelList.find((m) => m.__vModel__ == model.model)
        if (name != undefined) {
          return `$${name.__config__.label}$`
        } else {
          return ''
        }
      } else {
        if (type == 'title') {
          if (this.cardInfo.title.model == model.model) {
            if (model.apiData) {
              let result = model.apiData.find((val) => {
                if (val[model.apiProps.value] == item[this.cardInfo.title.field]) {
                  return val
                }
              })?.[model.apiProps.label]
              if (result != undefined) {
                return result
              } else {
                return item[this.columnDict[model.model]]
              }
            } else {
              return item[this.columnDict[model.model]]
            }
          }
        } else if (type == 'subTitle') {
          if (model.apiData) {
            let result = model.apiData.find((val) => {
              if (val[model.apiProps.value] == item[this.cardInfo.subTitle.field]) {
                return val
              }
            })?.[model.apiProps.label]
            if (result != undefined) {
              return result
            } else {
              return item[this.columnDict[model.model]]
            }
          } else {
            return item[this.columnDict[model.model]]
          }
        } else if (type == 'info') {
          let field = this.cardInfo.info.data.find((val) => val.model == model.model)?.field
          if (field != undefined) {
            if (model.apiData) {
              let result = model.apiData.find((val) => {
                if (val[model.apiProps.value] == item[field]) {
                  return val
                }
              })?.[model.apiProps.label]
              if (result != undefined) {
                return result
              } else {
                return item[this.columnDict[model.model]]
              }
            } else {
              return item[this.columnDict[model.model]]
            }
          } else {
            return ''
          }
        } else {
          return ''
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-card {
  display: grid;
  grid-template-columns: repeat(var(--gridTemplateColumns), 1fr);
  padding: 10px 0;
  // grid-template-rows: repeat(var(--gridTemplateRows), 1fr);
  // justify-content: space-between;
}

@media screen and (max-width: 1400px) {
  .flex-card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 1200px) {
  .flex-card {
    grid-template-columns: 1fr 1fr;
  }
}

.box-card {
  cursor: pointer;
  box-sizing: border-box;
  // margin-left: 15px;
  margin-top: 15px;
  padding-left: 15px;
}

.img {
  width: 100%;
  min-height: 150px;
}

.clearfix {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;

  .titleLeft {
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .titleRight {
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.flex-row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;

  .right {
    max-width: 200px;
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  // border-top: 1px solid #ebeef5;
  .btns {
    width: 90%;
  }

  .check {
    flex: 1;
    text-align: right;
  }
}

:deep(.el-card__header) {
  padding: 0 !important;
}

:deep(.el-card__body) {
  padding: 0 !important;
}

.flex-left {
  width: 40%;
}

.flex-right {
  flex: 1;
  display: flex;

  .item-left {
    width: 70%;
    overflow: hidden;

    .item-row {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      .left {
        width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .right {
        max-width: 50px;
        margin-left: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .item-right {
    flex: 1;

    .item-footer {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 10px;
      position: relative;

      .item-btns {
        margin-top: 10px;
        text-align: right;
      }

      .check {
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
  }
}

:deep(.image-slot) {
  background-color: #f5f7fa;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #c0c4cc;
  vertical-align: middle;
}
</style>
