<template>
  <div>
    <Modal title="资产历史" footer-hide :width="64" v-model="isShow">
      <Button type="primary" style="margin-bottom: 10px;" @click="$refs['assetsHistory'].setAssetId(id),$refs['assetsHistory'].show()">新增历史</Button>
      <xy-table :btn-width="120"
                style="width: 100%;"
                :auths="['delete','edit']"
                :height="360"
                ref="xyTable"
                delay-req
                :table-item="table"
                :action="index"
                :req-opt="select"
                :destroy-req-opt="{ table_name: 'asset_histories' }"
                :destroy-action="destroy"
                @editor="row => {
                  $refs['assetsHistory'].setType('editor'),
                  $refs['assetsHistory'].setId(row.id),
                  $refs['assetsHistory'].setAssetId(id),
                  $refs['assetsHistory'].show()
                }"></xy-table>
    </Modal>

    <assetsHistory ref="assetsHistory" @refresh="$refs['xyTable'].getTableData()"></assetsHistory>
  </div>
</template>

<script>
import { index, destroy } from "@/api/system/baseForm";
import assetsHistory from '@/views/assets/assetsHistory.vue'
export default {
  components: { assetsHistory },
  data() {
    return {
      id: '',
      isShow: false,

      select: {
        table_name: 'asset_histories',
        filter: [
          {
            key: 'asset_id',
            op: 'eq',
            value: ''
          }
        ]
      },
      table: [
        {
          prop: 'riqi',
          label: '日期',
          width: 200
        },
        {
          prop: 'neirong',
          label: '内容',
          minWidth: 220,
          align: 'left',
          customFn:row => {
            return (
              <div domPropsInnerHTML={ row.neirong }></div>
            )
          }
        },
        {
          prop: 'picture',
          label: '图片',
          showOverflowTooltip: false,
          minWidth: 360,
          align: 'left',
          customFn:row => {
            return (
              <div style="display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 4px;">
                {
                  row.id_his_tupian_files_asset_history_id_relation.map(i => {
                    return (
                      <el-image style="width: 80px;height: 60px;" fit="cover" src={i.url}></el-image>
                    )
                  })
                }
              </div>
            )
          }
        }
      ]
    }
  },
  methods: {
    index,destroy,
    show () {
      this.isShow = true
    },
    hide () {
      this.isShow =  false
    },
    setId (id) {
      if (typeof id === 'number') {
        this.id = id
        this.select.filter[0].value = id
      }
    }
  },
  computed: {},
  watch: {
    isShow (newVal) {
      if (newVal) {
        this.$refs['xyTable'].getTableData(true)
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
