<template>
  <div>
    <template>
      <el-dialog title="修改记录" :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll append-to-body>
        <el-skeleton :loading="loading" animated :count="5">
          <template slot="template">
            <el-skeleton-item variant="text" style="width: 50%" />
            <el-skeleton-item variant="text" style="width: 60%" />
            <el-skeleton-item variant="text" style="width: 70%" />
            <el-skeleton-item variant="text" style="width: 40%" />
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px">
              <el-skeleton-item variant="text" style="width: 30%" />
              <el-skeleton-item variant="text" style="width: 30%" />
              <el-skeleton-item variant="text" style="width: 30%" />
            </div>
          </template>
          <template>
            <el-empty v-if="!list.length" description="暂无数据"></el-empty>
            <el-card v-else :body-style="{ padding: '10px' }" v-for="(item, index) in list" :key="index">
              <el-descriptions class="margin-top" :column="1">
                <el-descriptions-item label="修改时间">{{ item.time }}</el-descriptions-item>
                <el-descriptions-item label="修改人">{{ item.operator }}</el-descriptions-item>
                <el-descriptions-item :label="getItemLenghtChange(item.items)"></el-descriptions-item>
                <template v-if="item.items && item.items.length">
                  <template v-for="(value, index) in item.items">
                    <el-descriptions-item :label="getLableChange(value)">
                      <template v-if="value.action === 'add'">
                        <div style="margin-top: 5px">
                          <el-tag size="mini" type="success">
                            {{ value.valueNew }}
                          </el-tag>
                        </div>
                      </template>
                      <template v-if="value.action === 'remove'">
                        <div style="margin-top: 5px">
                          <el-tag size="mini" type="danger">
                            {{ value.valueOld }}
                          </el-tag>
                        </div>
                      </template>
                      <template v-if="value.action === 'update'">
                        <div style="padding-left: 10px; margin-top: 5px">
                          <el-tag size="mini" type="danger">{{ value.valueOld }}</el-tag>
                        </div>
                        <div style="padding-left: 10px; margin-top: 10px">
                          <el-tag size="mini" style="">{{ value.valueNew }}</el-tag>
                        </div>
                      </template>
                    </el-descriptions-item>
                    <p>1111</p>
                    <!--                    <el-tag  size="mini" type="success">-->
                    <!--                      添加新值：-->
                    <!--                      <el-tooltip v-if="getPopoverShow(value.valueNew)"-->
                    <!--                        effect="dark" :content="value.valueNew" placement="top-start">-->
                    <!--                        <span >{{ getStringLength(value.valueNew) }}</span>-->
                    <!--                      </el-tooltip>-->
                    <!--                      <span v-else>{{ getStringLength(value.valueNew) }}</span>-->
                    <!--                    </el-tag>-->
                    <!--                    <el-tag v-if="value.action === 'remove' " size="mini" type="danger">-->
                    <!--                      删除值：-->
                    <!--                      <el-tooltip v-if="getPopoverShow(value.valueOld)"-->
                    <!--                                  effect="dark" :content="value.valueOld" placement="top-start">-->
                    <!--                        <span >{{ getStringLength(value.valueOld) }}</span>-->
                    <!--                      </el-tooltip>-->
                    <!--                      <span v-else>{{ getStringLength(value.valueOld) }}</span>-->
                    <!--                    </el-tag>-->
                    <!--                    <el-tag v-if="value.action === 'update' " size="mini">-->
                    <!--                      <span >{{ value.valueOld }}</span>-->
                    <!--                      修改为：-->
                    <!--                      <span >{{ value.valueNew }}</span>-->
                    <!--                    </el-tag>-->
                  </template>
                </template>
              </el-descriptions>
            </el-card>
          </template>
        </el-skeleton>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import { getListDatalog } from '@/api/onlineDev/visualDev'

export default {
  name: 'journal',
  props: ['config', 'modelId'],
  data() {
    return {
      visible: false,
      loading: false,
      list: []
    }
  },
  methods: {
    init(dataId) {
      this.visible = true
      this.loading = true
      getListDatalog({ formId: this.modelId, dataId: dataId }).then((res) => {
        if (res.data.code === 200) {
          res.data.data ? (this.list = res.data.data) : (this.list = [])
          setTimeout(() => {
            this.loading = false
          }, 1000)
        }
      })
    },
    getItemLenghtChange(item) {
      return item.length ? '有' + item.length + '处更改' : '有' + 0 + '处更改'
    },
    getLableChange(val) {
      let label
      this.config.forEach((item, index) => {
        if (item.propId === val.columnId) {
          label = item.label
        }
      })
      return label
    }
  }
}
</script>

<style lang="scss" scoped>
.JNPF-dialog_center {
  >>> .el-dialog__body {
    padding: 20px !important;
  }
  >>> .el-card {
    border: none;
    margin-bottom: 20px !important;
  }
  >>> .el-descriptions-item__container {
    display: block;
  }
  >>> .el-tag.el-tag--danger {
    text-decoration: line-through;
  }
}
</style>
